actionscript 3 track dynamic text change - actionscript-3

Is there a way to "listen" to dynamic text? I have this dynamic textfield on the stage and I want to call a function once the the dynamic text has been changed. I tried to add event listener but it seems to work only on INPUT text. Any suggestions?
Thanks

While #annonymously's answer works, attaching enterFrame listeners to wait for text change (or any change, for that matter) is not a good idea - the text might not change at all, then why would you run a piece of code many times per second, if it's avoidable? Not to mention the fact, that you'd have to do it over and over again for each new text field instance you want to monitor.
It is better to react to actual changes, and these are caused by your own setting of properties. You should simply extend the TextField class and override the setters for htmlText and/or text to dispatch a change event:
override public function set text ( text : String ) : void {
super.text = text;
dispatchEvent (new Event (Event.CHANGE);
}

You can write very simple subclass which allows you to listen text change events.
Sublass:
package
{
import flash.events.Event;
import flash.text.TextField;
public class CustomTextField extends TextField
{
public function CustomTextField()
{
super();
}
override public function set text( value:String ):void
{
if( super.text != value )
{
super.text = value;
dispatchEvent(new Event(Event.CHANGE, true));
}
}
}
}
Usage example:
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
public class CustomTextFieldTest extends Sprite
{
private var tf:CustomTextField;
public function CustomTextFieldTest()
{
tf = new CustomTextField();
tf.x = tf.y = 10;
tf.width = tf.height = 200;
tf.addEventListener(Event.CHANGE, onTfChange);
addChild(tf);
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
}
private function onTfChange( e:Event ):void {
trace("text changed, new text: '" + tf.text + "'");
}
private function onMouseDown( e:MouseEvent ):void {
tf.text = "some random text: " + Math.round(100 * Math.random());
}
}
}

Did you try the CHANGE event? It should work for all types of TextFields including non-input ones.

Only input text dispatches CHANGE events, as you said. You'll have to work around it, perhaps like this:
var oldText:String = "";
function changeEnterFrame (e:Event) {
if (oldText != textField.text) {
// Do your stuff here
}
oldText = textField.text;
}
addEventListener(Event.ENTER_FRAME, changeEnterFrame);

Related

Actionscript 3, adding an audio slider to my game

so I've really been struggling trying to add an audio slider to my game the last couple days and I've about had it, so, let me preface this by saying I have tried EXTREMELY hard and I would love to fully understand the solution, but at this point I really just want the solution, so the more specific you can be the better.
I've thought of a number of approaches, but my actionscript skills have been too faulty to pull any of them off. Let me explain my setup a bit. I have a fully functional class that is an audio slider. It plays music, slides, does everything perfect. Now, I'm sticking it in my document class. I thought it was easiest to call this function right at the very beginning (as my title screen shows up), EVEN THOUGH I don't want music to be playing right now at the title screen. So I thought I would call it, then just simply not play the music yet. So now I have it called from my document class. Now, I want to be able to click on the options button and then addChild the audio slider. I have actually accomplished this and it works. Finally....the hard part. I want to click the play game button and then have the music start playing WHILE BEING LINKED to the options slider which has the possibility of already being moved. Really...just a standard audio slider.
I'm really stuck on linking the options screen audio slider to the music actually playing in the game. I thought I would call the Volume() function (my audio slider), and then once my playscreen starts up, call it again and then just run a method of the Volume() class from within my playscreen class. This seems to lead to problems though...and this is where I lose it. By calling the Volume() class again, am I totally reinstating my audio? Like does this mean that I'm erasing everything I have done with my audio slider in the options panel? It seems to be...because it just starts playing at the default value.
So here's some detailed code of what I'm doing. I was thinking of using navigation events, but like I said, I'm not the greatest flash programmer yet and when I tried using them before I ran into trouble. Here are my main concerns in the code.
1) Calling new_Volume in my playScreen class (called SimpleMenuMain). Does this wipe out everything I've done in my document class when I called Volume()?
2) Towards the end of the Volume() class, I made a stopMusic function. Whenever I call it from my document class, it only works if I have not yet pressed play game, further leading me to believe I'm erasing whatever I do in the options panel before pressing play game.
3) Should I be using navigation events (custom events)? If so, how exactly do I do it? I understand how to use them in general (I've already used 5 in this game), but all of my navigation events go to my document class, so I'm guessing there's some subtlety with them I'm not quite understanding. I have a custom events class..I'll post that as well.
Thank you for all the help =) this has been killing me. I will wittle down these classes to the relavent info.
Document Class
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.ProgressEvent;
public class SMGDocClass extends MovieClip
{
public var playScreen:SimpleMenuMain;
public var titleScreen:TitleScreen;
public var gameOver:GameOver;
public var loadingProgress:LoadingProgress;
public var optionScreen:OptionScreen;
public var new_Volume:Volume;
public function SMGDocClass()
{
loadingProgress = new LoadingProgress();
loadingProgress.x = 0;
loadingProgress.y = 0;
addChild( loadingProgress );
loaderInfo.addEventListener( Event.COMPLETE, onCompletelyDownloaded,false,0,true );
loaderInfo.addEventListener( ProgressEvent.PROGRESS, onProgressMade,false,0,true );
}
public function showTitleScreen():void
{
titleScreen = new TitleScreen();
titleScreen.addEventListener(NavigationEvent.START,onRequestStart,false,0,true);
titleScreen.addEventListener(NavigationEvent.OPTIONS,onRequestOptions,false,0,true);
titleScreen.x = 0;
titleScreen.y = 0;
addChild(titleScreen);
removeChild(loadingProgress);
new_Volume = new Volume();
new_Volume.stopMusic();
stage.focus = playScreen;
stage.stageFocusRect = false;
}
public function onStickman1Death(stickman1Event:Stickman1Event):void
{
var finalScore:Number = playScreen.getFinalScore();
var finalClockTime:Number = playScreen.getFinalClockTime();
gameOver = new GameOver();
gameOver.addEventListener(NavigationEvent.RESTART,onRequestRestart,false,0,true);
gameOver.addEventListener(NavigationEvent.MAINMENU,onRequestMainMenu,false,0,true);
gameOver.x = 5;
gameOver.y = 6;
gameOver.setFinalScore( finalScore );
gameOver.setFinalClockTime( finalClockTime );
addChild(gameOver);
new_Volume.stopMusic();
removeChild(playScreen);
playScreen = null;
}
public function onRequestStart( navigationEvent:NavigationEvent ):void
{
playScreen = new SimpleMenuMain();
playScreen.addEventListener( Stickman1Event.DEAD, onStickman1Death,false,0,true );
playScreen.x = 0;
playScreen.y = 0;
addChild( playScreen );
dispatchEvent(new Stickman1Event(Stickman1Event.DEAD));
removeChild(titleScreen);
titleScreen = null;
stage.focus = playScreen;
stage.stageFocusRect = false;
}
public function restartGame():void
{
playScreen = new SimpleMenuMain();
playScreen.addEventListener(Stickman1Event.DEAD, onStickman1Death,false,0,true);
playScreen.x = 0;
playScreen.y = 0;
addChild(playScreen);
removeChild(gameOver);
gameOver = null;
}
public function onRequestMainMenu( navigationEvent:NavigationEvent):void
{
titleScreen = new TitleScreen();
titleScreen.addEventListener(NavigationEvent.START,onRequestStart,false,0,true);
titleScreen.addEventListener(NavigationEvent.OPTIONS,onRequestOptions,false,0,true);
titleScreen.x = 0;
titleScreen.y = 0;
while(numChildren > 0)
{
removeChildAt(0);
}
addChild(titleScreen);
stage.focus = playScreen;
stage.stageFocusRect = false;
}
public function onCompletelyDownloaded( event:Event ):void
{
gotoAndStop(3);
showTitleScreen();
}
public function onProgressMade( progressEvent:ProgressEvent ):void
{
loadingProgress.setValue( Math.floor( 100 * loaderInfo.bytesLoaded / loaderInfo.bytesTotal ) );
}
public function onRequestOptions(navigationEvent:NavigationEvent):void
{
optionScreen = new OptionScreen();
optionScreen.addEventListener(NavigationEvent.MAINMENU,onRequestMainMenu,false,0,true);
optionScreen.x = 0;
optionScreen.y = 0;
addChild(optionScreen);
removeChild(titleScreen);
}
}
}
Play Screen Class
package {
import flash.display.MovieClip;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.ui.Mouse;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import flash.events.Event;
import flash.media.SoundChannel;
public class SimpleMenuMain extends MovieClip {
public var gameTimer:Timer;
public var stickman1:Stickman1;
public var new_Volume:Volume;
public function SimpleMenuMain() {
currentLevelData = new LevelData( 1 );
setBackgroundImage();
new_Volume = new Volume();
gameTimer = new Timer(25);
gameTimer.addEventListener(TimerEvent.TIMER, onTick, false, 0, true);
gameTimer.start();
addEventListener( Event.ADDED_TO_STAGE, onAddToStage );
}
public function onAddToStage(event:Event):void
{
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPress,false,0,true);
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyRelease,false,0,true);
}
public function onTick(timerEvent:TimerEvent):void
{
var stickman1HasBeenHit:Boolean = false;
var i:int = army1.length - 1;
var enemy1:Enemy1;
while ( i > -1 )
{
enemy1 = army1[i];
if (enemySpeed == 1)
{
enemy1.moveABit(3,-1.5);
}
if (enemySpeed == 2)
{
enemy1.moveABit(3.6,-1.8);
}
if ( PixelPerfectCollisionDetection.isColliding( stickman1, enemy1, this, true ) )
{
getFinalScore();
gameTimer.stop();
bgmSoundChannel.stop();
stickman1HasBeenHit = true;
}
if ( enemy1.y > 400 )
{
removeChild( enemy1 );
army1.splice( i, 1 );
}
i = i - 1;
}
var i:int = army2.length - 1;
var enemy2:Enemy2;
while ( i > -1 )
{
enemy2 = army2[i];
if (enemySpeed2 == 1)
{
enemy2.moveABit(6,-3);
}
if (PixelPerfectCollisionDetection.isColliding(stickman1, enemy2, this, true ) )
{
gameTimer.stop();
bgmSoundChannel.stop();
stickman1HasBeenHit = true;
}
if ( enemy2.y > 400 )
{
removeChild( enemy2 );
army2.splice( i, 1 );
}
i = i - 1;
}
if (stickman1HasBeenHit)
{
dispatchEvent(new Stickman1Event(Stickman1Event.DEAD));
}
}
}
Volume Class
package {
import flash.display.Sprite;
import flash.display.Graphics;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.net.URLRequest;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.media.SoundTransform;
import flash.geom.Rectangle;
public class Volume extends Sprite {
public var snd:Sound = new Sound();
public var channel:SoundChannel = new SoundChannel();
//URLRequest=new URLRequest("solitude.wav");
//Make sure you pass URLRequest an audio file on your computer.
public var req:BackgroundMusic = new BackgroundMusic();
public var boundary:Rectangle;
public var sprite:Sprite;
public var slider:Sprite;
public var xPos:Number;
public var yPos:Number;
public var vol:Number;
/*
Our request is loaded into the sound object and plays through
our channel. Volume is initially set at 50% and passed as a
transformation to our our channels soundTransform property
(a fancy way of saying volume). The init() function is called.
*/
public function Volume() {
this.addEventListener(Event.ADDED_TO_STAGE, onStage,false,0,true);
startMusic();
}
/*
The init function creates and draws a rectangle and circle
to the stage and centers them based on the height and
width of the stage. In addition, a rectangle object is
created to 'contain' the sliding circle, like an imaginary box.
We pass -100 as the x value because it is added relative
to our sprite. If we set its x value at 0, or the sprites default x
value,the boundary would stop and start at the slider sprite. Change
-100 to 0 in the rectangle object to get a better idea of its use.
*/
public function onStage(e:Event):void
{
//We remove it immediately so that it doesn't get called multiple times
//As the instance is added to the display list tree
this.removeEventListener(Event.ADDED_TO_STAGE, onStage);
xPos = 320;
yPos = 132;
/* Now that we have a reference to the stage, let's go ahead and create our slider */
init();
}
public function init():void {
sprite = new Sprite();
channel.stop();
sprite.graphics.beginFill(0x999999);
sprite.graphics.drawRect(xPos,yPos,100,5);
sprite.graphics.endFill();
addChild(sprite);
sprite.x-=sprite.width/2;
slider = new Sprite();
slider.graphics.beginFill(0xFF0000);
slider.graphics.drawCircle(xPos+50,yPos, 15);
slider.graphics.endFill();
addChild(slider);
slider.addEventListener(MouseEvent.MOUSE_DOWN, dragSlider);
stage.addEventListener(MouseEvent.MOUSE_UP, stopSlider);
boundary=new Rectangle(-100,0,100,0);
}
/*
dragSlider runs when the use holds the mouse button down. A
startDrag method is used on our sprite where we specify boundary
as our dragging limits. A new event handler designed
to change the mouse volume is subsequenlty called per frame, where
the slider.x property determines volume.
*/
public function dragSlider(event:MouseEvent):void {
slider.startDrag(false,boundary);
slider.removeEventListener(MouseEvent.CLICK, dragSlider);
slider.addEventListener(Event.ENTER_FRAME, changeVolume);
}
/*
Stops dragging and removes the event listener to save on space. Again,
volume will be based on the sliders current x position, which is
constantly being recalculated per frame because we used an
ENTER_FRAME event.
*/
public function stopSlider(event:MouseEvent):void {
slider.stopDrag();
slider.removeEventListener(MouseEvent.MOUSE_UP, stopSlider);
}
/*
This function is constantly recalculating the vol variable
based on the sliders x position, relative to the length of
our rectangle. Creates a decimal range from 0 to 1, where 1
represents 100% volume and 0 represents mute. Anything exceeding
100% causes distortion.
*/
public function changeVolume(event:Event):void {
vol=1+Math.round(slider.x)/100;
channel.soundTransform=new SoundTransform(vol);
}
public function onBackgroundMusicFinished(event:Event):void
{
channel = req.play();
channel.addEventListener( Event.SOUND_COMPLETE, onBackgroundMusicFinished );
vol=1;
channel.soundTransform=new SoundTransform(vol);
}
public function startMusic():void
{
channel=req.play();
channel.addEventListener( Event.SOUND_COMPLETE, onBackgroundMusicFinished,false,0,true );
vol=1;
channel.soundTransform=new SoundTransform(vol);
}
public function playMusic():void
{
channel = req.play();
}
public function stopMusic():void
{
channel.stop();
}
}
}
Navigation Event Class
package
{
import flash.events.Event;
public class NavigationEvent extends Event
{
public static const RESTART:String = "restart";
public static const START:String = "start";
public static const MAINMENU:String = "mainmenu";
public static const OPTIONS:String = "options";
public static const STOPMUSIC:String = "stopmusic"
public function NavigationEvent( type:String, bubbles:Boolean = false, cancelable:Boolean = false )
{
super( type, bubbles, cancelable );
}
public override function clone():Event
{
return new NavigationEvent( type, bubbles, cancelable );
}
public override function toString():String
{
return formatToString( "NavigationEvent", "type", "bubbles", "cancelable", "eventPhase" );
}
}
}
Options Screen Class
package {
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.ui.Mouse;
import flash.net.SharedObject;
import flash.events.Event;
public class OptionScreen extends MovieClip {
public var mainMenuButton:SimpleButton;
private var new_Volume:Volume;
public var myEvent:Event;
public function OptionScreen() {
Mouse.show();
new_Volume = new Volume();
addChild(new_Volume);
mainMenuButtonOptions.addEventListener(MouseEvent.CLICK, onClickMainMenu,false,0,true);
}
public function onClickMainMenu(mouseEvent:MouseEvent):void
{
dispatchEvent( new NavigationEvent(NavigationEvent.MAINMENU));
}
}
}
Finally....Title Screen Class
package
{
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.events.MouseEvent;
import flash.ui.Mouse;
public class TitleScreen extends MovieClip
{
public var startButton:SimpleButton;
public function TitleScreen()
{
Mouse.show();
startButton.addEventListener( MouseEvent.CLICK, onClickStart,false,0,true );
titleOptionsButton.addEventListener( MouseEvent.CLICK, onClickOptions,false,0,true );
}
public function onClickStart( event:MouseEvent ):void
{
dispatchEvent( new NavigationEvent( NavigationEvent.START ) );
}
public function onClickOptions( event:MouseEvent ):void
{
dispatchEvent( new NavigationEvent( NavigationEvent.OPTIONS ) );
}
}
}
You can change the volume on individual SoundChannels, or globally on the SoundMixer class. Your current implementation is the former, and defined every time you instantiate your class.
See Adobe's Controlling sound volume and panning.
You can also set global volume and pan values for all sounds at once
using the soundTransform property of the SoundMixer class, as the
following example shows:
SoundMixer.soundTransform = new SoundTransform(1, -1);
You could also store your volume and reference it as a global/static variable.
public static var soundLevel:Number = 100;
public function changeVolume(event:Event):void {
soundLevel = 1+Math.round(slider.x)/100;
channel.soundTransform=new SoundTransform(soundVolume);
}
This way, any slider object changes the same variable. Of course, then you're left with needing to update N number of soundObjects to the new soundLevel, which is why using the SoundMixer is a better solution.
No. The new instance of Volume class doesn't overwrite the SoundChannel previously created. However, because Volume is a DisplayObject, if its only reference was on the stage, and starting your game takes to you a different frame, the old Volume object would be removed from the DisplayList and could be garbage collected.
Definitely sounds like you're moving between frames, in which case the older Volume object would be removed from DisplayList and GC'ed. This comes up a lot, but I'll reiterate: don't use stage frames. There are better (less headache inducing) ways of programming what you need.
Your choice of Nav events is discretional. You could just as easily write a nav class which handles all input events as they come from the system, and appropriately call your methods. Personally, I don't like Flash style events. There's often other data I want to pass to my methods apart from the usual variable suspects, thereby leading to clutter induced by custom events. You could also clear that up with global state tracking, and simply reference your current state from your generic methods to determine their response to any given nav event.

Adding eventlisteners in main document class for external classes

I have a small project I'm trying to help learn as3. It is a variation from the book Foundation Game Design with Actionscript 3.0. I am using an fla only to have a document class. All art is loaded within the as files. In the book, he just put all the code in the document class, I followed along and it worked as expected. I am trying to break out the code into separate classes to get a handle on OOP. One class makes a background - Background.as, one makes a character - Character.as, and one makes a button, which I instantiate 6 times for 6 different buttons - GameButton.as. And of course there is GameWorld.as which is the document class. Everything loads and shows up as expected. However when I try and add an eventListener for the buttons, I don't get any response. I have tried putting the eventListener in the GameButton.as and also tried it in the GameWorld.as neither of which has worked. Also I pass a reference to the stage when instantiating the various classes, because when I tried to addChild in the GameWorld.as, nothing would show up. I searched the site and found something similar, but it didn't seem to help. Thank you in advance for any advice you my have. Here is the code:
GameWorld.as
package
{
import flash.net.URLRequest;
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.DisplayObject
import flash.events.MouseEvent;
import GameButton;
import Character;
import Background;
[SWR(width = "550", height = "400", backgroundColor = "#FFFFFF", frameRate = "60")]
public class GameWorld extends Sprite
{
//public variables
//Background
public var gameBackground:Background;
//Character
public var catCharacter:Character;
//Buttons
public var upButton:GameButton;
public var downButton:GameButton;
public var growButton:GameButton;
public var shrinkButton:GameButton;
public var vanishButton:GameButton;
public var spinButton:GameButton;
public function GameWorld ()
{
//Add the background to the stage
gameBackground = new Background("../images/background.png", stage);
//Add the character(s) to the stage
catCharacter = new Character("../images/character.png", stage);
//Set initial character position
catCharacter.CharacterPos(225, 150);
//Add the buttons to the stage
upButton = new GameButton("../images/up.png", stage, 25, 25);
downButton = new GameButton("../images/down.png", stage, 25, 85);
growButton = new GameButton("../images/grow.png", stage, 25, 145);
shrinkButton = new GameButton("../images/shrink.png", stage, 425, 25);
vanishButton = new GameButton("../images/vanish.png", stage, 425, 85);
spinButton = new GameButton("../images/spin.png", stage, 425, 145);
//Button event handlers
upButton.addEventListener(MouseEvent.CLICK, upButtonHandler);
}
public function upButtonHandler(event:MouseEvent)
{
trace("You clicked the up button!");
catCharacter.CharacterMove(15);
}
}
}
GameButton.as
package
{
import flash.net.URLRequest;
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.Stage;
import flash.events.MouseEvent;
public class GameButton extends Sprite
{
//public variables
public var stageRef:Stage;
public var urlRequest:URLRequest;
public var gameButtonLoader:Loader;
public var gameButtonSprite:Sprite;
//Constructor
public function GameButton (urlRequest:String, stageRef:Stage, xPos:Number, yPos:Number)
{
this.stageRef = stageRef
this.urlRequest = new URLRequest();
gameButtonLoader = new Loader();
gameButtonSprite = new Sprite();
this.urlRequest.url = urlRequest;
gameButtonLoader.load(this.urlRequest);
gameButtonSprite.addChild(gameButtonLoader);
this.stageRef.addChild(gameButtonSprite);
gameButtonSprite.buttonMode = true;
gameButtonSprite.x = xPos;
gameButtonSprite.y = yPos;
}
}
}
Character.as
package
{
import flash.net.URLRequest;
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.Stage;
public class Character
{
//private variables
private var stageRef:Stage;
private var urlRequest:URLRequest;
private var characterLoader:Loader;
private var characterSprite:Sprite;
//public variables
public var character_x_pos:Number;
public var character_y_pos:Number;
//Constructor
public function Character (urlRequest:String, stageRef:Stage)
{
this.stageRef = stageRef;
this.urlRequest = new URLRequest();
characterLoader = new Loader();
characterSprite = new Sprite();
this.urlRequest.url = urlRequest;
characterLoader.load (this.urlRequest);
characterSprite.addChild (characterLoader);
this.stageRef.addChild (characterSprite);
characterSprite.mouseEnabled = false;
}
//Set the position of the character
public function CharacterPos(xPos:Number, yPos:Number):void
{
characterSprite.x = xPos;
characterSprite.y = yPos;
}
//Move the position of the character
public function CharacterMove( yPos:Number):void
{
characterSprite.y -= yPos;
}
}
}
Background.as
package
{
import flash.net.URLRequest;
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.Stage;
public class Background
{
//Private variables
private var stageRef:Stage;
private var urlRequest:URLRequest;
private var backgroundLoader:Loader;
private var backgroundSprite:Sprite;
//Constructor
public function Background (urlRequest:String, stageRef:Stage)
{
this.stageRef = stageRef;
this.urlRequest = new URLRequest();
backgroundLoader = new Loader();
backgroundSprite = new Sprite();
this.urlRequest.url = urlRequest;
backgroundLoader.load (this.urlRequest);
backgroundSprite.addChild (backgroundLoader);
this.stageRef.addChild (backgroundSprite);
backgroundSprite.mouseEnabled = false;
}
}
}
All art is loaded within the as files.
This is not an approach I recommend. There's a reason God gave us the Flash IDE--and it's not to write code! Any time you're spending on layout and viduals in code is just wasted, unless you have an actual requirement to change the visuals at runtime. The fact that your paths are all hard-coded suggests that you don't have that requirement.
So let's step back and imagine that you have a Symbol that contains 6 Symbols that you've created as just Flash buttons (when you select Button as the Symbol type). These will be SimpleButtons, but in the Class below we're just going to type them as DisplayObject. The Class doesn't care what they are, but using Simplebutton gives them up, over, down and hit states that require no code.
Note that the below assumes you have "automatically declare stage instances" off, which is IMO the best way to do things.
package view {
public class NavBar extends Sprite {
//because you put these on stage in the Symbol, they will be available in the constructor
public var upButton:DisplayObject;
public var downButton:DisplayObject;
public var growButton:DisplayObject;
public var shrinkButton:DisplayObject;
public var rotateButton:DisplayObject;
public var vanishButton:DisplayObject;
//makes it easier to do the same setup on all buttons
protected var allButtons:Vector.<DisplayObject> = <DisplayObject>([upButton, downButton, growButton, shrinkButton, rotateButton, vanishButton]);
public function NavBar() {
super();
for each (var btn:DisplayObject in allButtons) {
btn.buttonMode = true;
btn.mouseChildren = false;
btn.addEventListener(MouseEvent.CLICK, onButtonClick);
}
}
protected function onButtonClick(e:MouseEvent):void {
switch (e.target) {
case upButton:
dispatchEvent(new CharacterEvent(CharacterEvent.UP));
break;
case downButton:
dispatchEvent(new CharacterEvent(CharacterEvent.DOWN));
break;
case growButton:
dispatchEvent(new CharacterEvent(CharacterEvent.GROW));
break;
case shrinkButton:
dispatchEvent(new CharacterEvent(CharacterEvent.SHRINK));
break;
case rotateButton:
dispatchEvent(new CharacterEvent(CharacterEvent.ROTATE));
break;
case vanishButton:
dispatchEvent(new CharacterEvent(CharacterEvent.VANISH));
break;
default:
break;
}
}
}
}
Note that there's zero layout code. This code is dependent on a custom Event Class. I'm going to write that Event Class so that it always bubbles. That way, it can be dispatched anywhere on the display list and received at the top level:
package control {
class CharacterEvent extends Event {
public static var UP:String = 'characterUp';
public static var DOWN:String = 'characterDown';
public static var GROW:String = 'characterGrow';
public static var SHRINK:String = 'characterShrink';
public static var ROTATE:String = 'characterRotate';
public static var VANISH:String = 'characterVanish';
public function CharacterEvent(type:String) {
super(type, true, true);//always bubbles
}
public function clone():Event {
return new CharacterEvent(type);
}
}
}
Now, if you want to manually handle instantiation of the Symbol that has view.NavBar as its base class, it will look like this:
package {
public var navBar:NavBar;
class GameWorld {
public function GameWorld() {
try {
var navClass:Class = getDefinitionByName('NavBarSymbol') as Class;
} catch (e:Error) {
trace('You need to have a Library symbol called NavBarSymbol');
}
if (navClass) {
navBar = new navClass() as NavBar;
//unnecessary layout code here
//Note that this is NOT the responsibility of the child Class!
addChild(navBar);
}
//instantiate character
...
//by listening to the whole Document, you can add other things that
//dispatch Character events on the display list, like a keyboard listener
addEventListener(CharacterEvent.UP, moveCharacterUp);
//listeners for the rest of the character events...
}
public function moveCharacterUp(e:CharacterEvent):void {
//character move logic
}
//other handlers
}
}
Personally, I'd just add the navBar to the stage, and then there's no need to manage it at all (not even reference it with a variable), simply add the event listeners for the various character events.
The root of your problem doesn't seem to be the character code. However, I'm going to give you a few "best practice" pointers about it.
The convention in AS3 is for Class members (properties and methods) to be camel case starting with a lower case letter. So, characterPos() and characterMove().
Your Class already contains character in the name, so really these should just be pos() and move() (though there's no need now to shorten position()).
The only thing your child Classes are doing with their references to the parent are adding themselves. They don't need and shouldn't have a reference to the parent for this purpose. It is the parent's responsibility to add the Children (or the responsibility of the Flash Player if you use the stage).
That said, you could give your Character a reference to the parent Class typed as IEventDispatcher and allow the Character to listen to this channel. This concept is called an event bus.
Note that the reason that so many people do what you're doing is that Adobe failed to document how to properly use OOP with the timeline. Unfortunately, by the time a few of us started documenting that around late 2009/early 2010, the damage was done and everyone assumed that if you wanted to write good code you had to pretend the timeline and stage didn't exist.
I know I've covered a lot of ground, and probably most of what I said directly contradicts what you thought you knew, so please don't hesitate to ask any questions you might have.

How to improve this AS3 code structure to be more effective?

I have made an AS3 code to be a function. But I think my code is too lengthy. Could you help to improve it? Thank you!
I created test.fla first and added 5 grey block(external pictures from PSD) to stage. My function is to display different pictures when hovering mouse on corresponding grey block.
I converted those 5 grey blocks to Movie Clip and set instance name as sp1, sp2, sp3, sp4 and sp5. Then I created a document class, test.as and set 5 EventListener.
sp1.addEventListener(MouseEvent.MOUSE_OVER,clickmouse1);
sp2.addEventListener(MouseEvent.MOUSE_OVER,clickmouse2);
sp3.addEventListener(MouseEvent.MOUSE_OVER,clickmouse3);
sp4.addEventListener(MouseEvent.MOUSE_OVER,clickmouse4);
sp5.addEventListener(MouseEvent.MOUSE_OVER,clickmouse5);
So my first question is can I have any method to combine those 5 EventListener to be one? Because in my mind, so many EventListener will cost much more resource of PC.
My second question is I set 5 target pictures as 5 class.
In test.as I created code below:
public class EuroCup extends Sprite{
var arr:Array=new Array();
var Res1:Result609=new Result609();
var Res2:Result610=new Result610();
var Res3:Result611=new Result611();
var Res4:Result612=new Result612();
var Res5:Result613=new Result613();
var i:int=0;
public function EuroCup() {
arr[1]=Res1;
arr[2]=Res2;
arr[3]=Res3;
arr[4]=Res4;
arr[5]=Res5;
}
}
I think that is too lengthy. Is there any way to simplify it?
Here is the test.fla and test.as:Download
Whatever, thank u guys!
Restructuring:
public class EuroCup extends Sprite {
private var arr:Array;
public function EuroCup() {
arr = [ new Result609(), new Result610(),
new Result611(), new Result612(), new Result613()
];
}
}
Then use results as arr[0], arr[1] and so on. Also, if you have several sprites to listen clicks on, with similar listeners, you can connect all such sprites to single listeners and use event.target to distinguish them, where event is MouseEvent. Or place them into container and create one listener to that container - again, event.target will tell what sprite is clicked.
And yet two things - every time you see new Array(), replace it with [] - its faster and shorter. And place all code into constructor, not class body - it will be compiled to be executed faster.
You can/should use a Dictionary for associations between the grey rects and the images to display.
package {
public class EuroCup {
private var _children:Array, _current:Sprite, _map:Dictionary;
public function EuroCup() {
super();
initialize();
}
protected function initialize():void {
_children = [];
_map = new Dictonary();
// i don't know the image's symbol name.
// _map[_children[_children.length] = new Result609()] = new SYMBOL_NAME();
for each(var child:Sprite in _children) {
child.addEventListener(MouseEvent.CLICK, click_handler);
}
}
private function click_handler(event:MouseEvent):void
{
if (_current) {
_current.visible = false; // or use fading, etc
}
_current = _map[event.currentTarget] as Sprite;
if (_current) {
_current.visible = true; // or use fading, etc
}
}
}
}
One option for simplifying the code would be to associate the sp and Res instances with each other by identity, using a Dictionary. That allows you to avoid the work of tracking array indices, which is half of the reason you have separate event handler methods. Once the instances are associated by identity, then you can use the currentTarget property of a dispatched event to determine which element in the Dictionary you want to show on the stage.
package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.utils.Dictionary;
public class test extends Sprite
{
var dict:Dictionary = new Dictionary();
var visibleResult:MovieClip;
public function test()
{
dict[sp1]=new Result609();
dict[sp2]=new Result610();
dict[sp3]=new Result611();
dict[sp4]=new Result612();
dict[sp5]=new Result613();
sp1.addEventListener(MouseEvent.MOUSE_OVER,clickmouse);
sp2.addEventListener(MouseEvent.MOUSE_OVER,clickmouse);
sp3.addEventListener(MouseEvent.MOUSE_OVER,clickmouse);
sp4.addEventListener(MouseEvent.MOUSE_OVER,clickmouse);
sp5.addEventListener(MouseEvent.MOUSE_OVER,clickmouse);
}
private function clickmouse(evt:MouseEvent):void
{
if(visibleResult)
{
removeChild(visibleResult);
}
var Res:MovieClip = dict[evt.currentTarget] as MovieClip;
addChild(Res);
Res.x=300;
Res.y=400;
visibleResult=Res;
}
}
}
If you expect to have more than 5 sp instances in the application, then you could use a loop to assign the event listeners. But for less than 10 instances, you probably don't gain much from a loop.
I would go for a more simple version; add only one event listener and use Event.target to determine on which item is clicked, using a switch-statement.
This is helpful if the buttons should do different things.
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
public class Test extends Sprite
{
public var sp1:Sprite;
public var sp2:Sprite;
public var sp3:Sprite;
public function Test()
{
this.addEventListener(MouseEvent.MOUSE_OVER, handleClick);
}
private function handleClick(event:MouseEvent):void
{
trace("Clicked on: " + event.target)
switch (event.target)
{
case this.sp1:
{
// do something here
break;
}
case this.sp2:
{
// do something here
break;
}
case this.sp3:
{
// do something here
break;
}
default
{
trace("No handler defined for: " + event.target)
}
}
}
}
}
However, you can also make smart use of it's type. Let's say all you buttons extend a custom class called CustomButton, and they all need to do the same (like call a function), but with a parameter based on it's id.
This is helpful if the buttons should basically do the same thing.
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
public class Test extends Sprite
{
public function Test()
{
this.addEventListener(MouseEvent.MOUSE_OVER, handleClick);
}
private function handleClick(event:MouseEvent):void
{
if (event.target is CustomButton)
{
var button:CustomButton = event.target as CustomButton; // you're now sure it's a CustomButton
this.showById(button.id); // let's say CustomButton has a public var 'id'
}
}
private function showById(id:int):void
{
// do something
}
}
}
Hope that helps.
Tip: Always start your class+filename with a capital. Variables start with capitals. This is very common in the actionscript world.

how to add a limited amount of objects to the stage

So I have a box exported as Box in my library. I have tried :
package {
import flash.display.MovieClip;
import flash.events.*;
public class Main extends MovieClip {
private var _box:Box=new Box ;
private var boxAmount:Number=0;
private var boxLimit:Number=16;
private var _root:Object;
public function Main() {
addEventListener(Event.ENTER_FRAME, eFrame);
addEventListener(MouseEvent.MOUSE_DOWN, mouseclick);
}
private function eFrame(event:Event):void {
if (boxAmount <= boxLimit) {
boxAmount++;
_box.y=Math.random()*stage.stageHeight;
_box.x=Math.random()*stage.stageWidth;
addChild(_box);
} else if (boxAmount >= boxLimit) {
removeEventListener(Event.ENTER_FRAME, eFrame);
} else {
addEventListener(Event.ENTER_FRAME, eFrame);
}
}
}
}
But it did not work as planned.
What I am trying to do is make my box stay on the screen at a random place on the stage and remove it when clicked (but that will come later). This code is for some reason adding the object to the stage and then removing it and adding it again up to 16 times.
Thanks
I it seems like you have created one _box, and re-add it to the timeline on enter frame. It should work if you create a new box instance inside the eFrame function rather than before it, then you keep reassigning to the same variable name, rather than reusing the one object eg:
package {
import flash.display.MovieClip;
import flash.events.*;
public class Main extends MovieClip {
private var boxAmount:Number=0;
private var boxLimit:Number=16;
private var _root:Object;
public function Main() {
addEventListener(Event.ENTER_FRAME, eFrame);
addEventListener(MouseEvent.MOUSE_DOWN, mouseclick);
}
private function eFrame(event:Event):void {
if (boxAmount<=boxLimit) {
boxAmount++;
var _box:Box=new Box ;
_box.y=Math.random()*stage.stageHeight;
_box.x=Math.random()*stage.stageWidth;
addChild(_box);
} else if (boxAmount >= boxLimit) {
removeEventListener(Event.ENTER_FRAME, eFrame);
} else {
addEventListener(Event.ENTER_FRAME, eFrame);
}
}
}
}
In your code you are only ever creating one box. Your enterFrame handler is just assigning it a new random position 16 times. If you want 16 boxes you'll need to create a new box each time in the enterFrame function.
But you don't need to use the ENTER_FRAME event here. You could just use a for loop or a while loop to create the 16 boxes.
Here's some code:
package {
import flash.display.MovieClip;
import flash.events.*;
public class Main extends MovieClip {
private var boxAmount:Number=0;
private var boxLimit:Number=16;
public function Main() {
addBoxes();
}
private function addBoxes():void {
while (boxAmount<=boxLimit) {
boxAmount++;
var box:Box = new Box();
box.y=Math.random()*stage.stageHeight;
box.x=Math.random()*stage.stageWidth;
addChild(box);
// listen for mouse clicks
box.addEventListener(MouseEvent.CLICK, onBoxClick);
}
}
private function onBoxClick(e:MouseEvent):void {
var clickedBox:Box = e.target as Box;
removeChild(clickedBox);
}
}
}
I removed your enterFrame handler and just made a function called addBoxes. I'm using a while loop to crate the boxes. Notice that each time through the loop I'm creating a NEW box, not just reusing the old one. I'm also adding a mouse click event listener to each box so it can be removed from the stage when clicked.
You'll surely want to change some of this to get it to work for your purposes, but it should get you headed in the right direction.
What you have at the moment is just repositioning the same box over and over because you only ever create one Box instance. You need to create multiple instances of Box and add them to the stage individually.
package {
import flash.display.MovieClip;
import flash.events.*;
public class Main extends MovieClip {
private var boxAmount:Number=0;
private var boxLimit:Number=16;
private var _root:Object;
public function Main() {
addEventListener(Event.ENTER_FRAME, eFrame);
addEventListener(MouseEvent.MOUSE_DOWN, mouseclick);
}
private function eFrame(event:Event):void {
if (boxAmount<=boxLimit) {
boxAmount++;
//create a new box instance
var _box:Box = new Box();
_box.y=Math.random()*stage.stageHeight;
_box.x=Math.random()*stage.stageWidth;
addChild(_box);
} else {
removeEventListener(Event.ENTER_FRAME, eFrame);
}
}
}
}
Although the variable boxAmount suggests otherwise, you said you only want one box. So, to do this, you just need to move the following lines into the constructor (Main).
_box.y=Math.random()*stage.stageHeight;
_box.x=Math.random()*stage.stageWidth;
addChild(_box);
Then remove or disable the enter frame event. You don't need it in this case. To check if the box got clicked, attach the listener to the box itself, not to it's parent:
_box.addEventListener(MouseEvent.MOUSE_DOWN, mouseclick);
if (boxAmount<=boxLimit) {
// ...
} else if (boxAmount >= boxLimit) {
// ...
} else {
// ...
}
This part looks really strange. The first condition covers a case that is also covered by the second condition, together they already cover all possible cases. boxAmount is either less or equals to boxLimits or it is greater than it. Checking for equality twice is confusing. There is no need to include the last else statement. It actually has the same behaviour as the following code.
if (boxAmount<=boxLimit) {
// ...
} else if (boxAmount > boxLimit) {
// ...
}

Custom event dispatchment location

I've been looking into custom event (listeners) for quite some time, but never succeeded in making one. There are so many different methods, extending the Event class, but also Extending the EventDispatcher class, very confusing!
I want to settle with this once and for all and learn the appropriate technique.
package{
import flash.events.Event;
public class CustomEvent extends Event{
public static const TEST:String = 'test'; //what exac is the purpose of the value in the string?
public var data:Object;
public function CustomEvent(type:String, bubbles:Boolean = false, cancelable:Boolean = false, data:Object = null):void
{
this.data = data;
super();
}
}
}
As far as I know a custom class where you set the requirements for the event to be dispatched has to be made:
package
{
import flash.display.MovieClip;
public class TestClass extends MovieClip
{
public function TestClass():void {
if (ConditionForHoldToComplete == true) {
dispatchEvent(new Event(CustomEvent.TEST));
}
}
}
}
I'm not sure if this is correct, but it should be something along the lines of this.
Now What I want is something like a mouseevent, which can be applied to a target and does not require a specific class.
It would have to work something like this:
package com.op_pad._events{
import flash.events.MouseEvent;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.EventDispatcher;
import flash.events.Event;
public class HoldEvent extends Event
{
public static const HOLD_COMPLETE:String = "hold completed";
var timer:Timer;
public function SpriteEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
{
super( type, bubbles, cancelable );
timer = new Timer(1000, 1);
//somehow find the target where is event is placed upon -> target.addEventlistener
target.addEventListener(MouseEvent.MOUSE_DOWN, startTimer);
target.addEventListener(MouseEvent.MOUSE_UP, stopTimer);
}
public override function clone():Event
{
return new SpriteEvent(type, bubbles, cancelable);
}
public override function toString():String
{
return formatToString("MovieEvent", "type", "bubbles", "cancelable", "eventPhase");
}
//////////////////////////////////
///// c o n d i t i o n s /////
//////////////////////////////////
private function startTimer(e:MouseEvent):void
{
timer.start();
timer.addEventListener(TimerEvent.TIMER_COMPLETE, complete);
}
private function stopTimer(e:MouseEvent):void
{
timer.stop()
}
public function complete(e:TimerEvent):void {
dispatchEvent(new HoldEvent(HoldEvent.HOLD_COMPLETE));
}
}
}
This obviously won't work, but should give you an idea of what I want to achieve. This should be possible because mouseevent can be applied to about everything.The main problem is that I don't know where I should set the requirements for the event to be executed to be able to apply it to movieclips and sprites.
You are almost there actually, just for the last part, wouldn't this be more of an OOP related issue than stricly a confusion about the way of using custom events ?
Usually, Events in AS3 are value objects whose sole responsibility is to transport information from the event dispatcher to the listener(s). The dispatcher dispatches the event each time a defined momentum is reached, and the listener(s) may or may not react when this happens.
In the example above, I guess it is up to the listener to start a timer and so on when a mouse-down has been detected. In a more sophisticated context the Event could independently trigger more than one listeners actioning separate tasks which neither the Dispatcher nor the Event itself should have to bother about, that is probably why it's worth avoiding amending the dispatcher or the event itself with any soever logic.
For your very example, you could maybe create a handler checking if the mouse has been held down?
The following is just pseudocode, and there are obviously tons of other ways to get to the same result:
public class MouseDownHandler
{
// ...
public function( target:Sprite ) {
this.target = target;
start();
}
public function start():void{
// Listen for the target's mouseUp event
}
public function dispose():void{
// Stop listeners and eventually the timer
}
private function onMouseDown(e:MouseEvent):void{
// Start timer + listening for the stage's mouse up event (target.stage)
}
private function onMouseUp(e:Event):void{
// Cancel timer
}
private function onTimerComplete(e:TimerEvent):void {
dispatchEvent(new HoldEvent(HoldEvent.HOLD_COMPLETE));
}
}
Which could be reused for example this way:
var mc:MovieClip = new MovieClip(); ...
var mouseHandler:MouseDownHandler = new MouseDownHandler(mc);
mouseHandler.addEventListener(HoldEvent.HOLD_COMPLETE, onMcHoldComplete);
... or this way :
public class TestMovieClip extends MovieClip
{
private var mouseHandler:MouseDownHandler;
public function TestMovieClip() {
mouseHandler = new MouseDownHandler(this);
mouseHandler.addEventListener(HoldEvent.HOLD_COMPLETE, onMouseHoldComplete);
}
private function onMouseHoldComplete(e:HoldEvent):void {
// Do something
}
}
I just use robber penners signals. Very easy to use.
http://github.com/robertpenner/as3-signals