Flash网站的制作.docx

Flash网站的制作.docx

《Flash网站的制作.docx》由会员分享，可在线阅读，更多相关《Flash网站的制作.docx（14页珍藏版）》请在冰豆网上搜索。

Flash网站的制作

Flash网站的制作

实训目的：

1、学习Flash网站的制作思路，掌握大场景的控制。

2、学习动画的综合制作技术。

3、进一步学习动态按钮的制作。

4、理解图层文件夹在管理图层方面的便捷性。

5、学习使用文本建立超链接。

6、使用组件构建表单页面。

7、通过编写ActionScript动作脚本控制网站栏目的跳转。

8、掌握如何发布Flash网站。

操作步骤：

一、网站外观的制作

1、设置舞台背景大小为644×500，背景颜色为黑色，帧频为24。

2、将图层1重命名为“背景”，导入素材文件夹中的“网站底.jpg”图像文件，并调整其大小及位置与舞台完全重合。

3、在“背景”图层的第60帧插入普通帧，设置动画的播放时间为60帧。

4、在“背景”图层的上方创建一个新图层，命名为“标题文字”层，在舞台中绘制一个白色图标，输入标题文字，将它们放置在舞台中红色区域的左侧，如下图：

5、在“标题文字”图层的上方新建一名为“按钮层”的新图层。

在该图层新建一名为“摄影园地”的按钮元件，然后使用文本工具在舞台中输入白色文字“摄影园地”，并调整好其字体和字号为宋体12号。

6、在“图层1”的“指针经过”帧和“按下”帧处插入关键帧。

7、在舞台中选择“指针经过”帧处的白色文字，在属性面板中修改文字的颜色为黄色。

8、在“图层1”的上方新建一个图层，并在该层“指针经过”帧处插入关键帧，使用“矩形工具”在舞台中绘制一个白色且没有轮廓线的矩形，其大小以能够遮住其下的文字为准。

9、选择绘制的白色矩形，将其转换为名为“小白条”的影片剪辑元件。

10、在库面板中双击“小白条”元件，进入该元件编辑窗口中，在“图层1”的第6帧、第8帧和第9帧处插入关键帧。

11、分别选择第1帧、第6帧和第8帧中的白色矩形，使用“任意变形工具”水平拖动鼠标，调整矩形的形态如下图所示：

第1帧状态第6帧状态第8帧状态

12、在时间轴面板中分别选择第1帧、第6帧，创建形状补间动画。

13、在图层1的上方新建一个图层2，在该层的第9帧插入关键帧，并打开“动作”面板输入脚本动作：

“stop（）”，设置动画到该帧处停止。

14、在库面板中双击“摄影园地”按钮元件，进入该元件的编辑窗口中，选择“图层2”的“指针经过”帧中的“小白条”实例，设置其Alpha值为30。

15、在“图层2”的“点击”帧处插入关键帧，然后在“按下”帧处插入空白关键帧。

16、在舞台中选择“图层2”的“点击”帧中的“小白条”实例，在“属性”面板中设置其元件属性为“图形”，并且单帧显示第9帧（其设置的目的是使按钮的响应区域为小白条第9帧时的大小）。

参数设置如下图所示：

17、在时间轴面板中将“图层1”调整到“图层2”的上方。

18、根据“摄影园地”按钮元件的创建方法，分别创建“摄影欣赏”、“摄影知识”、“知识问答”和“摄影论坛”按钮元件（可使用在库面板中直接复制，再修改的方法）。

19、返回主场景，将制作完成的各按钮从库面板中拖入到舞台中，放置到如下图所示的位置：

20、使用椭圆工具在舞台中各按钮之间绘制一个线性渐变的图形，如下图所示：

21、在“按钮”图层的上方创建一个名为“banner”的新图层，导入素材文件夹中的“蓝天.jpg”图像文件，并调整其大小与位置如下图如示：

22、在“banner”图层的上方创建一个名为“banner遮罩”的新图层，使用矩形工具在舞台中绘制一个黑色且没有轮廓线的矩形，其大小及位置如下图所示：

23、将“banner遮罩”图层设置为遮罩层

24、在“banner遮罩”图层的上方新建一个名为“数码相机”的新图层，在该层导入素材文件夹中的“xiangji1.png”图像文件，并将其调整到舞台的左下角，并转换为名为“相机”的影片剪辑元件。

如下图所示：

25、按“Ctrl+F8”键新建一个名为“白光”的影片剪辑元件，使用矩形工具在舞台中绘制一个由透明到不透明再到透明渐变的白色矩形，如下图所示：

26、在库面板中双击“相机”影片剪辑元件，进入该元件的编辑窗口，选择“图层1”的第55帧，按下F5键插入普通帧，设置动画的播放时间为55帧。

27、在“图层1”的上方创建一个新图层“图层2”，在该层中绘制一个与相机镜头大小相等的椭圆形，如下图所示：

28、在“图层1”的上方创建一个新图层“图层3”，并在该层的第10帧处插入关键帧，将“白光”影片剪辑元件从库面板中拖到舞台中，调整其形态如下图所示：

29、在“图层3”的第23帧处插入关键帧，并调整该帧处的“白光”形态如下图所示：

30、选择“图层3”的第10帧，创建补间动画。

31、在“图层2”上单击鼠标右键，在弹出的快捷菜单中选择“遮罩层”命令，将该层设置为遮罩层，从而创建遮罩动画。

二、“报影园地”动画的制作

1、返回主场景，在“数码相机”图层的上方新建一名为“摄影园地文字”的新图层，使用文本工具在舞台中输入红色文字，如下图所示：

2、在“摄影园地文字”图层的上方创建一个新图层，命名为“摄影园地内容”层，使用文本工具在舞台中创建一个文本输入框，设置文本类型为“动态文本”，设置线条类型为“多行”，然后在动态文本框中输入相关的灰色文字，并在属性面板中设置该动态文本的实例名称为“txt1，设置文字字体字号为“宋体”、“12号”。

如下图所示：

3、单击菜单栏中的【窗口】/【组件】命令，打开【组件】面板，选择UserInterface类中的UIScrollBar组件，将其拖动到舞台中刚输入文字的右侧，并使用任意变形工具调整其高度与动态文本框高度相同。

如下图：

4、在舞台中选择UIScrollBar组件，在【参数】面板中设置【_targetInstanceName】参数值为txt1，如下图所示：

5、在时间轴面板中同时选择“摄影园地内容”和“摄影园地文字”图层的第15帧，按下F7键插入空白关键帧，设置动画到该帧处停止。

6、在时间轴面板中选择“摄影园地内容”图层，单击面板下方的【插入图层文件夹】按钮，在该层的上方创建一个新图层文件夹，命名为“摄影园地”。

7、在时间轴面板中，按住Shift键选择“摄影园地内容”和“摄影园地文字”两个图层，然后将它们拖动到“摄影园地”图层文件夹中，为了便于操作，将该文件夹叠起。

三、“摄影欣赏”动画的制作

1、在“摄影园地”图层文件夹的上方创建一个新图层，命名为“摄影欣赏文字”层，在该层的第15帧处插入关键帧，然后使用文本工具输入红色文字，如下图所示：

2、在“摄影欣赏文字”图层的上方创建一个新图层，命名为“摄影欣赏内容”层，在该层的第15帧处插入关键帧，然后使用【矩形工具】在舞台右侧绘制如下图所示的矩形：

3、选择绘制的矩形，按下F8键，将其转换为名为“图像滚动”的影片剪辑元件。

4、在库面板中双击“图像滚动”影片剪辑元件，进入该元件编辑窗口中。

5、在“图层1”的上方创建一个新图层“图层2”，导入素材文件夹中的“pic1_b.jpg”、“pic2_b.jpg”和“pic3_b.jpg”文件，并调整图像的大小及位置如下图所示：

6、选择导入的全部图像，按下F8键，将其转换为名为“大图像”的影片剪辑元件。

7、在“图层2”的上方创建一个新图层“图层3”，将“大图像”影片剪辑从库面板中拖动到上述“大图像”实例的右侧，如下图所示：

8、在时间轴面板中，将“图层1”拖动到“图层3”的上方，即“图层1”在最上方。

9、同时选择“图层2”和“图层3”的第500帧，按下F6键插入关键帧，然后选择“图层1”的第500帧，按下F5键插入普通帧，设置该动画的播放时间为500帧。

10、在舞台中同时选择“图层2”和“图层3”第500帧中“大图像”实例，将其水平向左拖动，调整其位置如下图所示：

11、同时选择“图层2”和“图层3”的第1帧，创建补间动画。

12、在“图层1”上单击鼠标右键，在弹出的快捷菜单中选择【遮罩层】命令，将该层设为遮罩层，则其下的“图层3”自动变成遮罩层。

在“图层2”上单击鼠标右键，在弹出的快捷菜单中选择【属性】命令，在【图层属性】对话框中设置【类型】为“被遮罩”，然后确认，将“图层2”也设为被遮罩层，从而创建遮罩动画。

13、返回主场景，在时间轴面板中同时选择“摄影欣赏内容”和“摄影欣赏文字”图层的第30帧，按下F7键插入空白关键帧，设置动画到该帧处停止。

14、在“摄影欣赏内容”图层的上方创建一个新图层文件夹，命名为“摄影欣赏”，并将“摄影欣赏内容”和“摄影欣赏文字”图层拖到该文件夹中，并将该文件夹叠起。

四、“摄影知识”动画的制作

1、在“摄影欣赏”图层文件夹的上方创建一个新图层，命名为“摄影知识文字”层，在该层第30帧处插入关键帧，使用【文本工具】输入红色文字，如下图所示：

2、在“摄影知识文字”图层的上方创建一个新图层，命名为“摄影知识内容”层，在该层第30帧处插入关键帧，然后使用文本工具输入黑色文字，字体和字号为宋体12号字，并通过属性面板设置文字的“URL链接”，如下图所示：

3、用同样的方法在舞台中输入黑色文字，并在属性面板中进行相应的设置，如下图：

4、分别在“摄影知识内容”和“摄影知识文字”图层的第45帧处插入空白关键帧，设置动画到该帧处停止。

5、在“摄影知识内容”图层的上方创建一个新图层文件夹，命名为“摄影知识”，并将“摄影知识内容”和“摄影知识文字”图层拖动到该文件夹中，然后将该文件夹叠起。

五、“知识问答”动画的制作

1、在“摄影知识”图层文件夹的上方创建一个新图层，命名为“知识问答文字”层，在该层的第45帧处插入关键帧，然后使用文本工具输入红色文字，如下图所示：

2、在“知识问答文字”图层的上方创建一个新图层，命名为“知识问答内容”层，在该层的第45帧处插入关键帧，然后使用文本工具输入黑色文字，如下图所示：

3、按Ctrl+F7组合键，打开【组件】面板，选择UserInterface类中的TextInput组件，将其拖动到舞台中，如下图所示：

4、在舞台中选择TextInput组件，将其向下复制一个，并运用任意变形工具将其拉宽，如下图所示：

5、在【组件】面板中选择UserInterface类中的TextArea组件，然后将其拖动到舞台中，并运用任意变形工具调整其大小如下图所示：

6、在【组件】面板中选择UserInterface类中的Button组件，将其拖动到舞台中，然后选择舞台中的Botton组件，在【参数】面板中设置其【Label】为“提交”，将按钮上的文字改为“提交”。

如下图所示：

7、在“知识问答内容”图层的上方创建一个新图层文件夹，命名为“知识问答”，将“知识问答内容”和“知识问答文字”图层拖动到该文件夹中，然后将该文件叠起。

六、添加行为命令

1、在“知识问答”图层文件夹的上方创建一个新图层，命名为“导航标签”层。

选择该层的第1帧，在【属性】面板中设置帧名称为“a1”，如下图所示：

2、分别在“导航标签”图层的第15帧、第30帧和第45帧处插入关键帧，并依次设置各帧的名称为“a2”、“a3”和“a4”。

3、在“导航标签”图层的上方创建一个新图层，命名为“action”层，分别在该层的第14帧、第29帧、第44帧和第60帧处插入关键帧，然后依次选择这些关键帧，在【动作】面板中分别输入“stop（）;”动作脚本，设置动画在该帧处停止。

此时的时间轴面板如下图所示：

4、在舞台上选择“摄影园地”按钮实例，在【动作】面板中输入如下动作脚本：

On（release）{

gotoAndPlay（“a1”）;

}

5、在舞台上选择“摄影欣赏”按钮实例，在【动作】面板中输入如下动作脚本：

On（release）{

gotoAndPlay（“a2”）;

}

6、在舞台上选择“摄影知识”按钮实例，在【动作】面板中输入如下动作脚本：

On（release）{

gotoAndPlay（“a3”）;

}

7、在舞台上选择“知识问答”按钮实例，在【动作】面板中输入如下动作脚本：

On（release）{

gotoAndPlay（“a4”）;

}

8、在舞台上选择“摄影论坛”按钮实例，在【动作】面板中输入如下动作脚本：

On（release）{

getURL（““_blank”）;

}

9、按Ctrl+Enter键对影片进行测试，如果无误，就可以发布网站了。

七、网站的发布

1、单击菜单栏中的【文件】/【发布设置】命令，则弹出【发布设置】对话框，选择【格式】选项卡，设置参数如下图所示：

2、设置完成后单击“发布”按钮，将文件发布为一个swf文件和一个HTML文件。