IT技术互动交流平台

手把手教flashprofessioncc配合as3脚本做各种炫过场效果ppt

作者:liuyuyefz的专栏  发布日期:2013-12-19 21:17:19

首先我把要掌握的知识点理一下。

知识点:

1,什么是场景

2,元件

3,怎么搞帧动画。

4,flash的脚本用法

5,怎么做过场动画

以上知识点大家有兴趣可以去深入查一下资料,知道自己要做什么了,争取不看下面教程也能够自己做出ppt。

步骤一:

下载安装flash profession cc 并且新建Action Script3.0项目

data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1219/20131219195121169.jpg

步骤二:在场景内添加一个“文本框”标记为场景一

data-cke-saved-src=

步骤三:制作一个“按钮”,我们之后会通过按钮来切换到下一个场景

(1)选择上面菜单的插入(insert)

data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1219/20131219195121170.jpg

(2)在弹出对话框中,给要做的元件用英文取一个“高大上”的名字,然后在类型这边选择“Button”选项

data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1219/20131219195121172.jpg

(3)跳入元件编辑场景

data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1219/20131219195122174.jpg

可以把你准备好的按钮的图片直接拖入到右边的资源列表里面,然后再拖入到按钮每一个状态对应的帧里面。

按钮的状态有四种,如图左下角:

up(没有任何接触按钮的时候)

over(鼠标划过时候)

down(鼠标按下按钮未弹起的时候)

hit(按钮回复的时候)

右键每一个状态,就可以在右键菜单中找到插入关键帧选项。然后分别都插入关键帧。同时在不同状态下,把舞台上的当前状态的图片替换成你想要的效果图片。

这样就可以在不同的状态下显示不同图片了。就做到了按钮动态效果。

步骤四:

切回场景一,并且创建新的场景。

data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1219/20131219195122176.jpg

如图右上角标志为切换场景选项,一开始你可能只能看到一个场景一。那是因为你还没有新建其它的场景,现在我们来新建其它的场景

data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1219/20131219195122177.jpg

步骤五:

我们来把刚才的按钮添加到一场景中,然后用这个button来切换到场景二。(你可以先在场景二也放一个文本为“Scene2”,以便之后切换到场景二的时候能够明确看到出场景间的关系)

(1)先新建一个层,起名叫button。创建方式如下图

data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1219/20131219195122178.jpg

(2)然后选中这个层,在flash的右侧栏里面找到资源库(libray),然后把按钮元件拖入屏幕中的button层上(在时间条中选中button层添加进来的东西就会在这个层上)

ps:新建层不是必要,你也可以直接从库内拖入元件到同一个层上。但是尽量元件直接分成来放是一个好习惯。从美观到后期分批操作都有一定的便利性。

data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1219/20131219195123183.jpg

做到这部执行一下debug看看有什么效果。

data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1219/20131219195124184.jpg

发现什么也没有做,不过flash自动的疯狂的在两个场景之间转化,这个设计不知道是为了什么。解决方法是在当前场景(比如场景一)中添加脚本,让它不自动跳到下一个脚本。现在我们来看一个最简单的脚本。

步骤五:给场景添加停止自动切换下一个场景的脚本

data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1219/20131219195124185.jpg

在当前场景的时间栏里面找到一个帧跨度时间最大的层。在这个层的最后一帧右键点击。在右键菜单中选中“动作”(Action)进行脚本编辑。

data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1219/20131219195124188.jpg

步骤六:给按钮添加点击事件,并切换场景

data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1219/20131219195124189.jpg

右键在按钮处,给button绑定“动作”(Action)

同上给按钮添加一个切换场景的脚本命令

data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1219/20131219195125191.jpg

这个脚本里面有两个地方,如果不是你想要的需要改一下。就是

gotoAndPlay(1,"Scene 2");

这句话是关键

这边有一个数字“1”

表示切换场景后停留在下一个哪一帧(时间点)上,

后面“Scene 2”是你要切换过去的场景的名字。我要切换到场景二

这边是一个大坑,大家注意一下。我的场景二建立起来明明显示的是Scene2

可是AS脚本里面却偏偏要在Scene 和2之间加一个空格。同理以后要去场景3,4,5,6都是这个规律。场景和数字之间不要忘记加空格要不然就崩溃

(图中和你生成可能还有写不同,这边我做了一个变量var myMovieClip = MovieClip(this.root)是为了在下面重复使用“myMovieClip”方便这么做的。)

ok!到这边这个教程基本结束,你可以再按照之前调试一下程序看看,已经达到ppt的目标可以切换场景了

步骤七:添加如下过场动画效果代码。

data-cke-saved-src=http://www.it165.net/uploadfile/files/2013/1219/20131219195125193.jpg

上面代码大家不必深入研究只要指导duration:2这个地方是表示过场动画时间就够了,把“2”改为你要的时间,快慢自己多试几次就知道了。

以下提供多种过场效果,大家可以一个一个试试看。

(注意flash里面的注释也是 // 在行首添加就可以了,

因为写给新手看的,所以我解释以下注释,所谓注释就是写程序的时候,不想执行的代码,但是又想放着看看说不定以后有用。就可以注释起来。所以大家用下面的效果要,先把开头的 // 去掉这行代码才会执行哦)

然后你可以调试一下看一下效果,不过在这个之前,其实我们漏掉了一个部分代码,直接这么开启的话切换场景的时候会崩溃。我们要在执行过场效果的这个脚本的里面引入两个支持的库,你可以在这个脚本页面的最上面加入一下代码

import fl.transitions.*;
import fl.transitions.easing.*;

然后就可以华丽的看到过场动画了

//效果1

//TransitionManager.start(myMovieClip, {type:Blinds, direction:Transition.IN, duration:2, easing:None.easeNone, numStrips:10, dimension:0});

//效果2

//TransitionManager.start(myMovieClip, {type:Fade, direction:Transition.IN, duration:3, easing:None.easeNone});

//效果3

//TransitionManager.start(myMovieClip, {type:Fly, direction:Transition.IN, duration:3, easing:Elastic.easeOut, startPoint:9});
//效果4

//TransitionManager.start(myMovieClip, {type:Iris, direction:Transition.IN, duration:2, easing:Strong.easeOut, startPoint:5, shape:Iris.CIRCLE});
//效果5

//TransitionManager.start(myMovieClip, {type:Photo, direction:Transition.IN, duration:1, easing:None.easeNone});
//效果6

//TransitionManager.start(myMovieClip, {type:PixelDissolve, direction:Transition.IN, duration:2, easing:None.easeNone, xSections:10, ySections:10});
//效果7

//TransitionManager.start(myMovieClip, {type:Rotate, direction:Transition.IN, duration:3, easing:Strong.easeInOut, ccw:false, degrees:720});
//效果8

//TransitionManager.start(myMovieClip, {type:Squeeze, direction:Transition.IN, duration:2, easing:Elastic.easeOut, dimension:1});
//效果9

//TransitionManager.start(myMovieClip, {type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1});

最后补充以下过渡效果代码可以像我图片里面那样,分行写(习惯了代码洁癖)

也可以像补充的这些代码一样写在一行,完事儿。(在代码习惯比较好的公司可能会被嘛,如果写的代码不整洁的话,特别日本的游戏公司)

延伸阅读:

Tag标签: 手把手教   flashprofessioncc   配合  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规