flash - 分阶段创建复杂的 Flash 翻转(循环 > 翻转动画 > 定时动画)
更新:根据 OP 的评论,下面概述了一个新的建议解决方案。
我在下面写了一个改进(但未经测试)的解决方案。由于您对 Flash 比较陌生,我添加了一些小“弯路”,希望能阐明 ActionScript 3 的各个部分是如何工作的,尤其是在事件处理方面。
从头开始,这就是我设置您的主要 FLA 时间线的方式:
在主时间线上创建 4 个图层 - 动作、热点、循环和卷曲,按从上到下的顺序
在热点层上,创建一个覆盖剪辑“可鼠标”区域的矩形。将矩形的颜色设置为 alpha = 0 并删除它的所有边框。然后将其转换为 MovieClip 元件并将舞台实例命名为“hotspot_mc”。
将循环影片剪辑放在循环图层上并将其命名为“loop_mc”。
将卷曲电影剪辑放在卷曲层上,并将其命名为“curl_mc”。
按照以下几行将代码添加到操作层的第一个关键帧:
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');
}
...最后,在 curl_mc 时间线的最后一帧(在您的倒计时序列之后),将此代码添加到该时间线的动作层上的关键帧:
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.
当然,编码这种情况的方法不止一种。然而,通过这种方法,您将了解如何从应用程序的一个区域创建和“分派”事件,并让它们由您在不同位置编写的函数处理。
!
原始答案:
在鼠标悬停之前,我无法弄清楚如何制作初始循环,然后在鼠标悬停时播放回弹。如果用户滚下,则返回初始动画循环。
使用 ActionScript 函数 gotoAndPlay() 和 gotoAndStop()。
您可以使用这两个函数来创建循环并控制动画的播放。例如,如果您创建一个关键帧,选择它,然后打开“动作”窗口,您可以添加这个动作脚本:
gotoAndPlay(1);
一旦播放头到达这个关键帧,时间线就会跳到第 1 帧并从第 1 帧开始播放。这将创建从第 1 帧到关键帧的无限播放循环。每次播放头点击此关键帧时,它都会跳回并重新启动。
如果在时间轴上定义了帧标签,您也可以使用它们,例如:
gotoAndPlay('rolloverStart');
gotoAndStop() 的工作方式相同,除了它会跳转到给定的帧并在那里停止动画。
如果用户一直呆在角落里直到它被完全剥离,我需要在启动灯箱之前做一个小的倒计时(有点像 3、2、1 的情况)显示(这必须是 jQuery,还是可以完成在 Flash 中?)在浏览器中提供内容。
澄清一下,有两个功能需要执行:
当用户将鼠标悬停在角落(“热点”)上时,将开始播放辅助动画并在完成后执行操作
Flash 必须在网页上引发灯箱
回复:功能#1,我能想到的最简单的方法是将倒计时动画添加到翻转动画的末尾。这有效地创建了一个长的翻转动画,最后有一个动作。
回复:函数#2,你可以使用Flash调用Javascript函数,包括一个显示灯箱的函数。在倒计时动画结束时,您可以添加一个关键帧并使用此 ActionScript 3 代码:
import flash.external.ExternalInterface;
ExternalInterface.call('JS_ShowLightbox');
如果您的网页中有一个名为 JS_ShowLightbox() 的 Javascript 函数,它将在 Flash 到达此关键帧时调用。
高温下,
罗斯