macromedia
Flash MX
教程商标
Afterburner、AppletAce、Attain、Attain Enterprise Learning System、Attain Essentials、Attain Objects for Dreamweaver、
Authorware、Authorware Attain、Authorware Interactive Studio、Authorware Star、Authorware Synergy、Backstage、
Backstage Designer、Backstage Desktop Studio、Backstage Enterprise Studio、Backstage Internet Studio、Design in
Motion、Director、Director Multimedia Studio、Doc Around the Clock、Dreamweaver、Dreamweaver Attain、
Drumbeat、Drumbeat 2000、Extreme 3D、Fireworks、Flash、Fontographer、FreeHand、FreeHand Graphics Studio、
Generator、Generator Developer's Studio、Generator Dynamic Graphics Server、Knowledge Objects、Knowledge
Stream、Knowledge Track、Lingo、Live Effects、Macromedia、Macromedia M 徽标和图案、Macromedia Flash、
Macromedia Xres、Macromind、Macromind Action、MAGIC、Mediamaker、Object Authoring、Power Applets、Priority
Access、Roundtrip HTML、Scriptlets、SoundEdit、ShockRave、Shockmachine、Shockwave、Shockwave Remote、
Shockwave Internet Studio、Showcase、Tools to Power Your Ideas、Universal Media、Virtuoso、Web Design 101、
Whirlwind 和 Xtra 是 Macromedia,Inc,的商标,可能已经在美国或其它管辖区甚至世界范围内注册。本出版物中提到的其它产品名称、徽标、图案、标题、文字或短语可能是 Macromedia,Inc,或其它实体的商标、服务标志或商品名称,并且可能已经在特定的管辖区甚至世界范围内注册。
第三方信息语音压缩和解压技术由 Nellymoser,Inc,(www.nellymoser.com) 提供许可。
Sorenson? Spark? 视频压缩和解压技术由 Sorenson Media,Inc,提供许可。
本指南包含指向第三方 Web 站点的链接,这些站点不由 Macromedia 控制,Macromedia 不对所链接的任何站点的内容负责。如果要访问本指南提到的第三方 Web 站点,您应自己承担因此而带来的风险。
Macromedia 提供这些链接只是为您提供方便。包含这些链接并不意味着 Macromedia 为这些第三方站点的内容提供担保或承担责任。
Apple 公司免责声明
APPLE COMPUTER,INC,对所附计算机软件包的适销性或用于特定目的的适用性不提供任何明示或暗示的担保。某些州不允许排除暗示的担保。上述排除可能不适用于您。此担保赋予您特定的法律权利。您还可能有其它权利,在不同的州内,这些权利可能不同。
版权所有? 2002 Macromedia,Inc,保留所有权利。未经 Macromedia,Inc,事先书面许可,本手册及其任何部分都不允许拷贝、影印、复制、翻译或转换成任何电子形式或机器可读的形式。
致谢导演:Erick Vera
制片:Wayne Wieseler
撰稿:Jody Bleyle、JuLee Burdekin、Mary Burger、Dale Crawford、Marcelle Taylor
设计指导:Stephanie Gowin、Barbara Nelson
编辑:Rosana Francescato、Lisa Stanziano、Anne Szabla
多媒体设计和制作:Aaron Begley、Benjamin Salles、Noah Zilberberg
印刷设计和制作:Chris Basmajian、Caroline Branch
产品中文化:保捷环球电脑软件公司 (Bowne Global Solutions)、Julia Chen、Michael Dominguez、Cristina Guembe、
Yoshika Hedberg、Tim Hussey、Masayo,Noppe” Noda、Simone Pux、Yoko Shindo、Yuko Yagi
第一版:2002 年 7 月
Macromedia,Inc,600 Townsend St,San Francisco,CA 94103
第 3 章组件教程简介.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,83
组件类型.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,83
查看完成的窗体,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,84
创建窗体.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,84
后续步骤.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,93
目 录第 1 章
Flash MX 教程简介.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,5
基础知识.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,5
查看完成的影片,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,6
分析 stiletto.fla 文件.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,7
定义新文档属性和创建渐变背景.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,12
创建矢量图并为其添加遮罩,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,20
在影片剪辑中补间位图效果,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,30
在运行时载入动态文本.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,37
向按钮添加动画和导航.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,42
添加声音流和事件声音.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,48
组织“库”面板.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,49
测试下载性能,然后发布该影片.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,51
后续步骤.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,55
第 2 章动作脚本教程简介.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,57
观看完成的影片,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,58
初始化影片.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,61
保存并获取信息,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,65
在动态文本框中显示信息,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,67
编写表达式.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,69
控制影片的流向,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,72
创建命令并重用代码.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,73
使用内置对象.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,78
测试影片.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,80
后续步骤.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,82
3
目 录4
第 1 章
Flash MX
教程简介本教程将指导您使用 Macromedia Flash MX 创建精彩的 Web 内容。学完本教程后,您将学会如何设计影片,从打开一个新文档直到将影片发布到 Web 上进行播放。取决于您的经验和功力,学完本教程大约需要 3 个小时左右,您将学会如何完成下列任务:
分析完成的影片
定义文档属性和创建渐变
创建矢量图并为其添加遮罩
在影片剪辑中补间位图效果
载入动态文本
修改按钮和添加导航
添加声音流和事件声音
测试和发布影片建议您按顺序完成本教程包含的八个部分,当然您也可以只选择浏览您感兴趣的部分。如果不按顺序完成此教程,请记住,后面的部分假定您已掌握了前几部分介绍的技巧。
基础知识在开始学习本教程之前,请完成 Flash 帮助中的七课。这些在 Flash 中创作的交互式课程将向您介绍完成本教程所需的概念。课程主题包括以下方面:
Flash MX 入门
Flash 说明
添加和编辑文本
创建和编辑元件
了解图层
创建按钮
创建补间动画
5
要学习课程,请选择“帮助”>“课程”,然后从列表中进行选择。
查看完成的影片您可以打开一个已完成的教程影片,从而更好地理解完成的文件将如何显示出来。
在本节中,您将完成以下任务:
使用属性检查器和影片浏览器分析完成的影片
检查影片剪辑,并认识它与主影片的关系
查看影片中包括的资产类型
1在 Flash MX 应用程序文件夹中,浏览到 Tutorials/FlashIntro 并双击 stiletto.swf,可以在单独的 Flash Player 中打开完成的影片。
已发布的 Flash 影片的扩展名为 SWF;创作环境中的文档的扩展名为 FLA。
2当影片打开时,观察汽车的三个淡入淡出的视图。
您可以在影片剪辑中通过补间位图效果来创建此动画。
3聆听影片放映时连续播放的声音。这就是声音流的范例。
4将指针沿着窗口的右下沿滑过三个按钮,查看指针滑过的效果,并倾听每个按钮中包含的事件声音。
5单击一个按钮,查看它所链接的位置,然后关闭打开的浏览器并返回到 SWF 文件。
6查看完影片之后,单击其关闭框。
第 1 章6
分析文件 stiletto.fla
分析完成的 FLA 文件有助于查看作者是如何设计文档的。要分析该文件,您可以查看对象的属性、查看时间轴和舞台、查看库资产,以及使用影片浏览器。
1在 Flash 中,选择“文件”>“打开”。定位到 Flash 应用程序文件夹,打开 Tuto r i als/
FlashIntro/stiletto.fla。
现在您可以在创作环境中查看完成的教程影片了。
2要查看主时间轴中的所有图层,请向下拖动分隔舞台和时间轴的栏。
3在时间轴上,解除锁定 Copy 图层和 Images 图层。
拖动分隔舞台和时间轴的栏
Flash MX 教程简介7
查看文档属性属性检查器使您可以查看所选对象的规格。规格取决于所选对象的类型。例如,如果选择了文本对象,将会显示查看和修改文本属性的设置。
1如果属性检查器没有打开,请选择“窗口”>“属性”。
2如果需要,在舞台中向下滚动,然后在完成的 SWF 文件中选择显示描述性文本的矩形块。文本不会出现在 FLA 文件中,因为它是从外部 TXT 文件载入到动态文本字段中的。
在属性检查器中,可以查看文本的大小、样式和颜色,以及其它属性。
如果属性检查器没有完全展开,请单击右下角的白色三角。
3在舞台中,选择汽车。
影片剪辑设置将代替文本设置。影片剪辑是带有各自时间轴的元件。您可以将它们看作是影片中的影片。
文本框第 1 章8
查看影片剪辑现在,您将打开元件编辑模式,查看影片剪辑的时间轴。
1在舞台上,双击汽车的影片剪辑。
就像在“创建补间动画”一课中学习的一样,您可以在关键帧中定义动画中的更改。当滚动时间轴时,请注意哪些图层中有关键帧,以及哪些帧是关键帧。
包括内容的起始关键帧和中间关键帧在时间轴中以实心圆表示,结束关键帧则显示为小矩形框。
2在时间轴中,选择播放头,然后沿着帧慢慢拖动它。
随着时间轴中的更改,观察舞台中动作的相应变化。随着播放头的移动,影片也就顺序播放。
您可以向影片中添加动作脚本(Flash 脚本撰写语言),以使播放头跳到特定的帧。
3看完影片剪辑后,执行以下一种操作即可回到主影片:
选择“编辑”>“编辑文档”。
单击“返回”按钮。
单击舞台上的“场景 1”。
查看库资产
“库”面板包含文档中的元件以及导入对象。
1如果“库”面板没有打开,请选择“窗口”>“库”。
2如果需要,拖动“库”面板将其放大,以便查看库中的对象。
3如果 Artwork 文件夹没有展开,请双击它查看该文件夹中的对象。
4单击 view1.png,在“库”面板的顶部预览区域中查看该图像。
5展开“库”面板中的其它文件夹,查看文档中包括的资产,例如按钮和影片剪辑。
Flash MX 教程简介9
6查看完资产之后,请关闭“库”面板。
用影片浏览器分析影片结构影片浏览器有助于排列、定位和编辑媒体。影片浏览器通过分层树结构提供有关影片的组织和流的信息,这在分析别人创作的影片时特别有用。
1如果影片浏览器还没有打开,请选择“窗口”>“影片浏览器”。
2如果需要,扩大影片浏览器,以便查看窗格中的树形结构。
影片浏览器的过滤按钮用于显示或隐藏信息。
第 1 章10
3单击影片浏览器标题栏中的弹出菜单,确认“显示影片元素”和“显示元件定义”处于选中状态。
4在影片浏览器的顶部,取消选择“显示帧和图层”按钮。确认选中的过滤按钮只有“显示文本”、“显示按钮、影片剪辑和图形”、“显示动作脚本”和“显示视频、声音和位图”。
5检查该列表,查看影片中包括的一些资产,并了解它们与其它资产之间的关系。
6要展开一个对象或类别,请单击其名称左边的加号 (+) 按钮
7选择“显示帧和图层”过滤按钮。向下滚动到“元件定义”类别。展开该类别,双击 Car
Animation 影片剪辑。
现在,您已经进入影片剪辑的元件编辑模式。
Flash MX 教程简介11
8在影片浏览器中,选择并展开 Car Animation 类别,展开 View 3 Fade 图标,然后双击 Frame
60。
在影片剪辑的时间轴中,播放头会移动到 View 3 Fade 图层的第 60 帧处。
要查看分层结构树中列出的项目,请单击相应的图标。如果单击帧图标,在时间轴中播放头将移动到该帧处。如果单击资产,例如位图图像,则属性检查器将显示该图像的设置。双击代表元件的图标将打开元件编辑模式。
9关闭影片浏览器。要关闭文档,请选择“文件”>“关闭”。
如果对文件进行了更改,请不要保存这些更改。
定义新文档属性和创建渐变背景要学习在 Flash 中创建影片,请从流程的第一步开始,即打开新文件。然后,通过完成本部分,
您将学会如何完成下列任务:
打开一个新文件并定义文档属性
创建渐变背景并使之变形打开新文件现在,您将创建自己的教程影片。
1选择“文件”>“新建”。
2选择“文件”>“另存为”。
3将该文件命名为 mystiletto.fla,并将其保存在 Flash MX 应用程序文件夹的 Tut o r ial s/
FlashIntro/My_Stiletto 子文件夹中。
注意,在完成教程的过程中,请记住经常保存您的工作。
定义文档属性配置文档属性是各类创作中的第一步。可以使用属性检查器和“文档属性”对话框来指定影响整个影片的设置,例如每秒帧数 (fps) 播放速度,以及舞台大小和背景色。
1如果属性检查器没有打开,请选择“窗口”>“属性”。在属性检查器中,确认“帧频”文本框中的数值为 12。
影片的播放速度为每秒 12 帧,这是在 Web 上播放动画的最佳帧频。
注意,如果属性检查器没有完全展开,请单击右下角的白色三角。
第 1 章12
2“背景色”框指示舞台的颜色。单击“背景色”框上的向下箭头,然后在颜色样本上“移动滴管工具”,以便在十六进制文本框中查看它们的十六进制值。
3找到并单击灰色样本,其十六进制值为 999999。
4要调整舞台的大小,请单击“大小”按钮,它用于指示舞台的大小。在“文档属性”对话框中,在第一个“尺寸”文本框中键入 640 px,在第二个“尺寸”文本框中键入 290 px。确认在弹出菜单中选择的是“像素”,然后单击“确定”。
舞台尺寸将发生更改,以反映 640 x 290 像素的新设置。
指定网格设置在舞台中,您可以沿着水平和垂直网格线对齐对象。即使在网格不可见时,也可以将对象与网格对齐。现在,要修改水平网格线之间和垂直网格线之间的距离,并创建与舞台边界对齐的网格。
1选择“查看”>“网格”>“编辑网格”。
2在“网格”对话框的网格宽度文本框中键入 10 px,在网格高度文本框中键入 10 px。
3选择“对齐网格”,并确认没有选择“显示网格”。
这样,即使网格是不可见的,对象也将与网格对齐。
选择这种灰度十六进制文本框
Flash MX 教程简介13
4确认“对齐精确度”选择的是“正常”,然后单击“确定”。
对齐精确度决定对象与网格线之间必须多近时才能将它们对齐。
创建渐变背景渐变显示颜色的细微变化,或是两种或多种颜色之间的过渡。在完成的教程文件中,背景从黑色渐变为深蓝色,其中包含透明区域,可以显示部分灰色舞台。可使用混色器得到这种效果。
注意,尽管渐变可以在影片中实现有趣的效果,但是过度使用将会影响计算机处理器的速度,并降低动画的播放速度。在设计影片时,要同时考虑艺术效果和性能要求,这样才能最合理地使用渐变。
绘制矩形在教程的开始,您已经创建了与舞台对齐的网格,并允许将对象与网格线对齐。现在要绘制一个矩形,使其与舞台边的网格区域对齐。
1在舞台右侧上方的弹出菜单中,输入 75%,以便查看整个舞台。
此设置指示舞台的放大或缩小视图。该设置不会影响影片中舞台的实际大小,实际大小是在
“文档属性”对话框中指定的。
2在工具箱中,选择“矩形工具”。
3在工具箱中,单击“笔触颜色”控件。选择“没有笔触”(调色板上带有红色对角线的按钮)。
所选的形状填充颜色并不重要;您可以随时更改该颜色。
第 1 章14
4从舞台的左上角开始,拖到舞台的右下角,拖出一个覆盖整个舞台的矩形。
释放指针后,该矩形将沿着隐藏的网格与舞台的边界对齐。
注意,在完成本教程的过程中,您会发现能够撤消所作的更改非常有用。Flash 可以撤消刚才所作的几次更改,这取决于在“首选参数”中设置的撤消级别数。要进行撤消,请选择“编辑”>“撤消”,或者按下 Control+Z 组合键
(Windows) 或 Command+Z 组合键 (Macintosh)。反之,您可以重做已经撤消的动作,方法是选择“编辑”>“重做”,或者按下 Control+Y 组合键 (Windows) 或 Command+Y 组合键 (Macintosh)。
指定渐变的颜色深蓝色是第一种要添加到渐变中的颜色。
1在工具箱中,选择“箭头工具”。在舞台中,单击矩形内部以选择填充。
在画矩形时,属性检查器会显示“矩形工具”的属性。当您选择已经创建的形状时,属性检查器会显示该形状的属性。
2如果混色器没有打开,请选择“窗口”>“混色器”。
3要展开混色器,请单击面板标题栏中的白色箭头。
单击此处展开该面板
Flash MX 教程简介15
4如果混色器没有完全展开,请单击面板右下角的箭头。
5在“填充样式”弹出菜单中,选择“放射状”。
6单击渐变栏左侧的渐变滑块将它选中。
7单击窗口左上角中的颜色框,打开调色板。使用以下方法之一选择深蓝:
在十六进制值文本框中键入 000066,然后按下 Enter 或 Return 键。
将滴管在颜色样本上移动,找到深蓝色(十六进制值为 000066),然后单击该样本以选择它。
渐变滑块渐变栏单击这种深度的蓝色第 1 章16
更改 Alpha 值在混色器中,“Alpha”文本框指示颜色的透明度,0% 表示颜色是完全透明的,而 100% 则表示颜色是完全不透明的。将 Alpha 值指定为 0%,从而创建一个从深蓝色到黑色的渐变,在渐变的透明区域中显示灰色舞台。
在混色器中,在“Alpha”文本框中键入 0 后按下 Enter 或 Return 键,或者将 Alpha 滑块移动到 0。
添加第二种渐变色现在,您将向渐变中添加黑色。
1在混色器中,单击渐变栏右侧的渐变滑块以选中它。
2单击颜色框,打开调色板,选择黑色(十六进制值为 000000)。
请记住,您可以在十六进制文本框中键入十六进制值,然后按下 Enter 或 Return 键,也可以查找并选择具有相同十六进制值的颜色样本。
Flash MX 教程简介17
使渐变填充变形如果要使对象变形,您可以旋转、缩放或倾斜它。您可以使用“填充变形工具”使对象变形。
1在工具箱中,选择“填充变形工具”。在舞台中,单击该矩形内的任意位置。
舞台周围会显示一个椭圆,指示渐变的形状和位置。该椭圆有用于控制放射状渐变的位置、宽度、缩放和旋转的控件。
2将中心控件拖到舞台的左部,使其距舞台左侧边界的距离大约为 1/3 处,如下图所示。
在更改椭圆的形状和位置时,舞台中颜色过渡的形状和位置也随之更改。
宽度缩放旋转中心位置第 1 章18
3向左拖动椭圆上的方形手柄(它控制渐变的宽度),使椭圆变窄;椭圆的大体形状如下图所示。
4向右拖动中间的环形手柄(它控制着渐变大小),使椭圆变大,如下图所示。
Flash MX 教程简介19
5向左拖动下面的环形手柄(它控制椭圆的旋转),使椭圆旋转成如下图所示的角度。
命名和锁定图层在时间轴中,渐变形状显示在图层 1 上,当前它是您文档中唯一的图层。在准备向舞台中添加和移动其它对象之前,要重命名该图层,并将其锁定。在本教程的下一部分中,您将创建一个新图层。
正如您在“了解图层”一课中学习的一样,通过锁定图层,可以确保您或其他用户不会意外地更改该图层上的对象。
1在时间轴上,双击图层 1 的名称,然后键入 Background 以重命名该图层。
2在图层名称之外单击,然后单击挂锁图标锁定该图层。
创建矢量图并为其添加遮罩在 Flash 中作图时,可以创建矢量图,它是直线、曲线、颜色和位置的数学表达。矢量图与分辨率无关;您可以将该矢量图缩放到任意大小或以任何分辨率显示,这都不会影响清晰度。另外,
矢量图与可比较的位图图像相比,下载速度更快。
完成的文件中包含渐变以及背景形状。您可以使用“椭圆工具”创建形状。
在本部分中,您将学习如何完成下列任务:
添加图层
创建并“剪切”形状
为包含形状的图层添加遮罩第 1 章20
要完成本部分,您可以继续处理 mystiletto.fla 文件,也可以浏览到 Flash MX 应用程序文件夹,
打开 Tutorials/FlashIntro/stiletto2.fla。如果您要使用 stiletto2.fla 文件,请用一个新名称将其保存到 My_Stiletto 文件夹中,以确保不改变原文件。
添加图层您可以添加一个新图层,然后在该图层上绘制形状,而不用在背景图层上创建形状。
1要添加新图层,请选择“插入”>“图层”,或单击“插入图层”按钮。将新图层命名为
Shapes。
2在工具箱中,选择“椭圆工具”。
3在属性检查器中,从“笔触样式”弹出菜单中选择“极细”。单击“笔触颜色”控件。在调色板中,选择灰色,十六进制值为 999999。
请记住,您可以在十六进制文本框中输入十六进制值,也可以查找并单击具有相同十六进制值的颜色样本。
4如果混色器没有打开,请选择“窗口”>“混色器”。在“填充样式”弹出菜单中,选择“纯色”。单击“填充颜色”控件以选择它。在“红”字段中,键入 109。在“绿”和“蓝”文本框中,键入 45,然后按下 Enter 或 Return 键。
这样就指定了一个颜色中红色、绿色和蓝色所占量的值。
“插入图层”按钮
Flash MX 教程简介21
5在时间轴中,确认选择了 Shapes 图层。在舞台中,按住 Shift 键拖画,强制“椭圆工具”画出一个圆,该圆从舞台上的画布区域开始,一直扩展到舞台下的画布区域。
注意,如果操作失误,请选择“编辑”>“撤消”,然后重试。
6在工具箱中选择“箭头工具”,然后双击舞台上的圆,以便选择填充和笔触。
7如果“变形”面板没有打开,请选择“窗口”>“变形”。
8要展开“变形”面板,请单击左上角的白色箭头。选择“倾斜”,并在“水平倾斜”文本框中键入 20.0,然后按下 Enter 或 Return 键。
第 1 章22
您画的圆将更改为一个倾斜的椭圆。
创建相同形状并使之变形您现在将创建一个相同的椭圆并使之变形。
1在舞台中椭圆的填充和笔触仍都处于选中状态的情况下,选择“编辑”>“复制”。
Flash MX 教程简介23
2在属性检查器中,使用“填充颜色”控件选择黑色。
3在工具箱中,选择“任意变形工具”。
在复制的椭圆周围将出现一个带有手柄的辅助线。
4将指针移动到某个角的手柄上,直到出现一个双箭头指示器。将角手柄向内拖动,使椭圆变小。确认内部椭圆的笔触没有接触到外部椭圆的笔触。
第 1 章24
5将指针移动到角手柄上,直到指针变为旋转指示器。将旋转指示器向左侧拖动,使该椭圆大约旋转到下图所示的位置。
创建该副本的“剪切”图如果在同一图层的一个形状之上创建了另一个形状,这两个形状的颜色不同,而且没有组合在一起,则上面的形状可以从下面的形状中“剪切”出一个区域。您将删除复制的椭圆,从而查看剪切效果。
1在复制的椭圆周围显示“任意变形工具”辅助线的情况下,单击舞台或画布上这两个形状之外的任何位置,然后单击内部椭圆的填充。按下键盘上的 Delete 键,删除该填充。
Flash MX 教程简介25
2现在的椭圆具有外部和内部两条笔触。使用“箭头工具”,单击椭圆最外围的笔触以选中它,
然后按住 Shift 单击最内围的笔触把它也选中。把笔触向填充的右侧稍微拖动一下,如下图所示。
3由笔触分为两部分的区域中每块填充颜色现在都代表一个离散的片断,您可以分别将它们着色。选择形状填充的一个区域,然后使用混色器将填充颜色更改为某个深度的棕色(红色值为 117,绿色值为 78,蓝色值为 53)。如果愿意,可以重复此步骤将另一块填充区域更改为较浅的棕色,如下图所示:
第 1 章26
4选择“任意变形工具”。在椭圆背景形状四周拖动指针,选中所有形状,然后拖动辅助线的右角手柄扩大这些形状,如下图所示。
5在舞台中拖动形状,以使部分曲线显示在舞台的左上角和右侧。
注意,在完成教程的过程中,请记住经常保存您的工作。
Flash MX 教程简介27
创建遮罩您在 Shapes 图层创建的图形超出了舞台,扩展到了画布区域。尽管画布区域不会出现在发布的影片中,但是在创作环境中,超出舞台的图形会使人感到杂乱。您可以擦除进入画布的那部分形状,但是还有一个更好的办法,就是在舞台上应用遮罩,以使只有遮罩下的区域(在本例中为整个舞台)才是可见的。通过这种方法,如果您想返回到形状来修改它们,它们将是完好的。
1在 Shapes 图层处于选中状态时,在时间轴中添加一个新图层,并将其命名为 Mask。
2在工具箱中,选择“矩形工具”,画一个矩形,范围从舞台的左上角扩展到右下角。
此矩形就是遮罩的形状。矩形下的任何内容都是可见的。
第 1 章28
3右击 (Windows) 或按住 Control 键并单击 (Macintosh) 时间轴中 Mask 图层的名称,然后从上下文菜单中选择“遮罩层”。
该图层将转换为遮罩层,由一个向下箭头图标表示。它下面紧挨的图层将链接到遮罩层,其内容会显示在遮罩的填充区域上。被蒙住的图层名将会缩进,其图标将更改为向右的箭头。画布上的图形不再显示在舞台中。
必须锁定遮罩层,才能显示出遮罩效果。要编辑形状,可以解锁 Mask 和 Background Shapes
图层。编辑完图形后,请再次锁定这些图层以调用遮罩。
4保存文件。
Flash MX 教程简介29
在影片剪辑中补间位图效果在 Flash 中除了可以创建矢量图之外,还可以将位图图像(这种图像使用像素显示图形)导入
Flash 影片,从而应用不同的颜色效果。在本部分中,您将完成下列任务:
导入位图图像
修改位图压缩
创建和编辑影片剪辑元件
补间位图效果实现汽车视图的淡入淡出要完成本部分,您可以继续处理 mystiletto.fla 文件,也可以浏览到 Flash MX 应用程序文件夹,
打开 Tutorials/FlashIntro/stiletto3.fla。如果您要使用 stiletto3.fla 文件,请用一个新名称将其保存到 My_Stiletto 文件夹中,以确保不改变原文件。
向库中导入图像在向 Flash 中导入文件时,可以直接将其导入库中。
1在时间轴中,添加一个新图层,并将其命名为 Images。
2选择“文件”>“导入到库”。
当选择“导入到库”而不是“导入”时,必须先将图像放到舞台中,然后才会显示出来。
3浏览到 Flash MX 应用程序文件夹中的 Tutorials/FlashIntro/Assets 文件夹,选择 view1.png,
然后按住 Shift 键并单击 view2.png 和 view3.png,从而选定这三幅图像。单击“打开”。
4在“Fireworks PNG 导入设置”对话框中,单击“作为单个扁平化的位图导入”,然后单击
“确定”。
这三幅图像现已添加到库中。
第 1 章30
修改位图压缩在导入图像时,可以检查和修改图像的压缩设置。尽管压缩图像可以减少影片文件的大小,但是也会影响图像的质量,我们的目标是要在压缩设置和图像质量之间取得最佳平衡。
1如果“库”面板没有打开,请选择“窗口”>“库”。如果需要,扩大该窗口,查看导入的三个文件。
2双击 view1.png 文件。
其默认选择是 JPEG 压缩。
3在“压缩”弹出菜单中,选择“无损 (PNG/GIF)”以获得较高的图像质量。
4要测试图像使用新设置的显示效果,请单击“测试”。如果需要,将该汽车图像拖到预览窗口的视图中。预览完图像后,单击“确定”。
5返回到“库”面板。双击 view2.png,重复第 3 步,然后单击“确定”。
6在“库”面板中,双击 view3.png,指定“无损 (PNG/GIF)”,然后单击“确定”。
Flash MX 教程简介31
创建影片剪辑元件在完成的文件中,电动汽车的三个视图在打开的场景中会呈现淡入淡出效果。此效果可以通过创建影片剪辑元件来实现,该元件的时间轴必须与主时间轴无关。然后,您需要补间这三个汽车视图之间的 Alpha 透明度,从而创造出淡入/淡出的效果。要开始创造这种效果,您需要创建影片剪辑。
1在时间轴中 Images 图层仍处于选中状态的情况下,将 view1.png 对象从“库”面板中拖到舞台中,将汽车放在渐变背景最淡的区域中。
2选择“插入”>“转换为元件”,或按下 F8。
3在“转换为元件”对话框中,将该元件命名为 Car Animation。确认选择了“影片剪辑”,
并且在“注册”指示符选择了中心方框,然后单击“确定”。
和其它 Flash 对象一样,位图也具有用于定位和变形的注册点。当您在影片剪辑中对齐这三个汽车视图时,所有这三个视图都将相对于中心注册点的位置进行对齐。
编辑元件要查看影片剪辑的时间轴,必须处于元件编辑模式。通过在舞台中或在“库”面板中双击元件,
即可打开元件编辑模式。
1在舞台中,双击汽车打开元件编辑模式。
元件名称将显示在画布区域之上,还有一个可以返回到主影片的“场景 1”链接。
在元件编辑模式中,您现在会看到影片剪辑的时间轴,而不是主影片的时间轴。
2将 Layer 1 重命名为 View 1 Fade。
3您在舞台中看到的汽车是 Car Animation 元件中的位图,而不是其中的元件。通过在舞台中选择该汽车,然后按下 F8,可以使之成为元件。
注册点第 1 章32
4在“转换为元件”对话框中,将该元件命名为 View 1 Car,然后确认“影片剪辑”处于选中状态。
5确认在“注册”指示符中选择了中心方块,然后单击“确定”。
6在时间轴上水平滚动,一直到第 105 帧。选择该帧,然后选择“插入”>“关键帧”,或者按下 F6 添加关键帧。
“当前帧”指示器会显示所选的帧。
7向第 25 帧和第 35 帧添加关键帧。
8向第 34 帧添加关键帧,然后在图层上单击第 36 帧和第 104 帧之间的任何地方,并按下键盘上的 Delete 键。
在第 35 帧中将出现一个空的关键帧,并且从第 35 帧开始,汽车不会出现在舞台中。
注意,如果因为在添加关键帧时出现错误而要删除这些关键帧,请选择一个或多个帧,然后右击 (Windows) 或按住
Control 键并单击 (Macintosh),再从上下文菜单中选择“清除关键帧”。
补间位图效果创建位图效果补间类似于创建直接的动画补间:指定起始关键帧和结束关键帧的设置,然后为这两个帧和它们之间的帧指定补间。Flash 在动画的第一个关键帧和最后一个关键帧之间创建过渡动画。
1在 Car Animation 时间轴中,选择第 34 帧,然后单击舞台上的 View 1 Car,打开显示影片剪辑属性的属性检查器。
当前帧
Flash MX 教程简介33
2在属性检查器的“颜色”弹出菜单中,选择“Alpha”。在“Alpha 数量”弹出菜单中,可以在文本框中键入 0% 并按下 Enter 或 Return 键,或使用弹出滑块选择 0%。
3在时间轴中,选择第 25 帧和第 34 帧之间的任意帧。在属性检查器中,从补间弹出菜单中选择“动作”。
此时会出现一个带有实线的箭头横跨补间的关键帧。关键帧之间的虚线表明没有正确地完成补间,这经常是由于缺少开始或结束关键帧。
淡入第二辆汽车当 View 1 Car 淡出时,汽车的另一个视图应该淡入。
1向 Car Animation 时间轴中添加新图层,并命名为 View 2 Fade。
2在 View 2 Fade 图层上,向第 25 帧添加一个关键帧。
3在播放头仍位于第 25 帧的情况下,将 view2.png 从“库”面板拖到舞台中。
4如果“信息”面板没有打开,请选择“窗口”>“信息”。确认在“注册”指示符中选择了中心方框,然后在 X 坐标文本框中键入 0,在 Y 坐标文本框中也键入 0。按下 Enter 或
Return 键。
属性检查器也有 X 和 Y 文本框;但是,这些坐标是相对于影片剪辑左上角的注册点的。
边框矩形第 1 章34
5选择舞台上的 view2.png,然后按下 F8 键使它成为一个元件。在“转换为元件”对话框中,
将该元件命名为 View 2 Car。确认选中了该影片剪辑,然后单击“确定”。
6在影片剪辑属性检查器中,从“颜色”弹出菜单中选择“Alpha”,并在“Alpha 数量”文本框中键入 0%。
7向 View 2 Fade 图层的第 35 帧中添加一个关键帧。
8在舞台上,单击透明汽车的边框矩形的内部。在影片剪辑属性检查器的“Alpha 数量”文本框中输入 100%。
9在 View 2 Fade 图层上,选择第 25 帧和第 34 帧之间的任意帧。在属性检查器中,从“补间”
弹出菜单中选择“动作”。
淡出第二辆汽车现在您将创建淡出第二辆汽车的动画。
1在 View 2 Fade 图层上,向第 60 帧添加一个关键帧。
2在 View 2 Fade 图层上,向第 70 帧添加一个关键帧,再向第 69 帧添加一个关键帧。
3选择 View 2 Fade 图层第 69 帧中的关键帧。在舞台上选择 View 2 Car,并使用属性检查器选择 0% 的 Alpha 透明度。
4在 View 2 Fade 图层上,选择第 60 帧和第 68 帧之间的任意帧。在属性检查器中,从“补间”
弹出菜单中选择“动作”。
5单击 View 2 Fade 图层上第 71 帧和第 105 帧之间的任意帧,然后按下 Delete 键。
注意,在完成教程的过程中,请记住经常保存您的工作。
Flash MX 教程简介35
淡入第三辆汽车当第二辆汽车淡出时,第三辆汽车将会淡入。您现在将创建该动画。
1在 View 2 Fade 图层处于选中状态时,向时间轴添加一个新图层,并将它命名为 View 3
Fade。
2在 View 3 Fade 图层上,向第 60 帧添加一个关键帧。
3在第 60 帧仍处于选中状态时,将 view3.png 从“库”面板拖到舞台中。使用“信息”面板
(如果该面板关闭,请选择“窗口”>“信息”)将 X 和 Y 坐标都指定为 0,然后确认注册点居中,处理方法和处理 view2.png 一样。
4选择舞台上的 view3.png,然后按下 F8 键使它成为一个元件。在“转换为元件”对话框中,
将该元件命名为 View 3 Car。确认选中了该影片剪辑,然后单击“确定”。
5在属性检查器中,从“颜色”弹出菜单中选择“Alpha”,并在“Alpha 数量”文本框中键入 0%。
6向 View 3 Fade 图层的第 70 帧中添加一个关键帧。
7在舞台上,选择“View 3 Car”的边框矩形的内部。在属性检查器的“Alpha 数量”文本框中输入 100%。
8在 View 3 Fade 图层上,选择第 60 帧和第 69 帧之间的任意帧。在属性检查器中,从“补间”
弹出菜单中选择“动作”。
淡出第三辆汽车现在您将创建淡出第三辆汽车的动画。
1在 View 3 Fade 图层上,向第 95 帧和第 105 帧添加一个关键帧。
2在 View 3 Fade 图层的第 105 帧处于选中状态时,选择舞台上的 View 3 Car,然后使用属性检查器选择 0% 的 Alpha 透明度。
3在 View 3 Fade 图层上,选择第 95 帧和第 104 帧之间的任意帧。在属性检查器中,从“补间”弹出菜单中选择“动作”。
第 1 章36
淡入第一辆汽车当第三辆汽车淡出时,第一辆汽车必须淡入才能完成动画。
1在 View 1 Fade 图层上,向第 95 帧添加一个关键帧。
2在第 95 帧仍处于选中状态时,将 View 1 Car 影片剪辑(不是 view1.png)从“库”面板拖到舞台中。
3在“信息”面板的 X 坐标文本框中键入 0,在 Y 坐标文本框中也键入 0。按下 Enter 或 Return
键。
4在属性检查器中,从“颜色”弹出菜单中选择“Alpha”,并在“Alpha 数量”文本框中输入 0%。
5选择 View 1 Fade 图层的第 104 帧。
6在舞台上,单击 View 1 Car 影片剪辑的边框矩形的内部。在属性检查器的“Alpha 数量”文本框中输入 100%。
7在 View 1 Fade 图层上,选择第 95 帧和第 104 帧之间的任意帧。在属性检查器中,从“补间”弹出菜单中选择“动作”。
注意,在完成教程的过程中,请记住经常保存您的工作。
测试影片在创作过程中,可以随时测试影片作为 SWF 文件播放时的效果。
1保存影片,然后选择“控制”>“测试影片”。
Flash 会导出您的影片的 SWF 拷贝。
在 SWF 影片中,动画会自动循环播放。
2当查看完影片之后,单击 SWF 文件的关闭框即可关闭它。在 Flash 文档中,选择“编辑”>
“编辑文档”或单击“场景 1”返回到主时间轴。
在运行时载入动态文本在“添加和编辑文本”课程中,您已经练习了如何在舞台上直接键入文本。您还可以将影片设计为包含外部文件的文本。实现此目的最方便的方法之一是使用 loadVariables 动作,在运行时将文本从文本文件载入到动态文本字段中。在 FLA 文件中,可以指定动态文本字段的文本属性,如字形、字号和颜色。将文本保留在外部文件中的优点之一是任何要修改文本的用户都可以处理该文本文件,而不用处理 FLA 文件。
在本部分中,您将学习如何完成下列任务:
导入和对齐徽标
创建动态文本字段
使用属性检查器分配文本变量名
使用 loadVariables 动作从外部文件中载入文本
Flash MX 教程简介37
要完成本部分,您可以继续处理 mystiletto.fla 文件,也可以浏览到 Flash MX 应用程序文件夹,
打开 Tutorials/FlashIntro/stiletto4.fla。如果您要使用 stiletto4.fla 文件,请用一个新名称将其保存到 My_Stiletto 文件夹中,以确保不改变原文件。
导入徽标在创建动态文本字段之前,您将导入徽标,该徽标是一个 Macromedia FreeHand 文件,Flash 会在时间轴上自动为该徽标添加一个图层。
1在时间轴中,选择 Images 图层,然后在其上添加一个新图层。将新图层命名为 Copy。
2在 Copy 图层处于选中状态时,选择“文件”>“导入”。
在本教程前面的部分,您已经将对象导入到库中。现在您将导入徽标,这样它就能出现在舞台中。
3在 Flash MX 应用程序文件夹中,浏览到 Tutorials/FlashIntro/Assets 文件夹,单击
logo.fh10,然后单击“打开”。
4在“FreeHand 导入”对话框中,确认已经选中了“场景”、“图层”和“全部”。还要确认选中了“包含背景图层”和“维持文本块”,然后单击“确定”。
5在时间轴中,Flash 创建了一个名为 Logo 的图层。拖动 Logo 名称,将该图层移动到 Copy 图层的下面。
6您可以为该徽标指定舞台坐标。在属性检查器中,当徽标处于选中状态时,在 X 文本框中键入 10,在 Y 文本框中键入 20。然后按下 Enter 或 Return 键。
第 1 章38
7在时间轴中,锁定 Logo 图层。
创建动态文本字段现在,您将创建一个动态文本字段。您将指定在运行时载入到字段中的可变文本,而不是向字段中键入文本。
1在时间轴中,选择 Copy 图层。在工具箱中,选择“文本工具”。在属性检查器中,从“文本类型”弹出菜单中选择“动态文本”。
2在“字体”弹出菜单中,选择“_sans”。
“_sans”是一种适用于多种计算机平台上显示的小文本的设备字体。有关设备字体的详细信息,请参阅“帮助”>“使用 Flash”下面的“使用设备字体(仅限水平文本)”。
3在“磅值”文本框中,键入 12。
4单击“文本(填充)颜色”框,并选择黄色,它的十六进制值为 FFCC00。
5在“线条类型”弹出菜单中,选择“多行”,它用于将要换行的多行文本。
6在舞台上,单击徽标的下方。拖动指针创建一个与徽标组合在一起的文本字段,其宽度为徽标文本的宽度,其高度大致相当于垂直线的高度,如下图所示。
“线条类型”弹出菜单
“文本类型”弹出菜单
“字体”弹出菜单
“磅值”文本框
Flash MX 教程简介39
7在属性检查器中的“变量”文本框中键入 textField。
该文本文件将会载入到动态文本字段中,它包含命名变量的文本:textField=,如下所示。
在“变量”文本框中输入此名称,就是指定影片将载入的变量。
使用 loadVariables 动作载入文本
loadVariables 动作包含指定可变文本路径的参数。该文本在 Tutorials/FlashIntro/Assets 文件夹下名为 copy.txt 的文件中。
1在时间轴中,添加一个新图层,并将其命名为 Actions。如果需要,将 Actions 图层拖到时间轴的顶部。
将动作保留在时间轴的顶层上是一个好习惯。
2如果“动作”面板没有打开,请选择“窗口”>“动作”。如果需要放大“动作”面板,可以单击标题栏中的白色箭头以扩展窗口,并拖动面板的右下角来查看动作工具箱和脚本窗格。
显示的“动作”面板的类型取决于您要向其中添加动作的对象。举例来说,如果选择了帧,
“动作”面板就会显示帧动作。如果选择了按钮,“动作”面板则会显示按钮动作。
第 1 章40
3单击面板标题栏右上角的三角形显示弹出菜单。确认选中了标准模式,而不是专家模式。
专家模式提供了一些对熟悉动作脚本的用户有用的功能。在标准模式中,参数字段和控件可以引导您创建动作脚本。
4在动作工具箱中,选择“动作”>“浏览器/网络”,然后双击 loadVariables。
动作脚本则会添加到脚本窗格中。该动作的参数出现在脚本窗格的上方。
选项菜单按钮动作工具箱脚本窗格
Flash MX 教程简介41
5在 URL 文本框中,键入该文本文件的路径:../assets/copy.txt。
测试影片
保存您的影片,然后选择“控制”>“测试影片”。
您还可以按下 Control+Enter (Windows) 或 Command+Return (Macintosh) 组合键。
向按钮添加动画和导航当您指定新元件为按钮时,Flash 会为按钮状态创建时间轴。在“创建按钮”课程中,您已经学习了如何更改按钮状态内的形状的填充颜色。在本部分中,您将学习有关修改按钮的更多知识,
包括向按钮添加动画。
在本部分中,您将学习如何完成下列任务:
从其它 FLA 文件中导入库
对齐按钮
向按钮状态添加动画
向按钮添加导航,以便链接到 Web 站点
使用“启用简单按钮”功能
添加按钮导航要完成本部分,您可以继续处理 mystiletto.fla 文件,也可以浏览到 Flash MX 应用程序文件夹,
打开 Tutorials/FlashIntro/stiletto5.fla。如果您要使用 stiletto5.fla 文件,请用一个新名称将其保存到 My_Stiletto 文件夹中,以确保不改变原文件。
第 1 章42
导入其它 FLA 文件的库您将在影片中使用的按钮位于其它 FLA 文件的库中。要使用按钮,要将包含那些按钮的 FLA 文件以库的形式打开。
1在“库”面板处于打开状态时,选择“文件”>“作为库打开”。在 Flash MX 应用程序文件夹中,浏览到 Tutorials/FlashIntro/Assets 文件夹,然后双击 buttons.fla。
除了文档的库外,buttons.fla 文件的库也会出现。
对齐按钮您可以使用“对齐”面板沿着水平轴和垂直轴对齐这三个按钮。
1在时间轴的 Copy 图层处于选中状态时,添加一个新图层并将其命名为 Buttons。锁定除了
Buttons 层之外的所有图层。
2在舞台右上方的“舞台视图”弹出菜单中,输入 150% 放大舞台的视图。然后滚动到舞台的右下侧。
3将 Button 1 从 buttons.fla 的“库”面板拖到动态文本字段右下角的下面。
当您从 buttons.fla 的“库”面板拖动按钮时,该按钮即成为您的文档库的一部分。
Flash MX 教程简介43
4从 buttons.fla,库”面板拖动 Button 2 和 Button 3,将它们放置在 Button 1 的左侧。所用间隔如下图所示:
5使用“箭头工具”,拖动选择所有这三个按钮。
6要打开“对齐”面板,选择“窗口”>“对齐”。确认未选择“相对舞台分布”。不需要根据舞台对齐按钮。单击“垂直中齐”,然后单击“水平中间分布”。
按钮即可在舞台上对齐。
启用简单按钮当“启用简单按钮”功能处于活动状态时,您可以听见 Button 2 和 Button 3 包含的声音,并且可以查看按钮状态所用的颜色。较复杂的按钮设计(例如动画)并不会播放。
1选择“控制”>“启用简单按钮”,然后滑过并单击每个按钮。
右边的按钮 Button 1 没有完成。您将在下一步修改该按钮。
2测试完这些按钮后,选择“控制”>“启用简单按钮”来取消选择该功能。
垂直中齐水平中间分布相对舞台分布第 1 章44
修改按钮状态您将在 Button 1 的指针经过状态中创建一个影片剪辑,然后在该影片剪辑中创建一个补间形状。该补间形状会创造一种效果,使颜色从灰色变为红色。
1在舞台中,双击右侧的按钮 Button 1,打开元件编辑模式。
2在 Button 1 的时间轴中,隐藏除 Color 图层之外的所有图层。在 Color 图层中,选择 Over
关键帧。
3在舞台上,为右侧的按钮选择黑色椭圆形状。按下 F8 键,使该椭圆成为一个元件。在“转换为元件”对话框中,将该元件命名为 Button Animation。选择“影片剪辑”,然后单击
“确定”。
4在舞台中,双击 Button Animation 元件,打开元件编辑模式。
5将 Layer 1 重命名为 Color Change,并向第 15 帧添加一个关键帧。
6在播放头仍处于第 15 帧时,选择舞台上的按钮形状,然后从工具箱的“填充颜色”弹出菜单中选择亮红色。
7在时间轴中,单击第 1 帧和第 13 帧之间的任意帧。在属性检查器中,从“补间”弹出菜单中选择“形状”。
将播放头从第 1 帧拖到第 15 帧来查看颜色变化。
向按钮添加动作当用户单击按钮以播放补间动画时,需要播放头移动到 Button Animation 时间轴的末尾,然后停止。可以使用 Flash 脚本撰写语言“动作脚本”控制播放头在时间轴上的移动。
1向 Button Animation 时间轴添加新图层,并命名为 Actions。
2在 Actions 图层上,向第 15 帧添加一个关键帧。
3如果“动作”面板没有打开,请选择“窗口”>“动作”。根据需要放大面板,查看动作工具箱和脚本窗格。
Flash MX 教程简介45
4在 Actions 图层的第 15 帧处于选中状态时,转到动作工具箱的“动作”>“影片控制”类别中,然后双击 stop。
stop 动作使您可以指定播放头在达到第 15 帧时停止。
在 Button Animation 时间轴中,Actions 图层的第 15 帧现在显示一个小小的 a,这表明有一个动作附加到该帧。
注意,在完成教程的过程中,请记住经常保存您的工作。
第 1 章46
添加按钮导航可以用 getURL 动作向打开 Web 站点的按钮添加导航。
1选择“编辑”>“编辑文档”或单击“场景 1”返回到主影片。
2在舞台上,单击右侧的按钮 Button 1。
3在“动作”面板中,选择“动作”>“浏览器/网络”,然后双击 getURL。
4在 URL 文本框中,键入任何完整的 URL,例如 http://www.macromedia.com。
5在“窗口”弹出菜单中选择“_blank”,从而使用户在单击 Button 1 时启动一个新的浏览器窗口。
6保存您的文件,然后选择“控制”>“测试影片”。单击 Button 1,转到您在第 4 步中指定的 Web 站点。
7选择浏览器和 SWF 文件,然后返回到 Flash 创作环境中。如果愿意,您可以在舞台上选择
Button 2,然后重复第 3 步到第 7 步,从而将它链接到不同的 Web 站点,然后对 Button 3
重复这些步骤。当您完成这些按钮的链接后,关闭“动作”面板。
Flash MX 教程简介47
添加声音流和事件声音从 Internet 下载影片时,只要声音文件的开头部分下载完毕就可以开始播放声音流。此类声音特别适合于作为连续的背景声音。
事件声音必须完全下载并载入到 RAM 中之后才能播放;事件声音对按钮很有用。在本部分中,
您将学习如何完成下列任务:
向影片中添加声音流
向按钮添加事件声音要完成本部分,您可以继续处理 mystiletto.fla 文件,也可以浏览到 Flash MX 应用程序文件夹,
打开 Tutorials/FlashIntro/stiletto6.fla。如果您要使用 stiletto6.fla 文件,请用一个新名称将其保存到 My_Stiletto 文件夹中,以确保不改变原文件。
添加声音流将声音拖到舞台中即可将其包含在影片中。您可以添加背景音乐,使之按指定的次数演奏播放。
1在时间轴中,选定 Buttons 图层后添加一个新图层,将其命名为 Sounds。
2选择“文件”>“导入”。在 Flash MX 应用程序文件夹中,浏览到 Tutorials/FlashIntro/Assets
并单击 track1.mp3。按住 Control 键 (Windows) 或按住 Command 键 (Macintosh) 单击选中
ping.mp3,然后单击“打开”。
即可将文件导入库中。
3在 Sounds 图层处于选中状态时,将 track1.mp3 声音从“库”面板拖到舞台中。
在时间轴上,该帧上会出现一个表示声波的小示图。
4在时间轴上,选择 Sounds 图层的第一帧。在属性检查器中,在“循环”文本框中键入 999,
指定声音连续播放的次数。
第 1 章48
测试影片
1保存您的文件,然后选择“控制”>“测试影片”来试听声音。
2播放完该影片之后,单击影片的关闭框。
向按钮添加事件声音除了将声音拖到舞台,您还可以从属性检查器中选择声音。您将使用此方法向按钮添加事件声音。
如同您在“创建按钮”课程中学习的一样,当您创建按钮元件时,Flash 会为鼠标指针对应的不同按钮状态创建帧。例如,“指针经过”帧代表指针处于按钮之上时的按钮状态。其它按钮帧/
状态为“弹起”、“按下”和“点击”。
现在您将向按钮添加一个事件声音,它会使声音在指针经过状态期间播放。因为是向库中的按钮元件添加声音,不只是向该元件的实例添加声音,所以会为该按钮的每个实例播放声音。
1在“库”面板中,双击 Button 1 实例打开元件编辑模式。
2在 Button 1 的时间轴中,添加一个新图层,并将该新图层命名为 Sound。
3选择 Sound 图层的“指针经过”帧(第 2 帧),然后选择“插入”>“关键帧”或按下 F6 键。
4要定义声音属性,单击 Sound 图层的第 2 帧。在属性检查器中,从“声音”弹出菜单中选择
Ping.mp3。确认已经在“同步”弹出菜单中选择了“事件”。
5保存您的文档,然后选择“控制”>“测试影片”来试听该按钮声音。查看完 SWF 文件之后,关闭它的窗口以返回到该文档。
组织“库”面板目前在您的“库”面板中已经有相当多的资产了。要使这些资产组织有序、易于查找并按类型分类,您可以创建文件夹,然后将资产移动到文件夹中。
提示,对于您创作的任何影片,保持库面板的有序组织是一个好习惯,特别是使操作同一文件的其他用户能够轻松地找到资产。
1如果“库”面板没有打开,请选择“窗口”>“库”。
Flash MX 教程简介49
2根据需要扩展并放大该窗口,可以查看“库”面板中的所有资产。在“库”面板的底部,单击四次“新建文件夹”按钮创建四个新文件夹。
3双击名称 untitled folder 1,将其重命名为 Car Animation Movie Clips。
4将其它三个文件夹重命名为 Sounds、Artwork 和 Buttons。
5将 View 1 Car、View 2 Car、View 3 Car 和 Car Animation 拖到 Car Animation Movie Clips
文件夹中。
6将 ping.mp3 和 track1.mp3 拖到 Sounds 文件夹中。
7将 view1.png、view2.png 和 view3.png 拖到 Artwork 文件夹中。
8将 Button 1、Button 2 和 Button 3 拖到 Buttons 文件夹中。在 Buttons 文件夹处于选中状态时,再次单击“新建文件夹”按钮创建 Buttons 文件夹的子文件夹。
第 1 章50
9将该新文件夹命名为 Button Movie Clips,然后将其他按钮影片剪辑资产拖到此文件夹中。
10关闭“库”面板,然后保存文档。
测试下载性能,然后发布该影片要完成您的文档,您应使用“发布”命令创建一个扩展名为 SWF 并可在 Web 上播放的影片。
如果使用默认设置的“发布”命令,Flash 会为在 Web 上使用而准备文件。Flash 将发布该 SWF
文件,并创建带有显示 SWF 所需标记的 HTML 文本。
定义了必需的“发布设置”选项之后,只需选择“文件”>“发布”即可立即将文件重复导出为所有选定的格式。Flash 会存储您为文档指定的发布设置,因此每个影片都可有自己的设置。
Flash MX 教程简介51
在本部分中,您将学习如何完成下列任务:
使用“带宽设置”测试影片下载性能
通过一个步骤发布影片
审阅和修改发布设置
在 Web 浏览器中查看影片要完成本部分,您可以继续处理 mystiletto.fla 文件,也可以浏览到 Flash MX 应用程序文件夹,
打开 Tutorials/FlashIntro/stiletto7.fla。如果您要使用 stiletto7.fla 文件,请用一个新名称将其保存到 My_Stiletto 文件夹中,以确保不改变原文件。
测试影片下载性能要想在 Internet 上正确地播放 Flash 影片,在影片播放到某帧之前,该帧必须已经下载。如果影片播放到尚未下载的帧,它会暂停,直到数据到达为止。低带宽的 Flash 文件可提高下载速度。
您可以使用“带宽设置”测试影片并确定可能发生暂停的位置。“带宽设置”根据所选的调制解调器速度,以图形化的方式显示从影片的每一帧发送的数据量。
1保存您的文档,然后选择“控制”>“测试影片”。
2从“调试”菜单中,选择调制解调器速度来确定 Flash 将会模拟的下载速度。
您也可选择“自定义”来输入一个下载速度。
3选择“查看”>“带宽设置”,通过下载性能图表查看 SWF。
阴影条代表主影片中的第一个也是唯一的一个帧。具有多个帧的影片具有多个阴影条。该条的高度以字节和千字节为单位显示帧大小。超出红线的条,特别是当该条代表的帧不是第一个帧时,表明影片播放时此处可能出现延迟。您可以优化影片,以便更快地下载。有关的详细信息,请参阅“帮助”>“使用 Flash”之下的“优化影片”。
第 1 章52
4查看完“带宽设置”之后,可以选择“查看”>“带宽设置”来取消选择它。关闭 SWF 窗口可以返回到创作环境。
使用“发布”命令您可以通过一个步骤发布 Flash 文档以用于 Web 播放。
保存文档后,选择“文件”>“发布”。
Flash 会根据“发布设置”对话框中的属性创建一个 SWF 文件以及可能的附加文件,从而发布您的影片。在默认情况下,可以在保存 FLA 的文件夹中找到发布的文件。
查看发布设置使用“发布设置”对话框能够轻松地重新配置文件的发布方式。
1要查看发布设置,请选择“文件”>“发布设置”。
在默认情况下,Flash 的配置将会创建显示 Flash 影片的 HTML 支持文件。
当您选择需要附加设置的格式时,会显示一个新选项卡。
2在“格式”选项卡上,确认已经选择了“Flash (.swf)”和“HTML (.html)”。单击“Flash”
选项卡。
在默认情况下,发布的影片要用 Flash Player 播放。此发布过程同样适用于影片和 JPEG 压缩格式的文件。
3单击“HTML”选项卡。
在默认情况下,发布过程会创建一个 HTML 文档,该文档会在浏览器窗口中插入您的 SWF
文件。“发布设置”对话框“HTML”选项卡上的设置决定了影片在浏览器上的显示方式。
Flash MX 教程简介53
更改发布设置在默认情况下,Flash 会用 FLA 文件的名称命名该 SWF 文件。您可以让 Flash 更改该名称。
1在“发布设置”对话框的“格式”选项卡中,取消选择“使用默认名称”。
2在“HTML (.html)”文本框中,选择现有的文本,然后键入一个新名称,例如
stilettoElectric.html。然后单击“发布”。当“正在发布”状态窗口关闭之后,单击“发布设置”对话框中的“确定”。
在浏览器中查看发布的影片您可以在浏览器中查看刚刚发布的 HTML 文件和 SWF 影片。
1打开浏览器,然后打开您创建的 HTML 文件。
在默认情况下,该 HTML 文件位于您的 FLA 文件所在的文件夹中。
当打开该 HTML 文件时,SWF 影片会在浏览器中播放。
2在浏览器中,您可以使用命令(例如“查看”>“页面源”或“查看”>“源”)来查看该
HTML 文件。
OBJECT 和 EMBED 标记可以确保 SWF 影片能够在浏览器中显示。
有关 Flash HTML 模板的其它信息,请参阅“帮助”>“使用 Flash”之下的“关于 HTML 发布模板”。
第 1 章54
后续步骤完成本教程的八个部分之后,您已经学习了许多关于创建 Flash 影片的知识,包括如何完成以下任务:
分析完成的影片
定义文档属性和创建渐变
创建矢量图并为其添加遮罩
在影片剪辑中补间位图效果
载入动态文本
修改按钮和添加导航
添加声音流和事件声音
测试和发布影片完成“帮助”>“教程”下的“动作脚本教程简介”,可以继续学习有关 Flash 功能的更多知识。本教程是专为动作脚本初学者设计的,其中介绍了脚本撰写概念,同时使您可以通过动作创建拼图游戏。此外,您可以在 Macromedia 口碑卓越的支持中心搜索有关 Flash MX 的文章和技术说明。要访问该站点,请进入 www.macromedia.com,然后单击“Support”。
Flash MX 教程简介55
第 1 章56
第 2 章动作脚本教程简介动作脚本是 Macromedia Flash MX 的脚本撰写语言。脚本撰写语言是一种与程序通信的方式;
您可以使用它告诉 Flash 要执行的任务并询问 Flash 在影片运行时发生了什么。这种双向通信方式可以让您创建交互式影片。在本教程中,您将会全面了解创建交互式拼图游戏时涉及的任务。
本教程针对的对象是那些初学动作脚本但想在高级功能上有所建树的 Flash 用户。您应该已经熟悉基本动作并了解如何在“动作”面板中指定这些动作。若要更好地掌握本教程,您应首先阅读“帮助”>“教程”下的“Flash MX 教程简介”。还应熟悉“帮助”>“使用 Flash”下的
“用动作脚本编写脚本”和“用动作脚本创建交互”中提到的概念。
根据您的经验,完成本教程大约需要 1 个小时,其中将教您如何完成下列任务:
初始化影片
保存并获取信息
在动态文本框中显示信息
编写表达式
控制影片的流向
创建命令并重用代码
使用内置对象
测试影片
57
观看完成的影片在您开始制作自己的影片之前,请先观看本教程中一部已完成的教程影片,以便对您将要创建的内容有一个大体了解。此外,已完成的教程影片可让您了解时间轴、影片浏览器、舞台和“动作”面板,从而了解创作过程。
1在您的 Flash MX 应用程序文件夹内,浏览到 Tutorials/ActionScript/Finished。双击
puzzle.swf,在独立的 Flash Player 中打开已完成的影片。
2在 puzzle.swf 影片中,单击“确定”按钮。
拼图片完全被打乱。
3单击所有的“显示/隐藏”按钮。
可看到显示出各个图案和拼图片编号,帮助您完成拼图。
4单击一个拼图片并将它拖到解答区域。
该拼图片迅速放入相应的位置。
5按住 Shift 键同时单击一个拼图片。
该图片编号会出现在解答区域下的圆圈中。如果遇到困难,可以按拼图片编号将图片匹配到拼图片编号指南中的相应位置上。
6按 Alt 键 (Windows) 或 Option 键 (Macintosh) 并单击一个拼图片。
该图片会顺时针旋转。
7当您查看完 SWF 文件后,可以关闭该窗口或者让它开着以供参考。
第 2 章58
分析 puzzle.fla 文件分析完成的 FLA 文件有助于确定作者是如何将它放到一起以及各个动作脚本元素的位置。
1在 Flash 中,选择“文件”>“打开”。在您的 Flash MX 应用程序文件夹中,浏览到 Tuto r i als/
ActionScript/Finished,然后打开 puzzle.fla 文件。
现在您可以在创作环境中查看完成的教程影片了。
2若要查看舞台上的所有内容,选择“查看”>“缩放比率”>“显示帧”。
该影片只包含一帧,它显示在 puzzle.fla 文件的主时间轴上。您将使用动作脚本来显示和隐藏出现在拼图板中的对话框和图案辅助线。
3若要调整时间轴和舞台的大小,可向上或向下拖动分隔舞台与时间轴的分隔栏。滚动时间轴以查看各层是如何组织的。
4若要在创作环境中查看舞台上的对话框和辅助线,单击层名右边“眼睛”列中的红色 X。红色 X 表示隐藏的层。
可以在“锁定”列中单击以锁定层,这样可防止该层被选中。如果您在舞台上选择的项目在另一层的项目之下,此功能将非常有用。由列上方的方框指示的“轮廓”列打开的是层中所有元素的轮廓,这样可以更易于查看形状边缘并可以使 Flash 运行得更快。
移动此分隔栏来调整时间轴的大小。
动作脚本教程简介59
5选择 Actions 层的第 1 帧。
第 1 帧有一个小写的 a,这表明动作与该帧有关。
若要向影片添加一个动作脚本元素,必须将该元素分配给一个按钮、帧或影片剪辑。帧脚本由时间轴中帧上的小写 a 表示。若要查找按钮和影片剪辑脚本,可执行以下其中一项操作:
打开“动作”面板,然后从跳转栏(即“动作”面板标题栏下的弹出列表)中选择一个脚本。
在“动作”面板处于打开状态时,选择舞台上的按钮和影片剪辑。
使用过滤按钮或“查找”文本框在影片浏览器中搜索该脚本。
6若要查看动作,选择“窗口”>“动作”。
此时会打开“动作”面板。如果需要,可扩展该面板查看与该帧相关的动作。
“动作”面板有两种模式:标准模式和专家模式。本教程说明如何在标准模式下添加动作。
在影片浏览器中查看动作
1若要查找影片中的所有动作,可使用影片浏览器。如果还没有打开它,则选择“窗口”>“影片浏览器”。
在影片浏览器中,取消选择除动作脚本按钮外的所有过滤按钮。不但 Actions 层的第 1 帧中包含动作,动作还包含在每个显示/隐藏按钮中、出现的各种对话框中的按钮中以及每个拼图片中。
2在您完成操作后,选择“文件”>“关闭”以关闭 puzzle.fla 影片。不要保存对已完成文件的更改。
第 2 章60
初始化影片所有的影片都有一个初始状态。初始状态显示影片在运行之前以及用户处理它之前的样子。有时您必须设置变量和影片剪辑属性才能建立这种初始状态。例如,在 puzzle.fla 文件中,某些对话框和图案辅助线必须隐藏在初始状态中。
Flash 影片中的每个影片剪辑都有一组品质或属性,您可以使用动作脚本对它们进行操作。每个属性都由前面带有下划线 (_) 字符的名称标识。例如,每个影片剪辑都有 _xscale 属性、
_yscale 属性和 _rotation 属性以及其它属性。
动作脚本使用变量来存储信息。例如,变量 myName 可以存储值 "Jody Singer"。 在第65页的“保存并获取信息”一节中您可以了解有关变量的更多信息。
初始化影片第 1 帧中的属性和变量。可以在时间轴中指定一个帧动作,或者将一个对象动作附加到影片剪辑中。在拼图游戏影片中,图案辅助线和对话框影片剪辑的属性在主时间轴的第 1 帧中初始化。
打开起始文件现在,您将创建自己的教程影片。
1选择“文件”>“打开”。
2在 Flash MX 应用程序文件夹中,浏览到 Tutorials/ActionScript/My_Puzzle 并打开文件
mypuzzle.fla。
3如果收到字体替换信息,则单击“使用默认值”。
将会看到一个部分完成的教程影片。该影片可能看起来已经完成,因为所有的元件都已经放置在了舞台的相应位置上。不过,您仍然需要添加相当多的脚本才能使影片能够交互操作。
4选择“文件”>“另存为”并用新的顺序名称保存该文件,例如,在 mypuzzle.fla 所在的文件夹中将该文件保存为 mypuzzle2.fla。
制作该文件的一个副本,以使您或其他用户可以使用原来的 mypuzzle.fla 文件再次完成该教程。此外,如果经常用新的顺序名称保存您的文件,在出现无法在当前文件中解决的错误时,
还可以回复到较早的文件。
设置影片剪辑属性
puzzle.fla 影片有三个对话框:其中一个对话框在拼图完成时提醒您,其余两个对话框用于询问您是否想要打乱拼图片。此外,还有一些图案和辅助线覆盖在解答区域来帮助用户完成拼图。其中的每个对话框、图案和辅助线都是一个影片剪辑。
要初始化该影片,您必须隐藏若干幅影片剪辑,从而只显示起始对话框和拼图片。通过将它们的
_visible 属性设置为 false 可以达到此目的。
1在 Actions 层中选择第 1 帧。如果“动作”面板没有打开,则选择“窗口”>“动作”。
“动作”面板会显示出与选定帧相关联的动作。双斜杠 (//) 后面的文本是注释文本,它提供了有助于理解脚本的信息。
动作脚本教程简介61
2单击“动作”面板标题栏右上角的弹出菜单。确认已经选择了“标准模式”和“查看行号”。
3在脚本窗格中,单击第 4 行以选择显示为 //ENTER code here 的注释代码。
4从左边“动作”工具箱中的“动作”>“其他动作”类别中,双击 evaluate 动作添加一行以分号结尾的空代码行。
动作脚本语句中的分号 (;) 类似于普通句子中的句号 (.)。
5将插入点放在“动作”面板的“表达式”文本框中,单击“插入目标路径”按钮。
即可显示“插入目标路径”对话框。
6确认选中了“点”(表示点记号)和“绝对”(表示绝对路径)。
在该对话框中,您会看到一个可供您选择的影片剪辑列表。
7从影片剪辑树中选择 edges 影片剪辑,然后单击“确定”。
下面的代码出现在“表达式”文本框中:
_root.edges
目标路径告诉动作脚本某个影片剪辑在 Flash 影片的整体结构内的位置。_root 属性是指主时间轴,而 edges 影片剪辑位于主时间轴的舞台上。任何以 _root 开头的目标路径都被称作绝对路径,因为它给出了从主时间轴指向影片剪辑的完整路径。
第 2 章62
8将插入点放在 _root.edges 之后,在“表达式”文本框中输入,_visible = false。
该行代码使得在舞台上看不到该影片剪辑。
您可以手动键入代码,或者可以从“动作”工具箱中的“属性”和“运算符”文件夹选择动作脚本项。
如果在输入动作时出错,并决定要删除它,则从“脚本”窗格中选择该动作,然后单击“动作”面板中的减号 (-) 按钮。
9在“动作”工具箱中,再次双击 evaluate 动作添加一行以分号结尾的空代码行。重复步骤
5 和步骤 6,然后在“插入目标路径”对话框中选择 pattern 影片剪辑。重复步骤 8,再次在“表达式”文本框中键入,_visible = false。
10继续重复步骤 4 到步骤 8,在“插入目标路径”对话框中选择 image、piecenumbers、
scramblebutton、areYouSure 和 congrats 影片剪辑,并为每个影片剪辑键入
._visible = false 。当您完成后,您的脚本应该显示如下:
11选择“文件”>“另存为”并输入一个新文件名。使用连续命名方案,如 mypuzzle3.fla,以便在需要时可以回复到该文件以前的版本。
动作脚本教程简介63
使用“脚本参考”面板在创作期间,如果您想了解有关您输入的动作脚本的其它信息,可以在“动作”工具箱或“脚本”窗格中选择该动作,然后单击“脚本参考”按钮。“脚本参考”面板是一个组织结构类似于
“动作”面板的帮助系统,它显示了有关选定动作的信息。
测试您的语法动作脚本,像书面语言一样,需要有正确的语法。如果语法不正确,动作将无法正确执行。Flash
为您测试语法提供了各种方式。
1单击“动作”面板标题栏右上角的选项菜单,然后选择“检查语法”。
如果语法正确,会显示一条消息表明该脚本没有任何错误。
如果语法不正确,会显示一条消息表明脚本包含错误;此时会打开“输出”窗口,显示有关该错误的信息。
2单击“确定”以关闭语法消息。
第 2 章64
在标准模式下,动作脚本语法错误会以红色字体突出显示在脚本窗格中。如果您将鼠标指针移动到该错误上,会出现一个显示错误消息的工具提示。语法错误消息还会突出显示在“动作”面板的底部状态区域中。
此外,正如您在“Flash MX 教程简介”中所了解的那样,在整个创作过程中,您都可以选择
“控制”>“测试影片”来测试您的影片是否按预期播放。
保存并获取信息要创建一个复杂的交互式 Flash 影片,需要有一种方式使 Flash 跟踪信息和用户活动:按下的按钮、用户姓名、得分或用户访问过的部分。动作脚本使用变量存储您可以获取和再次使用的信息片段。您可以在任何时间轴上在脚本中声明一个变量,并在同一部影片的任何其它时间轴中使用它。正像您必须编写一条目标路径才能在脚本中使用影片剪辑一样,您必须编写一条指向变量的目标路径才能在脚本中使用该变量。
在 puzzle.fla 文件中,动作脚本使用 dialog 变量跟踪对话框是否可见。当对话框出现时,
dialog 变量设置为 true;当用户单击对话框上的按钮时,dialog 变量设置为 false。该变量不影响对话框自身的可见性,它只是一个容器,保留着有关您可以在整个影片的脚本中使用的信息。在 puzzle.fla 文件中,如果 dialog 设置为 true,则用户不能移动拼图片。
动作脚本教程简介65
声明变量并给它赋值当您需要一个变量时,您必须给它命名,或者声明 它。还必须给它赋值。您可以先在一条语句中声明变量,然后在后面的语句中给它赋值,或者也可以一次做完这两项操作。
动作脚本使用三种类型的变量:本地变量、全局变量和时间轴变量。您可以在一个代码块(用大括号 {} 指明的那部分代码)中使用 var 动作来创建一个本地变量,这种变量在代码块结束运行后,就会消失。可以使用 set variable 动作创建一个附加到影片剪辑的时间轴上的时间轴变量,该变量可以用在文档中的任何脚本内。有关变量的详细信息,请参阅“帮助”>“使用
Flash”下的“了解动作脚本语言”。
puzzle.fla 文件会根据情况使用 var 动作和 set variable 动作。当只需要在一个代码块中使用某个变量时,则使用 var 动作。变量 dialog 是使用 set variable 动作设置并赋值的。
现在您将声明 dialog 变量并给它赋值:
1选择“文件”>“打开”并选择您上次保存的 mypuzzle.fla。
注意,也可以浏览到 Flash MX 应用程序文件夹,然后打开 Tutorials/ActionScript/Finished/puzzle2.fla。如果您确实使用 puzzle2.fla 文件,请在您的 My_Puzzle 文件夹中用新名称保存该文件以保留一个原始文件的未更改版本。
2选择 Actions 层的第 1 帧。如果“动作”面板没有打开,则选择“窗口”>“动作”。
3在“动作”面板的脚本窗格中,选择第 11 行,它是“Initialize”部分的最后一行代码。在
“动作”工具箱中,选择“动作”>“变量”并双击 set variable 动作。
4在“变量”文本框中键入 dialog。
第 2 章66
5在“值”文本框中键入 true 。选中“值”文本框右边的“表达式”。
通过选中“表达式”的方式通知 Flash:true 不是一个文本字符串。
在影片的初始状态下,对话框在舞台中是可见的。因此,dialog 变量必须在影片开始时设置为 true,否则,用户可以在拼图片被打乱之前移动它们。
6选择“文件”>“另存为”并输入一个新文件名。使用连续命名方案,以便在需要时可以回复到该文件的以前版本。
在动态文本框中显示信息动态文本框可以在 Flash 影片中显示不断变化的内容。可以使用属性检查器创建一个动态文本框并给它指定一个变量名。该变量的值会显示在该文本字段中。
在 puzzle.fla 文件中,当用户按 Shift 键的同时单击一个拼图片,动态文本框会显示拼图片编号。
现在您将为动态文本框指定一个变量名。
1如果需要,选择“文件”>“打开”并选择您上次保存的 mypuzzle.fla 文件。
注意,也可以浏览到 Flash MX 应用程序文件夹,然后打开 Tutorials/ActionScript/Finished/puzzle3.fla。如果您确实使用 puzzle3.fla 文件,请在您的 My_Puzzle 文件夹中用新名称保存该文件以保留一个原始文件的未更改版本。
2在时间轴中,如果 Piece numbers guide 图层处于锁定状态,则解除锁定。
动作脚本教程简介67
3双击拼图解答区域右下角舞台上的拼图片编号圆形影片剪辑。
这将在元件编辑模式下打开拼图片编号圆圈。
4选择时间轴中的 Tex t 层。在舞台上,单击拼图片编号圆圈的中心以选择该文本字段。
5如果属性检查器尚未打开,请选择“窗口”>“属性”。在属性检查器中,从“文本类型”
弹出菜单中选择“动态文本”。
6在“线条类型”弹出菜单中,确认选定了“单行”。
拼图片编号圆圈影片剪辑第 2 章68
7在“Var”文本框中键入 _root.pieceNumber,然后按下 Enter 或 Return 键。
所有变量,如同函数和影片剪辑一样,都必须通过它们的路径进行引用。pieceNumber 变量在主时间轴的 RotateDisplayOrDrag 函数中声明和更新,但该变量的文本框却在拼图片编号圆圈时间轴内。当您输入指向 pieceNumber 变量的完整路径后,只要该变量的值在主时间轴上发生更改,该值就会更新并显示在舞台的文本字段中。
8可以选择“编辑”>“编辑文档”,然后单击“后退”按钮,或者单击“场景 1”返回到主时间轴。
9选择“文件”>“另存为”并输入一个新文件名。使用连续命名方案,以便在需要时可以回复到该文件的以前版本。
编写表达式如果在数学等式中添加了两个数字,则已经使用了一个运算符。运算符 是一种对一个或几个数据或操作数 执行任务或操作 的符号。例如,在表达式 2 + 2 中,加号 (+) 就是运算符,而每个数字就是一个操作数。
表达式 是可以演算以生成某一值的任意动作脚本代码。例如,代码 myAge + 17 是一个表达式,
因为当该代码运行时,动作脚本会查找 myAge 变量的值,将它加到数字 17 上,然后生成一个新值。如果 myAge 的值为 47,则新值将为 64。
运算符使您可以收集信息并在变量中存储该信息,然后在表达式中对该信息进行操作以便创建或确定其它值。例如,您知道用户已将一个拼图片放入解答区域,但您如何确定该拼图片是否处于正确位置?并且如果该拼图片处于正确位置,您如何确定整个拼图是否已拼好?若要在这种情况下检查用算术运算符构建的表达式,可选择主时间轴的第 1 帧,然后打开“动作”面板,
并查看第 50 行的 IsItDone 函数。
动作脚本有数值运算符或算术 运算符,但它还有执行不同类型操作的其它类型的运算符。例如,
比较运算符比较几个值以确定一个操作数是大于、小于还是等于其它操作数,而逻辑运算符则计算表达式的 true 或 false 值,也称作布尔 值。
现在您将使用一个称作逻辑“非”的运算符来编写一个显示和隐藏拼图图案的表达式。逻辑
“非”运算符,由一个感叹号 (!) 表示,计算的是操作数的相反布尔值。例如,表达式 !true 生成的值为 false。
1如果需要,选择“文件”>“打开”并选择您上次保存的 mypuzzle.fla 文件。
注意,也可以浏览到 Flash MX 应用程序文件夹,然后打开 Tutorials/ActionScript/Finished/puzzle4.fla。如果您确实使用 puzzle4.fla 文件,请在您的 My_Puzzle 文件夹中用新名称保存该文件以保留一个原始文件的未更改版本。
动作脚本教程简介69
2单击该舞台上的“显示/隐藏图案边缘”按钮。如果“动作”面板没有打开,则选择“窗口”
>“动作”。
“动作”面板会显示出与该按钮相关联的动作。
3在脚本窗格中选择下面的代码行:
// ENTER code here
4在“动作”工具箱中,选择“动作”>“其他动作”并将 evaluate 动作拖到脚本窗格中。
当您添加动作时,它会包含在被称为事件处理函数 的代码中。该代码如下所示:
on (release) {;
}
5在“动作”工具箱中,双击 evaluate 动作添加另一行空的代码行。
现在,该代码如下所示:
on (release) {;
}
6选择第一行空行,即带第一个分号的行,并将插入点放在“表达式”文本框中。
现在,您将输入隐藏图案影片剪辑的代码;用户应该看到图案影片剪辑或边缘影片剪辑,但不能同时看到两者。
7在“表达式”文本框中输入 _root.pattern._visible = false。
您可以在“表达式”文本框中直接键入路径或者使用“插入目标路径”对话框选择 pattern
影片剪辑。如果您使用“插入目标路径”对话框,请选中“点”和“绝对”。
注意,当您在标准模式下输入参数和属性时,可能会注意到代码提示,它们是一种对动作的完整语法提出建议的工具提示;您可以单击代码提示来输入语法。有关代码提示的详细信息(包括启用和禁用代码提示),请参阅“帮助”>“使用 Flash”下的“使用代码提示”。
第 2 章70
8选择第二行空行,然后将插入点放在“表达式”文本框中。
9在“表达式”文本框中键入 _root.edges._visible = ! 。
忽略出现的语法错误消息。
感叹号 (!) 表示逻辑“非”运算符。除了在“表达式”文本框中简单将逻辑“非”运算符键入之外,您可以将它从“动作”工具箱添加到文本框中,方法是选择“运算符”>“逻辑运算符”并双击感叹号。
10在“表达式”文本框的该运算符之后,再次键入 _root.edges._visible。
您的代码应该如下所示:
on (release){
_root.pattern._visible = false;
_root.edges._visible = !_root.edges._visible;
}
事件处理函数中的第一行代码将 pattern 影片剪辑的可见性设置为 false。第二行代码将
edges 影片剪辑的可见性设置为与其当前值相反的值。这样就创建一个显示或隐藏影片剪辑的切换。
11选择“文件”>“另存为”并输入一个新文件名。使用连续命名方案,以便在需要时可以回复到该文件的以前版本。
动作脚本教程简介71
控制影片的流向如果没有动作脚本,影片可能会从第 1 帧播放到最后一帧然后又从第 1 帧开始重复播放或者干脆停止。您可以使用动作脚本更精确地控制影片的播放进程;也可以使用动作脚本将控制权给予用户。例如,您可以在第 5 帧中放置一个停止播放影片的动作,直到用户按下“播放”按钮后才开始。这只是一个控制影片流向的简单示例。
您可以使用 if、else 和 else if 动作(也称作语句)来创建更复杂的被称为逻辑 的影片流向。上述三种动作执行下列任务:
if 动作让 Flash 检查影片中的条件,并在该条件为真时运行特定的动作。
else 语句告诉 Flash 在 if 条件为假时运行另一组不同的动作。
else if 语句让 Flash 在运行另一组不同的动作之前检查另一个条件。
编写条件语句您已经使用了一个运算符来显示和隐藏影片剪辑。现在,将使用 if 语句来创建显示和隐藏
piece numbers 影片剪辑的逻辑。为了便于学习,本示例使用了一个不同的动作脚本元素来获得同样的结果。
1如果需要,选择“文件”>“打开”并选择您上次保存的 mypuzzle.fla 文件。
注意,也可以浏览到 Flash MX 应用程序文件夹,然后打开 Tutorials/ActionScript/Finished/puzzle5.fla。如果您确实使用 puzzle5.fla 文件,请在您的 My_Puzzle 文件夹中用新名称保存该文件以保留一个原始文件的未更改版本。
2在舞台上,单击“显示/隐藏组件编号矩阵”按钮。如果“动作”面板没有打开,则选择“窗口”>“动作”。在“动作”工具箱中,选择“动作”>“条件/循环”类别。
3双击 if 动作。下列代码将出现在“动作”面板中:
on (release) {
if (<not set yet>) {
}
}
4在包含 if 动作的代码行处于选中状态时,双击“动作”工具箱中的 else 动作。
该代码如下所示:
on (release) {
if (<not set yet>) {
} else {
}
}
5选择第 3 行,即以 if 开头的那一行,并将插入点放在“条件”文本框中,单击“插入目标路径”按钮。选择 piecenumbers 影片剪辑、“点”和“绝对”,然后单击“确定”。下面的代码即可出现在“条件”文本框中:
_root.piecenumbers
6将插入点放在“条件”文本框中,在 _root.piecenumbers 之后输入,_visible。
7从“动作”工具箱中的“动作”>“其他动作”类别中,双击 evaluate 动作来添加一行空的代码行。
第 2 章72
8在“表达式”文本框中输入 _root.piecenumbers._visible = false 。
您可以使用“插入目标路径”按钮或手动键入代码。现在,该代码如下所示:
on (release) {
if (_root.piecenumbers._visible) {
_root.piecenumbers._visible = false;
} else {
}
}
当影片播放时,Flash 会演算条件括号内的表达式。表达式必须等于其中一个布尔值:true 或
false。本示例使用 if 动作的条件来检查 piecenumbers 影片剪辑在舞台上是否可见。如果
_visible 属性为 true,动作脚本就会运行大括号中的代码,并将 _visible 属性设为
false,这样就会在舞台上隐藏该影片剪辑。
9在脚本窗格中,选择包含 else 动作的代码行,然后双击 evaluate 动作。
10在“表达式”文本框中输入 _root.piecenumbers._visible = true。
最终的动作脚本代码将如下所示:
on (release) {
if (_root.piecenumbers._visible) {
_root.piecenumbers._visible = false;
} else {
_root.piecenumbers._visible = true;
}
}
11选择“文件”>“另存为”并输入一个新名称。使用连续命名方案,以便在需要时可以回复到该文件的以前版本。
创建命令并重用代码动作脚本中的动作可以让您以特定方式控制影片。例如,play 动作向前移动时间轴中的播放头,而 loadMovie 动作则将另一部 Flash 影片加载入 Flash Player。其中的每个动作都会指示
Flash 执行一项特定的任务。您可能想在影片中创建您自己的命令。例如,在文件 puzzle.fla 中,
您需要一条命令打乱拼图。要想出如何用动作脚本编写这样一条命令,您必须确定打乱拼图所需的每个步骤并确定哪些动作脚本元素可用于达到这些目的。
首先,拼图片必须散落在舞台的某个区域内;每个影片剪辑都有一个 _x 和一个 _y 属性,您可用它们设置影片剪辑的位置,并有一个 _rotation 属性可用于设置影片剪辑的旋转。若要随机放置和旋转每个拼图片,您需要生成一个随机数字供表达式使用。动作脚本有一个内置的 Math
对象,它具有 random 方法,可用于此目的。
动作脚本中的命令称作函数。函数是一种可以在影片中反复使用来执行某项任务的脚本。例如,
在 puzzle.fla 文件中,每次用户单击“打乱组件”按钮,函数 Scramble 都会运行,或者被调用。该函数将各个拼图片随机放置在舞台上。不用为两次单击的“打乱组件”按钮编写两个相同的脚本,只需编写或声明该函数一次,并且每次通过按钮调用它即可。要检查 Scramble 函数,选择主时间轴上的第 1 帧,然后打开“动作”面板。向下滚动到脚本窗格直到您看到
Scramble 函数。
动作脚本教程简介73
您可以将函数当作一台为您做额外工作的机器。该机器根据您输入的内容,可以生成不同的结果。例如,如果您将香蕉放入搅拌机中,您将得到搅碎的香蕉,而不是搅碎的桃子。您传递给函数进行处理的元素称作参数或实参。参数在函数后面的括号中传递。例如,给函数
RotateDisplayOrDrag(whichPiece) 传递的是拼图片的名称,那么它只对该拼图片进行操作。参数使您能够在许多不同的情况下重用函数。
函数通常在影片的第 1 帧中声明。在 puzzle.fla 文件中,函数就在第 1 帧中声明。
编写函数现在将声明一个函数,在用户单击拼图片时旋转、显示或拖动该拼图片。
1如果需要,选择“文件”>“打开”并选择您上次保存的 mypuzzle.fla 文件。
注意,也可以浏览到 Flash MX 应用程序文件夹,然后打开 Tutorials/ActionScript/Finished/puzzle6.fla。如果您确实使用 puzzle6.fla 文件,请在您的 My_Puzzle 文件夹中用新名称保存该文件以保留一个原始文件的未更改版本。
2选择 Actions 层的第 1 帧,然后打开“动作”面板(如果没有打开)。
3向下滚动脚本窗格并选择第 31 行。下列注释行应该突出显示出来:
// ENTER RotateDisplayOrDrag() function here
4在“动作”工具箱的“动作”>“用户定义的函数”类别中,双击 function 动作。
在“名称”文本框中键入 RotateDisplayOrDrag 。在“参数”文本框中键入 whichPiece。
现在,第 32 行的代码应如下所示:
function RotateDisplayOrDrag (whichPiece) {
}
标识选定拼图片的 whichPiece 参数将在函数体中调用三次。当调用该函数时,被传递的参数会替代每条语句中的 whichPiece。
5在“动作”工具箱中的“动作”>“条件/循环”类别中,双击 if 动作、else if 动作和
else 动作。
注意,也可以从加号 (+) 弹出菜单中选择这些动作该代码如下所示:
function RotateDisplayOrDrag (whichPiece) {
if (<not set yet>) {
} else if (<not set yet>) {
} else {
}
}
该代码创建了函数的逻辑结构。您将在每条 if 语句中填写要检查的条件。还将填写每对大括号中的代码,这些代码在条件为真时执行。
第 2 章74
6选择 if 语句代码行。在“条件”文本框中输入 Key.isDown(18)。
Key 是一个内置的动作脚本对象,您也可以在“对象”>“影片”>“Key”>“方法”中找到。Key 让您确定用户按了键盘上的哪个键。数字 18 是 Alt (Windows) 键和 Option
(Macintosh) 键的数字表示。此代码行将检查用户是否按了那些键。
要了解有关内置对象的详细信息,请参阅第78页的“使用内置对象”。
7在“动作”工具箱中的“动作”>“其他动作”类别中,双击 evaluate 动作以输入一行新的代码。在“表达式”文本框中键入 _root[whichPiece]._rotation += 90,注意 + 和 = 之间没有空格。
如果用户按下 Alt (Windows) 键或 Option (Macintosh) 键,此代码行会将选定的拼图片旋转
90
o
。方括号中的内容让您可以动态检索实例名称的值。有关详细信息,请参阅“帮助”>
“使用 Flash”下的“点和数组访问运算符”。
8选择 else if 代码行。在“条件”文本框中键入 Key.isDown(Key.SHIFT)。
该代码行检查用户是否按下了 Shift 键。
9在“动作”工具箱中的“动作”>“其他动作”类别中,双击 evaluate 动作以输入一行新的代码。在“表达式”文本框中键入 pieceNumber = whichPiece.slice(5)。
该代码行将在用户按下 Shift 键时在舞台的文本框中显示拼图片编号。String 对象的 slice
方法会从拼图片编号的实例中删除指定数量的字符(在这种情况下,是 5 个字符),以便只显示该拼图片的编号。实际上,方法“slices”删除前五个字符,然后将产生的数字赋予
pieceNumber 变量,该变量再反过来赋予舞台的文本字段。
10选择 else 代码行。在“动作”工具箱的“动作”>“影片剪辑控制”类别中,双击 startDrag 动作。
11在“目标”文本框中键入 _root[whichPiece],然后单击“表达式”。
12选择“限制为矩形”。在“L”(左)文本框和“T”(上)文本框中键入 20。在“R”(右)
和“B”(下)文本框中,分别键入 780 和 580。
脚本中的 false 表示没有指定 lockCenter(表示当单击拼图片时,该拼图片始终对齐鼠标指针的中心)。数字 20、20、780 和 580 分别指定了文本框在舞台上的左、上、右、下坐标。
当用户单击拼图片时,会调用您编写的以下函数。该函数使用“Key”对象来确定在单击拼图片时是否按下了 Shift、Alt 或 Option 键。如果在单击拼图片时按下了 Shift 键,那么动态文本框会显示拼图片编号;如果按下的是 Alt (Windows) 键或 Option (Mac) 键,那么该拼图片会旋转 90
o
。如果既没有按下 Shift 键也没有按下 Alt 键或 Option 键,那么用户可以拖动该拼图片。您的代码应该如下所示:
function RotateDisplayOrDrag (whichPiece) {
if (Key.isDown(18)) {
_root[whichPiece]._rotation += 90;
} else if (Key.isDown(Key.SHIFT)) {
pieceNumber = whichPiece.slice(5);
} else {
startDrag(_root[whichPiece],false,20,20,780,580);
}
}
注意,在完成教程的过程中,请记住经常保存您的工作。
动作脚本教程简介75
调用函数您可以从影片中需要完成某项任务的任何帧中调用函数。您必须使用目标路径来调用函数,就像您必须使用路径来访问变量或影片剪辑一样。puzzle.fla 影片中的所有函数都在主时间轴的
Actions 层的第 1 帧中声明,所以每个函数的绝对路径都是以 _root 开头。
现在,您将调用在舞台上打乱拼图片的函数。
1在时间轴上,如果没有隐藏 Scramble dialog 层和 Start dialog 层,则将它们隐藏起来。选择
Congrats dialog 层。
2在该舞台上,双击“Dialog-Congratulations”元件。
3在舞台上,选择“确定”按钮。如果“动作”面板没有打开,则选择“窗口”>“动作”。
4在“动作”工具箱的“动作”>“用户定义的函数”类别中,双击 call function 动作。
5将插入点放在“动作”面板的“对象”文本框中,单击“插入目标路径”按钮。确认选定了
“点”和“绝对”。选择 _root,然后单击“确定”。
Dialog-Congratulations 元件第 2 章76
6在“方法”文本框中键入 Scramble 。
Scramble 函数不需要任何参数;可以将“参数”文本框空着。
现在,该代码如下所示:
on (release) {
_root.Scramble();
}
这就是调用该函数的动作脚本。还将需要另外添加一些 on(release) 处理函数内部的代码行。您将在下面的步骤中执行此操作。
在脚本窗格中的 _root.Scramble..,代码行处于选中状态时,双击“动作”工具箱的
“动作”>“其他动作”类别中的“evaluate”。在“表达式”文本框中键入
_root.scramblebutton._visible = true。
7再次双击 evaluate 动作来添加另一行空代码。在“表达式”文本框中键入 _root.dialog =
false。
8从“动作”工具箱的“动作”>“其他动作”类别中,双击 evaluate 动作。
9从“动作”工具箱的“属性”类别中,双击 _visible。将插入点放在 _visible 之后,在
“表达式”文本框中键入 = 0。
该代码指定该对话框在用户单击“确定”按钮后变为不可见。
最终的代码如下所示:
on (release) {
_root.Scramble();
_root.scramblebutton._visible = true;
_root.dialog = false;
_visible = 0
}
10执行以下任一操作返回到主时间轴:
选择“编辑”>“编辑文档”。
单击“返回”按钮。
单击“场景 1”。
11选择“文件”>“另存为”并输入一个新文件名。使用连续命名方案,以便在需要时可以回复到该文件的以前版本。
注意,在完成教程的过程中,请记住经常保存您的工作。
动作脚本教程简介77
使用内置对象动作脚本有变量 可以让您存储信息;它有函数 可以让您创建特定的命令并重用代码;它有动作可以让您控制影片的流向;它还有可以更改其属性 的影片剪辑。
动作脚本还具有另一种类型的元素,称作内置对象。对象 提供了一种将信息分组的方式,以便您可以在脚本中使用它。对象可以有属性、方法(类似于函数)和常数(如 Pi 的数值)。
对于您在第73页的“创建命令并重用代码”创建的 RotateDisplayOrDrag 函数,您使用了
Key 对象来确定用户在键盘上按下的最后一个键。Key 对象内置于动作脚本中,可以用于获得有关键盘的信息。
另一个动作脚本对象是 MovieClip 对象。MovieClip 对象是一个方法集合,您可以使用它来操作影片剪辑,这些影片剪辑是 Flash 中最基本也是功能最强大的元素。要了解有关 MovieClip 对象的具体特性以及使用影片剪辑的详细信息,请参阅“帮助”>“使用 Flash”下的“处理影片剪辑和按钮”。
现在,将使用 MovieClip 对象的 onPress 方法来检查鼠标指针是否触到某个拼图片。
1如果需要,选择“文件”>“打开”并选择您上次保存的 mypuzzle.fla 文件。
注意,也可以浏览到 Flash MX 应用程序文件夹,然后打开 Tutorials/ActionScript/Finished/puzzle7.fla。如果您确实使用 puzzle7.fla 文件,请在您的 My_Puzzle 文件夹中用新名称保存该文件以保留一个原始文件的未更改版本。
2拼图片动作是一个嵌套在拼图片每个实例中的影片剪辑。若要从“库”面板层次结构中选择
“Piece actions”影片剪辑,单击“时间轴”右下角的“编辑元件”按钮,然后选择“Misc”
>“Piece actions”。
Piece actions 影片剪辑会在元件编辑模式下打开。
第 2 章78
3在 Piece actions 时间轴上,选择 Actions 层的第 1 帧。
4如果“动作”面板没有打开,请选择“窗口”>“动作”。在脚本窗格中,选择第 3 行,它具有如下的代码:
// ENTER code here
5在“动作”工具箱的“对象”>“影片”>“MovieClip”>“事件”类别中,双击 onPress 动作。
onPress 方法是一种特殊类型的动作,称作事件处理函数,或者简称为事件。事件允许您编写一个函数,该函数在发生特定事件时运行。事件的类型包括按下鼠标按钮时、播放头进入帧时以及加载影片剪辑时。
在此过程中,onPress 后面大括号中的代码会等到用户在影片中按下鼠标按钮时运行。
6在“对象”文本框中键入 _parent。
由于 Piece actions 嵌套在影片剪辑内,所以_parent 指定 onPress 应在上一层代码中执行,
即与拼图片位于同一层执行。
7在“动作”工具箱的“动作”>“条件/循环”类别中,双击 if 动作。
8在“条件”文本框中,键入 !_root.dialog。代码将如下所示:
_parent.onPress = function(){
if (!_root.dialog) {
{
};
您添加到此步骤中的代码会测试 dialog 变量的值是 true(可见)还是 false(不可见)。如果该值为 true,则不会运行下一个旋转和拖动拼图片的脚本。如果该变量的值为 false,那么将运行随后的脚本。如果该对话框显示,那么用户就不能旋转或拖动拼图片,或显示它的拼图片编号。
动作脚本教程简介79
9在“动作”工具箱中,双击“动作”>“其他动作”类别中的 evaluate 动作以将它添加到
if 语句的大括号内。
10在“表达式”框中键入 _root.RotateDisplayOrDrag(_parent._name)。
_name 是用户单击的拼图片实例名称的属性。
最终代码如下所示:
_parent.onPress = function(){
if (!_root.dialog) {
_root.RotateDisplayOrDrag(_parent._name);
}
};
11执行以下任一操作返回到主时间轴:
选择“编辑”>“编辑文档”。
单击“返回”按钮。
单击“场景 1”。
12选择“文件”>“另存为”并输入一个新文件名。使用连续命名方案,以便在需要时可以回复到该文件的以前版本。
测试影片
“尽早测试和经常测试”是 Web 开发者的一条原则。影片测试得越早,就越容易确定产生意外结果的原因。使用顺序名称保存文件的多个版本是一个不错的方法,例如,就像您在本教程中所做的一样,将文件保存为 mypuzzle1.fla、mypuzzle2.fla 等等。这样,编号最高的文件一定是最新版本,并且很容易回复到以前的版本。
正如您在“Flash MX 教程简介”中了解的那样,Flash 创作工具包括一个 Flash Player,您可以在创作期间的任意时候通过选择“控制”>“测试影片”来测试影片。该版本的 Flash Player 有各种命令和工具,有助于您排除影片的故障。
Flash 影片中出现意外结果的最常见原因是变量、函数、对象或影片剪辑的路径不正确。这会导致变量包含错误的值、妨碍函数调用或者妨碍影片剪辑正确播放。
trace 动作允许您在脚本中编写备注和表达式,它们的结果将被发送到名为“输出”的窗口中。
现在,您将添加一个 trace 动作以测试是否成功地调用了函数。
注意,Flash 也包括一个调试器,让您检查全局变量和本地变量的值,包括在影片播放时它们何时更改。此外,利用调试器,您可以使用断点停止影片并逐行地测试动作脚本。有关详细信息,请参阅“帮助”>“使用 Flash”下的“使用调试器”。
1选择“文件”>“打开”,然后选择您上次保存的 mypuzzle.fla 文件。
注意,也可以浏览到 Flash MX 应用程序文件夹,然后打开 Tutorials/ActionScript/Finished/puzzle8.fla。如果您确实使用 puzzle8.fla 文件,请在您的 My_Puzzle 文件夹中用新名称保存该文件以保留一个原始文件的未更改版本。
当用户单击 SWF 影片中的“确定”按钮时,拼图片应该被打乱。您可以使用 trace 动作来测试是否正在调用 Scramble 函数。
2在时间轴的 Actions 层中,选择第 1 帧并打开“动作”面板。
第 2 章80
3在脚本窗格中,滚动到第 18 行并选择它,该注释行的内容为:// enter trace action
here。
4在“动作”工具箱中,从“动作”>“其他动作”类别中双击 trace 动作。
5在“消息”文本框中键入 Scramble function has been called。
您正在将此消息放置在 Scramble 函数中。
6保存您的文档,然后选择“控制”>“测试影片”。
7单击 SWF 影片中的“确定”按钮。
此时将会显示“输出”窗口,它会跟踪您影片中的事件。如果需要,可以放大该窗口来读取消息。
消息“Scramble function has been called”将出现在“输出”窗口中。
如果该消息不出现,那么下一步将确定原因何在。最可能的原因是您为该函数指定的路径不正确。
8关闭“输出”窗口和 SWF 文件并返回到创作模式。
9选择“文件”>“另存为”并输入一个新文件名。使用连续命名方案,以便在需要时可以回复到该文件的以前版本。
您已经在学习动作脚本中取得了长足的进步!
动作脚本教程简介81
后续步骤通过学习本教程,您已经在相对较短的时间内学完了大量的内容。您已经学会如何使用动作脚本来设置 Flash 影片的起始点,如何创建命令和重用代码来使动作重现,以及如何精确控制影片的流向。使用动作脚本变量和表达式,您知道如何在影片中跟踪用户活动以及如何向您的用户显示变化的内容。最后,您已经学会了如何测试您的影片。
若要继续学习关于动作脚本的知识,请参阅“帮助”菜单中的联机动作脚本字典和“Flash 支持中心”中的文章。从 Flash MX 应用程序文件夹中的 Samples 文件夹中,也可以打开 puzzle.fla
影片的高级版本并对曾经用于创建计时器和动画拼图片的动作脚本进行解构分析。
第 2 章82
第 3 章组件教程简介使用 Macromedia Flash UI 组件可以快速轻松地在 Flash 文档中添加简单的用户界面元素。
本教程是为 Flash 初学者和中级用户设计的,用来介绍组件以及如何轻松地使用这些组件来创建简单的应用程序。在学习本教程前,您应当已经学完“Flash MX 教程简介”和“动作脚本教程”简介,这两个教程可以通过选择“帮助”>“教程”来访问。
学完本教程后,您将学会如何执行以下任务:
在 Flash 文档中添加组件
配置组件
添加动作脚本来使组件工作组件类型
Flash MX 提供了以下组件,
名称动作单选按钮表示在一组互斥选择中的单项选择复选框表示单项选择普通按钮当用户单击它或按 Enter 或 Return 键时执行命令组合框显示一个选项列表列表框显示一个选项列表滚动窗格提供用于查看影片剪辑的可滚动窗格
83
文本滚动条在文本字段中添加滚动条如何使用组件下面是使用组件的一些方法:
Web 窗体设计一个窗体,用来询问用户的地址、电话、电子邮件地址以及其它个人信息,并在提交到服务器前验证这些数据。
定制汽车创建一个 Web 窗体,允许用户通过选择各种图形选项而不是键入信息来定制一辆汽车。字段通过图形交互操生成。
调查建立一个多问题、多部分的调查,迅速计算结果并画出调查结果数据图表。
像册建立个人像册,在目录中存放图像和缩略图,并用 Flash 界面和导航元素包装它们。
贷款计算器设计一个计算贷款偿还金额的分期偿还计算器。
基于 Web 的演示模板使用简单的、预建的导航元素和图像文本布局来创建基于幻灯片的演示文稿的模板。
查看完成的窗体通过以下操作可以定位窗体中的组件:
单击某个组件可以选中它。
按 Tab 键可以向前移动,按 Shift+Tab 组合键可以向后移动。
使用箭头键可以定位菜单项。
1选择“文件”>“打开”可以定位到 Flash MX 程序目录。打开 Tu t o r i a l s / C o m p o n e n t s /
Finished/sweepstakes.swf。这是完成的影片。
2使用上述导航技术可以测试窗体中的每个按钮和框。
3现在打开 sweepstakes.fla。选择“文件”>“打开”并定位到 Flash MX 程序目录。打开
Tutorials/Components/Finished/sweepstakes.fla。这是生成影片的 Flash 文档。时间轴包含两个关键帧。
4检验页面 1。其中包含用于搜集信息的复选框、组合框和普通按钮。它还有两个用于输入用户名和电子邮件地址的输入文本字段。
5检查页面 2。这是结果页面,包含几个动态文本框,用来显示在第 1 页中所收集信息的结果。
为了节省时间,我们已经为您创建了这些信息。
创建窗体在本教程中,您将使用组件来创建一个包含两个页面的简单窗体。该窗体的内容是参加博彩来赢得一辆免费的 Stiletto 电动汽车。第 1 页用于收集信息,第 2 页用于显示结果。您将按照下面三个步骤来完成这个窗体:
在窗体中添加组件
配置组件
在文档中添加动作脚本使组件工作第 3 章84
为了使您顺利入门,我们已经提供了这个窗体的背景、文本字段和图形。您将添加并配置组件和动作脚本以使之成为一个交互式窗体。
添加组件第 1 步是向舞台中添加组件,并把它们放置在窗体上。您要在窗体的第 1 页添加一个复选框、
一个组合框和一个普通按钮。还要在第 2 页添加一个普通按钮。
要向文档中添加组件,可以把元素从“组件”面板拖到舞台中,或在“组件”面板中双击元素来把它们放置在舞台中央。在文档中添加组件后,文档的“库”面板中会显示该组件。
好的做法是为组件创建一个新层。
1选择“文件”>“打开”并定位到 Flash MX 程序目录。打开 Tu t o r i a l s / C o m p o n e n t s /
my_sweepstakes/mysweepstakes.fla。
2选择“文件”>“另存为”并用一个新文件名来保存文件,例如 newsweepstakes。
3创建一个新层并命名为 UI。组件将放在这个层中。
4在时间轴的 UI 层中单击第 6 帧。选择“插入”>“空白关键帧”添加空白关键帧。这将用于第 2 页的组件。
5确保下面的面板是打开的:
,库”面板(“窗口”>“库”)
,组件”面板(“窗口”>“组件”)
属性检查器(“窗口”>“属性”)
添加复选框使用“CheckBox”组件来创建一个值为 true 或 false 的框。
1在 UI 层中选择第 1 帧。
2把“CheckBox”组件从“组件”面板拖到舞台中。把它放在询问用户是否想进入博彩那一段的下面。
组件出现在“库”面板的“Flash UI Components”文件夹中。
组件教程简介85
添加组合框使用“ComboBox”组件创建一个简单的下拉菜单,其中包含用户可以选择的项目。也可以使用“ComboBox”构建更为复杂的下拉菜单,这个菜单可以自动滚动到以用户输入到文本字段中的字母开头的菜单项。
把“ComboBox”组件从“组件”面板拖到舞台中。把它放在“选择您喜欢的颜色:”下。
组件出现在“库”面板的“Flash UI Components”文件夹中。
添加普通按钮使用“PushButton”组件创建两个普通按钮。一个按钮放在第 1 页,用来提交窗体中的信息。
另一个按钮放在第 2 页,用来返回到第 1 页,并把以前提交的值填回第 1 页。
1把“PushButton”组件从“组件”面板拖到舞台中。把它放在窗体的右下角,使它和“姓名:”及“电子邮件:”文本字段保持在同一水平线上。
组件出现在“库”面板的“Flash UI Components”文件夹中。
把组件从“组件”面板拖到舞台中后,即可从“库”面板中选择它的其他实例。
第 3 章86
2转到位于第 6 帧的空白关键帧。在“库”面板中,打开“Flash UI Components”文件夹,
从“库”面板中把“PushButton”组件拖到舞台中。把它放在右下角。
配置组件下一步是配置组件,用正确的信息设置它们以便用户选择。
您可以使用属性检查器或“组件参数”面板的“参数”选项卡来设置组件的参数。
高级用户可以使用每个组件的 API 方法和属性来设置组件的参数、大小、外观和其它属性。每个组件元素可用的方法和属性列在组件名下面的动作脚本字典里。
配置复选框
1在 UI 层中选择第 1 帧,然后选择舞台中的“CheckBox”组件。它的参数显示在属性检查器中。
2在“Instance Name”文本框中键入 sweepstakes_box 。
3在“Label”文本框中键入“妙极了!”
4在初始值参数弹出式菜单中,选择“Tr u e”。这指定“CheckBox”组件的初始状态是选中
(True) 还是没有选中 (False)。
5在标签定位参数弹出式菜单中,保留默认值为右对齐。标签将显示在复选框的右边。
6不要更改 Change Handler 参数。
Change Handler 参数是您希望在用户选择某个项目时执行的函数。此函数必须和组件实例定义在同一个时间轴里。此参数是可选的。只有在希望用户访问组件时应产生一个动作的情况下,才需要指定这个参数。
完成上述操作后,属性检查器应该是下面的样子,
组件教程简介87
有关使用“FcheckBox”组件的 API 方法来设置组件附加选项的详细信息,请参阅 Flash“帮助”中在线“动作脚本字典”的“FCheckBox”(组件)条目。
配置组合框
1在舞台中选择“ComboBox”组件。它的参数显示在属性检查器中。
2在“Instance Name”文本框中键入color_box 。
3确保将“Editable”参数设为 False。这样可以防止用户键入他们自已的文本。
4 Labels 参数显示用户可以选择的一个值列表。单击“Labels”字段,然后单击放大镜打开
“值”弹出式窗口。单击加号 (+) 按钮输入一个新的值。
5单击 default value 字段,然后键入“珍珠白”作为第 1 个值。
6单击加号 (+) 按钮输入下一个值。单击 default value 字段,然后键入“宝石蓝”作为下一个值。
第 3 章88
7用相同的方式,把“翡翠绿”添加到列表中。
完成上述操作后,“值”弹出式窗口应该是下面的样子:
8单击“确定”以关闭“值”弹出式窗口。
Data 参数是可选的。它用来指定与列表框中的项目(标签)相关联的值。在本教程中不需要做这些。
9 Row Count 参数指定窗口中显示多少行。由于有三个选项,把值改为 3。
无需输入 Change Handler 参数的名称。
完成上述操作后,属性检查器应该是下面的样子,
有关使用 API 方法来更改附加属性的详细信息,请参阅 Flash“帮助”中在线“动作脚本字典”
的“FCheckBox”(组件)条目。
配置普通按钮
1在第 1 帧中选择“PushButton”组件。
组件的参数显示在属性检查器中。
组件教程简介89
2在属性检查器“Instance Name”文本框中,键入 submit_btn。
3在属性检查器“Label”文本框中,键入“提交”。
文本显示在按钮上。
4键入 onClick 作为“Click Handler”的名称。后面将编写动作脚本来定义“Click Handler”
应该执行的操作。
完成上述操作后,属性检查器应该是下面的样子:
5在第 6 帧中选择“PushButton”组件。
6在属性检查器“Instance Name”文本框中,键入 return_btn。
7在属性检查器“Label”文本框中,键入“返回”。
8键入 onClick 作为“Click Handler”的名称。
有关使用“FpushButton”组件 API 方法来修改附加属性的信息,请参阅 Flash“帮助”中在线
“动作脚本字典”的“FpushButton”(组件)条目。
编写动作脚本来收集数据一些动作脚本会用在整个影片中,而另一些只和特定的帧相关。下表可以帮助您理解实例名称。
实例名称说明
color_box第
1 页上的“Color”组合框
sweepstakes_box第
1 页上的“Sweepstakes”复选框
submit_btn第
1 页上的“Submit”普通按钮
name第
1 页上的名称输入文本框
email第
1 页上的电子邮件地址输入文本框
return_btn第
2 页中的“Return”普通按钮
name_result第
2 页中显示用户名的动态文本框
email_result第
2 页中显示用户电子邮件地址的动态文本框
color_result第
2 页中显示用户颜色选择的动态文本框
sweepstakes_text第
2 页中根据用户是否选择参加搏彩来显示不同文本的动态文本框第 3 章90
为整个影片编写动作脚本组件动作脚本放置在关键帧中。“Click Handler”参数指定当“PushButton”组件被激活时进行的操作。默认值是 onClick,这意味着当用户单击某个普通按钮时,它会被激活。首先要为
onClick 创建一个函数。这是一个分支函数,它首先判断被按下的是“提交”按钮还是“返回”
按钮,然后据此执行动作。
1创建一个新的层,并命名为 All Actions。这将用于在整个影片中运行的动作脚本。
2如果“动作”面板没有打开,选择“窗口”>“动作”。
3按下 Control+Shift+E 键 (Windows) 或 Command+Shift+E 键 (Macintosh),或单击右上角的控制图标(一个上面有复选标记的三角形)并从弹出菜单中选择“专家模式”,切换到专家模式。
4首先,输入普通按钮的回调函数。这是个条件语句,根据单击的按钮进行分支。如果单击的是“提交”按钮,它将分支到 getResults 函数并进入第 2 页,如果单击的是“返回”按钮,它将进入第 1 页。
在“动作”面板中输入下面的代码。
// push button callback
function onClick(btn) {
if (btn == submit_btn) {
getResults();
gotoAndStop("pg2");
} else if (btn == return_btn) {
gotoAndStop("pg1");
}
}
注意,虽然不建议您这样做,但如果您不想编写动作脚本,可以从本教程中复制这段文本并粘贴到“动作”面板。
5现在编写 getResults 函数。该函数可以从搏彩复选框和颜色组合框中获取结果。它以标签的形式从组合框中得到结果,因而可以显示结果。
// get results from pg 1
function getResults() {
sweepstakes_result = sweepstakes_box.getValue();
color_result = color_box.getSelectedItem().label;
selectedItem = color_box.getSelectedIndex();
}
6现在编写 initValues 函数。这将用用户以前选择的值初始化第 1 页中的值。当用户单击
“返回”按钮时,它会运行。
// initialize the values on pg 1 with the values the user has previously
selected
function initValues() {
sweepstakes_box.setValue(sweepstakes_result);
if (!started) {
color_box.setSelectedIndex(0);
started = true;
} else {
color_box.setSelectedIndex(selectedItem);
}
}
组件教程简介91
7最后,在动作脚本的开头添加对 initValues 函数的调用。完成上述操作后,动作脚本应该是下面的样子,
initValues();
// push button callback
function onClick(btn) {
if (btn == submit_btn) {
getResults();
gotoAndStop("pg2");
} else if (btn == return_btn) {
gotoAndStop("pg1");
}
}
// initialize the values on pg 1 with the values the user has previously
selected
function initValues() {
sweepstakes_box.setValue(sweepstakes_result);
if (!started) {
color_box.setSelectedIndex(0);
started = true;
} else {
color_box.setSelectedIndex(selectedItem);
}
}
// get results from pg 1
function getResults() {
sweepstakes_result = sweepstakes_box.getValue();
color_result = color_box.getSelectedItem().label;
selectedItem = color_box.getSelectedIndex();
}
您已经完成了要在整个影片中运行的脚本。但是,仍然需要为第 1 页和第 2 页中的帧添加脚本。
为每一个关键帧添加动作脚本只有当用户选择特定的帧时,才需要执行某些动作脚本。要使动作脚本工作,需要给每个关键帧命名。
1创建一个新层,并命名为 Frame Actions。选择第 1 帧,然后选择“插入”>“空白关键帧”
来插入一个空白关键帧。使用属性检查器将关键帧命名为 pg1。用同样的方式,在第 6 帧中插入一个关键帧,并命名为 pg2。
2在 Frame Actions 层的第 1 帧中选择关键帧,并编写下面的动作脚本以在第 1 帧 (pg1) 停止影片。
stop();
第 3 章92
3(可选)如果想在用户选择了搏彩复选框时显示某一文本,而在用户未选择时显示其它文本,
可以编写一条带有文本的条件语句,将其插入第 2 页的 sweepstakes_text 动态文本字段。在
Frame Actions 层中选择名为 pg2 的关键帧,并在“动作”面板中写入以下内容:
// sweepstakes text
if (sweepstakes_result==true) {
sweepstakes_text = "You have been entered in the Stiletto Fantasy
sweepstakes,Winners are announced at the end of each month.";
} else {
sweepstakes_text = "You have not been entered in the Stiletto Fantasy
sweepstakes.";
}
注意,不要剪切此动作脚本并将其粘贴到“动作”面板。它不会正确运行,因为在第 1 行和第 2 行的文本之间有分行符。
测试影片要看组件的样子,请在 Flash Player 6 中运行该影片。
1选择“控制”>“测试影片”。
影片在 Flash Player 中运行。
2通过选择和不选择复选框来确定它是否工作。
3选择一种颜色,确定它是否出现在第 2 页。
4完成测试后,在播放器中选择“文件”>“关闭”来关闭影片。
5如果发现有任何错误,请使用箭头工具来选择组件,然后在属性检查器中进行纠正。如果需要,重新测试影片。
后续步骤本教程介绍了创建一组简单组件并显示结果的基本步骤。有关的详细信息,请参阅“使用 Flash”
和“动作脚本字典”,二者都可以在“帮助”菜单中找到。
组件教程简介93
第 3 章94
Flash MX
教程商标
Afterburner、AppletAce、Attain、Attain Enterprise Learning System、Attain Essentials、Attain Objects for Dreamweaver、
Authorware、Authorware Attain、Authorware Interactive Studio、Authorware Star、Authorware Synergy、Backstage、
Backstage Designer、Backstage Desktop Studio、Backstage Enterprise Studio、Backstage Internet Studio、Design in
Motion、Director、Director Multimedia Studio、Doc Around the Clock、Dreamweaver、Dreamweaver Attain、
Drumbeat、Drumbeat 2000、Extreme 3D、Fireworks、Flash、Fontographer、FreeHand、FreeHand Graphics Studio、
Generator、Generator Developer's Studio、Generator Dynamic Graphics Server、Knowledge Objects、Knowledge
Stream、Knowledge Track、Lingo、Live Effects、Macromedia、Macromedia M 徽标和图案、Macromedia Flash、
Macromedia Xres、Macromind、Macromind Action、MAGIC、Mediamaker、Object Authoring、Power Applets、Priority
Access、Roundtrip HTML、Scriptlets、SoundEdit、ShockRave、Shockmachine、Shockwave、Shockwave Remote、
Shockwave Internet Studio、Showcase、Tools to Power Your Ideas、Universal Media、Virtuoso、Web Design 101、
Whirlwind 和 Xtra 是 Macromedia,Inc,的商标,可能已经在美国或其它管辖区甚至世界范围内注册。本出版物中提到的其它产品名称、徽标、图案、标题、文字或短语可能是 Macromedia,Inc,或其它实体的商标、服务标志或商品名称,并且可能已经在特定的管辖区甚至世界范围内注册。
第三方信息语音压缩和解压技术由 Nellymoser,Inc,(www.nellymoser.com) 提供许可。
Sorenson? Spark? 视频压缩和解压技术由 Sorenson Media,Inc,提供许可。
本指南包含指向第三方 Web 站点的链接,这些站点不由 Macromedia 控制,Macromedia 不对所链接的任何站点的内容负责。如果要访问本指南提到的第三方 Web 站点,您应自己承担因此而带来的风险。
Macromedia 提供这些链接只是为您提供方便。包含这些链接并不意味着 Macromedia 为这些第三方站点的内容提供担保或承担责任。
Apple 公司免责声明
APPLE COMPUTER,INC,对所附计算机软件包的适销性或用于特定目的的适用性不提供任何明示或暗示的担保。某些州不允许排除暗示的担保。上述排除可能不适用于您。此担保赋予您特定的法律权利。您还可能有其它权利,在不同的州内,这些权利可能不同。
版权所有? 2002 Macromedia,Inc,保留所有权利。未经 Macromedia,Inc,事先书面许可,本手册及其任何部分都不允许拷贝、影印、复制、翻译或转换成任何电子形式或机器可读的形式。
致谢导演:Erick Vera
制片:Wayne Wieseler
撰稿:Jody Bleyle、JuLee Burdekin、Mary Burger、Dale Crawford、Marcelle Taylor
设计指导:Stephanie Gowin、Barbara Nelson
编辑:Rosana Francescato、Lisa Stanziano、Anne Szabla
多媒体设计和制作:Aaron Begley、Benjamin Salles、Noah Zilberberg
印刷设计和制作:Chris Basmajian、Caroline Branch
产品中文化:保捷环球电脑软件公司 (Bowne Global Solutions)、Julia Chen、Michael Dominguez、Cristina Guembe、
Yoshika Hedberg、Tim Hussey、Masayo,Noppe” Noda、Simone Pux、Yoko Shindo、Yuko Yagi
第一版:2002 年 7 月
Macromedia,Inc,600 Townsend St,San Francisco,CA 94103
第 3 章组件教程简介.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,83
组件类型.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,83
查看完成的窗体,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,84
创建窗体.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,84
后续步骤.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,93
目 录第 1 章
Flash MX 教程简介.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,5
基础知识.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,5
查看完成的影片,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,6
分析 stiletto.fla 文件.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,7
定义新文档属性和创建渐变背景.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,12
创建矢量图并为其添加遮罩,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,20
在影片剪辑中补间位图效果,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,30
在运行时载入动态文本.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,37
向按钮添加动画和导航.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,42
添加声音流和事件声音.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,48
组织“库”面板.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,49
测试下载性能,然后发布该影片.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,51
后续步骤.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,55
第 2 章动作脚本教程简介.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,57
观看完成的影片,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,58
初始化影片.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,61
保存并获取信息,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,65
在动态文本框中显示信息,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,67
编写表达式.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,69
控制影片的流向,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,72
创建命令并重用代码.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,73
使用内置对象.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,78
测试影片.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,80
后续步骤.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,82
3
目 录4
第 1 章
Flash MX
教程简介本教程将指导您使用 Macromedia Flash MX 创建精彩的 Web 内容。学完本教程后,您将学会如何设计影片,从打开一个新文档直到将影片发布到 Web 上进行播放。取决于您的经验和功力,学完本教程大约需要 3 个小时左右,您将学会如何完成下列任务:
分析完成的影片
定义文档属性和创建渐变
创建矢量图并为其添加遮罩
在影片剪辑中补间位图效果
载入动态文本
修改按钮和添加导航
添加声音流和事件声音
测试和发布影片建议您按顺序完成本教程包含的八个部分,当然您也可以只选择浏览您感兴趣的部分。如果不按顺序完成此教程,请记住,后面的部分假定您已掌握了前几部分介绍的技巧。
基础知识在开始学习本教程之前,请完成 Flash 帮助中的七课。这些在 Flash 中创作的交互式课程将向您介绍完成本教程所需的概念。课程主题包括以下方面:
Flash MX 入门
Flash 说明
添加和编辑文本
创建和编辑元件
了解图层
创建按钮
创建补间动画
5
要学习课程,请选择“帮助”>“课程”,然后从列表中进行选择。
查看完成的影片您可以打开一个已完成的教程影片,从而更好地理解完成的文件将如何显示出来。
在本节中,您将完成以下任务:
使用属性检查器和影片浏览器分析完成的影片
检查影片剪辑,并认识它与主影片的关系
查看影片中包括的资产类型
1在 Flash MX 应用程序文件夹中,浏览到 Tutorials/FlashIntro 并双击 stiletto.swf,可以在单独的 Flash Player 中打开完成的影片。
已发布的 Flash 影片的扩展名为 SWF;创作环境中的文档的扩展名为 FLA。
2当影片打开时,观察汽车的三个淡入淡出的视图。
您可以在影片剪辑中通过补间位图效果来创建此动画。
3聆听影片放映时连续播放的声音。这就是声音流的范例。
4将指针沿着窗口的右下沿滑过三个按钮,查看指针滑过的效果,并倾听每个按钮中包含的事件声音。
5单击一个按钮,查看它所链接的位置,然后关闭打开的浏览器并返回到 SWF 文件。
6查看完影片之后,单击其关闭框。
第 1 章6
分析文件 stiletto.fla
分析完成的 FLA 文件有助于查看作者是如何设计文档的。要分析该文件,您可以查看对象的属性、查看时间轴和舞台、查看库资产,以及使用影片浏览器。
1在 Flash 中,选择“文件”>“打开”。定位到 Flash 应用程序文件夹,打开 Tuto r i als/
FlashIntro/stiletto.fla。
现在您可以在创作环境中查看完成的教程影片了。
2要查看主时间轴中的所有图层,请向下拖动分隔舞台和时间轴的栏。
3在时间轴上,解除锁定 Copy 图层和 Images 图层。
拖动分隔舞台和时间轴的栏
Flash MX 教程简介7
查看文档属性属性检查器使您可以查看所选对象的规格。规格取决于所选对象的类型。例如,如果选择了文本对象,将会显示查看和修改文本属性的设置。
1如果属性检查器没有打开,请选择“窗口”>“属性”。
2如果需要,在舞台中向下滚动,然后在完成的 SWF 文件中选择显示描述性文本的矩形块。文本不会出现在 FLA 文件中,因为它是从外部 TXT 文件载入到动态文本字段中的。
在属性检查器中,可以查看文本的大小、样式和颜色,以及其它属性。
如果属性检查器没有完全展开,请单击右下角的白色三角。
3在舞台中,选择汽车。
影片剪辑设置将代替文本设置。影片剪辑是带有各自时间轴的元件。您可以将它们看作是影片中的影片。
文本框第 1 章8
查看影片剪辑现在,您将打开元件编辑模式,查看影片剪辑的时间轴。
1在舞台上,双击汽车的影片剪辑。
就像在“创建补间动画”一课中学习的一样,您可以在关键帧中定义动画中的更改。当滚动时间轴时,请注意哪些图层中有关键帧,以及哪些帧是关键帧。
包括内容的起始关键帧和中间关键帧在时间轴中以实心圆表示,结束关键帧则显示为小矩形框。
2在时间轴中,选择播放头,然后沿着帧慢慢拖动它。
随着时间轴中的更改,观察舞台中动作的相应变化。随着播放头的移动,影片也就顺序播放。
您可以向影片中添加动作脚本(Flash 脚本撰写语言),以使播放头跳到特定的帧。
3看完影片剪辑后,执行以下一种操作即可回到主影片:
选择“编辑”>“编辑文档”。
单击“返回”按钮。
单击舞台上的“场景 1”。
查看库资产
“库”面板包含文档中的元件以及导入对象。
1如果“库”面板没有打开,请选择“窗口”>“库”。
2如果需要,拖动“库”面板将其放大,以便查看库中的对象。
3如果 Artwork 文件夹没有展开,请双击它查看该文件夹中的对象。
4单击 view1.png,在“库”面板的顶部预览区域中查看该图像。
5展开“库”面板中的其它文件夹,查看文档中包括的资产,例如按钮和影片剪辑。
Flash MX 教程简介9
6查看完资产之后,请关闭“库”面板。
用影片浏览器分析影片结构影片浏览器有助于排列、定位和编辑媒体。影片浏览器通过分层树结构提供有关影片的组织和流的信息,这在分析别人创作的影片时特别有用。
1如果影片浏览器还没有打开,请选择“窗口”>“影片浏览器”。
2如果需要,扩大影片浏览器,以便查看窗格中的树形结构。
影片浏览器的过滤按钮用于显示或隐藏信息。
第 1 章10
3单击影片浏览器标题栏中的弹出菜单,确认“显示影片元素”和“显示元件定义”处于选中状态。
4在影片浏览器的顶部,取消选择“显示帧和图层”按钮。确认选中的过滤按钮只有“显示文本”、“显示按钮、影片剪辑和图形”、“显示动作脚本”和“显示视频、声音和位图”。
5检查该列表,查看影片中包括的一些资产,并了解它们与其它资产之间的关系。
6要展开一个对象或类别,请单击其名称左边的加号 (+) 按钮
7选择“显示帧和图层”过滤按钮。向下滚动到“元件定义”类别。展开该类别,双击 Car
Animation 影片剪辑。
现在,您已经进入影片剪辑的元件编辑模式。
Flash MX 教程简介11
8在影片浏览器中,选择并展开 Car Animation 类别,展开 View 3 Fade 图标,然后双击 Frame
60。
在影片剪辑的时间轴中,播放头会移动到 View 3 Fade 图层的第 60 帧处。
要查看分层结构树中列出的项目,请单击相应的图标。如果单击帧图标,在时间轴中播放头将移动到该帧处。如果单击资产,例如位图图像,则属性检查器将显示该图像的设置。双击代表元件的图标将打开元件编辑模式。
9关闭影片浏览器。要关闭文档,请选择“文件”>“关闭”。
如果对文件进行了更改,请不要保存这些更改。
定义新文档属性和创建渐变背景要学习在 Flash 中创建影片,请从流程的第一步开始,即打开新文件。然后,通过完成本部分,
您将学会如何完成下列任务:
打开一个新文件并定义文档属性
创建渐变背景并使之变形打开新文件现在,您将创建自己的教程影片。
1选择“文件”>“新建”。
2选择“文件”>“另存为”。
3将该文件命名为 mystiletto.fla,并将其保存在 Flash MX 应用程序文件夹的 Tut o r ial s/
FlashIntro/My_Stiletto 子文件夹中。
注意,在完成教程的过程中,请记住经常保存您的工作。
定义文档属性配置文档属性是各类创作中的第一步。可以使用属性检查器和“文档属性”对话框来指定影响整个影片的设置,例如每秒帧数 (fps) 播放速度,以及舞台大小和背景色。
1如果属性检查器没有打开,请选择“窗口”>“属性”。在属性检查器中,确认“帧频”文本框中的数值为 12。
影片的播放速度为每秒 12 帧,这是在 Web 上播放动画的最佳帧频。
注意,如果属性检查器没有完全展开,请单击右下角的白色三角。
第 1 章12
2“背景色”框指示舞台的颜色。单击“背景色”框上的向下箭头,然后在颜色样本上“移动滴管工具”,以便在十六进制文本框中查看它们的十六进制值。
3找到并单击灰色样本,其十六进制值为 999999。
4要调整舞台的大小,请单击“大小”按钮,它用于指示舞台的大小。在“文档属性”对话框中,在第一个“尺寸”文本框中键入 640 px,在第二个“尺寸”文本框中键入 290 px。确认在弹出菜单中选择的是“像素”,然后单击“确定”。
舞台尺寸将发生更改,以反映 640 x 290 像素的新设置。
指定网格设置在舞台中,您可以沿着水平和垂直网格线对齐对象。即使在网格不可见时,也可以将对象与网格对齐。现在,要修改水平网格线之间和垂直网格线之间的距离,并创建与舞台边界对齐的网格。
1选择“查看”>“网格”>“编辑网格”。
2在“网格”对话框的网格宽度文本框中键入 10 px,在网格高度文本框中键入 10 px。
3选择“对齐网格”,并确认没有选择“显示网格”。
这样,即使网格是不可见的,对象也将与网格对齐。
选择这种灰度十六进制文本框
Flash MX 教程简介13
4确认“对齐精确度”选择的是“正常”,然后单击“确定”。
对齐精确度决定对象与网格线之间必须多近时才能将它们对齐。
创建渐变背景渐变显示颜色的细微变化,或是两种或多种颜色之间的过渡。在完成的教程文件中,背景从黑色渐变为深蓝色,其中包含透明区域,可以显示部分灰色舞台。可使用混色器得到这种效果。
注意,尽管渐变可以在影片中实现有趣的效果,但是过度使用将会影响计算机处理器的速度,并降低动画的播放速度。在设计影片时,要同时考虑艺术效果和性能要求,这样才能最合理地使用渐变。
绘制矩形在教程的开始,您已经创建了与舞台对齐的网格,并允许将对象与网格线对齐。现在要绘制一个矩形,使其与舞台边的网格区域对齐。
1在舞台右侧上方的弹出菜单中,输入 75%,以便查看整个舞台。
此设置指示舞台的放大或缩小视图。该设置不会影响影片中舞台的实际大小,实际大小是在
“文档属性”对话框中指定的。
2在工具箱中,选择“矩形工具”。
3在工具箱中,单击“笔触颜色”控件。选择“没有笔触”(调色板上带有红色对角线的按钮)。
所选的形状填充颜色并不重要;您可以随时更改该颜色。
第 1 章14
4从舞台的左上角开始,拖到舞台的右下角,拖出一个覆盖整个舞台的矩形。
释放指针后,该矩形将沿着隐藏的网格与舞台的边界对齐。
注意,在完成本教程的过程中,您会发现能够撤消所作的更改非常有用。Flash 可以撤消刚才所作的几次更改,这取决于在“首选参数”中设置的撤消级别数。要进行撤消,请选择“编辑”>“撤消”,或者按下 Control+Z 组合键
(Windows) 或 Command+Z 组合键 (Macintosh)。反之,您可以重做已经撤消的动作,方法是选择“编辑”>“重做”,或者按下 Control+Y 组合键 (Windows) 或 Command+Y 组合键 (Macintosh)。
指定渐变的颜色深蓝色是第一种要添加到渐变中的颜色。
1在工具箱中,选择“箭头工具”。在舞台中,单击矩形内部以选择填充。
在画矩形时,属性检查器会显示“矩形工具”的属性。当您选择已经创建的形状时,属性检查器会显示该形状的属性。
2如果混色器没有打开,请选择“窗口”>“混色器”。
3要展开混色器,请单击面板标题栏中的白色箭头。
单击此处展开该面板
Flash MX 教程简介15
4如果混色器没有完全展开,请单击面板右下角的箭头。
5在“填充样式”弹出菜单中,选择“放射状”。
6单击渐变栏左侧的渐变滑块将它选中。
7单击窗口左上角中的颜色框,打开调色板。使用以下方法之一选择深蓝:
在十六进制值文本框中键入 000066,然后按下 Enter 或 Return 键。
将滴管在颜色样本上移动,找到深蓝色(十六进制值为 000066),然后单击该样本以选择它。
渐变滑块渐变栏单击这种深度的蓝色第 1 章16
更改 Alpha 值在混色器中,“Alpha”文本框指示颜色的透明度,0% 表示颜色是完全透明的,而 100% 则表示颜色是完全不透明的。将 Alpha 值指定为 0%,从而创建一个从深蓝色到黑色的渐变,在渐变的透明区域中显示灰色舞台。
在混色器中,在“Alpha”文本框中键入 0 后按下 Enter 或 Return 键,或者将 Alpha 滑块移动到 0。
添加第二种渐变色现在,您将向渐变中添加黑色。
1在混色器中,单击渐变栏右侧的渐变滑块以选中它。
2单击颜色框,打开调色板,选择黑色(十六进制值为 000000)。
请记住,您可以在十六进制文本框中键入十六进制值,然后按下 Enter 或 Return 键,也可以查找并选择具有相同十六进制值的颜色样本。
Flash MX 教程简介17
使渐变填充变形如果要使对象变形,您可以旋转、缩放或倾斜它。您可以使用“填充变形工具”使对象变形。
1在工具箱中,选择“填充变形工具”。在舞台中,单击该矩形内的任意位置。
舞台周围会显示一个椭圆,指示渐变的形状和位置。该椭圆有用于控制放射状渐变的位置、宽度、缩放和旋转的控件。
2将中心控件拖到舞台的左部,使其距舞台左侧边界的距离大约为 1/3 处,如下图所示。
在更改椭圆的形状和位置时,舞台中颜色过渡的形状和位置也随之更改。
宽度缩放旋转中心位置第 1 章18
3向左拖动椭圆上的方形手柄(它控制渐变的宽度),使椭圆变窄;椭圆的大体形状如下图所示。
4向右拖动中间的环形手柄(它控制着渐变大小),使椭圆变大,如下图所示。
Flash MX 教程简介19
5向左拖动下面的环形手柄(它控制椭圆的旋转),使椭圆旋转成如下图所示的角度。
命名和锁定图层在时间轴中,渐变形状显示在图层 1 上,当前它是您文档中唯一的图层。在准备向舞台中添加和移动其它对象之前,要重命名该图层,并将其锁定。在本教程的下一部分中,您将创建一个新图层。
正如您在“了解图层”一课中学习的一样,通过锁定图层,可以确保您或其他用户不会意外地更改该图层上的对象。
1在时间轴上,双击图层 1 的名称,然后键入 Background 以重命名该图层。
2在图层名称之外单击,然后单击挂锁图标锁定该图层。
创建矢量图并为其添加遮罩在 Flash 中作图时,可以创建矢量图,它是直线、曲线、颜色和位置的数学表达。矢量图与分辨率无关;您可以将该矢量图缩放到任意大小或以任何分辨率显示,这都不会影响清晰度。另外,
矢量图与可比较的位图图像相比,下载速度更快。
完成的文件中包含渐变以及背景形状。您可以使用“椭圆工具”创建形状。
在本部分中,您将学习如何完成下列任务:
添加图层
创建并“剪切”形状
为包含形状的图层添加遮罩第 1 章20
要完成本部分,您可以继续处理 mystiletto.fla 文件,也可以浏览到 Flash MX 应用程序文件夹,
打开 Tutorials/FlashIntro/stiletto2.fla。如果您要使用 stiletto2.fla 文件,请用一个新名称将其保存到 My_Stiletto 文件夹中,以确保不改变原文件。
添加图层您可以添加一个新图层,然后在该图层上绘制形状,而不用在背景图层上创建形状。
1要添加新图层,请选择“插入”>“图层”,或单击“插入图层”按钮。将新图层命名为
Shapes。
2在工具箱中,选择“椭圆工具”。
3在属性检查器中,从“笔触样式”弹出菜单中选择“极细”。单击“笔触颜色”控件。在调色板中,选择灰色,十六进制值为 999999。
请记住,您可以在十六进制文本框中输入十六进制值,也可以查找并单击具有相同十六进制值的颜色样本。
4如果混色器没有打开,请选择“窗口”>“混色器”。在“填充样式”弹出菜单中,选择“纯色”。单击“填充颜色”控件以选择它。在“红”字段中,键入 109。在“绿”和“蓝”文本框中,键入 45,然后按下 Enter 或 Return 键。
这样就指定了一个颜色中红色、绿色和蓝色所占量的值。
“插入图层”按钮
Flash MX 教程简介21
5在时间轴中,确认选择了 Shapes 图层。在舞台中,按住 Shift 键拖画,强制“椭圆工具”画出一个圆,该圆从舞台上的画布区域开始,一直扩展到舞台下的画布区域。
注意,如果操作失误,请选择“编辑”>“撤消”,然后重试。
6在工具箱中选择“箭头工具”,然后双击舞台上的圆,以便选择填充和笔触。
7如果“变形”面板没有打开,请选择“窗口”>“变形”。
8要展开“变形”面板,请单击左上角的白色箭头。选择“倾斜”,并在“水平倾斜”文本框中键入 20.0,然后按下 Enter 或 Return 键。
第 1 章22
您画的圆将更改为一个倾斜的椭圆。
创建相同形状并使之变形您现在将创建一个相同的椭圆并使之变形。
1在舞台中椭圆的填充和笔触仍都处于选中状态的情况下,选择“编辑”>“复制”。
Flash MX 教程简介23
2在属性检查器中,使用“填充颜色”控件选择黑色。
3在工具箱中,选择“任意变形工具”。
在复制的椭圆周围将出现一个带有手柄的辅助线。
4将指针移动到某个角的手柄上,直到出现一个双箭头指示器。将角手柄向内拖动,使椭圆变小。确认内部椭圆的笔触没有接触到外部椭圆的笔触。
第 1 章24
5将指针移动到角手柄上,直到指针变为旋转指示器。将旋转指示器向左侧拖动,使该椭圆大约旋转到下图所示的位置。
创建该副本的“剪切”图如果在同一图层的一个形状之上创建了另一个形状,这两个形状的颜色不同,而且没有组合在一起,则上面的形状可以从下面的形状中“剪切”出一个区域。您将删除复制的椭圆,从而查看剪切效果。
1在复制的椭圆周围显示“任意变形工具”辅助线的情况下,单击舞台或画布上这两个形状之外的任何位置,然后单击内部椭圆的填充。按下键盘上的 Delete 键,删除该填充。
Flash MX 教程简介25
2现在的椭圆具有外部和内部两条笔触。使用“箭头工具”,单击椭圆最外围的笔触以选中它,
然后按住 Shift 单击最内围的笔触把它也选中。把笔触向填充的右侧稍微拖动一下,如下图所示。
3由笔触分为两部分的区域中每块填充颜色现在都代表一个离散的片断,您可以分别将它们着色。选择形状填充的一个区域,然后使用混色器将填充颜色更改为某个深度的棕色(红色值为 117,绿色值为 78,蓝色值为 53)。如果愿意,可以重复此步骤将另一块填充区域更改为较浅的棕色,如下图所示:
第 1 章26
4选择“任意变形工具”。在椭圆背景形状四周拖动指针,选中所有形状,然后拖动辅助线的右角手柄扩大这些形状,如下图所示。
5在舞台中拖动形状,以使部分曲线显示在舞台的左上角和右侧。
注意,在完成教程的过程中,请记住经常保存您的工作。
Flash MX 教程简介27
创建遮罩您在 Shapes 图层创建的图形超出了舞台,扩展到了画布区域。尽管画布区域不会出现在发布的影片中,但是在创作环境中,超出舞台的图形会使人感到杂乱。您可以擦除进入画布的那部分形状,但是还有一个更好的办法,就是在舞台上应用遮罩,以使只有遮罩下的区域(在本例中为整个舞台)才是可见的。通过这种方法,如果您想返回到形状来修改它们,它们将是完好的。
1在 Shapes 图层处于选中状态时,在时间轴中添加一个新图层,并将其命名为 Mask。
2在工具箱中,选择“矩形工具”,画一个矩形,范围从舞台的左上角扩展到右下角。
此矩形就是遮罩的形状。矩形下的任何内容都是可见的。
第 1 章28
3右击 (Windows) 或按住 Control 键并单击 (Macintosh) 时间轴中 Mask 图层的名称,然后从上下文菜单中选择“遮罩层”。
该图层将转换为遮罩层,由一个向下箭头图标表示。它下面紧挨的图层将链接到遮罩层,其内容会显示在遮罩的填充区域上。被蒙住的图层名将会缩进,其图标将更改为向右的箭头。画布上的图形不再显示在舞台中。
必须锁定遮罩层,才能显示出遮罩效果。要编辑形状,可以解锁 Mask 和 Background Shapes
图层。编辑完图形后,请再次锁定这些图层以调用遮罩。
4保存文件。
Flash MX 教程简介29
在影片剪辑中补间位图效果在 Flash 中除了可以创建矢量图之外,还可以将位图图像(这种图像使用像素显示图形)导入
Flash 影片,从而应用不同的颜色效果。在本部分中,您将完成下列任务:
导入位图图像
修改位图压缩
创建和编辑影片剪辑元件
补间位图效果实现汽车视图的淡入淡出要完成本部分,您可以继续处理 mystiletto.fla 文件,也可以浏览到 Flash MX 应用程序文件夹,
打开 Tutorials/FlashIntro/stiletto3.fla。如果您要使用 stiletto3.fla 文件,请用一个新名称将其保存到 My_Stiletto 文件夹中,以确保不改变原文件。
向库中导入图像在向 Flash 中导入文件时,可以直接将其导入库中。
1在时间轴中,添加一个新图层,并将其命名为 Images。
2选择“文件”>“导入到库”。
当选择“导入到库”而不是“导入”时,必须先将图像放到舞台中,然后才会显示出来。
3浏览到 Flash MX 应用程序文件夹中的 Tutorials/FlashIntro/Assets 文件夹,选择 view1.png,
然后按住 Shift 键并单击 view2.png 和 view3.png,从而选定这三幅图像。单击“打开”。
4在“Fireworks PNG 导入设置”对话框中,单击“作为单个扁平化的位图导入”,然后单击
“确定”。
这三幅图像现已添加到库中。
第 1 章30
修改位图压缩在导入图像时,可以检查和修改图像的压缩设置。尽管压缩图像可以减少影片文件的大小,但是也会影响图像的质量,我们的目标是要在压缩设置和图像质量之间取得最佳平衡。
1如果“库”面板没有打开,请选择“窗口”>“库”。如果需要,扩大该窗口,查看导入的三个文件。
2双击 view1.png 文件。
其默认选择是 JPEG 压缩。
3在“压缩”弹出菜单中,选择“无损 (PNG/GIF)”以获得较高的图像质量。
4要测试图像使用新设置的显示效果,请单击“测试”。如果需要,将该汽车图像拖到预览窗口的视图中。预览完图像后,单击“确定”。
5返回到“库”面板。双击 view2.png,重复第 3 步,然后单击“确定”。
6在“库”面板中,双击 view3.png,指定“无损 (PNG/GIF)”,然后单击“确定”。
Flash MX 教程简介31
创建影片剪辑元件在完成的文件中,电动汽车的三个视图在打开的场景中会呈现淡入淡出效果。此效果可以通过创建影片剪辑元件来实现,该元件的时间轴必须与主时间轴无关。然后,您需要补间这三个汽车视图之间的 Alpha 透明度,从而创造出淡入/淡出的效果。要开始创造这种效果,您需要创建影片剪辑。
1在时间轴中 Images 图层仍处于选中状态的情况下,将 view1.png 对象从“库”面板中拖到舞台中,将汽车放在渐变背景最淡的区域中。
2选择“插入”>“转换为元件”,或按下 F8。
3在“转换为元件”对话框中,将该元件命名为 Car Animation。确认选择了“影片剪辑”,
并且在“注册”指示符选择了中心方框,然后单击“确定”。
和其它 Flash 对象一样,位图也具有用于定位和变形的注册点。当您在影片剪辑中对齐这三个汽车视图时,所有这三个视图都将相对于中心注册点的位置进行对齐。
编辑元件要查看影片剪辑的时间轴,必须处于元件编辑模式。通过在舞台中或在“库”面板中双击元件,
即可打开元件编辑模式。
1在舞台中,双击汽车打开元件编辑模式。
元件名称将显示在画布区域之上,还有一个可以返回到主影片的“场景 1”链接。
在元件编辑模式中,您现在会看到影片剪辑的时间轴,而不是主影片的时间轴。
2将 Layer 1 重命名为 View 1 Fade。
3您在舞台中看到的汽车是 Car Animation 元件中的位图,而不是其中的元件。通过在舞台中选择该汽车,然后按下 F8,可以使之成为元件。
注册点第 1 章32
4在“转换为元件”对话框中,将该元件命名为 View 1 Car,然后确认“影片剪辑”处于选中状态。
5确认在“注册”指示符中选择了中心方块,然后单击“确定”。
6在时间轴上水平滚动,一直到第 105 帧。选择该帧,然后选择“插入”>“关键帧”,或者按下 F6 添加关键帧。
“当前帧”指示器会显示所选的帧。
7向第 25 帧和第 35 帧添加关键帧。
8向第 34 帧添加关键帧,然后在图层上单击第 36 帧和第 104 帧之间的任何地方,并按下键盘上的 Delete 键。
在第 35 帧中将出现一个空的关键帧,并且从第 35 帧开始,汽车不会出现在舞台中。
注意,如果因为在添加关键帧时出现错误而要删除这些关键帧,请选择一个或多个帧,然后右击 (Windows) 或按住
Control 键并单击 (Macintosh),再从上下文菜单中选择“清除关键帧”。
补间位图效果创建位图效果补间类似于创建直接的动画补间:指定起始关键帧和结束关键帧的设置,然后为这两个帧和它们之间的帧指定补间。Flash 在动画的第一个关键帧和最后一个关键帧之间创建过渡动画。
1在 Car Animation 时间轴中,选择第 34 帧,然后单击舞台上的 View 1 Car,打开显示影片剪辑属性的属性检查器。
当前帧
Flash MX 教程简介33
2在属性检查器的“颜色”弹出菜单中,选择“Alpha”。在“Alpha 数量”弹出菜单中,可以在文本框中键入 0% 并按下 Enter 或 Return 键,或使用弹出滑块选择 0%。
3在时间轴中,选择第 25 帧和第 34 帧之间的任意帧。在属性检查器中,从补间弹出菜单中选择“动作”。
此时会出现一个带有实线的箭头横跨补间的关键帧。关键帧之间的虚线表明没有正确地完成补间,这经常是由于缺少开始或结束关键帧。
淡入第二辆汽车当 View 1 Car 淡出时,汽车的另一个视图应该淡入。
1向 Car Animation 时间轴中添加新图层,并命名为 View 2 Fade。
2在 View 2 Fade 图层上,向第 25 帧添加一个关键帧。
3在播放头仍位于第 25 帧的情况下,将 view2.png 从“库”面板拖到舞台中。
4如果“信息”面板没有打开,请选择“窗口”>“信息”。确认在“注册”指示符中选择了中心方框,然后在 X 坐标文本框中键入 0,在 Y 坐标文本框中也键入 0。按下 Enter 或
Return 键。
属性检查器也有 X 和 Y 文本框;但是,这些坐标是相对于影片剪辑左上角的注册点的。
边框矩形第 1 章34
5选择舞台上的 view2.png,然后按下 F8 键使它成为一个元件。在“转换为元件”对话框中,
将该元件命名为 View 2 Car。确认选中了该影片剪辑,然后单击“确定”。
6在影片剪辑属性检查器中,从“颜色”弹出菜单中选择“Alpha”,并在“Alpha 数量”文本框中键入 0%。
7向 View 2 Fade 图层的第 35 帧中添加一个关键帧。
8在舞台上,单击透明汽车的边框矩形的内部。在影片剪辑属性检查器的“Alpha 数量”文本框中输入 100%。
9在 View 2 Fade 图层上,选择第 25 帧和第 34 帧之间的任意帧。在属性检查器中,从“补间”
弹出菜单中选择“动作”。
淡出第二辆汽车现在您将创建淡出第二辆汽车的动画。
1在 View 2 Fade 图层上,向第 60 帧添加一个关键帧。
2在 View 2 Fade 图层上,向第 70 帧添加一个关键帧,再向第 69 帧添加一个关键帧。
3选择 View 2 Fade 图层第 69 帧中的关键帧。在舞台上选择 View 2 Car,并使用属性检查器选择 0% 的 Alpha 透明度。
4在 View 2 Fade 图层上,选择第 60 帧和第 68 帧之间的任意帧。在属性检查器中,从“补间”
弹出菜单中选择“动作”。
5单击 View 2 Fade 图层上第 71 帧和第 105 帧之间的任意帧,然后按下 Delete 键。
注意,在完成教程的过程中,请记住经常保存您的工作。
Flash MX 教程简介35
淡入第三辆汽车当第二辆汽车淡出时,第三辆汽车将会淡入。您现在将创建该动画。
1在 View 2 Fade 图层处于选中状态时,向时间轴添加一个新图层,并将它命名为 View 3
Fade。
2在 View 3 Fade 图层上,向第 60 帧添加一个关键帧。
3在第 60 帧仍处于选中状态时,将 view3.png 从“库”面板拖到舞台中。使用“信息”面板
(如果该面板关闭,请选择“窗口”>“信息”)将 X 和 Y 坐标都指定为 0,然后确认注册点居中,处理方法和处理 view2.png 一样。
4选择舞台上的 view3.png,然后按下 F8 键使它成为一个元件。在“转换为元件”对话框中,
将该元件命名为 View 3 Car。确认选中了该影片剪辑,然后单击“确定”。
5在属性检查器中,从“颜色”弹出菜单中选择“Alpha”,并在“Alpha 数量”文本框中键入 0%。
6向 View 3 Fade 图层的第 70 帧中添加一个关键帧。
7在舞台上,选择“View 3 Car”的边框矩形的内部。在属性检查器的“Alpha 数量”文本框中输入 100%。
8在 View 3 Fade 图层上,选择第 60 帧和第 69 帧之间的任意帧。在属性检查器中,从“补间”
弹出菜单中选择“动作”。
淡出第三辆汽车现在您将创建淡出第三辆汽车的动画。
1在 View 3 Fade 图层上,向第 95 帧和第 105 帧添加一个关键帧。
2在 View 3 Fade 图层的第 105 帧处于选中状态时,选择舞台上的 View 3 Car,然后使用属性检查器选择 0% 的 Alpha 透明度。
3在 View 3 Fade 图层上,选择第 95 帧和第 104 帧之间的任意帧。在属性检查器中,从“补间”弹出菜单中选择“动作”。
第 1 章36
淡入第一辆汽车当第三辆汽车淡出时,第一辆汽车必须淡入才能完成动画。
1在 View 1 Fade 图层上,向第 95 帧添加一个关键帧。
2在第 95 帧仍处于选中状态时,将 View 1 Car 影片剪辑(不是 view1.png)从“库”面板拖到舞台中。
3在“信息”面板的 X 坐标文本框中键入 0,在 Y 坐标文本框中也键入 0。按下 Enter 或 Return
键。
4在属性检查器中,从“颜色”弹出菜单中选择“Alpha”,并在“Alpha 数量”文本框中输入 0%。
5选择 View 1 Fade 图层的第 104 帧。
6在舞台上,单击 View 1 Car 影片剪辑的边框矩形的内部。在属性检查器的“Alpha 数量”文本框中输入 100%。
7在 View 1 Fade 图层上,选择第 95 帧和第 104 帧之间的任意帧。在属性检查器中,从“补间”弹出菜单中选择“动作”。
注意,在完成教程的过程中,请记住经常保存您的工作。
测试影片在创作过程中,可以随时测试影片作为 SWF 文件播放时的效果。
1保存影片,然后选择“控制”>“测试影片”。
Flash 会导出您的影片的 SWF 拷贝。
在 SWF 影片中,动画会自动循环播放。
2当查看完影片之后,单击 SWF 文件的关闭框即可关闭它。在 Flash 文档中,选择“编辑”>
“编辑文档”或单击“场景 1”返回到主时间轴。
在运行时载入动态文本在“添加和编辑文本”课程中,您已经练习了如何在舞台上直接键入文本。您还可以将影片设计为包含外部文件的文本。实现此目的最方便的方法之一是使用 loadVariables 动作,在运行时将文本从文本文件载入到动态文本字段中。在 FLA 文件中,可以指定动态文本字段的文本属性,如字形、字号和颜色。将文本保留在外部文件中的优点之一是任何要修改文本的用户都可以处理该文本文件,而不用处理 FLA 文件。
在本部分中,您将学习如何完成下列任务:
导入和对齐徽标
创建动态文本字段
使用属性检查器分配文本变量名
使用 loadVariables 动作从外部文件中载入文本
Flash MX 教程简介37
要完成本部分,您可以继续处理 mystiletto.fla 文件,也可以浏览到 Flash MX 应用程序文件夹,
打开 Tutorials/FlashIntro/stiletto4.fla。如果您要使用 stiletto4.fla 文件,请用一个新名称将其保存到 My_Stiletto 文件夹中,以确保不改变原文件。
导入徽标在创建动态文本字段之前,您将导入徽标,该徽标是一个 Macromedia FreeHand 文件,Flash 会在时间轴上自动为该徽标添加一个图层。
1在时间轴中,选择 Images 图层,然后在其上添加一个新图层。将新图层命名为 Copy。
2在 Copy 图层处于选中状态时,选择“文件”>“导入”。
在本教程前面的部分,您已经将对象导入到库中。现在您将导入徽标,这样它就能出现在舞台中。
3在 Flash MX 应用程序文件夹中,浏览到 Tutorials/FlashIntro/Assets 文件夹,单击
logo.fh10,然后单击“打开”。
4在“FreeHand 导入”对话框中,确认已经选中了“场景”、“图层”和“全部”。还要确认选中了“包含背景图层”和“维持文本块”,然后单击“确定”。
5在时间轴中,Flash 创建了一个名为 Logo 的图层。拖动 Logo 名称,将该图层移动到 Copy 图层的下面。
6您可以为该徽标指定舞台坐标。在属性检查器中,当徽标处于选中状态时,在 X 文本框中键入 10,在 Y 文本框中键入 20。然后按下 Enter 或 Return 键。
第 1 章38
7在时间轴中,锁定 Logo 图层。
创建动态文本字段现在,您将创建一个动态文本字段。您将指定在运行时载入到字段中的可变文本,而不是向字段中键入文本。
1在时间轴中,选择 Copy 图层。在工具箱中,选择“文本工具”。在属性检查器中,从“文本类型”弹出菜单中选择“动态文本”。
2在“字体”弹出菜单中,选择“_sans”。
“_sans”是一种适用于多种计算机平台上显示的小文本的设备字体。有关设备字体的详细信息,请参阅“帮助”>“使用 Flash”下面的“使用设备字体(仅限水平文本)”。
3在“磅值”文本框中,键入 12。
4单击“文本(填充)颜色”框,并选择黄色,它的十六进制值为 FFCC00。
5在“线条类型”弹出菜单中,选择“多行”,它用于将要换行的多行文本。
6在舞台上,单击徽标的下方。拖动指针创建一个与徽标组合在一起的文本字段,其宽度为徽标文本的宽度,其高度大致相当于垂直线的高度,如下图所示。
“线条类型”弹出菜单
“文本类型”弹出菜单
“字体”弹出菜单
“磅值”文本框
Flash MX 教程简介39
7在属性检查器中的“变量”文本框中键入 textField。
该文本文件将会载入到动态文本字段中,它包含命名变量的文本:textField=,如下所示。
在“变量”文本框中输入此名称,就是指定影片将载入的变量。
使用 loadVariables 动作载入文本
loadVariables 动作包含指定可变文本路径的参数。该文本在 Tutorials/FlashIntro/Assets 文件夹下名为 copy.txt 的文件中。
1在时间轴中,添加一个新图层,并将其命名为 Actions。如果需要,将 Actions 图层拖到时间轴的顶部。
将动作保留在时间轴的顶层上是一个好习惯。
2如果“动作”面板没有打开,请选择“窗口”>“动作”。如果需要放大“动作”面板,可以单击标题栏中的白色箭头以扩展窗口,并拖动面板的右下角来查看动作工具箱和脚本窗格。
显示的“动作”面板的类型取决于您要向其中添加动作的对象。举例来说,如果选择了帧,
“动作”面板就会显示帧动作。如果选择了按钮,“动作”面板则会显示按钮动作。
第 1 章40
3单击面板标题栏右上角的三角形显示弹出菜单。确认选中了标准模式,而不是专家模式。
专家模式提供了一些对熟悉动作脚本的用户有用的功能。在标准模式中,参数字段和控件可以引导您创建动作脚本。
4在动作工具箱中,选择“动作”>“浏览器/网络”,然后双击 loadVariables。
动作脚本则会添加到脚本窗格中。该动作的参数出现在脚本窗格的上方。
选项菜单按钮动作工具箱脚本窗格
Flash MX 教程简介41
5在 URL 文本框中,键入该文本文件的路径:../assets/copy.txt。
测试影片
保存您的影片,然后选择“控制”>“测试影片”。
您还可以按下 Control+Enter (Windows) 或 Command+Return (Macintosh) 组合键。
向按钮添加动画和导航当您指定新元件为按钮时,Flash 会为按钮状态创建时间轴。在“创建按钮”课程中,您已经学习了如何更改按钮状态内的形状的填充颜色。在本部分中,您将学习有关修改按钮的更多知识,
包括向按钮添加动画。
在本部分中,您将学习如何完成下列任务:
从其它 FLA 文件中导入库
对齐按钮
向按钮状态添加动画
向按钮添加导航,以便链接到 Web 站点
使用“启用简单按钮”功能
添加按钮导航要完成本部分,您可以继续处理 mystiletto.fla 文件,也可以浏览到 Flash MX 应用程序文件夹,
打开 Tutorials/FlashIntro/stiletto5.fla。如果您要使用 stiletto5.fla 文件,请用一个新名称将其保存到 My_Stiletto 文件夹中,以确保不改变原文件。
第 1 章42
导入其它 FLA 文件的库您将在影片中使用的按钮位于其它 FLA 文件的库中。要使用按钮,要将包含那些按钮的 FLA 文件以库的形式打开。
1在“库”面板处于打开状态时,选择“文件”>“作为库打开”。在 Flash MX 应用程序文件夹中,浏览到 Tutorials/FlashIntro/Assets 文件夹,然后双击 buttons.fla。
除了文档的库外,buttons.fla 文件的库也会出现。
对齐按钮您可以使用“对齐”面板沿着水平轴和垂直轴对齐这三个按钮。
1在时间轴的 Copy 图层处于选中状态时,添加一个新图层并将其命名为 Buttons。锁定除了
Buttons 层之外的所有图层。
2在舞台右上方的“舞台视图”弹出菜单中,输入 150% 放大舞台的视图。然后滚动到舞台的右下侧。
3将 Button 1 从 buttons.fla 的“库”面板拖到动态文本字段右下角的下面。
当您从 buttons.fla 的“库”面板拖动按钮时,该按钮即成为您的文档库的一部分。
Flash MX 教程简介43
4从 buttons.fla,库”面板拖动 Button 2 和 Button 3,将它们放置在 Button 1 的左侧。所用间隔如下图所示:
5使用“箭头工具”,拖动选择所有这三个按钮。
6要打开“对齐”面板,选择“窗口”>“对齐”。确认未选择“相对舞台分布”。不需要根据舞台对齐按钮。单击“垂直中齐”,然后单击“水平中间分布”。
按钮即可在舞台上对齐。
启用简单按钮当“启用简单按钮”功能处于活动状态时,您可以听见 Button 2 和 Button 3 包含的声音,并且可以查看按钮状态所用的颜色。较复杂的按钮设计(例如动画)并不会播放。
1选择“控制”>“启用简单按钮”,然后滑过并单击每个按钮。
右边的按钮 Button 1 没有完成。您将在下一步修改该按钮。
2测试完这些按钮后,选择“控制”>“启用简单按钮”来取消选择该功能。
垂直中齐水平中间分布相对舞台分布第 1 章44
修改按钮状态您将在 Button 1 的指针经过状态中创建一个影片剪辑,然后在该影片剪辑中创建一个补间形状。该补间形状会创造一种效果,使颜色从灰色变为红色。
1在舞台中,双击右侧的按钮 Button 1,打开元件编辑模式。
2在 Button 1 的时间轴中,隐藏除 Color 图层之外的所有图层。在 Color 图层中,选择 Over
关键帧。
3在舞台上,为右侧的按钮选择黑色椭圆形状。按下 F8 键,使该椭圆成为一个元件。在“转换为元件”对话框中,将该元件命名为 Button Animation。选择“影片剪辑”,然后单击
“确定”。
4在舞台中,双击 Button Animation 元件,打开元件编辑模式。
5将 Layer 1 重命名为 Color Change,并向第 15 帧添加一个关键帧。
6在播放头仍处于第 15 帧时,选择舞台上的按钮形状,然后从工具箱的“填充颜色”弹出菜单中选择亮红色。
7在时间轴中,单击第 1 帧和第 13 帧之间的任意帧。在属性检查器中,从“补间”弹出菜单中选择“形状”。
将播放头从第 1 帧拖到第 15 帧来查看颜色变化。
向按钮添加动作当用户单击按钮以播放补间动画时,需要播放头移动到 Button Animation 时间轴的末尾,然后停止。可以使用 Flash 脚本撰写语言“动作脚本”控制播放头在时间轴上的移动。
1向 Button Animation 时间轴添加新图层,并命名为 Actions。
2在 Actions 图层上,向第 15 帧添加一个关键帧。
3如果“动作”面板没有打开,请选择“窗口”>“动作”。根据需要放大面板,查看动作工具箱和脚本窗格。
Flash MX 教程简介45
4在 Actions 图层的第 15 帧处于选中状态时,转到动作工具箱的“动作”>“影片控制”类别中,然后双击 stop。
stop 动作使您可以指定播放头在达到第 15 帧时停止。
在 Button Animation 时间轴中,Actions 图层的第 15 帧现在显示一个小小的 a,这表明有一个动作附加到该帧。
注意,在完成教程的过程中,请记住经常保存您的工作。
第 1 章46
添加按钮导航可以用 getURL 动作向打开 Web 站点的按钮添加导航。
1选择“编辑”>“编辑文档”或单击“场景 1”返回到主影片。
2在舞台上,单击右侧的按钮 Button 1。
3在“动作”面板中,选择“动作”>“浏览器/网络”,然后双击 getURL。
4在 URL 文本框中,键入任何完整的 URL,例如 http://www.macromedia.com。
5在“窗口”弹出菜单中选择“_blank”,从而使用户在单击 Button 1 时启动一个新的浏览器窗口。
6保存您的文件,然后选择“控制”>“测试影片”。单击 Button 1,转到您在第 4 步中指定的 Web 站点。
7选择浏览器和 SWF 文件,然后返回到 Flash 创作环境中。如果愿意,您可以在舞台上选择
Button 2,然后重复第 3 步到第 7 步,从而将它链接到不同的 Web 站点,然后对 Button 3
重复这些步骤。当您完成这些按钮的链接后,关闭“动作”面板。
Flash MX 教程简介47
添加声音流和事件声音从 Internet 下载影片时,只要声音文件的开头部分下载完毕就可以开始播放声音流。此类声音特别适合于作为连续的背景声音。
事件声音必须完全下载并载入到 RAM 中之后才能播放;事件声音对按钮很有用。在本部分中,
您将学习如何完成下列任务:
向影片中添加声音流
向按钮添加事件声音要完成本部分,您可以继续处理 mystiletto.fla 文件,也可以浏览到 Flash MX 应用程序文件夹,
打开 Tutorials/FlashIntro/stiletto6.fla。如果您要使用 stiletto6.fla 文件,请用一个新名称将其保存到 My_Stiletto 文件夹中,以确保不改变原文件。
添加声音流将声音拖到舞台中即可将其包含在影片中。您可以添加背景音乐,使之按指定的次数演奏播放。
1在时间轴中,选定 Buttons 图层后添加一个新图层,将其命名为 Sounds。
2选择“文件”>“导入”。在 Flash MX 应用程序文件夹中,浏览到 Tutorials/FlashIntro/Assets
并单击 track1.mp3。按住 Control 键 (Windows) 或按住 Command 键 (Macintosh) 单击选中
ping.mp3,然后单击“打开”。
即可将文件导入库中。
3在 Sounds 图层处于选中状态时,将 track1.mp3 声音从“库”面板拖到舞台中。
在时间轴上,该帧上会出现一个表示声波的小示图。
4在时间轴上,选择 Sounds 图层的第一帧。在属性检查器中,在“循环”文本框中键入 999,
指定声音连续播放的次数。
第 1 章48
测试影片
1保存您的文件,然后选择“控制”>“测试影片”来试听声音。
2播放完该影片之后,单击影片的关闭框。
向按钮添加事件声音除了将声音拖到舞台,您还可以从属性检查器中选择声音。您将使用此方法向按钮添加事件声音。
如同您在“创建按钮”课程中学习的一样,当您创建按钮元件时,Flash 会为鼠标指针对应的不同按钮状态创建帧。例如,“指针经过”帧代表指针处于按钮之上时的按钮状态。其它按钮帧/
状态为“弹起”、“按下”和“点击”。
现在您将向按钮添加一个事件声音,它会使声音在指针经过状态期间播放。因为是向库中的按钮元件添加声音,不只是向该元件的实例添加声音,所以会为该按钮的每个实例播放声音。
1在“库”面板中,双击 Button 1 实例打开元件编辑模式。
2在 Button 1 的时间轴中,添加一个新图层,并将该新图层命名为 Sound。
3选择 Sound 图层的“指针经过”帧(第 2 帧),然后选择“插入”>“关键帧”或按下 F6 键。
4要定义声音属性,单击 Sound 图层的第 2 帧。在属性检查器中,从“声音”弹出菜单中选择
Ping.mp3。确认已经在“同步”弹出菜单中选择了“事件”。
5保存您的文档,然后选择“控制”>“测试影片”来试听该按钮声音。查看完 SWF 文件之后,关闭它的窗口以返回到该文档。
组织“库”面板目前在您的“库”面板中已经有相当多的资产了。要使这些资产组织有序、易于查找并按类型分类,您可以创建文件夹,然后将资产移动到文件夹中。
提示,对于您创作的任何影片,保持库面板的有序组织是一个好习惯,特别是使操作同一文件的其他用户能够轻松地找到资产。
1如果“库”面板没有打开,请选择“窗口”>“库”。
Flash MX 教程简介49
2根据需要扩展并放大该窗口,可以查看“库”面板中的所有资产。在“库”面板的底部,单击四次“新建文件夹”按钮创建四个新文件夹。
3双击名称 untitled folder 1,将其重命名为 Car Animation Movie Clips。
4将其它三个文件夹重命名为 Sounds、Artwork 和 Buttons。
5将 View 1 Car、View 2 Car、View 3 Car 和 Car Animation 拖到 Car Animation Movie Clips
文件夹中。
6将 ping.mp3 和 track1.mp3 拖到 Sounds 文件夹中。
7将 view1.png、view2.png 和 view3.png 拖到 Artwork 文件夹中。
8将 Button 1、Button 2 和 Button 3 拖到 Buttons 文件夹中。在 Buttons 文件夹处于选中状态时,再次单击“新建文件夹”按钮创建 Buttons 文件夹的子文件夹。
第 1 章50
9将该新文件夹命名为 Button Movie Clips,然后将其他按钮影片剪辑资产拖到此文件夹中。
10关闭“库”面板,然后保存文档。
测试下载性能,然后发布该影片要完成您的文档,您应使用“发布”命令创建一个扩展名为 SWF 并可在 Web 上播放的影片。
如果使用默认设置的“发布”命令,Flash 会为在 Web 上使用而准备文件。Flash 将发布该 SWF
文件,并创建带有显示 SWF 所需标记的 HTML 文本。
定义了必需的“发布设置”选项之后,只需选择“文件”>“发布”即可立即将文件重复导出为所有选定的格式。Flash 会存储您为文档指定的发布设置,因此每个影片都可有自己的设置。
Flash MX 教程简介51
在本部分中,您将学习如何完成下列任务:
使用“带宽设置”测试影片下载性能
通过一个步骤发布影片
审阅和修改发布设置
在 Web 浏览器中查看影片要完成本部分,您可以继续处理 mystiletto.fla 文件,也可以浏览到 Flash MX 应用程序文件夹,
打开 Tutorials/FlashIntro/stiletto7.fla。如果您要使用 stiletto7.fla 文件,请用一个新名称将其保存到 My_Stiletto 文件夹中,以确保不改变原文件。
测试影片下载性能要想在 Internet 上正确地播放 Flash 影片,在影片播放到某帧之前,该帧必须已经下载。如果影片播放到尚未下载的帧,它会暂停,直到数据到达为止。低带宽的 Flash 文件可提高下载速度。
您可以使用“带宽设置”测试影片并确定可能发生暂停的位置。“带宽设置”根据所选的调制解调器速度,以图形化的方式显示从影片的每一帧发送的数据量。
1保存您的文档,然后选择“控制”>“测试影片”。
2从“调试”菜单中,选择调制解调器速度来确定 Flash 将会模拟的下载速度。
您也可选择“自定义”来输入一个下载速度。
3选择“查看”>“带宽设置”,通过下载性能图表查看 SWF。
阴影条代表主影片中的第一个也是唯一的一个帧。具有多个帧的影片具有多个阴影条。该条的高度以字节和千字节为单位显示帧大小。超出红线的条,特别是当该条代表的帧不是第一个帧时,表明影片播放时此处可能出现延迟。您可以优化影片,以便更快地下载。有关的详细信息,请参阅“帮助”>“使用 Flash”之下的“优化影片”。
第 1 章52
4查看完“带宽设置”之后,可以选择“查看”>“带宽设置”来取消选择它。关闭 SWF 窗口可以返回到创作环境。
使用“发布”命令您可以通过一个步骤发布 Flash 文档以用于 Web 播放。
保存文档后,选择“文件”>“发布”。
Flash 会根据“发布设置”对话框中的属性创建一个 SWF 文件以及可能的附加文件,从而发布您的影片。在默认情况下,可以在保存 FLA 的文件夹中找到发布的文件。
查看发布设置使用“发布设置”对话框能够轻松地重新配置文件的发布方式。
1要查看发布设置,请选择“文件”>“发布设置”。
在默认情况下,Flash 的配置将会创建显示 Flash 影片的 HTML 支持文件。
当您选择需要附加设置的格式时,会显示一个新选项卡。
2在“格式”选项卡上,确认已经选择了“Flash (.swf)”和“HTML (.html)”。单击“Flash”
选项卡。
在默认情况下,发布的影片要用 Flash Player 播放。此发布过程同样适用于影片和 JPEG 压缩格式的文件。
3单击“HTML”选项卡。
在默认情况下,发布过程会创建一个 HTML 文档,该文档会在浏览器窗口中插入您的 SWF
文件。“发布设置”对话框“HTML”选项卡上的设置决定了影片在浏览器上的显示方式。
Flash MX 教程简介53
更改发布设置在默认情况下,Flash 会用 FLA 文件的名称命名该 SWF 文件。您可以让 Flash 更改该名称。
1在“发布设置”对话框的“格式”选项卡中,取消选择“使用默认名称”。
2在“HTML (.html)”文本框中,选择现有的文本,然后键入一个新名称,例如
stilettoElectric.html。然后单击“发布”。当“正在发布”状态窗口关闭之后,单击“发布设置”对话框中的“确定”。
在浏览器中查看发布的影片您可以在浏览器中查看刚刚发布的 HTML 文件和 SWF 影片。
1打开浏览器,然后打开您创建的 HTML 文件。
在默认情况下,该 HTML 文件位于您的 FLA 文件所在的文件夹中。
当打开该 HTML 文件时,SWF 影片会在浏览器中播放。
2在浏览器中,您可以使用命令(例如“查看”>“页面源”或“查看”>“源”)来查看该
HTML 文件。
OBJECT 和 EMBED 标记可以确保 SWF 影片能够在浏览器中显示。
有关 Flash HTML 模板的其它信息,请参阅“帮助”>“使用 Flash”之下的“关于 HTML 发布模板”。
第 1 章54
后续步骤完成本教程的八个部分之后,您已经学习了许多关于创建 Flash 影片的知识,包括如何完成以下任务:
分析完成的影片
定义文档属性和创建渐变
创建矢量图并为其添加遮罩
在影片剪辑中补间位图效果
载入动态文本
修改按钮和添加导航
添加声音流和事件声音
测试和发布影片完成“帮助”>“教程”下的“动作脚本教程简介”,可以继续学习有关 Flash 功能的更多知识。本教程是专为动作脚本初学者设计的,其中介绍了脚本撰写概念,同时使您可以通过动作创建拼图游戏。此外,您可以在 Macromedia 口碑卓越的支持中心搜索有关 Flash MX 的文章和技术说明。要访问该站点,请进入 www.macromedia.com,然后单击“Support”。
Flash MX 教程简介55
第 1 章56
第 2 章动作脚本教程简介动作脚本是 Macromedia Flash MX 的脚本撰写语言。脚本撰写语言是一种与程序通信的方式;
您可以使用它告诉 Flash 要执行的任务并询问 Flash 在影片运行时发生了什么。这种双向通信方式可以让您创建交互式影片。在本教程中,您将会全面了解创建交互式拼图游戏时涉及的任务。
本教程针对的对象是那些初学动作脚本但想在高级功能上有所建树的 Flash 用户。您应该已经熟悉基本动作并了解如何在“动作”面板中指定这些动作。若要更好地掌握本教程,您应首先阅读“帮助”>“教程”下的“Flash MX 教程简介”。还应熟悉“帮助”>“使用 Flash”下的
“用动作脚本编写脚本”和“用动作脚本创建交互”中提到的概念。
根据您的经验,完成本教程大约需要 1 个小时,其中将教您如何完成下列任务:
初始化影片
保存并获取信息
在动态文本框中显示信息
编写表达式
控制影片的流向
创建命令并重用代码
使用内置对象
测试影片
57
观看完成的影片在您开始制作自己的影片之前,请先观看本教程中一部已完成的教程影片,以便对您将要创建的内容有一个大体了解。此外,已完成的教程影片可让您了解时间轴、影片浏览器、舞台和“动作”面板,从而了解创作过程。
1在您的 Flash MX 应用程序文件夹内,浏览到 Tutorials/ActionScript/Finished。双击
puzzle.swf,在独立的 Flash Player 中打开已完成的影片。
2在 puzzle.swf 影片中,单击“确定”按钮。
拼图片完全被打乱。
3单击所有的“显示/隐藏”按钮。
可看到显示出各个图案和拼图片编号,帮助您完成拼图。
4单击一个拼图片并将它拖到解答区域。
该拼图片迅速放入相应的位置。
5按住 Shift 键同时单击一个拼图片。
该图片编号会出现在解答区域下的圆圈中。如果遇到困难,可以按拼图片编号将图片匹配到拼图片编号指南中的相应位置上。
6按 Alt 键 (Windows) 或 Option 键 (Macintosh) 并单击一个拼图片。
该图片会顺时针旋转。
7当您查看完 SWF 文件后,可以关闭该窗口或者让它开着以供参考。
第 2 章58
分析 puzzle.fla 文件分析完成的 FLA 文件有助于确定作者是如何将它放到一起以及各个动作脚本元素的位置。
1在 Flash 中,选择“文件”>“打开”。在您的 Flash MX 应用程序文件夹中,浏览到 Tuto r i als/
ActionScript/Finished,然后打开 puzzle.fla 文件。
现在您可以在创作环境中查看完成的教程影片了。
2若要查看舞台上的所有内容,选择“查看”>“缩放比率”>“显示帧”。
该影片只包含一帧,它显示在 puzzle.fla 文件的主时间轴上。您将使用动作脚本来显示和隐藏出现在拼图板中的对话框和图案辅助线。
3若要调整时间轴和舞台的大小,可向上或向下拖动分隔舞台与时间轴的分隔栏。滚动时间轴以查看各层是如何组织的。
4若要在创作环境中查看舞台上的对话框和辅助线,单击层名右边“眼睛”列中的红色 X。红色 X 表示隐藏的层。
可以在“锁定”列中单击以锁定层,这样可防止该层被选中。如果您在舞台上选择的项目在另一层的项目之下,此功能将非常有用。由列上方的方框指示的“轮廓”列打开的是层中所有元素的轮廓,这样可以更易于查看形状边缘并可以使 Flash 运行得更快。
移动此分隔栏来调整时间轴的大小。
动作脚本教程简介59
5选择 Actions 层的第 1 帧。
第 1 帧有一个小写的 a,这表明动作与该帧有关。
若要向影片添加一个动作脚本元素,必须将该元素分配给一个按钮、帧或影片剪辑。帧脚本由时间轴中帧上的小写 a 表示。若要查找按钮和影片剪辑脚本,可执行以下其中一项操作:
打开“动作”面板,然后从跳转栏(即“动作”面板标题栏下的弹出列表)中选择一个脚本。
在“动作”面板处于打开状态时,选择舞台上的按钮和影片剪辑。
使用过滤按钮或“查找”文本框在影片浏览器中搜索该脚本。
6若要查看动作,选择“窗口”>“动作”。
此时会打开“动作”面板。如果需要,可扩展该面板查看与该帧相关的动作。
“动作”面板有两种模式:标准模式和专家模式。本教程说明如何在标准模式下添加动作。
在影片浏览器中查看动作
1若要查找影片中的所有动作,可使用影片浏览器。如果还没有打开它,则选择“窗口”>“影片浏览器”。
在影片浏览器中,取消选择除动作脚本按钮外的所有过滤按钮。不但 Actions 层的第 1 帧中包含动作,动作还包含在每个显示/隐藏按钮中、出现的各种对话框中的按钮中以及每个拼图片中。
2在您完成操作后,选择“文件”>“关闭”以关闭 puzzle.fla 影片。不要保存对已完成文件的更改。
第 2 章60
初始化影片所有的影片都有一个初始状态。初始状态显示影片在运行之前以及用户处理它之前的样子。有时您必须设置变量和影片剪辑属性才能建立这种初始状态。例如,在 puzzle.fla 文件中,某些对话框和图案辅助线必须隐藏在初始状态中。
Flash 影片中的每个影片剪辑都有一组品质或属性,您可以使用动作脚本对它们进行操作。每个属性都由前面带有下划线 (_) 字符的名称标识。例如,每个影片剪辑都有 _xscale 属性、
_yscale 属性和 _rotation 属性以及其它属性。
动作脚本使用变量来存储信息。例如,变量 myName 可以存储值 "Jody Singer"。 在第65页的“保存并获取信息”一节中您可以了解有关变量的更多信息。
初始化影片第 1 帧中的属性和变量。可以在时间轴中指定一个帧动作,或者将一个对象动作附加到影片剪辑中。在拼图游戏影片中,图案辅助线和对话框影片剪辑的属性在主时间轴的第 1 帧中初始化。
打开起始文件现在,您将创建自己的教程影片。
1选择“文件”>“打开”。
2在 Flash MX 应用程序文件夹中,浏览到 Tutorials/ActionScript/My_Puzzle 并打开文件
mypuzzle.fla。
3如果收到字体替换信息,则单击“使用默认值”。
将会看到一个部分完成的教程影片。该影片可能看起来已经完成,因为所有的元件都已经放置在了舞台的相应位置上。不过,您仍然需要添加相当多的脚本才能使影片能够交互操作。
4选择“文件”>“另存为”并用新的顺序名称保存该文件,例如,在 mypuzzle.fla 所在的文件夹中将该文件保存为 mypuzzle2.fla。
制作该文件的一个副本,以使您或其他用户可以使用原来的 mypuzzle.fla 文件再次完成该教程。此外,如果经常用新的顺序名称保存您的文件,在出现无法在当前文件中解决的错误时,
还可以回复到较早的文件。
设置影片剪辑属性
puzzle.fla 影片有三个对话框:其中一个对话框在拼图完成时提醒您,其余两个对话框用于询问您是否想要打乱拼图片。此外,还有一些图案和辅助线覆盖在解答区域来帮助用户完成拼图。其中的每个对话框、图案和辅助线都是一个影片剪辑。
要初始化该影片,您必须隐藏若干幅影片剪辑,从而只显示起始对话框和拼图片。通过将它们的
_visible 属性设置为 false 可以达到此目的。
1在 Actions 层中选择第 1 帧。如果“动作”面板没有打开,则选择“窗口”>“动作”。
“动作”面板会显示出与选定帧相关联的动作。双斜杠 (//) 后面的文本是注释文本,它提供了有助于理解脚本的信息。
动作脚本教程简介61
2单击“动作”面板标题栏右上角的弹出菜单。确认已经选择了“标准模式”和“查看行号”。
3在脚本窗格中,单击第 4 行以选择显示为 //ENTER code here 的注释代码。
4从左边“动作”工具箱中的“动作”>“其他动作”类别中,双击 evaluate 动作添加一行以分号结尾的空代码行。
动作脚本语句中的分号 (;) 类似于普通句子中的句号 (.)。
5将插入点放在“动作”面板的“表达式”文本框中,单击“插入目标路径”按钮。
即可显示“插入目标路径”对话框。
6确认选中了“点”(表示点记号)和“绝对”(表示绝对路径)。
在该对话框中,您会看到一个可供您选择的影片剪辑列表。
7从影片剪辑树中选择 edges 影片剪辑,然后单击“确定”。
下面的代码出现在“表达式”文本框中:
_root.edges
目标路径告诉动作脚本某个影片剪辑在 Flash 影片的整体结构内的位置。_root 属性是指主时间轴,而 edges 影片剪辑位于主时间轴的舞台上。任何以 _root 开头的目标路径都被称作绝对路径,因为它给出了从主时间轴指向影片剪辑的完整路径。
第 2 章62
8将插入点放在 _root.edges 之后,在“表达式”文本框中输入,_visible = false。
该行代码使得在舞台上看不到该影片剪辑。
您可以手动键入代码,或者可以从“动作”工具箱中的“属性”和“运算符”文件夹选择动作脚本项。
如果在输入动作时出错,并决定要删除它,则从“脚本”窗格中选择该动作,然后单击“动作”面板中的减号 (-) 按钮。
9在“动作”工具箱中,再次双击 evaluate 动作添加一行以分号结尾的空代码行。重复步骤
5 和步骤 6,然后在“插入目标路径”对话框中选择 pattern 影片剪辑。重复步骤 8,再次在“表达式”文本框中键入,_visible = false。
10继续重复步骤 4 到步骤 8,在“插入目标路径”对话框中选择 image、piecenumbers、
scramblebutton、areYouSure 和 congrats 影片剪辑,并为每个影片剪辑键入
._visible = false 。当您完成后,您的脚本应该显示如下:
11选择“文件”>“另存为”并输入一个新文件名。使用连续命名方案,如 mypuzzle3.fla,以便在需要时可以回复到该文件以前的版本。
动作脚本教程简介63
使用“脚本参考”面板在创作期间,如果您想了解有关您输入的动作脚本的其它信息,可以在“动作”工具箱或“脚本”窗格中选择该动作,然后单击“脚本参考”按钮。“脚本参考”面板是一个组织结构类似于
“动作”面板的帮助系统,它显示了有关选定动作的信息。
测试您的语法动作脚本,像书面语言一样,需要有正确的语法。如果语法不正确,动作将无法正确执行。Flash
为您测试语法提供了各种方式。
1单击“动作”面板标题栏右上角的选项菜单,然后选择“检查语法”。
如果语法正确,会显示一条消息表明该脚本没有任何错误。
如果语法不正确,会显示一条消息表明脚本包含错误;此时会打开“输出”窗口,显示有关该错误的信息。
2单击“确定”以关闭语法消息。
第 2 章64
在标准模式下,动作脚本语法错误会以红色字体突出显示在脚本窗格中。如果您将鼠标指针移动到该错误上,会出现一个显示错误消息的工具提示。语法错误消息还会突出显示在“动作”面板的底部状态区域中。
此外,正如您在“Flash MX 教程简介”中所了解的那样,在整个创作过程中,您都可以选择
“控制”>“测试影片”来测试您的影片是否按预期播放。
保存并获取信息要创建一个复杂的交互式 Flash 影片,需要有一种方式使 Flash 跟踪信息和用户活动:按下的按钮、用户姓名、得分或用户访问过的部分。动作脚本使用变量存储您可以获取和再次使用的信息片段。您可以在任何时间轴上在脚本中声明一个变量,并在同一部影片的任何其它时间轴中使用它。正像您必须编写一条目标路径才能在脚本中使用影片剪辑一样,您必须编写一条指向变量的目标路径才能在脚本中使用该变量。
在 puzzle.fla 文件中,动作脚本使用 dialog 变量跟踪对话框是否可见。当对话框出现时,
dialog 变量设置为 true;当用户单击对话框上的按钮时,dialog 变量设置为 false。该变量不影响对话框自身的可见性,它只是一个容器,保留着有关您可以在整个影片的脚本中使用的信息。在 puzzle.fla 文件中,如果 dialog 设置为 true,则用户不能移动拼图片。
动作脚本教程简介65
声明变量并给它赋值当您需要一个变量时,您必须给它命名,或者声明 它。还必须给它赋值。您可以先在一条语句中声明变量,然后在后面的语句中给它赋值,或者也可以一次做完这两项操作。
动作脚本使用三种类型的变量:本地变量、全局变量和时间轴变量。您可以在一个代码块(用大括号 {} 指明的那部分代码)中使用 var 动作来创建一个本地变量,这种变量在代码块结束运行后,就会消失。可以使用 set variable 动作创建一个附加到影片剪辑的时间轴上的时间轴变量,该变量可以用在文档中的任何脚本内。有关变量的详细信息,请参阅“帮助”>“使用
Flash”下的“了解动作脚本语言”。
puzzle.fla 文件会根据情况使用 var 动作和 set variable 动作。当只需要在一个代码块中使用某个变量时,则使用 var 动作。变量 dialog 是使用 set variable 动作设置并赋值的。
现在您将声明 dialog 变量并给它赋值:
1选择“文件”>“打开”并选择您上次保存的 mypuzzle.fla。
注意,也可以浏览到 Flash MX 应用程序文件夹,然后打开 Tutorials/ActionScript/Finished/puzzle2.fla。如果您确实使用 puzzle2.fla 文件,请在您的 My_Puzzle 文件夹中用新名称保存该文件以保留一个原始文件的未更改版本。
2选择 Actions 层的第 1 帧。如果“动作”面板没有打开,则选择“窗口”>“动作”。
3在“动作”面板的脚本窗格中,选择第 11 行,它是“Initialize”部分的最后一行代码。在
“动作”工具箱中,选择“动作”>“变量”并双击 set variable 动作。
4在“变量”文本框中键入 dialog。
第 2 章66
5在“值”文本框中键入 true 。选中“值”文本框右边的“表达式”。
通过选中“表达式”的方式通知 Flash:true 不是一个文本字符串。
在影片的初始状态下,对话框在舞台中是可见的。因此,dialog 变量必须在影片开始时设置为 true,否则,用户可以在拼图片被打乱之前移动它们。
6选择“文件”>“另存为”并输入一个新文件名。使用连续命名方案,以便在需要时可以回复到该文件的以前版本。
在动态文本框中显示信息动态文本框可以在 Flash 影片中显示不断变化的内容。可以使用属性检查器创建一个动态文本框并给它指定一个变量名。该变量的值会显示在该文本字段中。
在 puzzle.fla 文件中,当用户按 Shift 键的同时单击一个拼图片,动态文本框会显示拼图片编号。
现在您将为动态文本框指定一个变量名。
1如果需要,选择“文件”>“打开”并选择您上次保存的 mypuzzle.fla 文件。
注意,也可以浏览到 Flash MX 应用程序文件夹,然后打开 Tutorials/ActionScript/Finished/puzzle3.fla。如果您确实使用 puzzle3.fla 文件,请在您的 My_Puzzle 文件夹中用新名称保存该文件以保留一个原始文件的未更改版本。
2在时间轴中,如果 Piece numbers guide 图层处于锁定状态,则解除锁定。
动作脚本教程简介67
3双击拼图解答区域右下角舞台上的拼图片编号圆形影片剪辑。
这将在元件编辑模式下打开拼图片编号圆圈。
4选择时间轴中的 Tex t 层。在舞台上,单击拼图片编号圆圈的中心以选择该文本字段。
5如果属性检查器尚未打开,请选择“窗口”>“属性”。在属性检查器中,从“文本类型”
弹出菜单中选择“动态文本”。
6在“线条类型”弹出菜单中,确认选定了“单行”。
拼图片编号圆圈影片剪辑第 2 章68
7在“Var”文本框中键入 _root.pieceNumber,然后按下 Enter 或 Return 键。
所有变量,如同函数和影片剪辑一样,都必须通过它们的路径进行引用。pieceNumber 变量在主时间轴的 RotateDisplayOrDrag 函数中声明和更新,但该变量的文本框却在拼图片编号圆圈时间轴内。当您输入指向 pieceNumber 变量的完整路径后,只要该变量的值在主时间轴上发生更改,该值就会更新并显示在舞台的文本字段中。
8可以选择“编辑”>“编辑文档”,然后单击“后退”按钮,或者单击“场景 1”返回到主时间轴。
9选择“文件”>“另存为”并输入一个新文件名。使用连续命名方案,以便在需要时可以回复到该文件的以前版本。
编写表达式如果在数学等式中添加了两个数字,则已经使用了一个运算符。运算符 是一种对一个或几个数据或操作数 执行任务或操作 的符号。例如,在表达式 2 + 2 中,加号 (+) 就是运算符,而每个数字就是一个操作数。
表达式 是可以演算以生成某一值的任意动作脚本代码。例如,代码 myAge + 17 是一个表达式,
因为当该代码运行时,动作脚本会查找 myAge 变量的值,将它加到数字 17 上,然后生成一个新值。如果 myAge 的值为 47,则新值将为 64。
运算符使您可以收集信息并在变量中存储该信息,然后在表达式中对该信息进行操作以便创建或确定其它值。例如,您知道用户已将一个拼图片放入解答区域,但您如何确定该拼图片是否处于正确位置?并且如果该拼图片处于正确位置,您如何确定整个拼图是否已拼好?若要在这种情况下检查用算术运算符构建的表达式,可选择主时间轴的第 1 帧,然后打开“动作”面板,
并查看第 50 行的 IsItDone 函数。
动作脚本有数值运算符或算术 运算符,但它还有执行不同类型操作的其它类型的运算符。例如,
比较运算符比较几个值以确定一个操作数是大于、小于还是等于其它操作数,而逻辑运算符则计算表达式的 true 或 false 值,也称作布尔 值。
现在您将使用一个称作逻辑“非”的运算符来编写一个显示和隐藏拼图图案的表达式。逻辑
“非”运算符,由一个感叹号 (!) 表示,计算的是操作数的相反布尔值。例如,表达式 !true 生成的值为 false。
1如果需要,选择“文件”>“打开”并选择您上次保存的 mypuzzle.fla 文件。
注意,也可以浏览到 Flash MX 应用程序文件夹,然后打开 Tutorials/ActionScript/Finished/puzzle4.fla。如果您确实使用 puzzle4.fla 文件,请在您的 My_Puzzle 文件夹中用新名称保存该文件以保留一个原始文件的未更改版本。
动作脚本教程简介69
2单击该舞台上的“显示/隐藏图案边缘”按钮。如果“动作”面板没有打开,则选择“窗口”
>“动作”。
“动作”面板会显示出与该按钮相关联的动作。
3在脚本窗格中选择下面的代码行:
// ENTER code here
4在“动作”工具箱中,选择“动作”>“其他动作”并将 evaluate 动作拖到脚本窗格中。
当您添加动作时,它会包含在被称为事件处理函数 的代码中。该代码如下所示:
on (release) {;
}
5在“动作”工具箱中,双击 evaluate 动作添加另一行空的代码行。
现在,该代码如下所示:
on (release) {;
}
6选择第一行空行,即带第一个分号的行,并将插入点放在“表达式”文本框中。
现在,您将输入隐藏图案影片剪辑的代码;用户应该看到图案影片剪辑或边缘影片剪辑,但不能同时看到两者。
7在“表达式”文本框中输入 _root.pattern._visible = false。
您可以在“表达式”文本框中直接键入路径或者使用“插入目标路径”对话框选择 pattern
影片剪辑。如果您使用“插入目标路径”对话框,请选中“点”和“绝对”。
注意,当您在标准模式下输入参数和属性时,可能会注意到代码提示,它们是一种对动作的完整语法提出建议的工具提示;您可以单击代码提示来输入语法。有关代码提示的详细信息(包括启用和禁用代码提示),请参阅“帮助”>“使用 Flash”下的“使用代码提示”。
第 2 章70
8选择第二行空行,然后将插入点放在“表达式”文本框中。
9在“表达式”文本框中键入 _root.edges._visible = ! 。
忽略出现的语法错误消息。
感叹号 (!) 表示逻辑“非”运算符。除了在“表达式”文本框中简单将逻辑“非”运算符键入之外,您可以将它从“动作”工具箱添加到文本框中,方法是选择“运算符”>“逻辑运算符”并双击感叹号。
10在“表达式”文本框的该运算符之后,再次键入 _root.edges._visible。
您的代码应该如下所示:
on (release){
_root.pattern._visible = false;
_root.edges._visible = !_root.edges._visible;
}
事件处理函数中的第一行代码将 pattern 影片剪辑的可见性设置为 false。第二行代码将
edges 影片剪辑的可见性设置为与其当前值相反的值。这样就创建一个显示或隐藏影片剪辑的切换。
11选择“文件”>“另存为”并输入一个新文件名。使用连续命名方案,以便在需要时可以回复到该文件的以前版本。
动作脚本教程简介71
控制影片的流向如果没有动作脚本,影片可能会从第 1 帧播放到最后一帧然后又从第 1 帧开始重复播放或者干脆停止。您可以使用动作脚本更精确地控制影片的播放进程;也可以使用动作脚本将控制权给予用户。例如,您可以在第 5 帧中放置一个停止播放影片的动作,直到用户按下“播放”按钮后才开始。这只是一个控制影片流向的简单示例。
您可以使用 if、else 和 else if 动作(也称作语句)来创建更复杂的被称为逻辑 的影片流向。上述三种动作执行下列任务:
if 动作让 Flash 检查影片中的条件,并在该条件为真时运行特定的动作。
else 语句告诉 Flash 在 if 条件为假时运行另一组不同的动作。
else if 语句让 Flash 在运行另一组不同的动作之前检查另一个条件。
编写条件语句您已经使用了一个运算符来显示和隐藏影片剪辑。现在,将使用 if 语句来创建显示和隐藏
piece numbers 影片剪辑的逻辑。为了便于学习,本示例使用了一个不同的动作脚本元素来获得同样的结果。
1如果需要,选择“文件”>“打开”并选择您上次保存的 mypuzzle.fla 文件。
注意,也可以浏览到 Flash MX 应用程序文件夹,然后打开 Tutorials/ActionScript/Finished/puzzle5.fla。如果您确实使用 puzzle5.fla 文件,请在您的 My_Puzzle 文件夹中用新名称保存该文件以保留一个原始文件的未更改版本。
2在舞台上,单击“显示/隐藏组件编号矩阵”按钮。如果“动作”面板没有打开,则选择“窗口”>“动作”。在“动作”工具箱中,选择“动作”>“条件/循环”类别。
3双击 if 动作。下列代码将出现在“动作”面板中:
on (release) {
if (<not set yet>) {
}
}
4在包含 if 动作的代码行处于选中状态时,双击“动作”工具箱中的 else 动作。
该代码如下所示:
on (release) {
if (<not set yet>) {
} else {
}
}
5选择第 3 行,即以 if 开头的那一行,并将插入点放在“条件”文本框中,单击“插入目标路径”按钮。选择 piecenumbers 影片剪辑、“点”和“绝对”,然后单击“确定”。下面的代码即可出现在“条件”文本框中:
_root.piecenumbers
6将插入点放在“条件”文本框中,在 _root.piecenumbers 之后输入,_visible。
7从“动作”工具箱中的“动作”>“其他动作”类别中,双击 evaluate 动作来添加一行空的代码行。
第 2 章72
8在“表达式”文本框中输入 _root.piecenumbers._visible = false 。
您可以使用“插入目标路径”按钮或手动键入代码。现在,该代码如下所示:
on (release) {
if (_root.piecenumbers._visible) {
_root.piecenumbers._visible = false;
} else {
}
}
当影片播放时,Flash 会演算条件括号内的表达式。表达式必须等于其中一个布尔值:true 或
false。本示例使用 if 动作的条件来检查 piecenumbers 影片剪辑在舞台上是否可见。如果
_visible 属性为 true,动作脚本就会运行大括号中的代码,并将 _visible 属性设为
false,这样就会在舞台上隐藏该影片剪辑。
9在脚本窗格中,选择包含 else 动作的代码行,然后双击 evaluate 动作。
10在“表达式”文本框中输入 _root.piecenumbers._visible = true。
最终的动作脚本代码将如下所示:
on (release) {
if (_root.piecenumbers._visible) {
_root.piecenumbers._visible = false;
} else {
_root.piecenumbers._visible = true;
}
}
11选择“文件”>“另存为”并输入一个新名称。使用连续命名方案,以便在需要时可以回复到该文件的以前版本。
创建命令并重用代码动作脚本中的动作可以让您以特定方式控制影片。例如,play 动作向前移动时间轴中的播放头,而 loadMovie 动作则将另一部 Flash 影片加载入 Flash Player。其中的每个动作都会指示
Flash 执行一项特定的任务。您可能想在影片中创建您自己的命令。例如,在文件 puzzle.fla 中,
您需要一条命令打乱拼图。要想出如何用动作脚本编写这样一条命令,您必须确定打乱拼图所需的每个步骤并确定哪些动作脚本元素可用于达到这些目的。
首先,拼图片必须散落在舞台的某个区域内;每个影片剪辑都有一个 _x 和一个 _y 属性,您可用它们设置影片剪辑的位置,并有一个 _rotation 属性可用于设置影片剪辑的旋转。若要随机放置和旋转每个拼图片,您需要生成一个随机数字供表达式使用。动作脚本有一个内置的 Math
对象,它具有 random 方法,可用于此目的。
动作脚本中的命令称作函数。函数是一种可以在影片中反复使用来执行某项任务的脚本。例如,
在 puzzle.fla 文件中,每次用户单击“打乱组件”按钮,函数 Scramble 都会运行,或者被调用。该函数将各个拼图片随机放置在舞台上。不用为两次单击的“打乱组件”按钮编写两个相同的脚本,只需编写或声明该函数一次,并且每次通过按钮调用它即可。要检查 Scramble 函数,选择主时间轴上的第 1 帧,然后打开“动作”面板。向下滚动到脚本窗格直到您看到
Scramble 函数。
动作脚本教程简介73
您可以将函数当作一台为您做额外工作的机器。该机器根据您输入的内容,可以生成不同的结果。例如,如果您将香蕉放入搅拌机中,您将得到搅碎的香蕉,而不是搅碎的桃子。您传递给函数进行处理的元素称作参数或实参。参数在函数后面的括号中传递。例如,给函数
RotateDisplayOrDrag(whichPiece) 传递的是拼图片的名称,那么它只对该拼图片进行操作。参数使您能够在许多不同的情况下重用函数。
函数通常在影片的第 1 帧中声明。在 puzzle.fla 文件中,函数就在第 1 帧中声明。
编写函数现在将声明一个函数,在用户单击拼图片时旋转、显示或拖动该拼图片。
1如果需要,选择“文件”>“打开”并选择您上次保存的 mypuzzle.fla 文件。
注意,也可以浏览到 Flash MX 应用程序文件夹,然后打开 Tutorials/ActionScript/Finished/puzzle6.fla。如果您确实使用 puzzle6.fla 文件,请在您的 My_Puzzle 文件夹中用新名称保存该文件以保留一个原始文件的未更改版本。
2选择 Actions 层的第 1 帧,然后打开“动作”面板(如果没有打开)。
3向下滚动脚本窗格并选择第 31 行。下列注释行应该突出显示出来:
// ENTER RotateDisplayOrDrag() function here
4在“动作”工具箱的“动作”>“用户定义的函数”类别中,双击 function 动作。
在“名称”文本框中键入 RotateDisplayOrDrag 。在“参数”文本框中键入 whichPiece。
现在,第 32 行的代码应如下所示:
function RotateDisplayOrDrag (whichPiece) {
}
标识选定拼图片的 whichPiece 参数将在函数体中调用三次。当调用该函数时,被传递的参数会替代每条语句中的 whichPiece。
5在“动作”工具箱中的“动作”>“条件/循环”类别中,双击 if 动作、else if 动作和
else 动作。
注意,也可以从加号 (+) 弹出菜单中选择这些动作该代码如下所示:
function RotateDisplayOrDrag (whichPiece) {
if (<not set yet>) {
} else if (<not set yet>) {
} else {
}
}
该代码创建了函数的逻辑结构。您将在每条 if 语句中填写要检查的条件。还将填写每对大括号中的代码,这些代码在条件为真时执行。
第 2 章74
6选择 if 语句代码行。在“条件”文本框中输入 Key.isDown(18)。
Key 是一个内置的动作脚本对象,您也可以在“对象”>“影片”>“Key”>“方法”中找到。Key 让您确定用户按了键盘上的哪个键。数字 18 是 Alt (Windows) 键和 Option
(Macintosh) 键的数字表示。此代码行将检查用户是否按了那些键。
要了解有关内置对象的详细信息,请参阅第78页的“使用内置对象”。
7在“动作”工具箱中的“动作”>“其他动作”类别中,双击 evaluate 动作以输入一行新的代码。在“表达式”文本框中键入 _root[whichPiece]._rotation += 90,注意 + 和 = 之间没有空格。
如果用户按下 Alt (Windows) 键或 Option (Macintosh) 键,此代码行会将选定的拼图片旋转
90
o
。方括号中的内容让您可以动态检索实例名称的值。有关详细信息,请参阅“帮助”>
“使用 Flash”下的“点和数组访问运算符”。
8选择 else if 代码行。在“条件”文本框中键入 Key.isDown(Key.SHIFT)。
该代码行检查用户是否按下了 Shift 键。
9在“动作”工具箱中的“动作”>“其他动作”类别中,双击 evaluate 动作以输入一行新的代码。在“表达式”文本框中键入 pieceNumber = whichPiece.slice(5)。
该代码行将在用户按下 Shift 键时在舞台的文本框中显示拼图片编号。String 对象的 slice
方法会从拼图片编号的实例中删除指定数量的字符(在这种情况下,是 5 个字符),以便只显示该拼图片的编号。实际上,方法“slices”删除前五个字符,然后将产生的数字赋予
pieceNumber 变量,该变量再反过来赋予舞台的文本字段。
10选择 else 代码行。在“动作”工具箱的“动作”>“影片剪辑控制”类别中,双击 startDrag 动作。
11在“目标”文本框中键入 _root[whichPiece],然后单击“表达式”。
12选择“限制为矩形”。在“L”(左)文本框和“T”(上)文本框中键入 20。在“R”(右)
和“B”(下)文本框中,分别键入 780 和 580。
脚本中的 false 表示没有指定 lockCenter(表示当单击拼图片时,该拼图片始终对齐鼠标指针的中心)。数字 20、20、780 和 580 分别指定了文本框在舞台上的左、上、右、下坐标。
当用户单击拼图片时,会调用您编写的以下函数。该函数使用“Key”对象来确定在单击拼图片时是否按下了 Shift、Alt 或 Option 键。如果在单击拼图片时按下了 Shift 键,那么动态文本框会显示拼图片编号;如果按下的是 Alt (Windows) 键或 Option (Mac) 键,那么该拼图片会旋转 90
o
。如果既没有按下 Shift 键也没有按下 Alt 键或 Option 键,那么用户可以拖动该拼图片。您的代码应该如下所示:
function RotateDisplayOrDrag (whichPiece) {
if (Key.isDown(18)) {
_root[whichPiece]._rotation += 90;
} else if (Key.isDown(Key.SHIFT)) {
pieceNumber = whichPiece.slice(5);
} else {
startDrag(_root[whichPiece],false,20,20,780,580);
}
}
注意,在完成教程的过程中,请记住经常保存您的工作。
动作脚本教程简介75
调用函数您可以从影片中需要完成某项任务的任何帧中调用函数。您必须使用目标路径来调用函数,就像您必须使用路径来访问变量或影片剪辑一样。puzzle.fla 影片中的所有函数都在主时间轴的
Actions 层的第 1 帧中声明,所以每个函数的绝对路径都是以 _root 开头。
现在,您将调用在舞台上打乱拼图片的函数。
1在时间轴上,如果没有隐藏 Scramble dialog 层和 Start dialog 层,则将它们隐藏起来。选择
Congrats dialog 层。
2在该舞台上,双击“Dialog-Congratulations”元件。
3在舞台上,选择“确定”按钮。如果“动作”面板没有打开,则选择“窗口”>“动作”。
4在“动作”工具箱的“动作”>“用户定义的函数”类别中,双击 call function 动作。
5将插入点放在“动作”面板的“对象”文本框中,单击“插入目标路径”按钮。确认选定了
“点”和“绝对”。选择 _root,然后单击“确定”。
Dialog-Congratulations 元件第 2 章76
6在“方法”文本框中键入 Scramble 。
Scramble 函数不需要任何参数;可以将“参数”文本框空着。
现在,该代码如下所示:
on (release) {
_root.Scramble();
}
这就是调用该函数的动作脚本。还将需要另外添加一些 on(release) 处理函数内部的代码行。您将在下面的步骤中执行此操作。
在脚本窗格中的 _root.Scramble..,代码行处于选中状态时,双击“动作”工具箱的
“动作”>“其他动作”类别中的“evaluate”。在“表达式”文本框中键入
_root.scramblebutton._visible = true。
7再次双击 evaluate 动作来添加另一行空代码。在“表达式”文本框中键入 _root.dialog =
false。
8从“动作”工具箱的“动作”>“其他动作”类别中,双击 evaluate 动作。
9从“动作”工具箱的“属性”类别中,双击 _visible。将插入点放在 _visible 之后,在
“表达式”文本框中键入 = 0。
该代码指定该对话框在用户单击“确定”按钮后变为不可见。
最终的代码如下所示:
on (release) {
_root.Scramble();
_root.scramblebutton._visible = true;
_root.dialog = false;
_visible = 0
}
10执行以下任一操作返回到主时间轴:
选择“编辑”>“编辑文档”。
单击“返回”按钮。
单击“场景 1”。
11选择“文件”>“另存为”并输入一个新文件名。使用连续命名方案,以便在需要时可以回复到该文件的以前版本。
注意,在完成教程的过程中,请记住经常保存您的工作。
动作脚本教程简介77
使用内置对象动作脚本有变量 可以让您存储信息;它有函数 可以让您创建特定的命令并重用代码;它有动作可以让您控制影片的流向;它还有可以更改其属性 的影片剪辑。
动作脚本还具有另一种类型的元素,称作内置对象。对象 提供了一种将信息分组的方式,以便您可以在脚本中使用它。对象可以有属性、方法(类似于函数)和常数(如 Pi 的数值)。
对于您在第73页的“创建命令并重用代码”创建的 RotateDisplayOrDrag 函数,您使用了
Key 对象来确定用户在键盘上按下的最后一个键。Key 对象内置于动作脚本中,可以用于获得有关键盘的信息。
另一个动作脚本对象是 MovieClip 对象。MovieClip 对象是一个方法集合,您可以使用它来操作影片剪辑,这些影片剪辑是 Flash 中最基本也是功能最强大的元素。要了解有关 MovieClip 对象的具体特性以及使用影片剪辑的详细信息,请参阅“帮助”>“使用 Flash”下的“处理影片剪辑和按钮”。
现在,将使用 MovieClip 对象的 onPress 方法来检查鼠标指针是否触到某个拼图片。
1如果需要,选择“文件”>“打开”并选择您上次保存的 mypuzzle.fla 文件。
注意,也可以浏览到 Flash MX 应用程序文件夹,然后打开 Tutorials/ActionScript/Finished/puzzle7.fla。如果您确实使用 puzzle7.fla 文件,请在您的 My_Puzzle 文件夹中用新名称保存该文件以保留一个原始文件的未更改版本。
2拼图片动作是一个嵌套在拼图片每个实例中的影片剪辑。若要从“库”面板层次结构中选择
“Piece actions”影片剪辑,单击“时间轴”右下角的“编辑元件”按钮,然后选择“Misc”
>“Piece actions”。
Piece actions 影片剪辑会在元件编辑模式下打开。
第 2 章78
3在 Piece actions 时间轴上,选择 Actions 层的第 1 帧。
4如果“动作”面板没有打开,请选择“窗口”>“动作”。在脚本窗格中,选择第 3 行,它具有如下的代码:
// ENTER code here
5在“动作”工具箱的“对象”>“影片”>“MovieClip”>“事件”类别中,双击 onPress 动作。
onPress 方法是一种特殊类型的动作,称作事件处理函数,或者简称为事件。事件允许您编写一个函数,该函数在发生特定事件时运行。事件的类型包括按下鼠标按钮时、播放头进入帧时以及加载影片剪辑时。
在此过程中,onPress 后面大括号中的代码会等到用户在影片中按下鼠标按钮时运行。
6在“对象”文本框中键入 _parent。
由于 Piece actions 嵌套在影片剪辑内,所以_parent 指定 onPress 应在上一层代码中执行,
即与拼图片位于同一层执行。
7在“动作”工具箱的“动作”>“条件/循环”类别中,双击 if 动作。
8在“条件”文本框中,键入 !_root.dialog。代码将如下所示:
_parent.onPress = function(){
if (!_root.dialog) {
{
};
您添加到此步骤中的代码会测试 dialog 变量的值是 true(可见)还是 false(不可见)。如果该值为 true,则不会运行下一个旋转和拖动拼图片的脚本。如果该变量的值为 false,那么将运行随后的脚本。如果该对话框显示,那么用户就不能旋转或拖动拼图片,或显示它的拼图片编号。
动作脚本教程简介79
9在“动作”工具箱中,双击“动作”>“其他动作”类别中的 evaluate 动作以将它添加到
if 语句的大括号内。
10在“表达式”框中键入 _root.RotateDisplayOrDrag(_parent._name)。
_name 是用户单击的拼图片实例名称的属性。
最终代码如下所示:
_parent.onPress = function(){
if (!_root.dialog) {
_root.RotateDisplayOrDrag(_parent._name);
}
};
11执行以下任一操作返回到主时间轴:
选择“编辑”>“编辑文档”。
单击“返回”按钮。
单击“场景 1”。
12选择“文件”>“另存为”并输入一个新文件名。使用连续命名方案,以便在需要时可以回复到该文件的以前版本。
测试影片
“尽早测试和经常测试”是 Web 开发者的一条原则。影片测试得越早,就越容易确定产生意外结果的原因。使用顺序名称保存文件的多个版本是一个不错的方法,例如,就像您在本教程中所做的一样,将文件保存为 mypuzzle1.fla、mypuzzle2.fla 等等。这样,编号最高的文件一定是最新版本,并且很容易回复到以前的版本。
正如您在“Flash MX 教程简介”中了解的那样,Flash 创作工具包括一个 Flash Player,您可以在创作期间的任意时候通过选择“控制”>“测试影片”来测试影片。该版本的 Flash Player 有各种命令和工具,有助于您排除影片的故障。
Flash 影片中出现意外结果的最常见原因是变量、函数、对象或影片剪辑的路径不正确。这会导致变量包含错误的值、妨碍函数调用或者妨碍影片剪辑正确播放。
trace 动作允许您在脚本中编写备注和表达式,它们的结果将被发送到名为“输出”的窗口中。
现在,您将添加一个 trace 动作以测试是否成功地调用了函数。
注意,Flash 也包括一个调试器,让您检查全局变量和本地变量的值,包括在影片播放时它们何时更改。此外,利用调试器,您可以使用断点停止影片并逐行地测试动作脚本。有关详细信息,请参阅“帮助”>“使用 Flash”下的“使用调试器”。
1选择“文件”>“打开”,然后选择您上次保存的 mypuzzle.fla 文件。
注意,也可以浏览到 Flash MX 应用程序文件夹,然后打开 Tutorials/ActionScript/Finished/puzzle8.fla。如果您确实使用 puzzle8.fla 文件,请在您的 My_Puzzle 文件夹中用新名称保存该文件以保留一个原始文件的未更改版本。
当用户单击 SWF 影片中的“确定”按钮时,拼图片应该被打乱。您可以使用 trace 动作来测试是否正在调用 Scramble 函数。
2在时间轴的 Actions 层中,选择第 1 帧并打开“动作”面板。
第 2 章80
3在脚本窗格中,滚动到第 18 行并选择它,该注释行的内容为:// enter trace action
here。
4在“动作”工具箱中,从“动作”>“其他动作”类别中双击 trace 动作。
5在“消息”文本框中键入 Scramble function has been called。
您正在将此消息放置在 Scramble 函数中。
6保存您的文档,然后选择“控制”>“测试影片”。
7单击 SWF 影片中的“确定”按钮。
此时将会显示“输出”窗口,它会跟踪您影片中的事件。如果需要,可以放大该窗口来读取消息。
消息“Scramble function has been called”将出现在“输出”窗口中。
如果该消息不出现,那么下一步将确定原因何在。最可能的原因是您为该函数指定的路径不正确。
8关闭“输出”窗口和 SWF 文件并返回到创作模式。
9选择“文件”>“另存为”并输入一个新文件名。使用连续命名方案,以便在需要时可以回复到该文件的以前版本。
您已经在学习动作脚本中取得了长足的进步!
动作脚本教程简介81
后续步骤通过学习本教程,您已经在相对较短的时间内学完了大量的内容。您已经学会如何使用动作脚本来设置 Flash 影片的起始点,如何创建命令和重用代码来使动作重现,以及如何精确控制影片的流向。使用动作脚本变量和表达式,您知道如何在影片中跟踪用户活动以及如何向您的用户显示变化的内容。最后,您已经学会了如何测试您的影片。
若要继续学习关于动作脚本的知识,请参阅“帮助”菜单中的联机动作脚本字典和“Flash 支持中心”中的文章。从 Flash MX 应用程序文件夹中的 Samples 文件夹中,也可以打开 puzzle.fla
影片的高级版本并对曾经用于创建计时器和动画拼图片的动作脚本进行解构分析。
第 2 章82
第 3 章组件教程简介使用 Macromedia Flash UI 组件可以快速轻松地在 Flash 文档中添加简单的用户界面元素。
本教程是为 Flash 初学者和中级用户设计的,用来介绍组件以及如何轻松地使用这些组件来创建简单的应用程序。在学习本教程前,您应当已经学完“Flash MX 教程简介”和“动作脚本教程”简介,这两个教程可以通过选择“帮助”>“教程”来访问。
学完本教程后,您将学会如何执行以下任务:
在 Flash 文档中添加组件
配置组件
添加动作脚本来使组件工作组件类型
Flash MX 提供了以下组件,
名称动作单选按钮表示在一组互斥选择中的单项选择复选框表示单项选择普通按钮当用户单击它或按 Enter 或 Return 键时执行命令组合框显示一个选项列表列表框显示一个选项列表滚动窗格提供用于查看影片剪辑的可滚动窗格
83
文本滚动条在文本字段中添加滚动条如何使用组件下面是使用组件的一些方法:
Web 窗体设计一个窗体,用来询问用户的地址、电话、电子邮件地址以及其它个人信息,并在提交到服务器前验证这些数据。
定制汽车创建一个 Web 窗体,允许用户通过选择各种图形选项而不是键入信息来定制一辆汽车。字段通过图形交互操生成。
调查建立一个多问题、多部分的调查,迅速计算结果并画出调查结果数据图表。
像册建立个人像册,在目录中存放图像和缩略图,并用 Flash 界面和导航元素包装它们。
贷款计算器设计一个计算贷款偿还金额的分期偿还计算器。
基于 Web 的演示模板使用简单的、预建的导航元素和图像文本布局来创建基于幻灯片的演示文稿的模板。
查看完成的窗体通过以下操作可以定位窗体中的组件:
单击某个组件可以选中它。
按 Tab 键可以向前移动,按 Shift+Tab 组合键可以向后移动。
使用箭头键可以定位菜单项。
1选择“文件”>“打开”可以定位到 Flash MX 程序目录。打开 Tu t o r i a l s / C o m p o n e n t s /
Finished/sweepstakes.swf。这是完成的影片。
2使用上述导航技术可以测试窗体中的每个按钮和框。
3现在打开 sweepstakes.fla。选择“文件”>“打开”并定位到 Flash MX 程序目录。打开
Tutorials/Components/Finished/sweepstakes.fla。这是生成影片的 Flash 文档。时间轴包含两个关键帧。
4检验页面 1。其中包含用于搜集信息的复选框、组合框和普通按钮。它还有两个用于输入用户名和电子邮件地址的输入文本字段。
5检查页面 2。这是结果页面,包含几个动态文本框,用来显示在第 1 页中所收集信息的结果。
为了节省时间,我们已经为您创建了这些信息。
创建窗体在本教程中,您将使用组件来创建一个包含两个页面的简单窗体。该窗体的内容是参加博彩来赢得一辆免费的 Stiletto 电动汽车。第 1 页用于收集信息,第 2 页用于显示结果。您将按照下面三个步骤来完成这个窗体:
在窗体中添加组件
配置组件
在文档中添加动作脚本使组件工作第 3 章84
为了使您顺利入门,我们已经提供了这个窗体的背景、文本字段和图形。您将添加并配置组件和动作脚本以使之成为一个交互式窗体。
添加组件第 1 步是向舞台中添加组件,并把它们放置在窗体上。您要在窗体的第 1 页添加一个复选框、
一个组合框和一个普通按钮。还要在第 2 页添加一个普通按钮。
要向文档中添加组件,可以把元素从“组件”面板拖到舞台中,或在“组件”面板中双击元素来把它们放置在舞台中央。在文档中添加组件后,文档的“库”面板中会显示该组件。
好的做法是为组件创建一个新层。
1选择“文件”>“打开”并定位到 Flash MX 程序目录。打开 Tu t o r i a l s / C o m p o n e n t s /
my_sweepstakes/mysweepstakes.fla。
2选择“文件”>“另存为”并用一个新文件名来保存文件,例如 newsweepstakes。
3创建一个新层并命名为 UI。组件将放在这个层中。
4在时间轴的 UI 层中单击第 6 帧。选择“插入”>“空白关键帧”添加空白关键帧。这将用于第 2 页的组件。
5确保下面的面板是打开的:
,库”面板(“窗口”>“库”)
,组件”面板(“窗口”>“组件”)
属性检查器(“窗口”>“属性”)
添加复选框使用“CheckBox”组件来创建一个值为 true 或 false 的框。
1在 UI 层中选择第 1 帧。
2把“CheckBox”组件从“组件”面板拖到舞台中。把它放在询问用户是否想进入博彩那一段的下面。
组件出现在“库”面板的“Flash UI Components”文件夹中。
组件教程简介85
添加组合框使用“ComboBox”组件创建一个简单的下拉菜单,其中包含用户可以选择的项目。也可以使用“ComboBox”构建更为复杂的下拉菜单,这个菜单可以自动滚动到以用户输入到文本字段中的字母开头的菜单项。
把“ComboBox”组件从“组件”面板拖到舞台中。把它放在“选择您喜欢的颜色:”下。
组件出现在“库”面板的“Flash UI Components”文件夹中。
添加普通按钮使用“PushButton”组件创建两个普通按钮。一个按钮放在第 1 页,用来提交窗体中的信息。
另一个按钮放在第 2 页,用来返回到第 1 页,并把以前提交的值填回第 1 页。
1把“PushButton”组件从“组件”面板拖到舞台中。把它放在窗体的右下角,使它和“姓名:”及“电子邮件:”文本字段保持在同一水平线上。
组件出现在“库”面板的“Flash UI Components”文件夹中。
把组件从“组件”面板拖到舞台中后,即可从“库”面板中选择它的其他实例。
第 3 章86
2转到位于第 6 帧的空白关键帧。在“库”面板中,打开“Flash UI Components”文件夹,
从“库”面板中把“PushButton”组件拖到舞台中。把它放在右下角。
配置组件下一步是配置组件,用正确的信息设置它们以便用户选择。
您可以使用属性检查器或“组件参数”面板的“参数”选项卡来设置组件的参数。
高级用户可以使用每个组件的 API 方法和属性来设置组件的参数、大小、外观和其它属性。每个组件元素可用的方法和属性列在组件名下面的动作脚本字典里。
配置复选框
1在 UI 层中选择第 1 帧,然后选择舞台中的“CheckBox”组件。它的参数显示在属性检查器中。
2在“Instance Name”文本框中键入 sweepstakes_box 。
3在“Label”文本框中键入“妙极了!”
4在初始值参数弹出式菜单中,选择“Tr u e”。这指定“CheckBox”组件的初始状态是选中
(True) 还是没有选中 (False)。
5在标签定位参数弹出式菜单中,保留默认值为右对齐。标签将显示在复选框的右边。
6不要更改 Change Handler 参数。
Change Handler 参数是您希望在用户选择某个项目时执行的函数。此函数必须和组件实例定义在同一个时间轴里。此参数是可选的。只有在希望用户访问组件时应产生一个动作的情况下,才需要指定这个参数。
完成上述操作后,属性检查器应该是下面的样子,
组件教程简介87
有关使用“FcheckBox”组件的 API 方法来设置组件附加选项的详细信息,请参阅 Flash“帮助”中在线“动作脚本字典”的“FCheckBox”(组件)条目。
配置组合框
1在舞台中选择“ComboBox”组件。它的参数显示在属性检查器中。
2在“Instance Name”文本框中键入color_box 。
3确保将“Editable”参数设为 False。这样可以防止用户键入他们自已的文本。
4 Labels 参数显示用户可以选择的一个值列表。单击“Labels”字段,然后单击放大镜打开
“值”弹出式窗口。单击加号 (+) 按钮输入一个新的值。
5单击 default value 字段,然后键入“珍珠白”作为第 1 个值。
6单击加号 (+) 按钮输入下一个值。单击 default value 字段,然后键入“宝石蓝”作为下一个值。
第 3 章88
7用相同的方式,把“翡翠绿”添加到列表中。
完成上述操作后,“值”弹出式窗口应该是下面的样子:
8单击“确定”以关闭“值”弹出式窗口。
Data 参数是可选的。它用来指定与列表框中的项目(标签)相关联的值。在本教程中不需要做这些。
9 Row Count 参数指定窗口中显示多少行。由于有三个选项,把值改为 3。
无需输入 Change Handler 参数的名称。
完成上述操作后,属性检查器应该是下面的样子,
有关使用 API 方法来更改附加属性的详细信息,请参阅 Flash“帮助”中在线“动作脚本字典”
的“FCheckBox”(组件)条目。
配置普通按钮
1在第 1 帧中选择“PushButton”组件。
组件的参数显示在属性检查器中。
组件教程简介89
2在属性检查器“Instance Name”文本框中,键入 submit_btn。
3在属性检查器“Label”文本框中,键入“提交”。
文本显示在按钮上。
4键入 onClick 作为“Click Handler”的名称。后面将编写动作脚本来定义“Click Handler”
应该执行的操作。
完成上述操作后,属性检查器应该是下面的样子:
5在第 6 帧中选择“PushButton”组件。
6在属性检查器“Instance Name”文本框中,键入 return_btn。
7在属性检查器“Label”文本框中,键入“返回”。
8键入 onClick 作为“Click Handler”的名称。
有关使用“FpushButton”组件 API 方法来修改附加属性的信息,请参阅 Flash“帮助”中在线
“动作脚本字典”的“FpushButton”(组件)条目。
编写动作脚本来收集数据一些动作脚本会用在整个影片中,而另一些只和特定的帧相关。下表可以帮助您理解实例名称。
实例名称说明
color_box第
1 页上的“Color”组合框
sweepstakes_box第
1 页上的“Sweepstakes”复选框
submit_btn第
1 页上的“Submit”普通按钮
name第
1 页上的名称输入文本框
email第
1 页上的电子邮件地址输入文本框
return_btn第
2 页中的“Return”普通按钮
name_result第
2 页中显示用户名的动态文本框
email_result第
2 页中显示用户电子邮件地址的动态文本框
color_result第
2 页中显示用户颜色选择的动态文本框
sweepstakes_text第
2 页中根据用户是否选择参加搏彩来显示不同文本的动态文本框第 3 章90
为整个影片编写动作脚本组件动作脚本放置在关键帧中。“Click Handler”参数指定当“PushButton”组件被激活时进行的操作。默认值是 onClick,这意味着当用户单击某个普通按钮时,它会被激活。首先要为
onClick 创建一个函数。这是一个分支函数,它首先判断被按下的是“提交”按钮还是“返回”
按钮,然后据此执行动作。
1创建一个新的层,并命名为 All Actions。这将用于在整个影片中运行的动作脚本。
2如果“动作”面板没有打开,选择“窗口”>“动作”。
3按下 Control+Shift+E 键 (Windows) 或 Command+Shift+E 键 (Macintosh),或单击右上角的控制图标(一个上面有复选标记的三角形)并从弹出菜单中选择“专家模式”,切换到专家模式。
4首先,输入普通按钮的回调函数。这是个条件语句,根据单击的按钮进行分支。如果单击的是“提交”按钮,它将分支到 getResults 函数并进入第 2 页,如果单击的是“返回”按钮,它将进入第 1 页。
在“动作”面板中输入下面的代码。
// push button callback
function onClick(btn) {
if (btn == submit_btn) {
getResults();
gotoAndStop("pg2");
} else if (btn == return_btn) {
gotoAndStop("pg1");
}
}
注意,虽然不建议您这样做,但如果您不想编写动作脚本,可以从本教程中复制这段文本并粘贴到“动作”面板。
5现在编写 getResults 函数。该函数可以从搏彩复选框和颜色组合框中获取结果。它以标签的形式从组合框中得到结果,因而可以显示结果。
// get results from pg 1
function getResults() {
sweepstakes_result = sweepstakes_box.getValue();
color_result = color_box.getSelectedItem().label;
selectedItem = color_box.getSelectedIndex();
}
6现在编写 initValues 函数。这将用用户以前选择的值初始化第 1 页中的值。当用户单击
“返回”按钮时,它会运行。
// initialize the values on pg 1 with the values the user has previously
selected
function initValues() {
sweepstakes_box.setValue(sweepstakes_result);
if (!started) {
color_box.setSelectedIndex(0);
started = true;
} else {
color_box.setSelectedIndex(selectedItem);
}
}
组件教程简介91
7最后,在动作脚本的开头添加对 initValues 函数的调用。完成上述操作后,动作脚本应该是下面的样子,
initValues();
// push button callback
function onClick(btn) {
if (btn == submit_btn) {
getResults();
gotoAndStop("pg2");
} else if (btn == return_btn) {
gotoAndStop("pg1");
}
}
// initialize the values on pg 1 with the values the user has previously
selected
function initValues() {
sweepstakes_box.setValue(sweepstakes_result);
if (!started) {
color_box.setSelectedIndex(0);
started = true;
} else {
color_box.setSelectedIndex(selectedItem);
}
}
// get results from pg 1
function getResults() {
sweepstakes_result = sweepstakes_box.getValue();
color_result = color_box.getSelectedItem().label;
selectedItem = color_box.getSelectedIndex();
}
您已经完成了要在整个影片中运行的脚本。但是,仍然需要为第 1 页和第 2 页中的帧添加脚本。
为每一个关键帧添加动作脚本只有当用户选择特定的帧时,才需要执行某些动作脚本。要使动作脚本工作,需要给每个关键帧命名。
1创建一个新层,并命名为 Frame Actions。选择第 1 帧,然后选择“插入”>“空白关键帧”
来插入一个空白关键帧。使用属性检查器将关键帧命名为 pg1。用同样的方式,在第 6 帧中插入一个关键帧,并命名为 pg2。
2在 Frame Actions 层的第 1 帧中选择关键帧,并编写下面的动作脚本以在第 1 帧 (pg1) 停止影片。
stop();
第 3 章92
3(可选)如果想在用户选择了搏彩复选框时显示某一文本,而在用户未选择时显示其它文本,
可以编写一条带有文本的条件语句,将其插入第 2 页的 sweepstakes_text 动态文本字段。在
Frame Actions 层中选择名为 pg2 的关键帧,并在“动作”面板中写入以下内容:
// sweepstakes text
if (sweepstakes_result==true) {
sweepstakes_text = "You have been entered in the Stiletto Fantasy
sweepstakes,Winners are announced at the end of each month.";
} else {
sweepstakes_text = "You have not been entered in the Stiletto Fantasy
sweepstakes.";
}
注意,不要剪切此动作脚本并将其粘贴到“动作”面板。它不会正确运行,因为在第 1 行和第 2 行的文本之间有分行符。
测试影片要看组件的样子,请在 Flash Player 6 中运行该影片。
1选择“控制”>“测试影片”。
影片在 Flash Player 中运行。
2通过选择和不选择复选框来确定它是否工作。
3选择一种颜色,确定它是否出现在第 2 页。
4完成测试后,在播放器中选择“文件”>“关闭”来关闭影片。
5如果发现有任何错误,请使用箭头工具来选择组件,然后在属性检查器中进行纠正。如果需要,重新测试影片。
后续步骤本教程介绍了创建一组简单组件并显示结果的基本步骤。有关的详细信息,请参阅“使用 Flash”
和“动作脚本字典”,二者都可以在“帮助”菜单中找到。
组件教程简介93
第 3 章94