Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>UPDATE</strong>: Based on the OP's comments, a new suggested solution is outlined below.</p> <p>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.</p> <p>Starting over, this is how I would set up your main FLA timeline:</p> <ol> <li>Create 4 layers on your main timeline - actions, hotspot, loop, and curl, in that order top to bottom</li> <li>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".</li> <li>Put the loop MovieClip on the loop layer and name it "loop_mc".</li> <li>Put the curl MovieClip on the curl layer and name it "curl_mc".</li> <li>Add code to the first keyframe of the actions layer along these lines:</li> </ol> <hr> <pre><code>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'); } </code></pre> <p>... 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:</p> <pre><code>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. </code></pre> <p>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. </p> <p>HTH!</p> <p><strong>ORIGINAL ANSWER</strong>:</p> <blockquote> <p>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.</p> </blockquote> <p>Use the ActionScript functions gotoAndPlay() and gotoAndStop().</p> <p>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:</p> <pre><code>gotoAndPlay(1); </code></pre> <p>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.</p> <p>You can also use frame labels if they are defined on the timeline, such as:</p> <pre><code>gotoAndPlay('rolloverStart'); </code></pre> <p>gotoAndStop() works the same way, except it will jump to the given frame and stop the animation there.</p> <blockquote> <p>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.</p> </blockquote> <p>Just to clarify, there are two functions to perform:</p> <ol> <li><p>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</p></li> <li><p>Flash must raise a lightbox on the web page</p></li> </ol> <p>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.</p> <p>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:</p> <pre><code>import flash.external.ExternalInterface; ExternalInterface.call('JS_ShowLightbox'); </code></pre> <p>If you have a Javascript function in your web page called JS_ShowLightbox(), it will be called when Flash reaches this keyframe.</p> <p>HTH,</p> <p>Ross</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload