摘要

在本教程中，您将了解如何创建一个立方体对小鼠翻滚过渡效果。

在这里，最终结果：


需求

闪光CS3或组件语言。

注：本教程的屏幕是由在Flash CS3。 它工作正是在Flash CS4相同。

步骤1 - 安装组件的影响

购买立方过渡所产生的影响 。 请按照安装说明 ，并拖动从组件面板到您。FLA文件库中的组件。

拖到库组件

第2步 - 创建一个新层

为了保持整洁，应创建一个主时间轴上新建一层，给它一个名称。 做到这一点，显示在下面的截图。

主时间轴上创建层

第3步 - 创建背景

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

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

创建背景形状

颜色渐变的设置

第4步 - 创建按钮

多维数据集的效果应该动态地反应用户的鼠标状态（过渡/部署）。 这是最好不要添加事件监听器的作用本身，而是使用“空白”按钮。

单击层的第一帧“百特”，并提请随着画布大小的矩形（颜色不母校，因为该按钮将不可见）。 选择矩形和转换与[按F8到一个按钮]或MovieClip的右键 - >“”转换为元件...“。

转换形状按钮

设置按钮的名称为“百特”，并确保类型是“按钮”。

设置按钮的名称

双击该按钮。 现在，第一个关键帧拖到“起来”的最后一帧“点击”。 这可以确保，该按钮将是互动式的，但不可见。

更改关键帧内部按钮

回到主时间轴，并设置按钮的实例名称为“百特”。

设置按钮实例名称

步骤5 - 创建启动的MovieClip

其效果需要有两个movieclip中的视觉信息时采取的。 现在您可以创建的movieclip，过渡将开始。

点击层上的“img1第一帧”。 进口随着画布大小按[按Ctrl - R的]或“文件” - >“”导入“ - >”“舞台上的进口...”的形象。

导入图像

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

转换图片的MovieClip

集名称的影片剪辑

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

设置实例名称

第6步 - 创建完影片剪辑

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

选择层的“img2第一架”（好，坏的命名，随时纠正这种 ：） ）和画的画布大小的矩形。 你想确保最终的movieclip已成为开始的movieclip相同的尺寸。 多数民众赞成为什么你先画作为开始的MovieClip看不见的大小相同的形状。

绘制形状

选择形状，并设置Alpha值为0（形状仍然存在，但无形的）。

设置阿尔法变形

转换的形状到MovieClip [按F8]或MovieClip的右键 - >“”转换为元件...“，并命名为”img2“。

转换为影片剪辑

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

将文本添加到影片剪辑

头回主时间表，并设置了MovieClip实例的名称改为“img2”。

设置实例名称

第7步 - 添加翻转动作

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

打开动作窗口

如果您只是想有一个过渡期（没有备份就网络过渡）复制到代码窗口以下行。 

 btn.addEventListener（MouseEvent.ROLL_OVER，_onOver）;

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

  myFilter.init（img1，img2，75，“左旋”住宅“，2，”easeInOutCubic“，假）;
 ）

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

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

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

第8步 - 更复杂的动作

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

 btn.addEventListener（MouseEvent.ROLL_OVER，_onOver）;
 btn.addEventListener（MouseEvent.ROLL_OUT，_onOut）;

无功运行=假;
无功goIn =假;
无功goOut =假;

功能_onOver（五：MouseEvent的）（
 如果（！运行）（
  _createAnimation（“在”）;
 运行=真;
 否则（）
  goIn =假;
  goOut =真;
  ）
 ）

功能_onOut（五：MouseEvent的）（
 如果（！运行）（
  _createAnimation（“去”）;
 运行=真;
 否则（）
  goIn =真;
  goOut =假;
  ）
 ）

功能_inAnimationDone（五：事件）（
  e.target.removeFilter（）;
  img1.visible =假;

 如果（goIn）（
  _createAnimation（“去”）;
 否则（）
 运行=假;
  goOut =假;
  ）
 ）

功能_outAnimationDone（五：事件）（
  e.target.removeFilter（）;
  img2.visible =假;

 如果（goOut）（
  _createAnimation（“在”）;
 否则（）
 运行=假;
  goIn =假;
  ）
 ）

功能_createAnimation（导演：字符串）（
 无功myFilter：CubeTransitionEffectAS3 =新CubeTransitionEffectAS3（）;
  myFilter.mouseEnabled =假;
  myFilter.mouseChildren =假;
  addChild（myFilter）;

 如果（迪尔==“在”）（
  myFilter.init（img1，img2，24，“左旋”住宅“，2，”easeInOutCubic“，假）;
  myFilter.addEventListener（CubeTransitionEffectAS3.ANIMATION_DONE，_inAnimationDone）;
  ）否则如果（迪尔==“出”）（
  myFilter.init（img2，img1，24，即“R -”升“，2，”easeInOutCubic“，假）;
  myFilter.addEventListener（CubeTransitionEffectAS3.ANIMATION_DONE，_outAnimationDone）;
  ）
 ）

重要的是要知道，你不能逆转的影响，在后过渡的方向运行。 相反，你可以“记住”用户的行动，等到完成的效果和应用翻领过渡。

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

函数“_createAnimation”（行52）是你的辅助函数的开始根据该指示的“dir”你作为参数传递的动画。

请注意，在调用“removeFilter”方法（第29行和41）都开始movieclip并最终影片剪辑被设置为可见（出效果）。 多数民众赞成你为什么设置的movieclip可视性 - 过渡期开始 - 为false（第30行和42）。

最终结果

下载

点击这里下载本教程的弗洛。 注：。弗洛不包括效力的组成部分。 为了使弗洛工作，您需要购买立方过渡所产生的影响 。

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

  • 分享/书签