这一部分描述怎么中Flash CS4专业版中利用[Embed]元数据标签嵌入GIF,PNG,JPEG,或者MP3文件。第一个示例来看看嵌入GIF文件的过程。
如果你没有准备好,一定要下载本文章第一页可用的样例文件。跟着提供的例子,解压ZIP文件,然后打开名称为\gif的目录检查示例文件:
1、选择"文件">"新建">"Flash文件(ActionScript 3.0)"菜单,创建一个新的Flash CS4文件.
2、保存这个Flash文件为GIFEmbed.fla.
3、选择"文件">"新建">"ActionScript文件",来创建一个新的ActionScript文件.
4、保存ActionScript文件为GIFEmbed.as.
5、当GIFEmbed.as是活动标签,拷贝并粘贴如下代码到脚本窗口:
package { import flash.display.*;
public class GIFEmbed extends Sprite { [Embed(source = "../assets/talapetra.gif")] private var theClass:Class;
public function GIFEmbed () { var displayObj:DisplayObject = new theClass(); addChild (displayObj); } } }
代码中的高亮行包括了源属性,指示了嵌入的名称和资源的路径。你可以使用绝对路径或者文档文件的相对路径来包含嵌入的描述。在这个示例中,这个名称 为GIFEmbed.as的ActionScript类指示了定位到命名为\assets的文件夹中,这个文件夹包含了talapetra.gif的图片 文件。
注意:[Embed]元数据标签可以有另外一个可选属性,mimeType,它允许你指定链接资源的MIME类型。我将在后面再具体的讨论这个属性。
ActionScript代码的顺序非常重要。你必须在声明变量前添加[Embed]元数据标签,而且这个变量的类型会是Class。在下面的代码片段中,[Embed]元数据标签中一个成为theClass,类型声明为Class的私有变量前使用:
[Embed(source = "../assets/talapetra.gif")] private var theClass:Class;
在名称为GIFEmbed的函数内部,一个新的类型为DisplayObject命名为displayObj的变量被用来实例化theClass为 一个新的DisplayObject。下一行使用addChild方法将displayObj添加到了显示列表当中,并在舞台上渲染:
var displayObj:DisplayObject = new theClass(); addChild (displayObj);
参考示例文件,查看文件夹结构,确认GIFEmbed.as类文件和名称为 talapetra.gif的GIP图片的路径(放在assets目录中)。
6、做了这些改变之后,保存GIFEmbed.as 。
7、点击相应的标签打开 GIFEmbed.fla文件。点击舞台,在属性面板中查看发布属性。
8、在文档类输入框中输入类名,将类作为文档类与Flash文件关联。在这个示例中,输入你创建的类名GIFEmbed(如图1)。
图1:在属性面板的文档类框中输入类名
9、选择"控制">"测试影片"来测试影片。
一个错误信息会出现,因为项目尝试用了一个在Flash CS4中的特性,这需要一些额外的Flex类。Flash检测了缺少的Flex类,并显示如图2的信息。
图2:Flex SDK需求信息窗口
在这个对话框中,你有一个选项可以将路径指向Flex SDK,但是这并不是必须浏览指向的,因为路径已经设置了。你需要做的是,点击"更新库路径"按钮来确保flex.swf的正确路径 ($(FlexSDK)/frameworks/libs/flex.swf)自动地添加到当前FLAS文件的库路径中。
注意:在第一次运行SWF文件之后,Flex SDK需求窗口不会再出现。取而代之,你会看到编译错误,看成是缺失类(如图3)。
图3:随后尝试运行SWF时编译错误结果
10、点击"更新库路径"按钮将flex.swf文件从Flex SKD添加到FLA文件的库路径。
11、根据如下步骤,你会看到会发生什么:
1、选择"文件">"发布设置",然后点击Flash标签; 2、点击脚本下拉菜单后面的设置按钮(如图4);
图4:在Flash标签上,点击设置按钮访问ActionScript的设置
3、在高级AS3设置窗口中,选择库路径标签。列表包含了Flex SDK目录中的flex.swc的路径(如图5)。
图5:检查flex.swf显示在库路径标签列表中
12、点击确认按钮关闭AS设置窗口。然后点击确认关闭发布设置对话框。
13、选择"控制">"测试影片"来再次测试SWF。独立的Flash播放器显示了SWF文件,现在它正确地显示了嵌入GIF文件(如图6)。
图6:SWF文件显示了嵌入元数据源的数据
正如我之前提到的,[Embed]元数据标签带有两个属性: Source:(必选的)使用这个属性来确认嵌入资源的名称和路径。如果你嵌入了一个元件,你可以用元件的关键词确定元件认嵌入到SWF中的名字。 mimeType:(可选的)使用这个属性来确定嵌入资源的MIME类型。如果这个属性没有设置,Flash会在源属性中根据导入资源文件的扩展名载入合适的类型。
Flash CS4专业版支持与Flex一样的一系列MIME类型:
application/x-font application/x-font-truetype application/x-shockwave-flash audio/mpeg image/gif image/jpeg image/png image/svg image/svg-xml
同前面列出的过程一样,元数据也可以应用到帧脚本。在这段中,我会描述怎么利用[Embed]标签来嵌入元数据到帧脚本中。如果你跟着示例文件,请参阅<Embed on Frame Script>目录下的文件:
1、通过选择"文件">"新建">"Flash文件(ActionScript 3.0)"菜单来创建一个新的Flash CS4文件;
2、将这个Flash文件保存为GIFEmbed.fla。
3、选择图层1的第一帧并打开动作面板("窗口">"动作")。
4、拷贝如下代码,并粘贴到脚本窗口:
[Embed(source="../assets/talapetra.gif")] var theClass:Class; var displayObject:DisplayObject = new theClass(); addChild(displayObject);
5、重复前面一个段落的10-13步测试SWF文件,并更新Flex SDK目录库路径来添加flex.swc文件。
在前面的段落中,我写了使用[Embed]标签利用GIF文件嵌入图像的元数据的过程。显示外部数据非常有用,但是当使用[Embed]元数据标签是会有很多可能的情况。这个段落中会描述嵌入整个SWF文件或者一个SWF文件中的一些特殊元件的步骤。
如果你随着下载的示例文件学习,请参阅文件夹中的文件名为<SWF with slice 9>的示例 。按照如下步骤:
1、在Flash CS4中,选择"文件">"打开",从示例文件的<SWF with slice 9>目录中选择"Movie.fla"文件。
2、选择"窗口">"库",打开库面板(如果它还没有打开的话)。
3、右键(或者苹果机上Control-click)点击库中的"Slice9"元件,从上下文菜单中选择"属性"(如图7)。
图7:当右键点击库中的"Slice9"元件是出现的菜单中选择"属性"
4、在元件属性对话框中,选择"Export for ActionScript"选项(如果没有被选中的话),如图8所示。
图8:在元件属性对话框中检查"Export for ActionScript"选项
注意:在这个练习中,也需要确保"Enable Guides for 9-Slice Scaling"选项被选中。
5、选择"控制">"测试影片"来测试FLA文件。
6、关闭独立播放器的movie.swf。也关闭Flash的movie.fla。
7、选择"文件">"新建">"Flash文件(ActionScript 3.0)",命名为SWFEmbed.fla。
8、选择"文件">"新建">"ActionScript文件",命名为SWFEmbed.as。
9、复制并粘贴如下代码到SWFEmbed.as文件的脚本窗口中:
package { import flash.display.*; import flash.events.MouseEvent; import flash.geom.Rectangle;
public class SWFEmbed extends MovieClip { public var displayObj:DisplayObject; [Embed(source="Movie.swf", symbol="Slice9")] var theClass:Class;
public function SWFEmbed() { displayObj = new theClass(); addChild(displayObj); displayObj.x = 200; displayObj.y = 220; } } }
在这段代码中,[Embed]元数据标签使用了source参数来确认将被嵌入的SWF文件的名称和路径。symbol参数来确认特殊元件的名称,这个元件是从source参数关联的SWF文件中嵌入的。
10、添加了代码之后,保存ActionScript文件为 SWFEmbed.as。
11、点击Flash CS4中其他的标签,激活SWFEmbed.fla标签。在舞台上点击一次,在属性检查中查看发布属性。
12、在文档类区域,输入类名SWFEmbed,链接ActionScript文件到Flash文件。
13、选择"控制">"测试影片"来在独立播放器中查看SWF。Flex SDK Required对话框出现(如图9)。
图9:信息表明这个工程需要Flex SDK
14、点击"Update Library Path"按钮,从Flex SDK中添加flex.swc到FLA文件的库路径中。
15、选择"控制">"测试影片"来再次预览SWF,你会看到元件显示在SWFEmbed.swf文件中(如图10)。
图10:在SWFEmbed.swf中显示元件元数据
除了嵌入图片文件,SWFs,还有SWFs中的元件以外,[Embed]元数据标签还可以嵌入OpenType和TrueType字体到Flash 文件中。在这个段落中,我将演示怎么使用[Embed]元数据标签在Flash CS4中嵌入字体。这篇文章将定你已经安装了Arial Bold字体在你的系统中。如果你没有这个字体,你可以从 SearchFreeFonts.com或者类似网站上购买它。
注意:[Embed]元数据标签仅仅支持类和成员变量,如果你尝试在函数前使用[Embed]标签,如下的编译错误将会显示: "Embed is only supported on classes and member variables."(Embed仅仅支持类和成员变量)
如果你是跟随教程学习,请参阅示例文件中TrueType目录。
1、选择"文件">"新建">"ActionScript文件",创建一个新的ActionScript文件。
2、保存文件为FontClass.as。
3、拷贝并粘贴如下代码到脚本窗口中:
package { import flash.text.*; import flash.display.MovieClip; public class FontClass extends MovieClip { [Embed(source="Arial Bold.ttf", fontName="myFont", fontWeight="bold", advancedAntiAliasing="true", mimeType="application/x-font")] private var theClass:Class; public function FontClass () { var t:TextField=new TextField(); t.embedFonts = true; var textFormat:TextFormat=new TextFormat(); textFormat.size = "30"; textFormat.font = "myFont"; t.text = "[Embed] metadata rocks!!!"; t.width = 500; t.setTextFormat (textFormat); addChild (t); } } }
上面代码中的高亮部分,[Embed]元数据标签中使用到如下的参数来嵌入一个Arial bold字体:
Source: 这个参数指出了font文件的位置。如果愿意,你可以使用systemFont参数确认名称而不是source来嵌入系统字体。 fontName: 这个参数指明了嵌入字体的名称,字体的名称是一个唯一标识,所以你可以通过名称来调用字体。 mimeType: 这个参数描述了嵌入元数据的MIME类型。因为你在这个例子中嵌入了一种字体,你可以设置MIME类型为"application/x-font"。 fontWeight: 这个参数表明了字体的粗细,如粗体或者正常。
注意:如果字体有粗细,并且你没有在[Embed]元数据标签中包含fontWeight参数,当测试SWF文件是,你会看到如下编译错误:
Exception during transcoding: Font for alias 'myFont' with plain weight and style was not found at... (意外的转换:带有粗细和样式的别名为'myFont'的字体没有被找到在...)
随着嵌入字体的路径(如图11)。
图11:如果嵌入字体的粗细在参数中没有明确,将会显示编译错误
如果嵌入字体有特殊的样式(如斜体),在[Embed]元数据标签中没有使用fontStyle参数来明确,同类型的错误也将会显示出来。当使用元数据嵌入字体时,请确保明确所有必需的参数。
4、粘贴代码到脚本窗口后,确保保存文件为FontEmbed.as。
5、选择"文件">"新建">"Flash文件(ActionScript 3.0)"来创建一个新的Flash文件。
6、保存Flash文件为EmbedFont.fla。
7、点击舞台访问属性窗口(选择"窗口">"属性")。
8、在发布属性中,输入类型FontClass到文档类文本框中。
9、选择"控制">"测试影片",测试FLA。
10、当<Flex SDK Required>对话框出现时,点击<Update Library Path>按钮。这引导Flash将flex.swc添加到FLA文件的库路径。你可以再次测试FLA文件。
11、选择"控制">"测试影片"。这次,预期的文本(粗体的Arial字体)显示在EmbedFont.swf文件中(如图12)。
图12:使用嵌入字体外观和粗细,测试FLA文件,查看显示信息
在这篇文章的前面段落中,我讲述了使用 [Embed] 元数据标签嵌入图形文件,SWF文件,SWF文件中元件,还有字体等到SWF中。所有这些可能性都是非常有用的,不过还有另外一种类型的文件也可以采用 [Embed] 元数据标签嵌入到SWF中:XML文件。
我保留最好的到最后,这是因为这个功能对于将外部数据导入到SWF中非常用用 -- 而且很直接地就可以完成。根据嵌入的XML数据,你可以做一些有趣的事情,为将来的工程记住这个是一个极好的提醒。
下面的示例提供了使用 [Embed] 元数据标签嵌入一个XML文件的一个说明。如果你跟随教程学习,请参阅示例文件的XML目录。
1、选择"文件">"新建">"Flash文件(ActionScript 3.0)"创建文件,并保存文件为XMLLoader.fla。
2、选择"文件">"新建">"ActionScript文件"创建文件,并保存文件为 XMLLoader.as。
3、当XMLLoader.as被激活,拷贝并粘贴如下如下代码到脚本窗口:
package { import flash.display.*; import flash.utils.ByteArray; public class XMLLoader extends Sprite { [Embed(source = "training.xml",mimeType = "application/octet-stream")] private var theClass:Class; public function XMLLoader () { var xmlObj:Object = new theClass(); trace(xmlObj); } } }
注意:当嵌入XML数据时,你必须将mimeType参数设置为"application/octet-stream"。 Flash不能通过XML文件的扩展名检测正确的MIME类型,所以无论什么时候你嵌入XML数据时都要设置mimeType参数。
4、将代码粘贴到脚本窗口后,确保保存XMLLoader.as文件。
5、激活XMLLoader.fla标签页。如果属性窗口还没有打开,在舞台上点击一次,打开属性检查器("窗口">"属性")。
6、在发布属性中,在文档类文本框中输入类名。在这个示例中,添加你创建的类:XMLLoader。
7、选择"控制">"测试影片"测试FLA。<Flex SDK Required>对话框出现了。
8、点击< Update Library Path >按钮将flex.swc添加到FLA文件库路径。
9、再次选择"控制">"测试影片"测试FLA。这次你会看到XML数据显示在输入面板中(如图13)。
图13:输出面板显示嵌入到SWF中的XML数据