1 / 28

项目 9 制 作 日 历

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

admon
Télécharger la présentation

项目 9 制 作 日 历

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 项目9 制 作 日 历

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

  3. 制作思路 本项目主要讲解如何更好地利用组件配合脚本语言完成日历和搜索的功能。

  4. 制作流程

  5. 任务9.1 制作日历背景 • 技能目标 • 能够将导入的位图图片配合线条工具和文本工具制作出精美的背景。 • 知识目标 • 学会使用线条工具为图片添加斑驳的边缘，学会添加滤镜效果。 • 主要用到的工具和命令 • 线条工具、文本工具、滤镜。

  6. 任务7.1 制作电子相册元件 9.1.1 文档设置 新建Flash文件(ActionScript 2.0)，如图所示。选择菜单栏中的“文档”|“修改”命令，打开如图所示的“文档属性”对话框。将背景颜色调整为#DDFFF7，单击“确定”按钮。

  7. 任务7.1 制作电子相册元件 9.1.2 背景图层设置 (1) 将图层1重命名为“背景”。将素材文件夹中的图片导入到舞台场景中。选中该图片，打开属性面板，将其大小修改为宽520、高380。 (2) 用任意变形工具将位图图片旋转一定的角度，使其斜放置在舞台上。一切设定好之后，选中该图片，选择菜单栏中的“修改”|“转换为元件”命令，将其转换为名称为“背景”的影片剪辑元件，如图所示。观察图片在舞台中的效果，如图所示。

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

  9. 任务7.1 制作电子相册元件 9.1.2 背景图层设置 (4) 选中该矩形边框，用任意变形工具将其旋转到与图片的旋转角度一致，如图所示。保持矩形框选中的状态，选择菜单栏中的“修改”|“转换为元件”命令，将点状线框转换为名称为“边框”的图形元件。

  10. 任务7.1 制作电子相册元件 9.1.2 背景图层设置 (5) 选择工具箱中的文本工具，在舞台上输入静态文本“今天空气有点甜”。 (6) 打开属性面板，将字体选择为“文鼎中特广告体”，字号为19。将属性面板中的“滤镜”区域展开，单击面板左下角的“添加滤镜”按钮，从弹出的菜单中选择“投影”，这时属性面板如图所示，将“强度”值修改为50%。

  11. 任务7.1 制作电子相册元件 9.1.2 背景图层设置 (7) 选中文字，用任意变形工具将其旋转一个小的角度，然后将其放置到舞台的右下角

  12. 任务7.1 制作电子相册元件 • 课后练习 制作一张静态的贺卡。 要求作品中包括图片和文字，构图和颜色搭配合理。

  13. 任务9.2 组件及代码的添加 • 技能目标 • 能够通过添加组件并为组件添加动作实现日历及搜索功能。 • 知识目标 • 学会添加组件并通过组件检查器修改参数值；能为组件添加动作实现一定的功能。 • 主要用到的工具和命令 • 组件面板、组件检查器、动作面板。

  14. 任务9.2 组件及代码的添加 9.2.1 组件的添加及其参数的修改 (1) 插入新图层，将名称重命名为“组件”。选择菜单栏中的“窗口”|“组件”命令，打开组件面板，如图。 (2) 从组件面板中将DateChooser组件拖曳到舞台上，并在属性面板上设置其宽度为200、高度为190。从“窗口”菜单中打开组件检查器面板，在组件检查器面板中选择“参数”选项卡如图所示，单击dayNames参数后面的放大镜按钮。

  15. 任务9.2 组件及代码的添加 9.2.1 组件的添加及其参数的修改 (3) 在弹出的“值”对话框中单击值一列的文本，文本即为选中的状态，然后输入中文，如图所示。 修改显示样式后组件的效果如图示。

  16. 任务9.2 组件及代码的添加 9.2.1 组件的添加及其参数的修改 (4) 在组件检查器面板中选择“参数”选项卡，单击monthNames参数后的放大镜按钮，在弹出的“值”对话框中进行如图所示的设置。完成后单击“确定”按钮，修改monthNames参数之后组件的效果如图所示。

  17. 任务9.2 组件及代码的添加 9.2.1 组件的添加及其参数的修改 (5) 使用选择工具选择场景中的DateChooser组件，在属性面板上设置实例名称为aa，如图所示。 打开组件面板，将TextInput组件拖入到舞台上，如图所示。根据前面的设置方法，对该组件进行设置，并在属性面板中将实例名称设置为searchtext。

  18. 任务9.2 组件及代码的添加 9.2.1 组件的添加及其参数的修改 (6) 将Button组件从组件面板中拖曳到场景中，并适当调整其大小，效果如图所示。 在属性面板中设置其实例名称为myButton。打开组件检查器面板，选择“参数”选项卡，设置label选项的值为“搜索”，如图所示。 完成后效果如图所示。

  19. 任务9.2 组件及代码的添加 9.2.1 组件的添加及其参数的修改 (7) 打开组件面板，将RadioButton组件拖曳到舞台中。打开组件检查器面板，选择“参数”选项卡，设置data值为1，groupNames值为nr，label值为“网页”，LabelPacement值为right，Selected值为true，如图所示。 完成设置后的效果如图所示。

  20. 任务9.2 组件及代码的添加 9.2.1 组件的添加及其参数的修改 (8) 根据“网页”组件的方法，分别制作出“图片”和mp3组件。完成后的效果如图所示。将“图片”组件的groupNames值设为nr ，data值设为0；把mp3组件的groupNames值设为nr，data值设为2。 (9) 在组件面板中将Alert组件拖入场景，在场景中把组件删除，这样库面板中就有Alert组件了。用任意变形工具调整“搜索”按钮大小。

  21. 任务9.2 组件及代码的添加 9.2.2 代码的添加 (1) 用选择工具选中“搜索”按钮，打开动作面板，在动作面板中输入如图所示的代码。

  22. 任务9.2 组件及代码的添加 9.2.2 代码的添加 代码解释： on (click) { //按钮“单击”触发 searchvar = _root.searchtext.text; //设置一个变量searchvar，将主场景中实例名称为searchtext的文本内容赋给变量searchvar tp = _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表示该窗口的上一及对象为场景

  23. 任务9.2 组件及代码的添加 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的内容 } } }

  24. 任务9.2 组件及代码的添加 9.2.2 代码的添加 (2) 在场景中插入新图层，将图层重命名为“代码”。打开动作面板，输入如图所示的代码。

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

  26. 任务9.2 组件及代码的添加 9.2.2 代码的添加 (3) 完成日历制作，测试影片。若文本框中没有输入任何内容，单击“搜索”按钮后，将弹出对话框，如图。

  27. 任务9.2 组件及代码的添加 • 课后练习 1．若想将上面的项目实例中日期的颜色显示为红色，应修改哪部分代码？ 2．通过修改哪部分代码能将“搜索”内容对话框中的内容修改为其他内容？

  28. 任务9.2 组件及代码的添加 • 项目实训 • 简单交互界面的制作。 • 项目背景 • 利用组件面板中的组件，为某一个Flash作品设计一个简单的交互界面。 • 项目要求 • 1．交互界面中包括Button组件，ComboBox组件或者RadioButton组件、Alert组件。 • 2．通过单击按钮或者文本链接到相关网页。

More Related