如何在AS3中创建可重用的切换按钮？

问题描述

我试图让代码低于可重用。我需要在我的Flash项目中的多个切换按钮。现在下面的代码在一个按钮上工作。如果我继续并创建更多按钮，并按照下面的格式，我将需要为每个按钮创建单独的函数。

我想将可重用的代码放在一个单独的ActionScript文件，不在FLA文件中。我试图把rolloverToggle，rolloverToggle和toggleClick放在我正在创建的类中。

  // /// ////////////////////////////////////////////////// ////////////////// 
 
 // -------需要使这段代码可重用------- 
 
 // ////////////////////////////////////////// ///////////////////////////// 
 
 //框架1上的代码
 
 toggleButton.addEventListener（MouseEvent.MOUSE_OVER，rolloverToggle）; 
 toggleButton.addEventListener（MouseEvent.MOUSE_OUT，rolloutToggle）; 
 toggleButton.addEventListener（MouseEvent.CLICK，toggleClick）; 
 toggleButton.buttonState =off; 
 
 //函数rolloverToggle 
函数rolloverToggle（event：MouseEvent）{
 toggleButton.gotoAndStop（toggleButton.buttonState +over）; 
 
 
 // function rolloutToggle 
 rolloutToggle（event：MouseEvent）{
 toggleButton.gotoAndStop（toggleButton.buttonState）; 
 
 
 // function toggleClick $ b $ function toggleClick（event：MouseEvent）{
 if（toggleButton.buttonState ==on）{
 toggleButton .buttonState =off; 
 toggleButton.gotoAndStop（1）; 
} else {
 toggleButton.buttonState =on; 
 
 
 $ / code $ / pre 
 
解决方案
很简单。创建一个新的通用按钮类，并添加所有的事件侦听器。对于每个要创建的新按钮，只需扩展通用按钮，并在事件侦听器中填写所需的代码： 
 
 
  class GenericToggleButton extends Button 
 {
 public GenericToggleButton（）
 {
 this.addEventListener（MouseEvent.MOUSE_OVER，rolloverToggle）; 
 this.addEventListener（MouseEvent.MOUSE_OUT，rolloutToggle）; 
 this.addEventListener（MouseEvent.MOUSE_CLICK，toggleClick）; 
 
 
保护函数rolloverToggle（event：MouseEvent）：void 
 {
 this.gotoAndStop（this.buttonState +over）; 
 
 
 protected function rolloutToggle（event：MouseEvent）：void 
 {
 this.gotoAndStop（this.buttonState）; 
 
 $ b保护功能toggleClick（event：MouseEvent）：void 
 {
 if（this.buttonState ==on）{
 this。 buttonState =off; 
 this.gotoAndStop（1）; 
} else {
 this.buttonState =on; 
 
 
 
 
 
现在只要扩展这个类，添加你的功能。
  class NewButton extends GenericToggleButton 
 {
 public NewButton（）
 { 
 super（）; 
 
 
覆盖保护函数toggleClick（event：MouseEvent）：void 
 {
 super.toggleClick（event）; 
 
 //为此按钮做魔术
} 
 
 // ETC 
} 
  
 
I'm trying to make the code below reusable. I need multiple toggle buttons in my flash project. Right now the code below works on one button. If I continue and create more buttons, and follow the format below, I would need to create separate functions for each button.
I would like to put the reusable code in a separate ActionScript file and not in the FLA file. I am trying to put the rolloverToggle, rolloverToggle, and toggleClick in a class that I'm making.
// ///////////////////////////////////////////////////////////////////////

// ------- Need to make this code reusable -------

// ///////////////////////////////////////////////////////////////////////

// code on Frame 1

toggleButton.addEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);
toggleButton.addEventListener(MouseEvent.MOUSE_OUT, rolloutToggle);
toggleButton.addEventListener(MouseEvent.CLICK, toggleClick);
toggleButton.buttonState = "off";

// function rolloverToggle
function rolloverToggle(event:MouseEvent) {
    toggleButton.gotoAndStop(toggleButton.buttonState+" over");
}

// function rolloutToggle
function rolloutToggle(event:MouseEvent) {
    toggleButton.gotoAndStop(toggleButton.buttonState);
}

// function toggleClick
function toggleClick(event:MouseEvent) {
    if (toggleButton.buttonState == "on") {
            toggleButton.buttonState = "off";
            toggleButton.gotoAndStop(1);
        } else {
            toggleButton.buttonState = "on";
        }
}
 解决方案 
This is quite Simple.  Create a new generic button class, and add all of your event listeners within.  For each new button you want to create, just extend your generic button and fill in the required code within the event listeners.:
class GenericToggleButton extends Button
{
    public GenericToggleButton()
    {
        this.addEventListener(MouseEvent.MOUSE_OVER, rolloverToggle);
        this.addEventListener(MouseEvent.MOUSE_OUT, rolloutToggle);
        this.addEventListener(MouseEvent.MOUSE_CLICK, toggleClick);
    }

    protected function rolloverToggle(event:MouseEvent):void
    {
         this.gotoAndStop(this.buttonState+" over");
    }

    protected function rolloutToggle(event:MouseEvent):void
    {
        this.gotoAndStop(this.buttonState);
    }

    protected function toggleClick(event:MouseEvent):void
    {
        if (this.buttonState == "on") {
            this.buttonState = "off";
            this.gotoAndStop(1);
        } else {
            this.buttonState = "on";
        }
    }
}
Now just extend that class and add your functionality.
class NewButton extends GenericToggleButton
{
    public NewButton()
    {
        super();
    }

    override protected function toggleClick(event:MouseEvent):void
    {
        super.toggleClick(event);

        // do magic for this button
    }

    // ETC
}
                        
这篇关于如何在AS3中创建可重用的切换按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！