制作非线性交互的动画.对于一个初学者或是一个实现简单控制的动画创作者来说.行为是最佳选择.
只要你看过了上两节的内容.那到这次你应该对行为的应用有了一定的了解了.我们说应用行为也就是通过基于对话框的方式应用AS脚本.因为行为就是预先编制好的AS代码!通过你一系统附加行为的操作过程后.触发对象上就自动附加了AS代码.免去了你不会编写AS脚本的不足或是给你懒的编写AS脚本的机会.
这一节我们应用行为来控制影片剪辑的深度和应用行为来关联一个控制器或是显示组件.从而方便的加载和控制外部的*.FLV(flash视频文件)和*.MP3(声音文件).
应用行为来控制影片剪辑的深度
那什么是影片剪辑的深度?
我们所说的深度其实就是元件实例在场景中的堆叠顺序.
比如同一图层上放置的两个MC.那么深度大的要比深度小的靠前显示(当两个MC有重叠部分时你会看的更明显).
假如是两个图层上分别放置两个MC.那么靠上图层上放置的MC要比靠下放置的MC深度要大.所以它是靠前显示的.假如你交换了图层上下位置.那么图层上放置的MC深度也会相应变化.
我们举个例子简单说明一下.
在主场景中的同一图层上放置两个MC.分别叫MC1和MC2,把它们相位对置重叠一下.此时总有一个是被遮掩着的(比如例子中的MC2被MC1遮掩着).因为它们各自着有不同大小的深度级别.通过AS代码我们输出它们各自深度级别看一下.如图:
深度是由FLASH自动生成或是由人为的通过AS代码来设定的.从而指定他们在场景中的堆叠顺序(或是称为显示重叠顺序).我们在这里只作一个简要的说明.为的是下面应用行为时你能更好理解.有关深度的更多信息请查看FLASH的帮助.
好了现在我们开始用行为实现MC的深度交换.从而设计一个动态的图片查看效果.(往往也用来制作个性导航栏的.有爱好的朋友可以学完这个例子自己作一个导航栏)
首先看一下选中MC时.行为面板中关于”影片剪辑”的行为有些什么?~
下在这个效果我们就是完全运用有关”影片剪辑”的行为作出来的.
分析一下这个效果:假设我们有一组图片.当鼠标移上去的时候.位于鼠标下的图片就会放大并显示在所有图片之上.也就是说不会被其它的图片遮掩重叠部分.在鼠标移开这个图片后.图片自动缩小到原来尺寸.假如是鼠标移到了其它的图片上.那么这个图片也做相应缩小动画,新移上去的图片作放大运动.
分析好了我们就开始动手做~~~
1.新建一个FLASH文档.导入五张图片.在导入这些图片前我们先给它们分别名一个文件名.(比如:1,2,3,4,5).这样在导入的时候就会一次性将它们都导入到文档中的.点主菜单中的”文件”---“导入”---“导入到舞台”(因为我们要对图片进行编辑,所以先导入到舞台)然后在弹出的对话框中选择要导入的图片.我们选名字为1的图片.确定后.有个flash对话框.如图:
我们选”是”后就将所有要导入的图片全部导入到了舞台上(主场景中),因为有五张图.所以时间轴被拓展了五个帧.分别放置着这几张图.我们选第一帧.然后按下<F8>将图片转换成一个元件(元件类型选”图形”!因为我们还要对它进行编辑.所以最好还是先转成”图形元件”然后一会儿再作成”影片剪辑”).确定后这个图形被转换成一个”图形元件”并被加到了”库”中.然后按下”Delete”将这一帧上的图形删除.(直接点键盘上的Delete键进行删除.删除的是帧上的图形.不是库中的图形.切记啊.呵呵~~~我是不多余了说这话?呵呵)
按同样的方法将其它帧上的图片转成图形元件.并在转换后直接按下Delete键从主时间轴的帧上删除掉这个图形元件.这是全部转换后并作删除操作后的时间轴和库中内容.
然后我们对主时间轴作一下处理.点中第二帧向后托将2—5帧全选中后右键”删除帧”.因为它们没用了.
好了,我们开始下一步.
2.打开”库”将里面的”元件1”托到主场景中.然后按下<F8>将其转换成一个”影片剪辑”.并给它起名叫”MC1”.如图:
确定好双击主场景中的MC1.进入到MC1的编辑窗口中.分别在第5帧处和第10帧处右键”插入要害帧”.
然后选中第5帧,并点击一下该帧放置的图形元件.确保选中的是处于第5帧上的图形元件.接着在属性面板里设置这个图形元件的等比例放大;(此时假如属性面板里的小黑锁头不是工作在等比例状态.请点击它让它成为下图所示的样子).设置宽度比原来宽度大一点.原来是180.现在我们设置为260.(具体数值你实习时自定吧).
这样这个帧上的图形就比原来图形要大.那么我们在1—5帧之间和5—10帧之间右键”创建间补动画”.这就在时间轴上产生了”原图----放大----原图”这么一个动画过程.
但它是从左上角向右和下缩放的.我们要让它中心点不动.四边向外缩放.那么需要改变一下它们的位置.在时间轴中按下”编辑多个帧”,然后再按下”修改绘图纸标记”—选“绘制全部”:如图:
接着按”ctrl+A”,这时将所有要害帧上的元件全部选中了.打开对齐面板(“窗口”—“设计面板”—“对齐”),点如下图所示的两个地方(但此时要保证”相对于舞台选项”是被按下状态.假如不是请将其按下.也是如图所示).这样点击后将使场景中所有的图都位置一个中心点.
假如把这个MC托到主场景后.它会循环播放.并不是我们想要的效果.因为我们要让它在鼠标没移上去的时候为原图:(也就是在第1帧不动).当鼠标移上去的时候它开始放大.并保持放大后也不动:(也就是从第1帧开始播放到第5帧停止.)当鼠标移开后.它又从放大的尺寸变回原图大小尺寸.:(也就是从第5帧播放到第10帧后返回第1帧时停止.)
接下来我们需要手动给1和5帧上设定停止(stop();)命令.我这里直接在动作面板中加入的.当然你也可以使用行为面板来设置.选中”第1帧”---打开行为面板附加”影片剪辑”---“转到帧或标签并在该处停止”对话框中填1,(第5帧同样方法填5).但这样虽然也起到停止作用太感觉还是不好的.所以直接在动作面板中加入stop();吧.
3.接下来作其它图形元件的缩放效果.方法同上.但我们采用了更快速的办法.
在库中名为”MC1”的元件上右键,在弹出的菜单里选”重制”.快速复制一个MC1.但要将这个复制的MC1改名为MC2.再打开MC2的编辑窗口.对里面内容进行修改.
1),在MC2的编辑窗口中选中放置在第1帧上的图形元件.打开属性面板.点”交换”,然后在对话框中选”元件2”,这样确定后就将第一帧上的元件1改成了元件2.
2),其它第5帧和第10帧也用同样的办法交换掉.如图: |
4.重复第3步将其它的MC3和MC4与MC5重制作出来.
这是最后库是内容,并且我们把它们分类放置一下.看着就不乱了..MC1-----MC5分别是5个图片的缩小放大过程.并且里面的AS代码也不用重复输入.
5.好了,我们再新建一个MC.起名叫”组图”,在组图的编辑窗口中,把MC1—MC5全部拖放进来.排列一下位置(先大致调好位置.然后再用键盘上下左右光标键微调)如图:
6.放好位置后,返回到主场景中.把刚才那个”组图”托到主场景中来.并调整一下它在主场景中的位置和大小(比如用变形工具等比例缩放).调整好后就双击这个”组图”MC,再进入到”组图”的编辑窗口.
7.接下来我们就要为这几个MC(MC1---MC5)附加行为了(最好是给它们分别起一个实例名.分别叫做tu1---tu5,这样方便我们以后对它们的操作.).我们只讲给tu1实例附加行为.其它的过程一样.
选中tu1.打开行为面板.在行为面板中增加”影片剪辑”----“移到最前”—弹出对话框中直接确定．因为它默认选择的就是tu1,我们也要的就是tu1.确定后把”事件”修改成”移入时”
上面这步就是我们所说有本例核心内容.深度!!当鼠标移入到这个图的时候,将这个图的深度设置成最大.(也就是最前)这样就保证了同时进行的放大运动后的图不会被其它图片所遮掩.
接下来我们继续给tu1附加行为”影片剪辑”---“转到帧或标签并在该处播放”—在弹出的对话框中填2(当然此时的默认1也可以,但还是跟着本例走吧).确定后将”事件”也改成”移入时”.
继续为tu1附加行为”影片剪辑”---“转到帧或标签并在该处播放”---在弹出的对话框中选”6”确定后修改”事件”为”移出时”.
继续为tu1附加行为”影片剪辑”---“转到帧或标签并在该处播放”---在弹出的对话框中选”6”确定后修改”事件”为”外部释放时”.
上面所附加了四个行为,附加这些行为的意义就是为了形成一个鼠标移入时深度位于最前(最前显示位置)并开始播放tu1实例的第2帧(从tu1中的第1帧到第5帧是一个放大的过程),让tu1实例播放到第5帧时,tu1实例里的stop();就将它停止不动了.一直处于放大状态.
当鼠标移出时或是在图上按下左键并无意识的托到图片外释放时tu1实例就开始从第6帧播放.(从tu1中的第5帧到第10帧是个缩小的过程),并返回播放时停止到第1帧上(因为这帧上有个stop();我们在一开始在动作面板中手动附加的.)
下图是整个tu1实例上附加的行为~
你现在可以测试一下效果,看看鼠标移入和移出tu1(或是外部释入时)实例时的效果.是不是已经成形了啊.好了快点把tu2-tu5实例的行为附加上吧.我们离目标不远啦.
8.通过重复第7步.在其它实例(tu2—tu5)上把上面的四个行为附加上.然后效果就出来了.你可以测试一下.(提示:快速附加行为~因为其它实例上的行为都是与tu1一样的,你可以打开tu1的动作面板将里面的全部代码复制,然后直接粘贴到其它实例上,假如你不会那就一步一步的附加吧~)
9.当第8步全部完成后.通过测试没有问题了就可以将主场景中的”组图”实例美化一下了.因为光秃秃的也不好看吧.这个就自己发挥吧.或是看源文件.假如你还想让移入鼠标时有声音出现.那你也可以通过附加”声音”---“载入库中声音”—在弹出的对话框中把库中声音的链接ID名输入就可以了.但库中必须提前有导入的声音(关于声音的有关行为.第一节中讲到过.自己可以参考一下.)---然后修改”事件”为”移入时”.
10.美化的步骤就略过了.自己发挥自己的想像力吧.这是本例中我作的效果~
源文件:深度交换
应用行为来关联一个控制器或是显示组件.从而方便的加载和控制外部的*.FLV(flash视频文件)和*.MP3(声音文件)
首先,8要害怕这里涉及到的组件.我们也不会去对组件应用任何手动编写的AS代码.只需要从组件面板中托出两个组件就可以了.托~~应该会吧?呵呵~~
首先熟悉一下这两位朋友~ MediaController 和 MediaDisplay组件!点击主菜单上的”窗口”—“开发面板”—“组件”然后从如图位置找到他们.(多更信息请参考自带的帮助~)
|
MediaController 组件提供可让用户与流媒体交互的用户界面控制。控制器具有“播放”、“暂停”和“后退到开始处”按钮以及一个音量控制。它还有一个播放条，指出载入了多少媒体以及播放了多少媒体。可以向前或向后拖动播放条上的播放头滑块，以便快速移动到视频的不同部分。使用行为或动作脚本，您可以轻松地将该组件链接到 MediaDisplay 组件以显示视频流并提供用户控制。为了使 MediaController 和 MediaDisplay 实例一起工作，它们必须倾听对方的事件并做出相应的响应。Flash MX Professional 2004 包含两种行为：“关联控制器”和“关联显示”，这两种行为连接 MediaDisplay 和 MediaController 组件实例。只需这两种行为中的一种即可链接这两种组件。两种行为的最终结果都是一样的.
以上是相关的一些知识!
|
我们作一个效果.用现有的MediaController 和 MediaDisplay组件通过附加行为,轻松的加载并播放外部视频文件(flv)和声音文件(mp3)
(因为是外部加载所以只能下载到本地机子上才能测试---源文件在下面)
1.打开flashMX2004.从组件面板中托出这两个组件.分别直接放到主场景中.并给这两个组件起实例名为控制器(MediaController)与显示(MediaDisplay).注重一点的是MediaDisplay组件托到主场景中后是看不到什么的.只有显示着一个方框轮廓.其实这就是它.分别选中它们两.在属性面板中输入上面给出的实例名.或是自己输入自己想要的名字也可以.
|
2.选中名为”显示”的MediaDisplay组件,再打开”组件检查器”(主菜单中”窗口”—“开发面板”—“组件检查器”),将如图所示的对勾去掉.不让他自动加载播放.并在如图所示的参数里设置你想加载的文件类型(flv或是mp3),我们本例就加载个mp3吧.这个mp3名叫”我是猫大哥”(呵呵~~~这可是我唱的哦……才怪~~)所以我们在如图的URL下输入”我是猫大哥.mp3”
3.选中”控制器”,然后打开行为面板附加”媒体”---“关联显示”—在弹出的对话框里选中名为”显示”的组件实例.确定后事件为”load”(只有一个)
然后确保选中”控制器”实例,打开属性面板设置里面一些参数:如下
activeplayControl参数设置为play这样.第一次点播放按钮后就会音乐响起…ControllerPolicy参数设置为on.这样一打开那么控制器就全部显示.
假如你选中的是名为”显示”的组件就给它附加”媒体”---“关联控制器”
两种方法实现的效果是一样的.设置也是一样的.
4.好了.万事俱备.只欠”我是猫大哥.mp3”音乐.我们把源文件保存.然后在源文件所在的目录下放一个”我是猫大哥.mp3”的声音文件.测试吧.点播放按钮后……哇~~~猫大哥的音乐哦……
源文件:关联
其实这个例子很简单.假如你会AS脚本还可以作出动态加载多个声音文件的效果.假如你会那么你就自己试试吧~祝愿你成功的作出自己想要的播放器!
你也可以改上面”组件检查器”中的文件类型.换成flv.然后在源文件及SWF影片文件同一目录下放置一个flv的文件测试.(注重:swf文件必须与加载的外部文件在同一个目寻下.这样才能够听到.或是一开始你就指定好加载的外部文件的绝对地址,这样就不一定非的放到同一目录了…)
这里需要讲的一点是:有些触发对象的行为并不是直接通过对话框的方式附加好就可以用的.有时要手工稍微调整一下自动生成的代码.比如:假如将”媒体”行为附加到按钮或是MC上.要经过修改代码才能实现.
在这个”媒体”行为中还有两个就是关于线索点导航的行为.这次内容太多了.下次有机会再讲吧.
感谢大家一直支持着我.所以我才会写到第三节..本来想写的更全面,举一些更多更好的例子给大家.但每次内容都很多.应用行为也有时会涉及到更多的相关知识.所以不能够单单的拿出行为面板就可以作出多么多么好的效果.所以我会再努力.努力把行为能够实现的功能更多的告诉大家.并希望大家能够支持我这样作下去……
再次感谢大家~~下次见~~
哦别忘了记的顶哦.还有带上本节范例
压缩包:(内有编译好的教程.本节范例及效果)
~猫大哥~预祝大家圣诞节快乐~
QQ：2693987339(点击联系)购买教程光盘
:
