FLASH CS4 制作Flash电子杂志

在制作Flash电子杂志时，通常需要制作电子杂志的片头、翻页动画以及电子杂志的内容图像。然后，通过ActionScript读取外部的XML数据目录文件以及图像素材文件，再将这些外部的素材显示到Flash影片中，如图14-2所示。

图14-2 Flash电子杂志

设计过程：

1．制作片头与翻页动画

（1）创建文档，并将素材图像导入到【库】中。在【属性检查器】中设置【大小】为“1020×688”像素，【舞台】颜为“灰”（#999999），如图14-3所示。

图14-3 设置影片属性

（2）制作遮罩动画，实现手写书法效果的“足迹”文本，以作为杂志的logo图标，将该动画的影片剪辑元件导出ActionScript为magazinelogo，如图14-4所示。

图14-4 制作杂志logo

（3）导入turn.fla矢量素材，作为电子杂志前翻页、后翻页的动画，如图14-5所示。

图14-5 导入翻页动画

（4）使用导入的素材，制作翻页用的“上一页”和“下一页”按钮，如图14-6所示。

图14-6 制作翻页按钮

2．制作杂志图像与索引XML

使用PhotoShop或其他图像处理软件制作杂志的封面、封底以及内容等图像，将图像保存在影片所在目录的images子目录下，如图14-7所示。

图14-7 制作杂志封面等图像

使用记事本编写xml文件，并将其保存在影片所在目录的xml子目录下。代码如下：

<?xml version="1.0" encoding="utf-8"?>

</magazine>

3．编写电子杂志程序

（1）在Flash中新建as文件，将文件保存在影片所在的目录的action子目录中，并创建名为action的包，导入各种外部类。其代码如下：

package action{

//创建action包

import flash.display.Sprite;

//导入基类

import flash.events.Event;

//导入普通事件类

import flash.events.MouseEvent;

//导入鼠标事件类

制作flash

import flash.display.Bitmap;

//导入位图类

import flash.display.BitmapData;

//导入位图数据类

import flash.display.MovieClip;

//导入影片剪辑类

import flash.URLLoader;

//导入加载类

import flash.URLRequest;

//导入加载请求类

import flash.display.Loader;

//导入加载对象类

}

（2）创建script主类，在主类中声明各种变量，并在声明变量的同时加载XML索引。其代码如下：

public class script extends Sprite {

public var pageXMLURL:String = "l";

//定义页面XML文件路径

public var pageXMLRequest:URLRequest = new URLRequest(pageXMLURL);

//实例化页面XML请求

public var pageXMLLoader:URLLoader = new URLLoader(pageXMLRequest);

//实例化页面XML的载入

public var attributesArray:Array=new Array();

//实例化页面XML文档中的杂志内容属性数组

public var pageNumberArray:Array=new Array();

//实例化页面XML文档中的页码数组

public var urlArray:Array=new Array();

//实例化页面XML文档中的路径数组

public var coverURL:String=new String();

//实例化封面的路径

public var backCoverURL:String=new String();

//实例化封底的路径

public var pageURLArray:Array=new Array();

//实例化杂志普通页面的路径

public var coverLoader:Loader=new Loader();

//实例化封面图像

public var backCoverLoader:Loader=new Loader();

//实例化封底图像

public var pagesArray:Array=new Array();

//实例化杂志页面的数组

public var currentPageIndex:int = -1;

//实例化当前页面的页码

}

（3）自定义loadXML()函数，用于创建加载XML的事件。其代码如下：

public function loadXML ():void {

pageXMLLoader.addEventListener (Event.COMPLETE,pageXMLLoadComplete);

//创建加载XML的事件，监听XML加载完成

}

（4）自定义pageXMLLoadComplete()函数，用于在XML加载完成后将XML中的数据追加到数组中。其代码如下：

public function pageXMLLoadComplete (event:Event):void {

var pageList:XML=XML(event.target.data);

//实例化XML中的数据

var i:int=0;

//声明XML数据的索引号

for each (var pageXMLElement:XML in pageList.elements()) {

//创建循环遍历XML的内容

attributesArray.push (String(pageXMLElement.@att));

//将XML中的att属性添加到attributesArray数组中

pageNumberArray.push (String(pageXMLElement.@pagenumber));

//将XML中的pagenumber属性添加到pageNumberArray数组中

urlArray.push (String(pageXMLElement.@url));

//将XML中的url属性添加到urlArray数组中

}//将XML中的数据追加到各数组中

for (i=0; i<attributesArray.length; i++) {

//创建循环，根据XML数据的att属性进行分类处理

switch (attributesArray[i]) {

//判断数据的att属性

case "cover" :

//当为封面时

coverURL=urlArray[i];

//为封面的URL地址

break;

case "backcover" :

//当为封底时

backCoverURL=urlArray[i];

//为封底的URL地址

break;

case "page" :

//当为普通页面时

pageURLArray.push (urlArray[i]);

//将页面的URL地址追加到数组urlArray中

break;

}

loadPages ();

//执行加载页面的函数

}

（5）自定义loadPages()函数，在函数中根据从XML中获取的图像路径实例化外部图像。其代码如下：

public function loadPages ():void {

//创建加载页面的函数

coverLoader.load (new URLRequest(coverURL));

//载入封面图像

coverLoader.x=310;

//定义封面图像水平坐标

coverLoader.y=84;

//定义封面图像的垂直坐标

coverLoader.alpha=0;

//定义封面图像的透明度

backCoverLoader.load (new URLRequest(backCoverURL));

//载入封底图像

backCoverLoader.x=100;

//定义封底图像的水平坐标

FLASH CS4 制作Flash电子杂志

发布评论取消回复

最近发表

热门文章

标签列表