论文部分内容阅读
作为本系列的收尾之作,今天我们聊聊平面设计在Flash中的应用。说起Flash,大家的第一感觉就是动画、游戏,似乎与平面设计没有直接的关系。其实不然。且不说平面设计所涉及到的各种美学知识和技能,同样能应用于动画、游戏的制作中,而且平面设计师可以直接在各种动态产品中大展手脚,比如现在很流行的Flash电子杂志、Flash网站等等。
芝麻开门
CFan:有没有Flash平面设计师一说?
业内人士:职业的名称,是人创造出来的,只要有需要就会产生相应的职业。如果在Google上搜索“Flash平面设计”,能找到不少这方面的招聘广告,可见确实有这方面的需求。
CFan:Flash平面设计师主要负责哪些项目?
个人认为,Flash平面设计师还是一个比较含糊的概念,所以具体的任务分配也并非很明确。一般来说,Flash平面设计师倾向于静态元素的设计,所以非常适合现在较流行的Flash电子杂志的制作。另外,像Flash网站、光盘界面、游戏界面等等,也是Flash平面设计师尽情发挥的舞台。对传统平面设计师来说,Flash的出现,无疑拓宽了他们的发展之路。
任务实战
传统平面设计师向新型互动设计的转变并不是特别困难,他们原先的经验积累,完全可以应用到新的项目中。这个转变中,主要的难题可能就是软件工具的改变了。
实战:动起来——新潮Flash网站轻松制作
在这个实例中,我们将演示Flash网站的一般流程,并且能通过这个实例学习到Flash的基本操作方法。
1.框架——创建基本的Flash布局
启动Flash CS3(以下简称为Flash),单击“文件→新建”,选择“Flash 文件(ActionScript 3.0/2.0)”建立一个新文档。接着单击下方属性面板中的“大小”按钮(或者单击菜单命令“修改→文档”,快捷键为Ctrl+J)调出文档属性窗口,本例设置宽为820像素,高为258像,帧频为30,点击“确定”返回(见图2)。完成后,先按Ctrl+S键保存文档。
Flash网站有两种典型形式,一种是纯Flash制作,另外一种是Flash+HTML的混合形式。本例采用的是第二种方式,所以朋友们可能发现了,上面建立的文档,高度只有258像素,它仅是一个网站首页的上半部分。最后我们还将介绍如何把这部分的Flash元素与普通网页整合在一起。
2.内容——添加内容及动感特效
单击“文件→导入→导入到库”,选择事先设计好的背景图片导入。为便于以后记忆,可将默认的“图层1”改成“背景”,并用鼠标从库中将刚刚导入的图片拖放到舞台上,居中摆放好位置(如果库面板没有显示,可按Ctrl+L键将其调出)。接着右击第50帧处,选择“插入帧”命令。然后在层面板左侧,点击背景层对应“锁”图标的位置使其显示锁状图标,表示将背景层加锁,这样就可以防止放置好的图片被不小心移位了(见图3)。
Flash的优势之一,就是每个元素(按钮、文字、图片等)都可以轻松做出各不相同的动态效果。这里限于篇幅,仅演示一个许多圆形水珠不断扩大,最后显示出完整页面的简单效果。
第一步:点击图层面板左下角第一个按钮,新建一个图层,改名为“遮罩层”。点选这一层的第1帧,然后选中工具箱中的椭圆形工具,绘制多个大小不一的圆点(见图4)。再次点选遮罩层第1帧,其中所有的圆点将被选中,在某一圆点上右击,选择“转换为元件”,类型设置为“影片剪辑”,点击“确定”后返回。
第二步:右击遮罩层第50帧,选择“转换为关键帧”。然后在第1～50之间的任一帧上右击,选择“创建补间动画”(见图5),则1～50帧变成蓝色,并有一条由左至右的箭头线贯穿。接着点选第50帧,在此帧中,通过工具箱中的任意变形工具(快捷键为Q)放大圆点,直到圆点覆盖整个画面为止。
第三步:右击遮罩层,选择“遮罩层”(见图6),将发现原来的背景层成为遮罩层的下一级图层了,而且,只有遮罩层上有图形的地方,才能显示出背景层。这时按下Ctrl+回车键预览,即可看到“水珠”不断扩大,最终显示出网页的效果。
第四步:不过动画总是循环播放,很讨厌。可再插入一个新图层,改名为“脚本”,右击脚本层的第50帧,选择“转换为关键帧”,确保此关键帧为选中状态,按F9键调出脚本窗口,在其中写下如下代码:
stop();
再按F9键隐藏此窗口。此时按Ctrl+回车键预览,动画就不会循环重放了。
3.整合——Flash与普通网页合二为一
前面说过,本例是Flash与网页混合的模式。前几讲中,我们介绍过在Dreamweaver中如何制网页。
上面的Flash动态网页制作好后,单击“文件→导出→导出影片”,将制作的动画导出为SWF格式的文件。其实在我们按Ctrl+回车键预览的时候,就已经在同一目录下自动生成与FLA文件同名的SWF文件了。
接下来启动Dreamweaver,单击“文件→新建”,新建一个HTML网页文件。然后单击“常用”标签中的“媒体”按钮,选择插入“Flash”项(见图7)。选择之前制作的SWF文件插入后,会有一个对象标签辅助功能的设置提示,可以直接按“确定”,插入就可以了。插入的Flash动画,以灰色方块占位,中间显示Flash的LOGO标志。
我们可以像设置其他的媒体对像一样,重新改变Flash的大小、背景颜色,调整它在页面中的位置,添加其他的页面内容等。制作好网页后,在Dreamweaver中,直接按F12键,将自动调用浏览器,就可以看到Flash网页在浏览器的实际效果了。(注意:如果你的浏览器设置了阻止Flash动画播放,则需要点击提示栏允许动画播放)
★小提示
预览的时候,如果感觉动画效果过快或过慢,可以有两种调速的方法。一是增加帧的长度,按每秒30帧来计算,增加30帧可延长1秒,增加60帧可延长2秒,以此类推。另外一种方法就是改变帧频,单击“修改→文档”,在打开的文档属性窗口中,如果延长动画播放时间可降低帧频的值,反之则加大帧频的值。
芝麻开门
CFan:有没有Flash平面设计师一说?
业内人士:职业的名称,是人创造出来的,只要有需要就会产生相应的职业。如果在Google上搜索“Flash平面设计”,能找到不少这方面的招聘广告,可见确实有这方面的需求。
CFan:Flash平面设计师主要负责哪些项目?
个人认为,Flash平面设计师还是一个比较含糊的概念,所以具体的任务分配也并非很明确。一般来说,Flash平面设计师倾向于静态元素的设计,所以非常适合现在较流行的Flash电子杂志的制作。另外,像Flash网站、光盘界面、游戏界面等等,也是Flash平面设计师尽情发挥的舞台。对传统平面设计师来说,Flash的出现,无疑拓宽了他们的发展之路。
任务实战
传统平面设计师向新型互动设计的转变并不是特别困难,他们原先的经验积累,完全可以应用到新的项目中。这个转变中,主要的难题可能就是软件工具的改变了。
实战:动起来——新潮Flash网站轻松制作
在这个实例中,我们将演示Flash网站的一般流程,并且能通过这个实例学习到Flash的基本操作方法。
1.框架——创建基本的Flash布局
启动Flash CS3(以下简称为Flash),单击“文件→新建”,选择“Flash 文件(ActionScript 3.0/2.0)”建立一个新文档。接着单击下方属性面板中的“大小”按钮(或者单击菜单命令“修改→文档”,快捷键为Ctrl+J)调出文档属性窗口,本例设置宽为820像素,高为258像,帧频为30,点击“确定”返回(见图2)。完成后,先按Ctrl+S键保存文档。
Flash网站有两种典型形式,一种是纯Flash制作,另外一种是Flash+HTML的混合形式。本例采用的是第二种方式,所以朋友们可能发现了,上面建立的文档,高度只有258像素,它仅是一个网站首页的上半部分。最后我们还将介绍如何把这部分的Flash元素与普通网页整合在一起。
2.内容——添加内容及动感特效
单击“文件→导入→导入到库”,选择事先设计好的背景图片导入。为便于以后记忆,可将默认的“图层1”改成“背景”,并用鼠标从库中将刚刚导入的图片拖放到舞台上,居中摆放好位置(如果库面板没有显示,可按Ctrl+L键将其调出)。接着右击第50帧处,选择“插入帧”命令。然后在层面板左侧,点击背景层对应“锁”图标的位置使其显示锁状图标,表示将背景层加锁,这样就可以防止放置好的图片被不小心移位了(见图3)。
Flash的优势之一,就是每个元素(按钮、文字、图片等)都可以轻松做出各不相同的动态效果。这里限于篇幅,仅演示一个许多圆形水珠不断扩大,最后显示出完整页面的简单效果。
第一步:点击图层面板左下角第一个按钮,新建一个图层,改名为“遮罩层”。点选这一层的第1帧,然后选中工具箱中的椭圆形工具,绘制多个大小不一的圆点(见图4)。再次点选遮罩层第1帧,其中所有的圆点将被选中,在某一圆点上右击,选择“转换为元件”,类型设置为“影片剪辑”,点击“确定”后返回。
第二步:右击遮罩层第50帧,选择“转换为关键帧”。然后在第1～50之间的任一帧上右击,选择“创建补间动画”(见图5),则1～50帧变成蓝色,并有一条由左至右的箭头线贯穿。接着点选第50帧,在此帧中,通过工具箱中的任意变形工具(快捷键为Q)放大圆点,直到圆点覆盖整个画面为止。
第三步:右击遮罩层,选择“遮罩层”(见图6),将发现原来的背景层成为遮罩层的下一级图层了,而且,只有遮罩层上有图形的地方,才能显示出背景层。这时按下Ctrl+回车键预览,即可看到“水珠”不断扩大,最终显示出网页的效果。
第四步:不过动画总是循环播放,很讨厌。可再插入一个新图层,改名为“脚本”,右击脚本层的第50帧,选择“转换为关键帧”,确保此关键帧为选中状态,按F9键调出脚本窗口,在其中写下如下代码:
stop();
再按F9键隐藏此窗口。此时按Ctrl+回车键预览,动画就不会循环重放了。
3.整合——Flash与普通网页合二为一
前面说过,本例是Flash与网页混合的模式。前几讲中,我们介绍过在Dreamweaver中如何制网页。
上面的Flash动态网页制作好后,单击“文件→导出→导出影片”,将制作的动画导出为SWF格式的文件。其实在我们按Ctrl+回车键预览的时候,就已经在同一目录下自动生成与FLA文件同名的SWF文件了。
接下来启动Dreamweaver,单击“文件→新建”,新建一个HTML网页文件。然后单击“常用”标签中的“媒体”按钮,选择插入“Flash”项(见图7)。选择之前制作的SWF文件插入后,会有一个对象标签辅助功能的设置提示,可以直接按“确定”,插入就可以了。插入的Flash动画,以灰色方块占位,中间显示Flash的LOGO标志。
我们可以像设置其他的媒体对像一样,重新改变Flash的大小、背景颜色,调整它在页面中的位置,添加其他的页面内容等。制作好网页后,在Dreamweaver中,直接按F12键,将自动调用浏览器,就可以看到Flash网页在浏览器的实际效果了。(注意:如果你的浏览器设置了阻止Flash动画播放,则需要点击提示栏允许动画播放)
★小提示
预览的时候,如果感觉动画效果过快或过慢,可以有两种调速的方法。一是增加帧的长度,按每秒30帧来计算,增加30帧可延长1秒,增加60帧可延长2秒,以此类推。另外一种方法就是改变帧频,单击“修改→文档”,在打开的文档属性窗口中,如果延长动画播放时间可降低帧频的值,反之则加大帧频的值。