Using custom graphical assets in pure AS3 project
I created some button states in flash (swc), and I want to use them in a pure AS3 project. They are movie clips with class of neatButton_on and neatButton_off respectively. I call them like this:
public class neatButton extends neatModule
{
private var stateOn:neatButton_on;
private var stateOff:neatButton_off;
private var modContainer:Sprite = new Sprite();
public function neatButton()
{
addChild(modCont开发者_Python百科ainer);
modContainer.x = 200;
modContainer.y = 200;
stateOff = new neatButton_off();
stateOn = new neatButton_on();
modContainer.addChild(stateOn);
modContainer.addChild(stateOff);
modContainer.addEventListener(MouseEvent.MOUSE_OVER, hover);
modContainer.addEventListener(MouseEvent.MOUSE_OUT, unhover);
}
private function hover(e:MouseEvent):void
{
stateOff.visible = false;
}
private function unhover(e:MouseEvent):void
{
stateOff.visible = true;
}
}
My question is, is this the best way to do this? I've also used assets, especially for different states of the same item, where I've put everything in one movie clip and then switched frames as needed. Is one way faster than the other? is there a best practice?
You could also use assets that are based on the SimpleButton class instead of MovieClips for this. They change state on rollover automatically.
But your approach is not totally wrong. I would change the names of your classes to start with an uppercase letter, that is more conventional (all classnames start with uppercase; variables and functions are camelCase starting with lowercase, no underscores). So: NeatButtonOn
and NeatButtonOff
.
That way you will avoid confusion as to what is a class and what is a variable.
I'll share a simple class I use for creating two state image buttons. I use Tweenlite to effect a alpha tween on rollover.
package com.b99.display.composite
{
import flash.display.*;
import flash.events.MouseEvent;
import com.greensock.*;
/**
* ...
* @author Bosworth99
*/
public class ImgButton extends Sprite
{
private var _canvas :Sprite = new Sprite();
private var _up :Sprite;
private var _over :Sprite;
private var _hit :Shape;
private var _intent :String;
public function ImgButton(intent:String)
{
_intent = intent;
super();
init();
}
private function init():void
{
constructButton();
addEventHandlers();
}
private function constructButton():void
{
this.addChild(_canvas);
switch (_intent)
{
case "button1":
{
_up = new yourUpClip1()
_over = new yourOverClip1();
break;
}
case "button2":
{
_up = new yourUpClip2()
_over = new yourOverClip2();
break;
}
case "button3":
{
_up = new yourUpClip3()
_over = new yourOverClip3();
break;
}
}
_canvas.addChild(_up);
with (_over)
{
alpha = 0;
}
_canvas.addChild(_over);
_hit = new Shape();
with (_hit)
{
graphics.beginFill(0x00FF40, 0);
graphics.drawRect(0, 0, _up.width + 5, _up.height +5);
graphics.endFill();
x = -5;
y = -5;
}
_canvas.addChild(_hit)
_up.cacheAsBitmap = true;
_over.cacheAsBitmap = true;
_hit.cacheAsBitmap = true;
this.buttonMode = true;
this.mouseEnabled = true;
}
private function addEventHandlers():void
{
_hit.addEventListener(MouseEvent.MOUSE_OVER, over, false, 0, true);
_hit.addEventListener(MouseEvent.MOUSE_OUT, out, false, 0, true);
}
private function over(e:MouseEvent):void
{
TweenLite.to(_over, .2, {alpha:1 } );
}
private function out(e:MouseEvent):void
{
TweenLite.to(_over, .2, {alpha:0 } );
}
public function destroy():void
{
_hit.removeEventListener(MouseEvent.MOUSE_OVER, over);
_hit.removeEventListener(MouseEvent.MOUSE_OUT, out);
_canvas.removeChild(_up);
_up = null;
_canvas.removeChild(_over);
_over = null;
_canvas.removeChild(_hit);
_hit = null;
this.removeChild(_canvas)
_canvas = null;
this.parent.removeChild(this);
}
//+++++++++++++++++++++++++++++++ end ++++++++++++++++++++++++++++++++++++++++
}
}
You just need to send in a string that gets fed into a switch statement. This class can be used for multiples cases this way. And then to kill, simply call _imgButton.destroy() in the parent.
This class is essentially similar to yours, just with some added functionality ;)
cheers
精彩评论