AS3 add/remove Event Listeners within functions...

[Guest]

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);

}

[Ned Murphy]

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.

[Guest]

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]

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);

}

[Guest]

Many thanks. It is working but getting freezed after pressing the keys 1 or 2 times.

[Guest]

Do I need to add any loop statement to make it loopable?

[Ned Murphy]

Show the code as you have it now.  I don't see how any sort of loop will solve anything.  It is possible you have some issues with the various tweens you create, though they should not be competing with one another since they should be acting sequencially.

[Guest]

Here is the current code:

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)
{
 
  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);
  stage.removeEventListener (KeyboardEvent.KEY_DOWN, KeyDownHandler);
  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);
  stage.removeEventListener (KeyboardEvent.KEY_DOWN, KeyDownHandler);
  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);
BG1offTween.addEventListener (TweenEvent.MOTION_FINISH, resetKeyListener);

}

function resetKeyListener (evt:TweenEvent):void
{

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);
BG2offTween.addEventListener (TweenEvent.MOTION_FINISH, resetKeyListener);
}

[Ned Murphy]

I would like to know why you tween both objects off in each function.  Rightfully, you should only be fading out whichever one is presently visible.  You can store whichever one that currently is in a variable and use that variable for your tweening.  Can you explain what the goal of your design is?  What is the purpose of providing the choice between key 1 and 2 (what if 1 is already visible when key 1 is clicked)?  It may be easier to help you find a more streamlined implementation than trying to patch this one into working.

Another thing that you should do is to not have your alpha tweens working from 1 to 0 or 0 to 1 (most often applies for any tweens).  Doing that will cause something that might not be visible to suddenly become visible just so that it can fade out, which would be unnecessary.  Instead, always have your objects tween from the current value, as in...

var BG1TweenOff:Tween = new Tween(BG1,"alpha",Strong.easeOut, BG1.alpha, 0,2,true);

[mikef30841975]

I'd also reccomend declaring your tweens within the class and not in the functions.  AS3 is really wonky about tweens and garbage collection, if you keep declaring more tweens some tend to fail.  Just declare var BG1TweenOff:Tween outsite the function and then set it equal to a new tween when you want it to play.

Also, check out TweenLite: http://www.greensock.com/tweenlite/

It's much better at tweening than the built in As3 functions.  Your keys probably stop responding because motion finished isn't being called.  So many tween problems go away when you use a third party tweener...  🙂

[Guest]

Dear mekefish, thank you for your information.

[Guest]

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.

[Ned Murphy · Accepted solution]

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.

[Guest]

Dear Mr.Murphy,

Many thanks. This is working great!!!

Now for the second thing I will try to find some learning materials as you have suggested. I will try to do it after that and will get back to you.

Best regards,

Harinder Singh

[Guest]

-