论文部分内容阅读
[摘 要] 在我们设计的课件中,有一大部分仅仅作内容演示用——用到的媒体大多只是文字和图片。对于此类课件,我们往往会选择PowerPoint来制作,但是,面对大量PowerPoint开发的具有相同风格的课件,它们样式雷同、单调、动画效果不佳、很难完美实现网络化发布。Flash本是矢量动画设计工具,动画制作功能当然强大,近来在Macromedia的不断改进和升级下,Flash现在更兼有强大的RIA(Rich Internet Applications 丰富因特网应用程序)开发功能,我们能可以通过Flash设计出积件式的文字、图片、动画演示器,只要更换要展示的资源文件,就能适应不同课程的内容演示要求,也可以嵌入网页实现网络化自主学习。
[关键词] 积件 Flash 脚本
在我们设计的课件中,有一大部分仅仅作内容演示用——用到的媒体大多只是文字和图片。对于此类课件,我们往往会选择PowerPoint来制作,这要比使用Authorware或者Flash等操作相对复杂的软件难度小、效率高。但是,面对大量PowerPoint开发的具有相同风格的课件,我们往往感觉到样式雷同、单调,并且,这些课件的动画效果不佳,它们也很难完美实现网络化发布。Flash本是矢量动画设计工具,动画制作功能当然强大,近来在Macromedia的不断改进和升级下,Flash现在更兼有强大的RIA(Rich Internet Applications 丰富因特网应用程序)注1开发功能,我们能可以通过Flash设计出积件注2式的文字、图片、动画演示器,只要更换要展示的资源文件,就能适应不同课程的内容演示要求,也可以嵌入网页实现网络化自主学习。本文就以英语课程《Halloween》的类PowerPoint积件式Flash演示课件为例来进行设计、探讨和应用。
一、设计开发
Flash演示器最关键设计目标是能播放展示不同的资源内容,并且,实现这个目标要求用户脱离Flash MX软件环境,只需简单更换外部文件,就能形成一个个新课件,达到二次开发的目的。为完成这个目标,需要我们通过在Flash AS中自定义函数,调用外部XML注3,让使用者可以方便的更换外部资源图片,进行二次开发。
我们知道,在Flash MX软件环境中,可以很方便的插入文字图片,其实,一个Flash动画程序也能从外部动态载入文字和图片文件,并且能够按照设计者的意图通过某种方式显示出来,甚至连做好的SWF动画文件也能被载入播放。
1、设计步骤
Step 01
新建空白Flash文档,设置文档尺寸为950px×650px(图1-1),设置这样的的大小是考虑到演示时能尽量多的利用屏幕空间以显示清晰的图文,将其背景色设置为黑色。
图1-1
插入线性渐变填充的矩形作为背景,选中并通过“窗口”>“对齐”面板快速设置其大小位置与舞台相同。(图1-2)(图1-3)
图1-2 图1-3
插入一个白色填充、黑色边框的矩形,大小640px×480px,作为内容显示区域。
Step 02
依次制作标题动态文本框、旁白文字动态文本框、图片序号显示动态文本框、图片总数显示动态文本框、菜单和按钮,并安排在页面适当位置。(图1-4)
为标题动态文本框命名为“title”;旁白文字动态文本框命名为“description”;图片序号显示动态文本框命名为“inputField”,类型必须选择为输入文本框;图片总数显示动态文本框命名为“totalImg”;菜单命名为“imgList”; 按钮命名为“back”, 按钮命名为“next”。通过属性面板可以为对象命名。(图1-5)
图1-5
图1-4
Step 03
创建一空影片剪辑,将影片剪辑中心点与“内容显示区域”左上角点对齐。创建空影片剪辑可以先在舞台上插入一个矩形,然后将其转换为影片剪辑,双击其进入编辑状态,删除先前插入的矩形,即生成一空影片剪辑。将这个影片剪辑命名为“imgView”。(图1-6)
图1-6
在存放imgView影片剪辑层上新建一层,建立640px×480px大小的遮罩,遮罩位置应与“内容显示区域”位置对齐。(图1-7)
原则上,动画中的每个对象应该存放在独立一层中,本动画共有10层。为每一层命名是好的习惯。(图1-8)
提示:
顶端名为“AS”的层用来存放帧程序,在Flash中,程序叫做动作脚本(ActionScript),通常,动作脚本可以附加关键帧、电影剪辑、按钮、组件等对象上。当播放到附加了动作脚本的关键帧的时候,这些AS脚本就会被执行,所有附加了动作脚本的帧都会显示“α”标志。附加在电影剪辑、按钮、组件等对象上的动作脚本必须由“事件” 来驱动执行,所谓“事件”,就是如鼠标单击、数据载入、状态变更等程序响应条件。
2、动作脚本注入
Step 04
将动画扩展为3帧,“AS”层的每帧均为关键帧。对帧添加动作脚本,应先选中帧,然后按键盘上的“F9”,就能打开“动作”面板,在其中可以输入程序。键盘上的“F9”可以控制“动作”面板的打开关闭(图1-9)
第一帧进行变量、对象的初始化,为其添加如下程序段:
imgFolder = "images/";
currentImg = 0;
input = currentImg+1;
imgData = new Array();注4
imgXML = new XML();注5
system.useCodepage = false; imgXML.ignoreWhite = true;
imgView._alpha = 0;
description.html = true;
posX = imgView._x;
posY = imgView._y;
drag = 0;
完成一帧的动作脚本输入后,单击“动作”面板上的 按钮,用以检查程序中有无语法错误。
第二帧完成载入外部XML文件的工作。外部XML文件在本课件中非常重要,其中存储着需要载入的图片、动画文件信息,本动画规定每个文件有三项信息需要存储:项目名、文件路径、相关信息。采用XML文件来存储关键信息的其他原因一是与它动画文件分离,用户修改整个动画不需要编辑Flash源文件,只需要修改XML文件中的几处信息即可,对用户二次开发来说十分方便;另外,XML利于存放数据,定义也很方便,现在已经是Flash与外部进行通信的主要数据描述方法,并且越来越多的因特网应用都支持XML,这使得它们之间信息交互变得可能。
第三帧对动画中的交互功能进行定义,这些功能包括图片轮换显示、文本框内容的显示、按钮使用、菜单使用、图片选择等。
另外,对菜单“imgList”也要附加动作脚本,选中菜单,按“F9”,打开动作面板输入,如图1-10。(具体代码从略)
二、课件应用
将已经制作好的课件“halloween”文件夹拷贝到硬盘上打开,将看到以下的的结构(图1-11)。Halloween.fla是主动画源文件,相应的Halloween.swf是主动画文件,双击即可运行;选择题.fla是将被主动画载入的动画源文件,使用者可以根据自己的需要自行创作;images文件夹存放资源,其中有图片(必须是jpg格式)、动画(swf),Data.xml存储动画播放内容的相关信息,修改方法后面有专门介绍。
图1-11
1、外部文件准备
课件可以播放的外部文件可以有两种格式:JPG和SWF,它们的最佳大小建议是640px×480px,必须存放在images文件夹中才能正常使用。其中JPG格式是图片,可以预先在图像处理软件中处理好,建议使用Macromedia的另一软件Fireworks 来处理,如4.jpg文件,先在Fireworks中新建大小为640px×480px的空文档(图1-12),复制/导入外部图片,
图1-12
优化后导出为4.jpg,即能使用。(图1-13)
图1-13
选择题.swf是动画演示文件,可以根据实际需要自己开发,此动画是选择题演示。这里不详细介绍它的制作,有3项注意:第一、它的最佳大小建议是640px×480px;第二、如果需要背景色,一定要插入矩形覆盖舞台来实现,这是因为当它被载入到驻动画里的时候,背景会变成透明;第三、如果其中包含动作脚本,不能采用_root.X的方式来定义和调用对象,只能使用_parent.X的方法,具体可以打开它的源程序查看。(图1-14)
图1-14
2、XML文档的修改
在images文档中的Data.xml文件中存储被主动画调用的外部文件信息,其中的内容会被主动画读入。XML中的代码如下:
<?xml version='1.0' encoding='UTF-8'?>
只要修改项目中的三个参数就能控制主动画载入不同的内容,增加项目可以调用更多的资源。修改时只改中的参数,内容必须加左右引号。
name参数:在主动画里显示在标题“title”区的标题文字。
src参数:此外部图片或动画的路径,注意是相对于Data.xml文件的。
des参数:在主动画里显示在标题“description”区的相关内容文字。
在保存Data.xml此类XML文件的时候,要保存为UTF-8格式,否则在Flash里中文会乱码。(图1-15)修改Data.xml可以使用Windows的记事本,也可以使用Dreamweaver来编辑。
3、课件运行
只要双击halloween.swf即可运行课件。课件分为标题区、内容区、图片区、控制区四个部分。(图1-16)
图1-16
标题区显示的内容对应Data.xml中的name参数,内容区显示的内容对应Data.xml中的des参数,图片区显示的图片动画路径由Data.xml中的src参数控制,图片在转换过程中会有淡入淡出的显示效果。图片区里显示的图片可以被拖动。
在控制区里有三组控制工具。单击 后退按钮实现往回切换内容,单击 前进按钮往下显示新内容。可以通过菜单快速选择要显示的项目。在图片序号输入选择框中,输入图片序号后回车也可以快速跳转到此图片。
注1 RIA:丰富互联网应用程序(Rich Internet Applications)。“富”的概念包含两方面,分别是数据模型的丰富和用户界面的丰富。RIA的用户界面提供了灵活多样的界面控制元素,可以让你有更大的空间去创建更高效和更具有交互性的网络应用程序。
注2 积件(Integrableware):是由教师和学生根据教学需要,自己组合运用的教学信息和教学处理策略库与工作平台。积件是从课件的经验中发展出来的、现代教材建设的重要观念转变,是继课件之后的新一代教学软件。
注3 XML:可扩展标记语言或可延伸标记语言(eXtensible Markup Language)。标记是指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种信息的文章等。XML要比HTML强大得多,它不再是固定的标记,而是允许定义数量不限的标记来描述文档中的资料,允许嵌套的信息结构。HTML只是Web显示数据的通用方法,而XML提供了一个直接处理 Web 数据的通用方法。XML中的每对 标记被称为节点。
注4 imgData = new Array();——构造空数组imgData,用于存放载入的图片动画信息。每个数组项都有imgData[i].name、imgData[i].src、imgData[i].des三个属性,用于存放标题、路径、内容数据。
注5 imgXML = new XML();——构造XML对象imgXML,用于载入解析Data.xml文件。
[关键词] 积件 Flash 脚本
在我们设计的课件中,有一大部分仅仅作内容演示用——用到的媒体大多只是文字和图片。对于此类课件,我们往往会选择PowerPoint来制作,这要比使用Authorware或者Flash等操作相对复杂的软件难度小、效率高。但是,面对大量PowerPoint开发的具有相同风格的课件,我们往往感觉到样式雷同、单调,并且,这些课件的动画效果不佳,它们也很难完美实现网络化发布。Flash本是矢量动画设计工具,动画制作功能当然强大,近来在Macromedia的不断改进和升级下,Flash现在更兼有强大的RIA(Rich Internet Applications 丰富因特网应用程序)注1开发功能,我们能可以通过Flash设计出积件注2式的文字、图片、动画演示器,只要更换要展示的资源文件,就能适应不同课程的内容演示要求,也可以嵌入网页实现网络化自主学习。本文就以英语课程《Halloween》的类PowerPoint积件式Flash演示课件为例来进行设计、探讨和应用。
一、设计开发
Flash演示器最关键设计目标是能播放展示不同的资源内容,并且,实现这个目标要求用户脱离Flash MX软件环境,只需简单更换外部文件,就能形成一个个新课件,达到二次开发的目的。为完成这个目标,需要我们通过在Flash AS中自定义函数,调用外部XML注3,让使用者可以方便的更换外部资源图片,进行二次开发。
我们知道,在Flash MX软件环境中,可以很方便的插入文字图片,其实,一个Flash动画程序也能从外部动态载入文字和图片文件,并且能够按照设计者的意图通过某种方式显示出来,甚至连做好的SWF动画文件也能被载入播放。
1、设计步骤
Step 01
新建空白Flash文档,设置文档尺寸为950px×650px(图1-1),设置这样的的大小是考虑到演示时能尽量多的利用屏幕空间以显示清晰的图文,将其背景色设置为黑色。
图1-1
插入线性渐变填充的矩形作为背景,选中并通过“窗口”>“对齐”面板快速设置其大小位置与舞台相同。(图1-2)(图1-3)
图1-2 图1-3
插入一个白色填充、黑色边框的矩形,大小640px×480px,作为内容显示区域。
Step 02
依次制作标题动态文本框、旁白文字动态文本框、图片序号显示动态文本框、图片总数显示动态文本框、菜单和按钮,并安排在页面适当位置。(图1-4)
为标题动态文本框命名为“title”;旁白文字动态文本框命名为“description”;图片序号显示动态文本框命名为“inputField”,类型必须选择为输入文本框;图片总数显示动态文本框命名为“totalImg”;菜单命名为“imgList”; 按钮命名为“back”, 按钮命名为“next”。通过属性面板可以为对象命名。(图1-5)
图1-5
图1-4
Step 03
创建一空影片剪辑,将影片剪辑中心点与“内容显示区域”左上角点对齐。创建空影片剪辑可以先在舞台上插入一个矩形,然后将其转换为影片剪辑,双击其进入编辑状态,删除先前插入的矩形,即生成一空影片剪辑。将这个影片剪辑命名为“imgView”。(图1-6)
图1-6
在存放imgView影片剪辑层上新建一层,建立640px×480px大小的遮罩,遮罩位置应与“内容显示区域”位置对齐。(图1-7)
原则上,动画中的每个对象应该存放在独立一层中,本动画共有10层。为每一层命名是好的习惯。(图1-8)
提示:
顶端名为“AS”的层用来存放帧程序,在Flash中,程序叫做动作脚本(ActionScript),通常,动作脚本可以附加关键帧、电影剪辑、按钮、组件等对象上。当播放到附加了动作脚本的关键帧的时候,这些AS脚本就会被执行,所有附加了动作脚本的帧都会显示“α”标志。附加在电影剪辑、按钮、组件等对象上的动作脚本必须由“事件” 来驱动执行,所谓“事件”,就是如鼠标单击、数据载入、状态变更等程序响应条件。
2、动作脚本注入
Step 04
将动画扩展为3帧,“AS”层的每帧均为关键帧。对帧添加动作脚本,应先选中帧,然后按键盘上的“F9”,就能打开“动作”面板,在其中可以输入程序。键盘上的“F9”可以控制“动作”面板的打开关闭(图1-9)
第一帧进行变量、对象的初始化,为其添加如下程序段:
imgFolder = "images/";
currentImg = 0;
input = currentImg+1;
imgData = new Array();注4
imgXML = new XML();注5
system.useCodepage = false; imgXML.ignoreWhite = true;
imgView._alpha = 0;
description.html = true;
posX = imgView._x;
posY = imgView._y;
drag = 0;
完成一帧的动作脚本输入后,单击“动作”面板上的 按钮,用以检查程序中有无语法错误。
第二帧完成载入外部XML文件的工作。外部XML文件在本课件中非常重要,其中存储着需要载入的图片、动画文件信息,本动画规定每个文件有三项信息需要存储:项目名、文件路径、相关信息。采用XML文件来存储关键信息的其他原因一是与它动画文件分离,用户修改整个动画不需要编辑Flash源文件,只需要修改XML文件中的几处信息即可,对用户二次开发来说十分方便;另外,XML利于存放数据,定义也很方便,现在已经是Flash与外部进行通信的主要数据描述方法,并且越来越多的因特网应用都支持XML,这使得它们之间信息交互变得可能。
第三帧对动画中的交互功能进行定义,这些功能包括图片轮换显示、文本框内容的显示、按钮使用、菜单使用、图片选择等。
另外,对菜单“imgList”也要附加动作脚本,选中菜单,按“F9”,打开动作面板输入,如图1-10。(具体代码从略)
二、课件应用
将已经制作好的课件“halloween”文件夹拷贝到硬盘上打开,将看到以下的的结构(图1-11)。Halloween.fla是主动画源文件,相应的Halloween.swf是主动画文件,双击即可运行;选择题.fla是将被主动画载入的动画源文件,使用者可以根据自己的需要自行创作;images文件夹存放资源,其中有图片(必须是jpg格式)、动画(swf),Data.xml存储动画播放内容的相关信息,修改方法后面有专门介绍。
图1-11
1、外部文件准备
课件可以播放的外部文件可以有两种格式:JPG和SWF,它们的最佳大小建议是640px×480px,必须存放在images文件夹中才能正常使用。其中JPG格式是图片,可以预先在图像处理软件中处理好,建议使用Macromedia的另一软件Fireworks 来处理,如4.jpg文件,先在Fireworks中新建大小为640px×480px的空文档(图1-12),复制/导入外部图片,
图1-12
优化后导出为4.jpg,即能使用。(图1-13)
图1-13
选择题.swf是动画演示文件,可以根据实际需要自己开发,此动画是选择题演示。这里不详细介绍它的制作,有3项注意:第一、它的最佳大小建议是640px×480px;第二、如果需要背景色,一定要插入矩形覆盖舞台来实现,这是因为当它被载入到驻动画里的时候,背景会变成透明;第三、如果其中包含动作脚本,不能采用_root.X的方式来定义和调用对象,只能使用_parent.X的方法,具体可以打开它的源程序查看。(图1-14)
图1-14
2、XML文档的修改
在images文档中的Data.xml文件中存储被主动画调用的外部文件信息,其中的内容会被主动画读入。XML中的代码如下:
<?xml version='1.0' encoding='UTF-8'?>
只要修改项目中的三个参数就能控制主动画载入不同的内容,增加项目可以调用更多的资源。修改时只改中的参数,内容必须加左右引号。
name参数:在主动画里显示在标题“title”区的标题文字。
src参数:此外部图片或动画的路径,注意是相对于Data.xml文件的。
des参数:在主动画里显示在标题“description”区的相关内容文字。
在保存Data.xml此类XML文件的时候,要保存为UTF-8格式,否则在Flash里中文会乱码。(图1-15)修改Data.xml可以使用Windows的记事本,也可以使用Dreamweaver来编辑。
3、课件运行
只要双击halloween.swf即可运行课件。课件分为标题区、内容区、图片区、控制区四个部分。(图1-16)
图1-16
标题区显示的内容对应Data.xml中的name参数,内容区显示的内容对应Data.xml中的des参数,图片区显示的图片动画路径由Data.xml中的src参数控制,图片在转换过程中会有淡入淡出的显示效果。图片区里显示的图片可以被拖动。
在控制区里有三组控制工具。单击 后退按钮实现往回切换内容,单击 前进按钮往下显示新内容。可以通过菜单快速选择要显示的项目。在图片序号输入选择框中,输入图片序号后回车也可以快速跳转到此图片。
注1 RIA:丰富互联网应用程序(Rich Internet Applications)。“富”的概念包含两方面,分别是数据模型的丰富和用户界面的丰富。RIA的用户界面提供了灵活多样的界面控制元素,可以让你有更大的空间去创建更高效和更具有交互性的网络应用程序。
注2 积件(Integrableware):是由教师和学生根据教学需要,自己组合运用的教学信息和教学处理策略库与工作平台。积件是从课件的经验中发展出来的、现代教材建设的重要观念转变,是继课件之后的新一代教学软件。
注3 XML:可扩展标记语言或可延伸标记语言(eXtensible Markup Language)。标记是指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种信息的文章等。XML要比HTML强大得多,它不再是固定的标记,而是允许定义数量不限的标记来描述文档中的资料,允许嵌套的信息结构。HTML只是Web显示数据的通用方法,而XML提供了一个直接处理 Web 数据的通用方法。XML中的每对
注4 imgData = new Array();——构造空数组imgData,用于存放载入的图片动画信息。每个数组项都有imgData[i].name、imgData[i].src、imgData[i].des三个属性,用于存放标题、路径、内容数据。
注5 imgXML = new XML();——构造XML对象imgXML,用于载入解析Data.xml文件。