28

项目 9 制 作 日 历

  • Upload
    admon

  • View
    97

  • Download
    2

Embed Size (px)

DESCRIPTION

项目 9 制 作 日 历. 项目描述. 用一张卡通漫画作为日历背景,可勾起我们对童年的回忆。绿色的草地,鲜艳的花朵,可爱的孩子,还有从草地上飘起的调皮的泡泡,让我们仿佛回到了童年。不想被时间束缚,将日历调整到过去的任何时间,重新进入童年的回忆中;当然,我们也可以将时间调整到将来。可以去网上搜集我们想要的图片和声音。. 制作思路. 本项目主要讲解如何更好地利用组件配合脚本语言完成日历和搜索的功能。. 制作流程. 任务 9.1 制作日历背景. 技能目标 能够将导入的位图图片配合线条工具和文本工具制作出精美的背景。 知识目标 - PowerPoint PPT Presentation

Citation preview

Page 1: 项目 9   制 作 日 历
Page 2: 项目 9   制 作 日 历

Page 2

项目描述项目描述

用一张卡通漫画作为日历背景,可勾起我们对用一张卡通漫画作为日历背景,可勾起我们对童年的回忆。绿色的草地,鲜艳的花朵,可爱童年的回忆。绿色的草地,鲜艳的花朵,可爱的孩子,还有从草地上飘起的调皮的泡泡,让的孩子,还有从草地上飘起的调皮的泡泡,让我们仿佛回到了童年。不想被时间束缚,将日我们仿佛回到了童年。不想被时间束缚,将日历调整到过去的任何时间,重新进入童年的回历调整到过去的任何时间,重新进入童年的回忆中;当然,我们也可以将时间调整到将来。忆中;当然,我们也可以将时间调整到将来。可以去网上搜集我们想要的图片和声音。可以去网上搜集我们想要的图片和声音。

Page 3: 项目 9   制 作 日 历

Page 3

制作思路制作思路

Page 4: 项目 9   制 作 日 历

Page 4

制作流程制作流程

Page 5: 项目 9   制 作 日 历

Page 5

任务 9.1 制作日历背景

技能目标技能目标能够将导入的位图图片配合线条工具和文本工具制作出精美的背景。

知识目标知识目标学会使用线条工具为图片添加斑驳的边缘,学会添加滤镜效果。

主要用到的工具和命令主要用到的工具和命令线条工具、文本工具、滤镜。

Page 6: 项目 9   制 作 日 历

Page 6

9.1.1 文档设置

任务 7.1 制作电子相册元件

Page 7: 项目 9   制 作 日 历

Page 7

9.1.2 背景图层设置

任务 7.1 制作电子相册元件

(1) 将图层 1 重命名为“背景”。将素材文件夹中的图片导入到舞台场景中。选中该图片,打开属性面板,将其大小修改为宽520 、高 380 。

(2) 用任意变形工具将位图图片旋转一定的角度,使其斜放置在舞台上。一切设定好之后,选中该图片,选择菜单栏中的“修改” |“ 转换为元件”命令,将其转换为名称为“背景”的影片剪辑元件,如图所示。观察图片在舞台中的效果,如图所示。

Page 8: 项目 9   制 作 日 历

Page 8

9.1.2 背景图层设置

任务 7.1 制作电子相册元件

(3) 选择工具箱中的矩形工具,将笔触颜色调整为白色,填充色为无,颜料桶工具选项设置如图所示。在舞台上绘制一个和背景图片一样大小的矩形边框。选中该边框,打开属性面板,设置“样式”为“点刻线”,“笔触”为 37.80 ,如图所示。

Page 9: 项目 9   制 作 日 历

Page 9

9.1.2 背景图层设置

任务 7.1 制作电子相册元件

(4) 选中该矩形边框,用任意变形工具将其旋转到与图片的旋转角度一致,如图所示。保持矩形框选中的状态,选择菜单栏中的“修改” |“ 转换为元件”命令,将点状线框转换为名称为“边框”的图形元件。

Page 10: 项目 9   制 作 日 历

Page 10

9.1.2 背景图层设置

任务 7.1 制作电子相册元件

(5) 选择工具箱中的文本工具,在舞台上输入静态文本“今天空气有点甜”。(6) 打开属性面板,将字体选择为“文鼎中特广告体”,字号为19 。将属性面板中的“滤镜”区域展开,单击面板左下角的“添加滤镜”按钮,从弹出的菜单中选择“投影”,这时属性面板如图所示,将“强度”值修改为 50% 。

Page 11: 项目 9   制 作 日 历

Page 11

9.1.2 背景图层设置

任务 7.1 制作电子相册元件

(7) 选中文字,用任意变形工具将其旋转一个小的角度,然后将其放置到舞台的右下角

Page 12: 项目 9   制 作 日 历

Page 12

课后练习课后练习

制作一张静态的贺卡。要求作品中包括图片和文字,构图和颜色搭配合理。

任务 7.1 制作电子相册元件

Page 13: 项目 9   制 作 日 历

Page 13

任务 9.2 组件及代码的添加

技能目标技能目标能够通过添加组件并为组件添加动作实现日历及搜索功能。

知识目标知识目标学会添加组件并通过组件检查器修改参数值;能为组件添加动作实现一定的功能。

主要用到的工具和命令主要用到的工具和命令组件面板、组件检查器、动作面板。

Page 14: 项目 9   制 作 日 历

Page 14

9.2.1 组件的添加及其参数的修改

任务 9.2 组件及代码的添加

(1) (1) 插入新图层,将名称重插入新图层,将名称重命名为“组件”。选择菜单栏命名为“组件”。选择菜单栏中的“窗口”中的“窗口” || ““ 组件”命令,组件”命令,打开组件面板,如图。打开组件面板,如图。

(2) (2) 从组件面板中将从组件面板中将DateChooserDateChooser 组件拖曳到舞组件拖曳到舞台上,并在属性面板上设置其台上,并在属性面板上设置其宽度为宽度为 200200 、高度为、高度为 190190 。。从“窗口”菜单中打开组件检从“窗口”菜单中打开组件检查器面板,在组件检查器面板查器面板,在组件检查器面板中选择“参数”选项卡如图所中选择“参数”选项卡如图所示,单击示,单击 dayNamesdayNames 参数后参数后面的放大镜按钮面的放大镜按钮 。。

Page 15: 项目 9   制 作 日 历

Page 15

9.2.1 组件的添加及其参数的修改

任务 9.2 组件及代码的添加

(3) (3) 在弹出的“值”对话框中在弹出的“值”对话框中

单击值一列的文本,文本即为单击值一列的文本,文本即为

选中的状态,然后输入中文,选中的状态,然后输入中文,

如图所示。如图所示。

修改显示样式后组件的效果如修改显示样式后组件的效果如

图示。图示。

Page 16: 项目 9   制 作 日 历

Page 16

9.2.1 组件的添加及其参数的修改

任务 9.2 组件及代码的添加

(4) (4) 在组件检查器面板中选择在组件检查器面板中选择

“参数”选项卡,单击“参数”选项卡,单击

monthNamesmonthNames 参数后的放大参数后的放大

镜按钮镜按钮 ,在弹出的“值”对话,在弹出的“值”对话

框中进行如图所示的设置。完框中进行如图所示的设置。完

成后单击“确定”按钮,修改成后单击“确定”按钮,修改

monthNamesmonthNames 参数之后组件参数之后组件

的效果如图所示。的效果如图所示。

Page 17: 项目 9   制 作 日 历

Page 17

9.2.1 组件的添加及其参数的修改

任务 9.2 组件及代码的添加

(5) (5) 使用选择工具选择场景中使用选择工具选择场景中

的的 DateChooserDateChooser 组件,在属组件,在属

性面板上设置实例名称为性面板上设置实例名称为 aaaa ,,

如图所示。如图所示。

打开组件面板,将打开组件面板,将 TextInputTextInput

组件拖入到舞台上,如图所示。组件拖入到舞台上,如图所示。

根据前面的设置方法,对该组根据前面的设置方法,对该组

件进行设置,并在属性面板中件进行设置,并在属性面板中

将实例名称设置为将实例名称设置为

searchtextsearchtext 。。

Page 18: 项目 9   制 作 日 历

Page 18

9.2.1 组件的添加及其参数的修改

任务 9.2 组件及代码的添加

(6) (6) 将将 ButtonButton 组件从组件面组件从组件面

板中拖曳到场景中,并适当调板中拖曳到场景中,并适当调

整其大小,效果如图所示。整其大小,效果如图所示。

在属性面板中设置其实例名称在属性面板中设置其实例名称

为为 myButtonmyButton 。打开组件检。打开组件检

查器面板,选择“参数”选项查器面板,选择“参数”选项

卡,设置卡,设置 labellabel 选项的值为选项的值为

“搜索”,如图所示。“搜索”,如图所示。

完成后效果如图所示。完成后效果如图所示。

Page 19: 项目 9   制 作 日 历

Page 19

9.2.1 组件的添加及其参数的修改

任务 9.2 组件及代码的添加

(7) (7) 打开组件面板,将打开组件面板,将

RadioButtonRadioButton 组件拖曳到舞组件拖曳到舞

台中。打开组件检查器面板,台中。打开组件检查器面板,

选择“参数”选项卡,设置选择“参数”选项卡,设置

datadata 值为值为

11 ,, groupNamesgroupNames 值为值为 nrnr ,,

labellabel 值为“网值为“网

页”,页”, LabelPacementLabelPacement 值值

为为 rightright ,, SelectedSelected 值为值为

truetrue ,如图所示。,如图所示。

完成设置后的效果如图所示。完成设置后的效果如图所示。

Page 20: 项目 9   制 作 日 历

任务 9.2 组件及代码的添加

Page 20

9.2.1 组件的添加及其参数的修改

(8) (8) 根据“网页”组件的方法,根据“网页”组件的方法,

分别制作出“图片”和分别制作出“图片”和 mp3mp3

组件。完成后的效果如图所示。组件。完成后的效果如图所示。

将“图片”组件的将“图片”组件的

groupNamesgroupNames 值设为值设为

nr nr ,, datadata 值设为值设为 00 ;把;把

mp3mp3 组件的组件的 groupNamesgroupNames

值设为值设为 nrnr ,, datadata 值设为值设为 22 。。(9) (9) 在组件面板中将在组件面板中将 AlertAlert 组件拖入场景,组件拖入场景,在场景中把组件删除,这样库面板中就有在场景中把组件删除,这样库面板中就有 AlertAlert组件了。用任意变形工具调整“搜索”按钮大小。组件了。用任意变形工具调整“搜索”按钮大小。

Page 21: 项目 9   制 作 日 历

任务 9.2 组件及代码的添加

Page 21

9.2.2 代码的添加

Page 22: 项目 9   制 作 日 历

任务 9.2 组件及代码的添加

Page 22

9.2.2 代码的添加

on (click) {// “ ”按钮 单击 触发searchvar = _root.searchtext.text;//设置一个变量 searchvar,将主场景中实例名称为searchtext的文本内容赋给变量 searchvartp = _root.nr.getValue();//设置另外一个变量 tp,获取主场景中 groupName为 nr的组件的 data值赋给 tp变量if (searchvar == "") {//假如变量 searchvar的值为空 (没有输入搜索内容 )import mx.controls.Alert;Alert.show("请输入搜索内容 , Alert.OK, this, myClickHandler);// Alert “ ”控件是一个弹出对话框,其中 请输入搜索内容 是信息

“ ”窗口中的文字, 搜索 是窗口标题,窗口中显示 Alert.OK按钮, this表示该窗口的上一及对象为场景

Page 23: 项目 9   制 作 日 历

任务 9.2 组件及代码的添加

Page 23

9.2.2 代码的添加} else {if (tp == 1) {getURL("http://www.baidu.com/s?wd="+searchvar);//假如 tp值为 1,则网页将链接到百度网页且关键字为searchtext的内容} else if (tp == 2) {getURL("http://mp3.baidu.com/m?f=ms&rn=&tn=baidump3&ct=134217728&word="+searchvar);//假如 tp值为 2,则网页将链接到百度 mp3网页,且关键字为searchtext的内容} else {getURL("http://image.baidu.com/i?ct=201326592&cl=2&lm=-1&tn=baiduimage&word="+searchvar);//假如 tp值为 0,则网页将链接到百度图片网页,且关键字为searchtext的内容}}}

Page 24: 项目 9   制 作 日 历

任务 9.2 组件及代码的添加

Page 24

9.2.2 代码的添加

Page 25: 项目 9   制 作 日 历

任务 9.2 组件及代码的添加

Page 25

9.2.2 代码的添加

aa.setStyle("themeColor", "0xFF0000");//将实例名称为 aa的组件样式设置为:改变日期选择得到焦点时边框的颜色为红色aa.setStyle("fontFamily", "Verdana");//将实例名称为 aa的组件样式设置为:字体样式为 Verdanaaa.setStyle("fontSize", "10");的样//将实例名称为 aa的组件样式设置为:字号为 10磅aa.setStyle("fontWeight", "bold");//将实例名称为 aa的组件样式设置为:文字加粗aa.setStyle("color", "0x000000");//将实例名称为 aa的组件样式设置为:字体颜色为黑色aa.setStyle("textAlign","center")//将实例名称为 aa “ ”的组件样式设置为:文本对其方式为 居中

Page 26: 项目 9   制 作 日 历

任务 9.2 组件及代码的添加

Page 26

9.2.2 代码的添加

Page 27: 项目 9   制 作 日 历

Page 27

课后练习课后练习

1 .若想将上面的项目实例中日期的颜色显示为红色,应修改哪部分代码?2 .通过修改哪部分代码能将“搜索”内容对话框中的内容修改为其他内容?

任务 9.2 组件及代码的添加

Page 28: 项目 9   制 作 日 历

Page 28

项目实训项目实训简单交互界面的制作。

项目背景项目背景利用组件面板中的组件,为某一个 Flash作品设计一个简单的交互界面。

项目要求项目要求1 .交互界面中包括 Button组件, ComboBox组件或者

RadioButton组件、 Alert组件。2 .通过单击按钮或者文本链接到相关网页。

任务 9.2 组件及代码的添加