摘要

在本教程你将学习如何创建一个鼠标翻转立方体过渡效果。

在这里，最后的结果是：


需求

Flash CS3中或Flash CS4中。

注：本教程中的截图是在Flash CS3中。 它的工作原理完全一样在Flash CS4。

第1步 - 安装组件的影响

购买立方过渡效果在这里 。 请按照安装说明，并拖动库组件从组件面板到您。FLA文件。

拖动到库组件

第2步 - 创建一个新层

为了保持整洁你应该创建一个新层的主时间轴，并给它一个名称。 做到这一点的截图所示。

创建层主时间轴

第3步 - 创建背景

现在，您创建一个渐变背景。 虽然这是没有必要作出工作的效果表明，它的效果还与透明的内容（更多的是后期作品）。

选择在“保函”层的第一帧画一个与画布上的矩形工具的形状。 选择该矩形的颜色设置和调整有一个很好的梯度（你也可以使用任何其他颜色）。

创建背景形状

颜色渐变的设置

第4步 - 创建按钮

该立方体的效果应该动态地反应用户鼠标状态（过渡/部署）。 这是最好的做法是不会添加事件监听器的效果本身，而是使用“空白”按钮。

单击图层的第一帧“银行技术新闻杂志”，并绘制一个与画布（颜色不因为该按钮将不可见脑膜大小的矩形）。 选择矩形并将其转换为一个按钮与[按F8]或在影片剪辑右击“ - >”转换为元件...“。

转换形状按钮

设置为“银行技术新闻杂志”，并确保该类型是“按钮的名称按钮”。

设置按钮的名称

双击该按钮。 现在，第一个关键帧拖到“向上”的最后一帧“热”。 这可以确保，该按钮会互动，但不可见。

关键帧里面更改按钮

回到主时间轴，并设置了以“银行技术新闻杂志”按钮的实例名称。

设置按钮的实例名称

第5步 - 创建启动的MovieClip

其效果需要有两个影片剪辑的视觉信息的地方采取由。 现在您创建的MovieClip的过渡将开始。

点击层上的“img1”的第一帧。 导入图片的画布大小，按下[按Ctrl - R的]或“文件” - >“”导入“ - >”“舞台上的导入...”。

导入图像

现在这个图片转换为影片剪辑，并命名为“img1”。

转换图片的MovieClip

集名称的MovieClip

设置刚刚创建的MovieClip，以“img1”实例名称。

设置实例名称

第6步 - 创建完的MovieClip

最终的MovieClip将包含文字而不是图像。 在实现这一目标，你需要一个稍微不同的方法。

选择该层“img2”（好吧，坏命名的第一帧，随时纠正这种 ：） ）画一个与画布大小的矩形。 你想，以确保最终的MovieClip具有开始的MovieClip相同的尺寸。 那你为什么先画一个与作为开始的MovieClip无形形状大小相同。

绘制形状

选择的形状和alpha值设置为0（形状仍然存在，只是无形的）。

设置阿尔法形状

转换形成一个movieclip [按F8]或在影片剪辑右击“ - >”转换为元件...“，并命名为”img2“。

转换为影片剪辑

双击刚刚创建的MovieClip，创建一个新的空层，把一层，新创建的一些文本。

将文本添加到影片剪辑

头回主时间轴和设置影片剪辑的实例名称为“img2”。

设置实例名称

第7步 - 添加翻滚动作

选择图层“脚本”和开放的“窗口” - >“”行动“或[按F9]”操作“窗口。

打开窗口的ActionScript

如果您只是想有一个过渡的过渡（没有回上推出过渡）复制到代码窗口下面的行。 

 btn.addEventListener（MouseEvent.ROLL_OVER，_onOver）;

功能_onOver（五：的MouseEvent）（
 变种myFilter：CubeTransitionEffectAS3 =新CubeTransitionEffectAS3（）;
  myFilter.mouseEnabled =虚假的;
  myFilter.mouseChildren =虚假的;
  addChild（myFilter）;

  myFilter.init（img1，img2，75，“升-> R”的，2，“easeInOutCubic”，假）;
 ）

在第一行添加事件监听器的过渡到按钮。 在函数“_onOver”（第3行），你首先要创建一个实例的CubeTransitionEffectAS3之前禁用的组件（4号线和5鼠标交互）。 记住，你前面创建的按钮的鼠标正在影响照顾，你不希望干涉的效果。

终于在第9行初始化的效果（ 这里的文件参数 ）。 最重要的部分是前两个参数。 您定义的过渡与“img1”，并以“结尾开始img2”。

导出FLA文件。 正如你看到的，组成完美的效果与“img2”透明背景。

第8步 - 更多复杂的ActionScript

行，与前面的代码的过渡工作得很好。 但是，如果你也想有一个部署功能，逆转，由“img2”到“img1过渡”？ 为了实现这个你需要一个更复杂的代码。 删除脚本，并加入以下内容： 

 btn.addEventListener（MouseEvent.ROLL_OVER，_onOver）; btn.addEventListener（MouseEvent.ROLL_OUT，_onOut）;变种运行=虚假的;变种戈=虚假的;变种goOut =虚假的;功能_onOver（五：的MouseEvent）（如果（！运行） （_createAnimation（“在”）;运行=真;）否则（戈=虚假的; goOut =真;））函数_onOut（五：的MouseEvent）（如果（！运行）（_createAnimation（“出”）;运行=真;否则）（戈=真; goOut =虚假的;））函数_inAnimationDone（五：事件）（e.target.removeFilter（）; img1.visible =虚假的;如果（戈）（_createAnimation（“出”）;）否则（运行=虚假的; goOut =虚假的;））函数_outAnimationDone（五：事件）（e.target.removeFilter（）; img2.visible =虚假的;如果（goOut）（_createAnimation（“在”）;）（否则运行=假;戈=虚假的;））函数_createAnimation（导演：字符串）（变种myFilter：CubeTransitionEffectAS3 =新CubeTransitionEffectAS3（）; myFilter.mouseEnabled =虚假的; myFilter.mouseChildren =虚假的; addChild（myFilter）;如果（目录==“中的” ）（myFilter.init（img1，img2，24日，“升-> R”的，2，“easeInOutCubic”，假）; myFilter.addEventListener（CubeTransitionEffectAS3.ANIMATION_DONE，_inAnimationDone）;）否则如果（目录==“走出去”） （myFilter.init（img2，img1，24“，与r ->升”，2，“easeInOutCubic”，假）; myFilter.addEventListener（CubeTransitionEffectAS3.ANIMATION_DONE，_outAnimationDone）;））

重要的是要知道， 你不能逆转的方向过渡期间的运行效果。 相反，你可以“记住”用户的行动，直到完成的效果等，运用反向过渡。

变量“戈”和“goOut”（5号线和6）用于这一目的。 当您设置他们的职能“_onOver”和“_onOut”（8号线和18条）被执行。 但是，只有在无功运行是真的，如果是假的（9号线和19条），您马上开始过渡（行10和20）。

函数“_createAnimation”（行52）是你的助手一开始就视功能的方向“目录”，您作为参数传递的动画。

请注意，在调用“removeFilter”方法（行29和41）都开始影片剪辑和最终的MovieClip设置为可见（出来的效果）。 那你为什么设置的MovieClip能见度 - 过渡开始 - 为false（行30和42）。

最终结果

下载

点击这里下载本教程的FLA。 注：。FLA的影响并不包括组件。 为了使FLA的工作，您需要购买此立方过渡效果 。

在这里你可以找到一个视频效果教程如何实现不同的 。

  • 分享/书签