中文版Dreamweaver+Flash+Photoshop CC网页设计与制作从入门到精通-edited

10-11
10-12

Step 2 图10-6 设置舞台颜色
# FFFFFF
2.0010-7Ctrl
图10-10 调整左侧线条 图10-11 调整右侧线条
Step 5
10-8 1.00
10-13

10-14

10-15

图10-7 设置线条属性 图10-8 绘制图形

在绘制线段时，按住Ctrl键可使绘制的线条变为 图10-12 调整底部线条 图10-13 绘制三角形
水平或垂直的直线，不按住Ctrl键则会绘制成 图10-15 填充颜色
斜线。 图10-14 调整弧度

Step 3 ?
Shift

10-9

图10-9 选择和复制图形

Step 4

10-10
186

Step 6 410-20
3.0010-16
310-21
10-17
3
10-22

图10-16 绘制吸管 图10-17 完成绘制 图10-20 缩放 图10-21 端点 图10-22 接合

调整线条弧度时，若线条两端有多余的线段，可 10.1.3 

使用“线条工具” 选择多余的部分，按Delete键 10-23
进行删除。

图10-23 使用“铅笔工具”绘制的图形

10-18
10-19

10-24 图10-24 铅笔工具

图10-18 笔触样式 图10-19 编辑笔触样式 10-25

187

10-28

图10-25 铅笔工具“属性”面板 图10-28 矩形工具“属性”面板
4

铅笔工具属性面板与线条工具属性面板中的参数 10-29
设置与含义相同，这里不再赘述。 10-30

10.1.4 

Alt 图10-29 圆形 图10-30 向内收缩的矩形
10-26 4
10-27 10-31

图10-26 “矩形设置”对话框 图10-27 绘制矩形 图10-31 将边角半径控件锁定为一个控件
0
若按住Shift键再绘制矩形，可使绘制的矩形变为
正方形。

188

\\10\.fla 图10-35 设置属性 图10-36 绘制矩形
\\10\.fla Step 3
\\10\ 10-37

.fla

10-32

# FFCC66
10-38

图10-32 最终效果

Step 1 .fla 图10-37 变形图形 图10-38 绘制并进行变形
Step 4
# 1886A23.00 10-39
10-33
10-34

图10-33 设置属性 图10-34 绘制长条矩形
Step 2
图10-39 完成绘制
#FFFFFF2.0010-35
?

10-36

若不想设置填充颜色，可在弹出的颜色框中单
击 图标。

189

10.1.5  Step 2
Delete
\\10\.fla
\\10\.fla #00000010-43
\\10\
#000000 10-44
.fla
10-40

图10-43 删除多余的部分 图10-44 绘制黑色的正圆

Step 3 # FFFFFF
10-45
图10-40 最终效果
10-46
Step 1 .fla

#000000# F46200
Shift10-41

10-42

图10-45 绘制正圆 图10-46 绘制线条
Step 4
#00000058.29

10-47

图10-41 绘制正圆 图10-42 绘制椭圆 设置结束角度的值后，圆形将不能闭合。
190

0~99
10-49

图10-49 不同内径的椭圆

Step 5 图10-47 绘制未闭合的圆形

Alt
Ctrl+T

10-48

0

选择“椭圆工具” ，按住Alt键单击鼠标，将

打开“椭圆设置”对话框，在其中对椭圆的宽、

高进行设置后，单击 按钮也可以绘制椭

圆，如图10-50所示。

图10-48 复制并调整图形 图10-50 “椭圆设置”对话框
11.2
10.1.6 

0~360 \\10\.fla
0~360 \\10\.fla
\\10\

.fla

10-51

191

Step 3 0.10
4 10-56

10-57

图10-51 最终效果

Step 1 .fla 10-52 图10-56 工具设置 图10-57 绘制四角星形
Step 4
# FFFFFF
1.00 10-58
10-53

图10-52 原文档 图10-53 属性设置
Step 2

5 0.50 图10-58 完成绘制
10-55
10-54

3~32 0
0~1

图10-54 工具设置 图10-55 绘制五角星
192

10.1.7 

10-59
10-60

10-62

图10-59 刷子工具“属性”面板 图10-60 刷子工具 10-63

5 图10-61 刷子模式 图10-62 刷子大小 图10-63 刷子形状
10-61

10.2

10.2.1  10.2.2 

10-64

图10-64 锚点

193

10-66
10-67

10-65

图10-66 绘制直线 图10-67 绘制曲线

10-65 \\10\.fla
\\10\

图10-65 钢笔工具

Shift+C 10-68
Alt

10.2.3  图10-68 最终效果
Step 1 Flash CCActionScript 3.0
194
10-69
10-70

Step 5 #86CBF1
10-76

10-77

图10-69 绘制第一条直线 图10-70 绘制第二、第三条直线
Step 2 10-71

图10-76 填充颜色 图10-77 设置舞台颜色

10-72 10.2.4 

图10-71 绘制曲线 图10-72 闭合图形
Step 3

Delete 10-73

10-74 10-78
10-79

图10-73 绘制小路 图10-74 绘制房屋
Step 4
10-75 图10-78 添加锚点 图10-79 删除锚点

10.2.5 

图10-75 绘制树木和云朵

195

10-80 使用“钢笔工具” 绘制图形时，还可对其首选
10-81
参数进行设置，以便进行预览。其方法为：选择

“钢笔工具” ，再选择“编辑”/“首选参数”
Alt 命令，打开“首选参数”对话框，选择“绘制”

选项卡，在右侧的窗格中选中 复选

框，单击 按钮即可，如图10-82所示。

图10-80 调整曲线 图10-81 调整角点 图10-82 “首选参数”对话框

10.3

10.3.1 

Flash

Flash CC
/
10-83

图10-83 “颜色”面板 5
196 HSB
RGB
A Alpha

0 Web 216
# Web
#
10.3.3 
10.3.2 

/
10-84

10-85

\\10\.fla
\\10\.fla
\\10\

.fla

10-86

图10-84 “样本”面板 图10-85 “样本”面板操作

图10-86 最终效果

Step 1 .fla

/

197

#FFCC0010-87
10-88

图10-91 填充裤子颜色 图10-92 填充鞋子颜色

10.3.4 

图10-87 设置填充的颜色 图10-88 填充颜色
Step 2

#6340E810-89 10-93
#
10-90 FF6BC6

图10-93 线性渐变

图10-89 填充其他颜色 图10-90 填充乐器颜色

在Flash CC中，只有矢量图形才能进行颜色填充
操作；位图图形是不能进行颜色填充操作的。

Step 3 #996600
10-91
# FF9900
10-92

198

10-94 Step 2
10-95
10-99
#1BADCF10-100 #EAF6F9
10-101

图10-94 选中前 图10-95 选中后

10-96 图10-98 选择对象 图10-99 设置渐变颜色

图10-96 渐变编辑条 图10-100 设置渐变颜色 图10-101 设置颜色浓度
\\10\.fla
\\10\.fla Step 3
\\10\ 10-102
Step 4
.fla
10-97 #A8D95E 10-103

图10-97 最终效果 #9DD55F 10-104
Step 1 .fla #E0F15A10-105
10-98
图10-102 查看设置渐变填充后的效果 图10-103 设置渐变颜色1
199

10.3.5 

图10-104 设置渐变颜色2 图10-105 设置渐变颜色3 \\10\.fla
Step 5 10-106 \\10\.fla
\\10\
10-107
.fla

10-110

图10-106 设置滑块位置 图10-107 查看效果

Step 6 #E0F15A E0F15A
# 10-108
#9DD55F
10-109 图10-110 最终效果

Step 1 .fla
10-111

图10-108 设置渐变颜色4 图10-109 查看效果 图10-111 向日葵

? Step 2

200 #FFE017# F7FA9A# FCFCCB10-112

10.3.6 

图10-112 设置径向渐变颜色

Step 3 10-114
10-113

图10-113 调整径向渐变 图10-114 “导入到库”对话框

10-115
10-116

图10-115 “颜色”面板 图10-116 填充后的效果

设置位图填充后，选择“渐变变形工具” ，图
形对象四周将出现编辑柄，拖动这些手柄，可以
对图形填充的大小、方向、长度、宽度和旋转等
属性进行设置，如图10-117所示。

用户还可采用相同的方法来设置笔触的颜色，以 图10-117 编辑位图填充
修改图形边框的线条颜色。

201

10.4 10-120

10.4.1 

Flash
Delete10-118
10-119

图10-120 橡皮擦模式

图10-118 删除前

图10-119 删除后 根据需要，用户还可调整橡皮擦的形状，只要单
击工具箱中的“橡皮擦形状”按钮 右下角的下
拉按钮，在弹出的列表中选择相应选项即可。

读书笔记

10.4.2 

202

知识大爆炸
——图形绘制与填充的其他方法

1.

10-121
2.

10-122
3.

10-123

图10-121 形状与对象的区别 图10-122 墨水瓶工具 图10-123 空隙大小

4.

203

入门篇/Introductory

Chapter

1101 02 03 04 05 06 07 08 09 10 12

文本

204

11.1 11-3

Flash 图11-1 文本类型

11.1.1  图11-3 动态文本

Flash
3 11-1

Flash

11-2

Flash
11-4

图11-2 静态文本
Flash
ActionScript

图11-4 输入文本

205

11.1.2  图11-6 样式 图11-7 消除锯齿
HTML
11-5 HTML

图11-5 字符样式

Regular 11.1.3 
ItalicBoldBold
Italic411-6

11-8

当文本为拉丁字符时，将使用内置于字体中的字 图11-8 段落样式
距微调信息；当为亚洲字符时，仅对内置有字距
微调信息的字符应用字距微调（日语汉字、平假 4
名和片假名）。

[]
5
11-7

206

3 图11-10 最终效果

11.1.4  Step 1 .fla

Flash CC 20.0
#00000011-11
1. Step 2
Flash CC

11-9

Enter11-12

图11-11 设置字符属性 图11-12 输入段落文本
Step 3
图11-9 输入普通文本 28.0
8.02.011-13
2.

11-14

\\11 \.fla
\\11 \.fla
\\11
\
.fla
图11-13 设置段落属性 图11-14 设置段落后的效果
11-10 207

Step 4 # E7682511-18
28.08.0
11-15 2.011-19
11-16

图11-15 放大文本框 图11-16 调整文本框位置 图11-18 设置字符属性 图11-19 设置段落属性
Step 2
3.

messageX Y
300.00 320.00280.00 140.00
11-20
\\11 \.flacontent.txt
\\11 \.fla 11-21
\\11 \

.fla
ActionScript
content.txt11-17

图11-20 位置和大小设置 图11-21 查看调整后的效果

Step 3 1
/
11-22

图11-17 动态文本 图11-22 单击关键帧
Step 1 .fla
Times New Roman10.0 1 ActionScript
208 Flash

Step 4 ActionScript 4.
11-23

11-25
11-26

图11-23 输入ActionScript脚本语言

图11-25 “密码”选项 图11-26 最大字符数

ActionScriptmessage ****
content.txt
Flash
content.txt

Flash支持的编码为UTF-8，当外部文件中包含中 \\11 \.fla
文时（中文编码为GB2312），需要添加中文识 \\11 \.fla
别编码，本例中的import flash.system.System;和 \\11
System.useCodePage=true;即表示中文识别。若文 \
档中的内容为英文，则可不用添加该代码。 .fla

Step 5 Ctrl+Enter 11-27
11-24

图11-24 查看效果 图11-27 用户登录界面
Step 1 .fla
11-28

209

图11-32 设置文本框的属性
Ctrl+Enter
Step 5
11-33

图11-28 绘制用户名文本框
Step 2
Times New Roman14.0
#00000011-29

1211-30

图11-33 预览效果

11.1.5 

图11-29 设置字符属性 图11-30 设置段落属性
Step 3

11-31

\\11 \.fla
\\11 \.fla
\\11
\
.fla

图11-31 绘制密码文本框 Step 1 .fla

Step 4 22.0
1611-32 #00000011-34
11-35

210

图11-34 设置字符属性 图11-35 输入文本
Step 2

http://www.baidu.com 图11-39 预览效果（续）
_blank11-36
_blank
Step 3 11-37 _parent
_self
_top

图11-36 设置选项属性 图11-37 查看链接下划线 11.1.6 

“目标”下拉列表框用于指 图11-38 目标 Shift

定URL要加载到其中的窗口，
包括_blank、_parent、_self
和_top4个选项，如图11-38
所示。

Step 4 Ctrl+Enter

11-40

11-39

图11-39 预览效果 图11-40 滚动文本

211

11.1.7 

11-41

与处理其他形状一样，用户也可将文本转换为组 图11-41 分离文本
成它的线条和填充，以将文本作为图形进行处
理，但转换后文本将无法再为字符或段落属性进
行编辑。

读书笔记

11.2

Flash CC

11.2.1  X Y
Y11-42X
Flash 0,0 /
Y
X
11-43

1 Shift 图11-42 “属性”面板移动 图11-43 “信息”面板移动
10

212

11.2.2  1.
/
/ Ctrl+T
11-45
/
/ 图11-45 “变形”面板
/
Flash
11-44

图11-44 “选择性粘贴”对话框 11-46 图11-46 缩放图形
11-47 图11-47 旋转图形
选择“编辑”/“剪切”命令，再执行以上操作， 11-48
可对对象进行移动，而不是复制操作。用户也可
以通过按Ctrl+C快捷键和Ctrl+V快捷键的方法进
行复制。

11.2.3 

/

11.2.4 

图11-48 倾斜图形

213

3D / /
3D 11-51

2. 11-52

4 11-53
11-49
图11-51 封套 图11-52 调整封套 图11-53 调整封套

4.
/

11-54

图11-49 使用任意变形工具变形对象 图11-54 其他菜单命令
11-50
使用自由变形工具或“变形”面板对图形对象
图11-50 倾斜图形对象 进行操作后，Flash会保存对象的原始大小和旋
转值，使用户可以删除已应用的变形并复位到原
3. 始值，用户可以对其进行还原操作。其方法是：
选择对象，选择“修改”/“变形”/“取消变
214 形”命令或单击“变形”面板中的“取消变形”
按钮 。

11.2.5  图11-58 打孔

/ 图11-55 合并对象
4
11-55 11-59

11-56

图11-59 裁切

图11-56 联合 11.2.6 
11-57
Flash CC

/

11-60

图11-57 交集 图11-60 层叠对象
11-58

215

绘制的线条和形状将显示在组、绘制对象和元件 11.2.7 
的下面，要将它们移动到对象的上面，必须组合
它们或将它们转换为元件。 /
11-61

图层也会影响对象的层叠顺序，一般下一图层上
的任何内容都在上一图层中任何内容的上面。因
此，用户也可通过改变对象内容在图层中的位置
来进行对象顺序的改变。

读书笔记 图11-61 对齐对象

选择“窗口”/“对齐”命令，打开“对齐”面
板，在其中也可进行对象对齐的操作。

11.3

Flash CCFlash

11.3.1  Step 1 .fla
//
Flash Flash

WAV(*.wav)

\\11 Flash 11-62
\\11
\\11 \.wav.fla 读书笔记
\.fla
.fla
Flash \Flash

Flash

216

图11-65 设置声音 图11-66 预览声音效果

图11-62 导入声音到舞台

? 在“库”面板中直接将声音文件拖动到舞台中，
也可为Flash文档添加声音。

Flash

ASND WAV AIFF MP3ASND 11.3.2 

Windows Macintosh WAVWindows

AIFFMacintosh MP3Windows

Macintosh

Step 2 11-67
11-631

111-64

图11-63 查看导入的声音 图11-64 选择关键帧

选择“文件”/“导入”/“导入到库”命令，也 图11-67 “声音属性”对话框
可将需要的声音文件导入到“库”面板。
ADPCM MP3Raw5
Step 3

.wav11-65
Ctrl+Enter11-66

217

11.3.3  图11-69 “编辑封套”对话框

1. 2.
11-68

图11-68 “效果” 11-70 图11-70 “同步”下拉
下拉列表框选项 列表框选项

11-69 3.

在“编辑封套”对话框的“效果”下拉列表框中 11-71
用户也可进行效果的设置。

218

11-73

图11-71 重复

11.3.4 

FLV SWF

\\11 \.flv \\11 \.fla 图11-73 选择视频文件
\\11 \
Flash 在“打开”对话框中，用户可根据需要选择需要
ActionScript 3.0 导入的视频文件的格式，在“文件名”下拉列表
FLV / 框后即可查看所有的格式。
Step 3
Step 1 Flash CC
590 11-74
30024.00fps
11-72

图11-74 选择视频的加载方式

图11-72 新建文档 Step 4
//
Step 2
.flv SkinOverAllNoFullscreen.swf
# FFFFFF11-75

219

11.3.5 

SWF
Flash

16000

图11-75 设置播放器外观 \\11 \.flv
\\11 \.fla
Step 5 \\11 \

ActionScript 3.0 Flash
flv
11-76

Step 1 Flash CC1920 Flash
107224.00fps

//

.flv
11-78

图11-76 完成视频导入 图11-78 选择视频文件
Step 6 Ctrl+Enter
11-77 Step 2
11-79
图11-77 预览效果
220

Step 5 Ctrl+Enter
11-82

图11-82 预览效果

图11-79 选择视频的加载方式

Step 3 除了以上两种方法，还可在“导入视频”对话框
11-80
中选中

单选按钮，在其下的文本框中输入视频文件的链

接网址，单击 按钮，按照提示进行操作可

以导入网络中已有的视频。

11.3.6 

图11-80 嵌入视频设置

Step 4

11-81

11-83 图11-83 设置视频属性

图11-81 完成视频导入 11-84
图11-84 “交换视频”对话框
嵌入视频方式只支持FLV或F4V格式的视频文件
格式。

221

XY 读书笔记

视频文件还可通过ActionScript进行控制，用户需
要对视频文件的行为进行了解，包括播放视频、

停止视频、暂停视频、后退视频、快进视频和

显示视频。关于ActionScript的知识将在13.4节中
讲解。

知识大爆炸
——文本和对象的其他知识

1.
Flash CC

1
Flash CC

SWF
FLA

SWFSWF ActionScript
ActionScript

2

SWF
/
FLA
11-85

图11-85 “字体嵌入”对话框
222

SWF

ActionScript 打开“字体嵌入”对话框的方法还有以下3种：
]
ActionScript

2.
Flash CCFlash Player 8
SWFFlash CC[
5

SWF

[] SWF
10 Flash
SWF

3.

Flash

4.

8 10121624

HzCD44.1kHz44100

22.5kHz

×44100 16

44100 ×16×2=14112001411200 ÷8=176400

176400 ÷16 ÷1024=10.77MB

223

入门篇/Introductory

Chapter

1201 02 03 04 05 06 07 08 09 10 11

224

12.1 12-2

Flash

12.1.1 

Flash 图12-2 影片剪辑
3
3.
1.
4
12-1 12-3
2. 图12-1 图形

图12-3 按钮

225

影片剪辑可以是一个多帧、多图层的动画，但它 12-5
的实例在主时间轴中只占用一帧。 图12-5 选择文件夹

12.1.2 

Step 3

1.
12-6
12-7

\\12\.fla\
\\12\.fla
\\12\

.fla

Step 1 . f l a 图12-6 确认创建 图12-7 查看创建的图形元件
/
Step 4 / /
1
12-4 1.png

12-8

图12-4 “创建新元件”对话框

按Ctrl+F8快捷键也可打开“创建新元件”对 图12-8 导入图片
话框。
Step 5
Step 2 12-9

226 12-10

Step 1 . f l a
/

12-13

图12-9 查看元件 图12-10 创建其他图形元件
Step 6
图12-13 导入素材到“库”面板
12-11 Step 2 /

12-12 12-14

图12-14 新建影片剪辑

图12-11 绘制图形元件 图12-12 应用图形元件 Step 3
12-15
2.

\\12\.fla\
\\12\.fla
\\12\

图12-15 添加影片剪辑中的内容

227

Step 4 80 Step 7 Ctrl+Enter
12-16 12-20

图12-20 预览效果

3.

4
4

Step 5 图12-16 插入关键帧 ~8 \\12\.fla\
12-17 1 \\12\.fla
\\12\

.fla

Step 1 .fla
//
Step 6 图12-17 创建动画 12-21
1 2

12-18
12-19

图12-21 导入素材

图12-18 查看补间动画 图12-19 应用影片剪辑 Step 2 /

228

12-22

图12-22 新建影片剪辑 图12-25 选择“交换位图”命令

Step 3 Step 6 btn2.png
12-26
btn1.png
12-23

图12-26 选择需要交换的图片

Step 7 png btn2. png
btn1.

2 12-27

图12-23 添加内容到按钮元件

Step 4
F6
F512-24

图12-27 新建图层

Step 8
12-28

图12-24 添加关键帧 35.0

#0066FF12-29

Step 5
12-25

若这里的图形文件为元件，则“交换位图”命令
会变为“交换元件”命令。

图12-28 应用按钮元件 图12-29 设置文本属性
229

Step 9
12-30
Ctrl+Enter
12-31

图12-30 添加文字 图12-31 预览效果 图12-33 元件的转换

12.1.3  12.1.4 

/ Flash CC

/

12-34

12-32

图12-32 元件的转换 图12-34 在当前位置编辑元件
12-33 /

读书笔记

230

12.2

Flash

12.2.1  Ctrl+L

Flash/ 库菜单
12-35

文档名称
项目预览区

列表框

图12-35 “库”面板 12.2.2 

Flash

1.
Flash

AI

\\12\AI

FlashAI

231

Step 1 Flash 该对话框中的 和 单选按钮可以将
//
Adobe Illustrator AI文件中的图层和文本转换为位图。 单
(*.ai)
12-36 选按钮可以将图层转换为一个图层； 单选

按钮可以将其转换为关键帧。在导入素材时，需

要注意，不同类型的文件，导入Flash中时进行的

操作不同，这主要是针对包含图层、样式等信息

的文件，如AI、Photoshop和Fireworks等。导入声

音、位图和视频等文件时则不需进行设置。

2.
。

图12-36 选择导入的AI文件

Step 2

12-37 AI 3.
Step 3
AI 等。
12-38 1

图12-37 导入设置 图12-38 查看导入的效果 2

读书笔记

12-39
232

/
#FFFFFF# FFCC66 #FFCC0012-42

图12-41 进入元件编辑区 图12-42 调整元件的颜色

图12-39 直接复制元件 Step 4 _

\\12\.fla 12-43
\\12\.fla
\\12\ 12-44

.fla

Step 1 .fla Ctrl+L

_12-40

图12-43 选择花瓣 图12-44 “交换元件”命令
Step 5 _

12-45

Step 2 图12-40 直接复制元件 _

12-41 _
Step 3 _

图12-45 交换元件

Step 6

233

_ 处理通过复制的方法来重制元件外，还可通过选
12-46 择实例的方法来进行。其方法是：在舞台中选择
一个实例元件，选择“修改”/“元件”/“直接
__12-47 复制元件”命令，该元件就会被重制，且原来的
实例也会被重制的实例所代替。

4.

Flash CCFlash

图12-46 交换其他元件 图12-47 复制其他元件

Step 7 _ #FFFFFF Flash
#10B8FA #027EE912-48_ _ 12-51

12-49

图12-48 调整花瓣颜色 图12-49 替换元件的效果 图12-51 调用其他库中的元素
_
Step 8 5.
_ Flash
12-50

Enter

读书笔记

图12-50 最终效果
234

知识大爆炸
——元件实例与共享库

1.

Flash
1

12-52 图12-52 隐藏实例 图12-53 更改实例类型
2
图12-54 循环
12-53
3 影片剪辑元件本身就是一段动画，用于独立的时
间轴，因此在舞台中显示为一个静态的对象，不
12-543 能通过“属性”面板来控制其循环。

2.

ActionScript 图12-55 共享库
12-55

235