Skip to main content
A
Anonymous
April 4, 2011
Answered

AS3 add/remove Event Listeners within functions...

  • April 4, 2011
  • 1 reply
  • 6067 views

Dear All, Hello!

What I am trying to do is, if a user presses keyboard (key – 1), picture 1 should FadeIn and if a user presses keyboard (key – 2) picture one should FadeOut and picture 2 FadeIn and vice-versa. With the code mentioned below it works fine sometimes if I am not pressing any other key while it is performing one action but sometimes it behaves weird also. What I want AS3 to do is not to take any action or in other words it should not listen to keyboard until it finishes the opening or closing animation of a picture or any other object assigned to the key.

Any help or assistance will be greatly appriciated.

stage.addEventListener (KeyboardEvent.KEY_DOWN, KeyDownHandler);/**/

//keyboard keycode for 1 & 2
var key1:uint = 49;
var key2:uint = 50;

var BG1:Image1 = new Image1();
var BG2:Image2 = new Image2();

function KeyDownHandler (keyEvent:KeyboardEvent):void
{
var character:String = String.fromCharCode(keyEvent.charCode);

if (keyEvent.keyCode == key1)
{

  var BG1TweenOff:Tween = new Tween(BG1,"alpha",Strong.easeOut,1,0,2,true);
  var BG2TweenOff:Tween = new Tween(BG2,"alpha",Strong.easeIn,1,0,2,true);
  BG1TweenOff.addEventListener(TweenEvent.MOTION_FINISH, BG1ON);
  trace ("Key pressed "+character+".");

}

else if (keyEvent.keyCode == key2)
{

  var BG1offTween:Tween = new Tween(BG1,"alpha",Strong.easeOut,1,0,2,true);
  var BG2offTween:Tween = new Tween(BG2,"alpha",Strong.easeIn,1,0,2,true);
  BG2offTween.addEventListener(TweenEvent.MOTION_FINISH, BG2ON);
  trace ("Key pressed "+character+".");

}

else
{

  gotoAndStop (currentFrame);
  trace ("Key pressed "+character+".");

}

}

function BG1ON(eve:TweenEvent):void
{

BG1.x = 0;
BG1.y = 0;
addChild (BG1);
var BG1offTween:Tween = new Tween(BG1,"alpha",Strong.easeIn,0,1,2,true);

}

function BG2ON(eve:TweenEvent):void

{

BG2.x = 0;
BG2.y = 0;
addChild (BG2);
var BG2offTween:Tween = new Tween(BG2,"alpha",Strong.easeIn,0,1,2,true);

}


This topic has been closed for replies.
Correct answer Ned Murphy

Hello! Mr. Murphy,

1. What my goal for this project is, If background 1 is already visible, I don't want key 1 to take any action. Same, if background 2 is visible and key 2 is pressed I don't want key 2 to take any action at that time. But if background 1 is visible and key 2 or 3 is pressed than I want current background(in this case background 1) to Fade Out and next backgrond(whatever key is pressed key 2 or key 3) to Fade in and same action with the other keys. I would really appriciate if you please tell me how to store varriables for current background and next backgroud and how to use it in functions. I did it earlier for mouse event but not understanding how to do it with keyboard event.

2. I would be glad if you can give me some hints or a start with one more thing I am trying to do. What i need to do is if I type "1 IN"  in a Text Input Field and press "enter" key, background 1 should fade-in, and if I type "1 OUT", background 1 fade-out. It should not take any action on typing "1 IN" if it is already visible. Same with other keys. In case background 1 is visible and I type "2 IN", background 1 fade out and background 2 fade in.


Here is a revised version of the code but it only deals with keys 1 and 2.  So if you want more keys involved you'll have to work them in.

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

stage.addEventListener (KeyboardEvent.KEY_DOWN, KeyDownHandler);

var BG1:Image1 = new Image1();
var BG2:Image2 = new Image2();

BG1.x = BG1.y = BG2.x = BG2.y = 0;

BG1.alpha = 1;
BG2.alpha = 0;

addChild(BG1);
addChild(BG2);

var key1:uint = 49;
var key2:uint = 50;

 
var character:String

var fadeOutTween:Tween;
var fadeInTween:Tween;

var bgShowing:Object = BG1;

  

function KeyDownHandler (keyEvent:KeyboardEvent):void {
character = String.fromCharCode(keyEvent.charCode);

if ((character == "1" && bgShowing != BG1) || (character == "2" && bgShowing != BG2)){
  stage.removeEventListener (KeyboardEvent.KEY_DOWN, KeyDownHandler);
  fadeOutTween = new Tween(bgShowing,"alpha",Strong.easeOut,bgShowing.alpha,0,2,true);
  fadeOutTween.addEventListener (TweenEvent.MOTION_FINISH, BGON);
} else {
     gotoAndStop (currentFrame);
}
trace ("Key pressed "+character+".");
}

function BGON (eve:TweenEvent):void {
bgShowing = this["BG"+character];
    bgShowing.x = 0;
    bgShowing.y = 0;
    fadeInTween = new Tween(bgShowing,"alpha",Strong.easeIn,bgShowing.alpha,1,2,true);
    fadeInTween.addEventListener(TweenEvent.MOTION_FINISH, resetKeyListener);
}

function resetKeyListener (evt:TweenEvent):void {
    stage.addEventListener (KeyboardEvent.KEY_DOWN, KeyDownHandler);
}

If you want to have a textfield involved that processes based on what's entered in it, then you'll have to settle in to learning a bit about manipulating textfields and Strings.  If you want to combine that with what is above, then you would need to have the textfield contents considered in the conditionals, as in... if the textfield contains any text, don't process the KeyDownHandler function as it currently stands because otherwise, as soon as you type a number 1 or 2, the BG changes.

1 reply

Ned Murphy
Ned Murphy
Legend
April 4, 2011

If you want to disable activating new tweens after one set has been initiated, either remove the event listener as soon as key1/key2 is detected and don't restore it until after the tween in BG1ON/BG2ON has finished (you'll need listeners for the fade in tweens), or incorporate another condition into your key testing lines that checks a new variable that you toggle false during the tweening... resetting it to true just as you would re-add the event listener.

A
Anonymous
April 4, 2011

Thank you Mr. Murphy for your response. I would really appriciate if you kindly eleborate the second suggestion a bit more. I am new to AS3. Attaching here updated code according to your advice for your reference. I am not sure whether I did it correctly or not but it is cutting the animation in between.

Regards

stage.addEventListener (KeyboardEvent.KEY_DOWN, KeyDownHandler);/**/

var key1:uint = 49;
var key2:uint = 50;

var BG1:Image1 = new Image1();
var BG2:Image2 = new Image2();

function KeyDownHandler (keyEvent:KeyboardEvent):void
{
var character:String = String.fromCharCode(keyEvent.charCode);

if (keyEvent.keyCode == key1)
{
  stage.removeEventListener (KeyboardEvent.KEY_DOWN, KeyDownHandler);
  var BG1TweenOff:Tween = new Tween(BG1,"alpha",Strong.easeOut,1,0,2,true);
  var BG2TweenOff:Tween = new Tween(BG2,"alpha",Strong.easeIn,1,0,2,true);
  BG1TweenOff.addEventListener(TweenEvent.MOTION_FINISH, BG1ON);
  trace ("Key pressed "+character+".");
}
else if (keyEvent.keyCode == key2)
{
  stage.removeEventListener (KeyboardEvent.KEY_DOWN, KeyDownHandler);
  var BG1offTween:Tween = new Tween(BG1,"alpha",Strong.easeOut,1,0,2,true);
  var BG2offTween:Tween = new Tween(BG2,"alpha",Strong.easeIn,1,0,2,true);
  BG2offTween.addEventListener(TweenEvent.MOTION_FINISH, BG2ON);
  trace ("Key pressed "+character+".");
}
else
{
  gotoAndStop (currentFrame);
  trace ("Key pressed "+character+".");
}
}

function BG1ON(eve:TweenEvent):void
{
BG1.x = 0;
BG1.y = 0;
addChild (BG1);
var BG1offTween:Tween = new Tween(BG1,"alpha",Strong.easeIn,0,1,2,true);
stage.addEventListener (KeyboardEvent.KEY_DOWN, KeyDownHandler);
}

function BG2ON(eve:TweenEvent):void
{

BG2.x = 0;
BG2.y = 0;
addChild (BG2);
var BG2offTween:Tween = new Tween(BG2,"alpha",Strong.easeIn,0,1,2,true);
stage.addEventListener (KeyboardEvent.KEY_DOWN, KeyDownHandler);
}

Ned Murphy
Ned Murphy
Legend
April 4, 2011

If you want to disable the keyboard while tweening is occuring you need to include the tween in duration as well, but you didn't add an event listener for the tween in.  That listener will call a function that re-enables the stage's Keyboard listening.

function BG1ON(eve:TweenEvent):void
{
     BG1.x = 0;
     BG1.y = 0;
     addChild (BG1);
     var BG1offTween:Tween = new Tween(BG1,"alpha",Strong.easeIn,0,1,2,true);

     BG1offTween.addEventListener(TweenEvent.MOTION_FINISH, resetKeyListener);
}

 

//... same for BG2ON

function resetKeyListener(evt:TweenEvent):void {

     stage.addEventListener (KeyboardEvent.KEY_DOWN, KeyDownHandler);

}

 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices