Question

Okay, now things are getting a little complicated.
I need to build a Flash object that can sit over the corner of an image to serve extra content.
It’s way beyond my Flash skill level, my work is usually limited to print work in Photoshop and Illustrator so please excuse me if any of the following isn’t clear. I am trying to learn though, so any pointers in the right direction would be greatly appreciated.

So this is how it’s all supposed to work, along with my issues;

1. When the image & Flash item load a small looping animation will play to draw the eye/show the item as interactive.
   When the user rolls over this the corner will peelback. I have a working peelback animation for the rollover, that reacts to mouse over/mouse off, and a looping animation for the initial, but I cannot work out how to make the initial loop until mouseover, then play the peelback when the mouse is over. And go back to the initial animation loop if the user rolls off. (Each of these animations is stored as a movie clip in the Library)

2. Then it gets more complicated… if the user stays on the corner until it is fully peeled back I need to make a small countdown (sort of a 3, 2, 1 situation) show, before launching a lightbox (would this have to be jQuery, or could it be done in Flash?) in the browser to serve the content.

Thanks for any help that anyone can offer, with any part of this. Like I say, I am doing my best to learn so any explanation would be greatly appreciated!

Answer 1

UPDATE: Based on the OP’s comments, a new suggested solution is outlined below.

I have written out a revamped (but untested) solution below. Since you are relatively new to Flash I added a few little “detours” that I hope will clarify how parts of ActionScript 3 work, especially with regard to event handling.

Starting over, this is how I would set up your main FLA timeline:

1. Create 4 layers on your main timeline – actions, hotspot, loop, and curl, in that order top to bottom
2. On the hotspot layer, create a rectangle that covers the “mouseable” area of your clip. Set the rectangle’s color to alpha = 0 and remove any border it has. Then convert it to a MovieClip symbol and name the stage instance “hotspot_mc”.
3. Put the loop MovieClip on the loop layer and name it “loop_mc”.
4. Put the curl MovieClip on the curl layer and name it “curl_mc”.
5. Add code to the first keyframe of the actions layer along these lines:

---

import flash.external.ExternalInterface;
import flash.events.MouseEvent;
import flash.events.Event;

//Stops the main timeline on the first frame
stop();

//Makes the curl_mc invisible
//(Note: alpha varies from 0 to 1, so for instance you can make any 
//clip half-transparent by typing clipName.alpha = 0.5)
curl_mc.alpha = 0;

//Stop the curl_mc clip from playing initially, we only want it to begin 
//playing on rollover
curl_mc.stop();

//Make your hotspot look like a button when users mouse over it
//by setting these properties on it
hotspot_mc.useHandCursor = true;
hotspot_mc.buttonMode = true;

//We attach our event handlers to the hotspot.  Because the hotspot is a 
//rectangle of specific position and size it lets us control exactly where 
//mouse actions will trigger events.  You *could* attach the handlers to 
//loop_mc instead, so a hotspot clip isn't strictly necessary, but it's 
//handy.  You can also make the shape in the hotspot_mc any shape you 
//want, it does not need to be a rectangle.

hotspot_mc.addEventListener(MouseEvent.ROLL_OVER, onLoopRollover, false, 0, true);
hotspot_mc.addEventListener(MouseEvent.ROLL_OUT, onLoopRollout, false, 0, true);

//Lastly, to be extra fancy, let's trigger your lightbox when 
//the user clicks the hotspot OR when the curl_mc dispatches 
//the 'curlComplete' event (which you will set up yourself on 
//the last frame of the curl_mc timeline).

hotspot_mc.addEventListener(MouseEvent.CLICK, showLightbox, false, 0, true);
curl_mc.addEventListener('curlComplete', showLightbox, false, 0, true);

//When we roll over the hotspot, hide the loop and show the curl
function onLoopRollover(e:MouseEvent):void
{
  //Hide the loop animation so we can see the curl beneath it
  loop_mc.alpha = 0;
  loop_mc.stop();

  //Show the curl animation and play it
  curl_mc.alpha = 1;
  curl_mc.gotoAndPlay(1);
}

//When we roll out of the hotspot, hide the curl and show the loop
function onLoopRollout(e:MouseEvent):void
{
  loop_mc.alpha = 1;
  loop_mc.gotoAndPlay(1);

  curl_mc.alpha = 0;
  curl_mc.stop();
}

//Shows the JavaScript-based lightbox
function showLightbox(e:Event = null):void
{
  ExternalInterface.call('JS_ShowLightbox');
}

… Lastly, on the last frame of the curl_mc timeline (after your countdown sequence), add this code to a keyframe on that timeline’s actions layer:

import flash.events.Event;
dispatchEvent(new Event('curlComplete'));
stop();


//dispatchEvent() is a function that sends an event out to be 
//handled by any listening handler functions (like the ones on 
//frame 1 of the main timeline).  dispatchEvent() accepts an Event 
//as a parameter, which we create new for this purpose.  In turn, 
//when creating a new Event, you pass in the name of the event so 
//that handlers can tell them apart.  This matches the event name 
//passed in to addEventListener(eventName, eventHandler, false, 0, true).

//This is how event handlers basically work in AS3.  By putting this 
//code on the last frame of curl_mc, we use a new event to signal to 
//our application that the curl animation is done.

There’s more than this one way to code this situation, of course. However with this approach you see how you can create and “dispatch” events from one area of your application and have them handled by functions you wrote in a different place.

HTH!

ORIGINAL ANSWER:

I cannot work out how to make the initial loop until mouseover, then play the peelback when the mouse is over. And go back to the initial animation loop if the user rolls off.

Use the ActionScript functions gotoAndPlay() and gotoAndStop().

You can use these two functions to create loops and control the playback of animations. For example if you create a keyframe, select it, and open the Actions window, you can add this ActionScript:

gotoAndPlay(1);

As soon as the play head reaches this keyframe, the timeline will jump to and play from frame 1. This would create an infinite playback loop from frame 1 to your keyframe. Every time the play head hits this keyframe it will jump back and restart.

You can also use frame labels if they are defined on the timeline, such as:

gotoAndPlay('rolloverStart');

gotoAndStop() works the same way, except it will jump to the given frame and stop the animation there.

if the user stays on the corner until it is fully peeled back I need to make a small countdown (sort of a 3, 2, 1 situation) show, before launching a lightbox (would this have to be jQuery, or could it be done in Flash?) in the browser to serve the content.

Just to clarify, there are two functions to perform:

1. When the user hovers the mouse over the corner (the “hot spot”), a secondary animation will begin to play and take an action when it is finished

2. Flash must raise a lightbox on the web page

Re: function #1, the simplest way I can think of is to add your countdown animation to the end of your rollover animation. This effectively creates one long rollover animation with an action at the end.

Re: function #2, you can use Flash to call Javascript functions, including a function that will show the lightbox. At the end of your countdown animation you can add a keyframe and use this ActionScript 3 code:

import flash.external.ExternalInterface;
ExternalInterface.call('JS_ShowLightbox');

If you have a Javascript function in your web page called JS_ShowLightbox(), it will be called when Flash reaches this keyframe.

HTH,

Ross