How to create a variable check in ActionScript (AS3)?

Apari
Apari used Ask the Experts™
on
I need to create a variable check for animate in this bit of actionscript. Unfortunately my knowledge is limited. In it's current state the animate is triggered repeatedly.

Any assistance and explanation would be much appreciated.
function onImageEvent(event:SSPImageEvent) {
   if (event.type=="imageRollOver") {
       animate(true);
   }
          
          if (event.type=="imageRollOut") {
       animate(false);
           // my_ssp.removeEventListener(SSPImageEvent.IMAGE_ROLLOVER, onImageEvent);
   }
}
function onThumbEvent(event:TGRequestEvent) {
   animate(false);
}

function animate( show:Boolean ):void {
   var end:int = show == true ? 1 : 0;
   _tween = new Tween( my_tg, "alpha", Strong.easeOut,  my_tg.alpha, end, .5, true );
   if( ! show ){
       _tween.addEventListener( TweenEvent.MOTION_FINISH, onComplete );
   } else {
       my_tg.y = 390;
       my_tg.alpha = 1;
   }
}

function onComplete(e:TweenEvent) {    
   my_tg.y = 615;
   my_tg.alpha = 0;
}

my_ssp.addEventListener(SSPImageEvent.IMAGE_ROLLOVER, onImageEvent);
my_ssp.addEventListener(SSPImageEvent.IMAGE_ROLLOUT, onImageEvent);
my_tg.addEventListener(TGRequestEvent.LOAD_THUMB, onThumbEvent);

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Can you be a bit more detailed in explaining what is happening and what is wrong?

When you say "the animation is triggered repeatedly" - do you mean that it keeps repeating while the mouse is over? Or do you mean that the rollOver should only work once and then never rollOver again?

Or what?
Wait, just try this first:


var lastAnim = false; // use this to store the last animation (over or out)
function animate( show:Boolean ):void {
  // now, only run the animation if it is DIFFERENT from the last one
  if (show != lastAnim){
   var end:int = show == true ? 1 : 0;
   _tween = new Tween( my_tg, "alpha", Strong.easeOut,  my_tg.alpha, end, .5, true );
   if( ! show ){
       _tween.addEventListener( TweenEvent.MOTION_FINISH, onComplete );
   } else {
       my_tg.y = 390;
       my_tg.alpha = 1;
   }
 }
 lastAnim = show; // store the last animation for the next time
}

Author

Commented:
Thank you for your response.

Unfortunately it doesn't appear to have worked.

Basically what happens is that after the RollOver triggers the thumbgrid to show up, when the mouse goes over the thumbgrid (my_tg), it keeps flickering.

Even though I'm not well versed in this, I think I might've picked a hard solution, since rolling over the image area activates the thumbgrid to appear.

I think it might prove problematic since the thumbgrid appears over the image and you can click a thumbnail and it will show the and hide the thumbgrid, but the cursor will still be on the image.

I don't know if it will be logical for users to realise that they have to leave and re-enter the area for it to appear again.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

I think the issue is that the Tween that's causing the thumbgrid to appear, starts the alpha (transparency) of the thumbgrid at 0 and goes to 100%. So when you roll over it again, even if it's already there, it will start at 0 again, which is what I believe is causing the flicker you're describing.

It's a little tough without seeing the actual flash, but that's what I think might be happening given what you describe.

Can you copy and paste the new code (now that you've added my little suggestion)?

Author

Commented:
I think you are right. I'm really having a hard time with this.

If this isn't possible I'd be happy just to use a transparent button (probably more like an invisible sheet) closer to the thumbgrid to show and hide, but I've even been having trouble trying to get that to work properly.

Many Thanks

(I added the source. I hope it shows what I mean.)
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import net.slideshowpro.slideshowpro.*;
import net.slideshowpro.thumbgrid.*;

var _tween:Tween;


function onImageEvent(event:SSPImageEvent) {
   if (event.type=="imageRollOver") {
       animate(true);
   }  
          if (event.type=="imageRollOut") {
       animate(false);
   }
}

function onThumbEvent(event:TGRequestEvent) {
   animate(false);
}


var lastAnim = false; // use this to store the last animation (over or out)
function animate( show:Boolean ):void {
  // now, only run the animation if it is DIFFERENT from the last one
  if (show != lastAnim){
   var end:int = show == true ? 1 : 0;
   _tween = new Tween( my_tg, "alpha", Strong.easeOut,  my_tg.alpha, end, .5, true );
   if( ! show ){
       _tween.addEventListener( TweenEvent.MOTION_FINISH, onComplete );
   } else {
       //my_tg.y = 390;
       my_tg.alpha = 1;
   }
 }
 lastAnim = show; // store the last animation for the next time
}

function onComplete(e:TweenEvent) {    
   //my_tg.y = 615;
   my_tg.alpha = 0;
}

my_ssp.addEventListener(SSPImageEvent.IMAGE_ROLLOVER, onImageEvent);
my_ssp.addEventListener(SSPImageEvent.IMAGE_ROLLOUT, onImageEvent);
my_tg.addEventListener(TGRequestEvent.LOAD_THUMB, onThumbEvent);

Open in new window

test.zip
Okay, thanks for the file. So right now what is happening is:
1. when you roll over the large coloured area, the selection grid appears
2. when you then roll over a coloured square inside that selection grid:
2a. the selection grid starts to fade out
2b. the coloured square gets larger
2c. the coloured square starts to fade out.

What is it that you would like to have happen?

T

Author

Commented:
Yes, the large colour represents the image.

The behaviour of the grid that appears (thumbnails) is fine. All that seems to behave correctly.

My problem is when you mouseover and the grid appears, then you mouseover a thumbnail in the grid, I get the flickering behaviour.

I think I need to be able to leave the area (image) without accidentally reactivating the grid.
Mouseover or rollover image = grid appears
If selection is made = grid disappears after thumbnail is click
If no selection is made = then grid disappears after a timeout?
Mouseout or rollout = grid disappears

If I can't do it this way, I'd be happy to assign the function to a button - which might be easier. If so I can ask another question regarding this.

Author

Commented:
Sorry, just to clarify - I would need the button to activate on rollover and not click.
Aie aie aie. I spent some time looking at this and here's what's happening (which you already suspect, I'm sure):

the thumbgrid is the one that you're doing the alpha Tween on - to fade it up and down when the mouse moves over it.

however, when you roll over the thumbgrid, the built-in slideshowpro functions cause a new child element to come up (the individual "photo" - or coloured box in this case).

The problem occurs because this new box is stealing focus from the thumbgrid parent element and so it then starts the roll out tween, making everything go transparent.

The bad news is that we cannot alter the way slideshowpro does what it does - you will need to contact them with your issue and get them to explain the internals to you. I'm sure it should be possible.

As far as workarounds, I'm afraid that's beyond the scope of what I can offer here as I don't really want to dig into learning the internals of a proprietary solution. Hopefully the slideshowpro documentation
http://wiki.slideshowpro.net/SSPfl/SSPfl
or their support forums
http://forums.slideshowpro.net/

will be of service.

Author

Commented:
Thank you for your reply.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial