下载

1下载券

加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 FLASH相册制作

FLASH相册制作.doc

FLASH相册制作

远方
2010-11-17 0人阅读 举报 0 0 暂无简介

简介:本文档为《FLASH相册制作doc》,可适用于其他资料领域

FLASH相册制作FLASH相册制作活动目的:会根据实际需求设计和制作一个多媒体作品会运用FLASH制作一个简单的电子相册重点:相册界面的规划和设计元件的制作特别是按钮的制作浏览相片场景的制作难点:翻页按钮的制作教法学法:任务驱动分析法示范法学时:学时第一、二学时:界面设计和规划任务:分析相册完成相册的界面设计参考资料:视频教程(FLASH相册教程界面设计)教师活动:.​ 引导学生分析相册掌握多媒体作品界面设计的工作.​ 示范制作小栅格的技巧.​ 引导学生理解和运用图层学生活动:.​ 分析相册的构造.​ 完成相册主界面的制作小结:学生中存在的主要问题和解决方法第三学时:按钮制作任务:完成箭头动画和相册按钮的制作参考资料:视频教程(FLASH相册教程按钮制作:FLASH相册教程箭头动画)教师活动:.​ 引导学生分析和理解按钮元件的制作.​ 引导学生分析箭头动画学生活动:.​ 制作按钮元件.​ 制作箭头动画小结:学生中存在的主要问题和解决方法第学时:图片滚动效果任务:完成界面上图片滚动效果的制作参考资料:视频教程(FLASH相册教程创建图片元件组FLASH相册教程图片滚动效果)学生活动:.​ 分析图片滚动效果的原理.​ 制作图片滚动效果小结:学生中存在的主要问题和解决方法第学时:浏览相片场景制作任务:完成浏览相片场景制作参考资料:视频教程(FLASH相册教程浏览相片场景制作FLASH相册教程文字说明的添加)学生活动:.​ 分析浏览相片场景制作的原理.​ 制作相片浏览场景小结:学生中存在的主要问题和解决方法第学时:翻页按钮制作任务:完成翻页按钮制作参考资料:视频教程(FLASH相册教程STOP动作的添加FLASH相册教程翻页按钮的制作)教师活动:引导学生理解脚本语句学生活动:.​ 分析翻页按钮的制作的原理.​ 制作翻页按钮小结:学生中存在的主要问题和解决方法考虑到一部分水平较好的学生会比较快完成这一作品另安排了一个难度较大的相册让他们挑战自己资料另起下页。电子相册“电子相册”听着还挺诱人哦!或许你见到过用Powerpoint或Authorware制作的“电子相册”确实很不错。那么你有没有想过用Flash制作“电子相册”呢?“Flash相册”的形式可以多种多样内容也可包罗万象这一节我们将一起制作一个精美的“翻页式”动画相册懂得了其中的原理你就可以自己完成诸如“作品集”、“家庭影集”、“求职介绍”、“产品推介”等一切你想得到的动画相册了。实例简介如图所示是本例的封面单击相册可以打开同时相册中飘出由学员们自编自唱的优美歌声。图相册封面本例制作过程比较繁杂考虑到你已经掌握相当的基本操作技能叙述中突出重点着重介绍相册动画中的关键技巧:“翻页”效果的制作。本范例的源文件:“相册fla”被保存在光盘相关目录中建议打开比照学习。知识提要●    编辑首帧为空白帧的元件的技巧●    在场景中不显示元件的技巧●    创建书页翻动的效果●    利用脚本语句实现帧与帧之间的跳转●    使用隐形按钮的技巧.创建影片文档()设置影片文档属性新建一个影片文档在【属性】面板中设置大小为×像素【背景颜色】为深红色【帧频】为如图所示。图影片属性设置()创建影片背景在场景中画一个×像素的无边矩形填充颜色为#在上面用【刷子工具】随意画一些各种颜色的小点做点缀如图所示。图点缀背景.创建元件这一步骤我们将使用“网格”辅助执行【视图】|【网格】|【显示网格】命令打开网格接着执行【视图】|【网格】|【编辑网格】命令打开【网格】对话框设置网格大小为×如图所示。图编辑网格()创建个图形元件在本例中要用到幅图片分别用作相册封面和内页内容其中个作品介绍分别是《网上的男人是老虎》、《春风吻上我的脸》、《警匪之战》、《雨巷》。新建个图形元件每个元件中导入一张图片分别命名为“封面”、“内页”、“网上的男人是老虎”、“警匪之战”、“春风吻上我的脸”、“雨巷”。这张图片的位置在:光盘examplepart***图片文件夹里文件名分别为“封面png”、“内页png”、“网上的男人是老虎jpg”、“春风吻上我的脸jpg”、“警匪之战jpg”、“雨巷jpg”。如图所示是封面和内页的图片。图封面和内页如图所示是四个作品的截图。图四个作品截图个图形元件完成后放在【库】中待用。()创建“箭头按钮”元件箭头按钮的作用控制前后翻页如图所示添加两个图层分别命名为“增加反应区”、“按钮白边”、“按钮表面”在“增加反应区”层的第帧画了个矩形以增大按钮“有效区”。在“按钮白边”与“按钮表面”层中画好箭头的形状。图所示是按钮各层分布与做好后按钮的形状。图箭头按钮()创建“隐形按钮”元件“隐形按钮”是Flash制作中常用的一个技巧把它放到场景中某个位置该位置就具有按钮功能在下面的制作过程中我们会看到它的实际运用。“隐形按钮”的制作非常简单只需要在“按钮”的第帧画一个无边的矩形就行了颜色任选画好后将矩形对齐场景的十字中心点。()创建“图片过渡”图形元件新建一个图形元件在场景中画一个无边矩形大小为×像素在【混色器】面板中设置填充类型为【放射状】设置一种从红色到黑色的渐变。这个元件的作用是用来过渡“作品图片”和“内页页面”之间的颜色使其衔接得更自然一些。()创建“相册”MC元件创建名为“相册”的影片剪辑元件。在这个元件中包含相册的各个页面每个页面是由“底层背景”、“图片过渡”、“作品图片”、“文字”、“按钮”个部分组成如图所示。图相册元件的时间轴面板步骤布置“相册”影片剪辑场景“相册”影片剪辑共有个关键帧每帧的内容都不同请你先按图所示创建个图层然后一帧一帧的添加内容下面我们将讲解几个具有特殊内容的帧操作其它几个操作相同的关键帧内容见后面的表格。第帧:参考图该帧的各层全是空白帧仅在【按钮】图层中有一条指令:stop()它的作用是让相册的起始状态静止在封面上等待用户单击。第帧:这是封面帧从【库】中拖入名为“封面”的图形元件放在【底层背景】图层中其大小是×X、Y轴的位置都为。因为是封面所以其上面的【图片过渡】、【作品图片】、【文字】等图层都是空白帧【按钮】图层中放置的是“隐形按钮”调整其大小为×覆盖在封面上。建好后的第帧如图所示图中的淡绿色部分为“隐形按钮”播放时是看不到的。图相册封面第帧:这是“封页”内容从【库】中拖入名为“内页”的图形元件放在【底层背景】图层中大小及位置同封面。再从【库】中把“图片过渡”元件拖入【图片过渡】图层设置【Alpha】值为%。【文字】图层中放的是名为“打字效果”的影片剪辑这是一段利用遮罩动画事先做好的影片剪辑。【按钮】图层中还是“隐形按钮”调整按钮大小为×。页面的下方还有一个剪头按钮指示翻页的方向(以上按钮上都有相关的指令等我们布置好场景再来逐个添加)。完成后的“封页”如图所示。图相册封页第帧:是翻开相册后的第页从这帧起【底层背景】图层中的内容始终是名为“内页”的图片元件。【图片过渡】图层中的“图片过渡”元件要打散并根据作品图片的颜色而适当改色使图片和背景之间的过渡较为自然。在本实例中【图片过渡】图层第帧上的图片填充的颜色参数:左边颜色参数为#FFFFCC、【Alpha】值为%右边颜色参数为#A、【Alpha】值为%。如图所示。图过渡图片填充时的【混色器】面板从【库】中把名为“网上的男人是老虎”的图形元件拖放在【作品图片】图层中。在【文字】图层中创建文字说明:作者是“学习来了”、作品名称是“网上的男人是老虎”在按钮层中也有一个隐形按钮和箭头按钮。完成后如图所示。图做好后的第一页第帧:做法与第帧相同只是分别使用不同的图片元件相关元件从【库】中取用并加上不同的说明文字另外“过渡图片”都要打散重新填充颜色应该根据图片作调整“透明按钮”的指令见下表。第帧:是“封”这页内容是介绍其他一些作品去掉图片加入文字每行文字都用“隐形按钮”指向相应作品的绝对网址只要单击就能看到作品了。图所示的是第帧完成后的场景。图完成后的封面在“谢谢观赏”的文字对象上也有一个“隐形按钮”指令见表。步骤检查“相册”影片剪辑中各帧的元件分布表是各帧中的元件名称列表请对照着仔细检查。表各帧中的元件名称 底层图片过渡层作品图片层文字说明层第帧无无无无第帧封面无无无第帧内页图片过渡元件无打字影片剪辑第帧内页同上打散网上的男人是老虎学习来了:网上的男人是老虎第帧内页同上打散春风吻上我的脸梦雨:春风吻上我的脸第帧内页同上打散警匪之战沪上老康:警匪之战第帧内页同上打散雨巷牧马者:雨巷第帧内页图片过渡无四个作品的作者和名称步骤添加各帧隐形按钮上的动作指令    表列出了“相册”影片剪辑中所有隐形按钮上的指令请对照添加。表各帧隐形按钮上的动作语句第帧跳转到上一级路径(即“翻页效果”元件)中播放该元件第帧的动作on(release){   with(parent){       gotoAndPlay()   }}第帧打开新窗口链接到闪客沙龙的网址on(release){   getURL("http:chatyinshacom",blank)}第帧打开新窗口链接该作品的网址on(release){   getURL("http:upflashercomuploadimgwsfswf",blank)}第帧打开新窗口链接该作品的网址on(release){   getURL("http:wwwflashnetupfilmmengyuswf",blank)}第帧打开新窗口链接该作品的网址on(release){   getURL("http:wwwhslkcomflashjfswf",blank)}第帧打开新窗口链接该作品的网址on(release){   getURL("http:cnflashercomflashermmzyxswf",blank)}第帧四个作品的链接:溜达:on(release){   getURL("http:wwwzsepbgovcnIssueManageuploadFileswfswf",blank)}瘟斗士XP:on(release){   getURL("http:wwwflashnetuploadswf",blank)}yot:on(release){   getURL("http:gdrflashercomxiqiyueliangswf",blank)}小东东:on(release){   getURL("http:bbsflashercomupfileSWF",blank)} 谢谢欣赏点击回到首页:跳转到翻页效果元件中并停止在相应帧中。on(release){   with(rootgoleftpage){       gotoAndStop()   }   with(rootgoleftflip){       gotoAndStop()   }   with(rootgorightflip){       gotoAndStop()   }跳转到上一级路径(即“翻页效果”元件)中播放该元件第帧的动作   with(parent){       gotoAndPlay()   }}注意:表中一些动作脚本中的URL参数值这里仅作为参考你可以换成对应你的作品实例的URL地址。大家一定还记得我们在第章中讨论过元件的“重复应用”问题从上表中可以看出一个“隐形按钮”得到了多次应用提高了工作效率减少了文件量。如图示范设置在第帧的隐形按钮上的动作脚本语句。 图封面隐形按钮上的脚本语句步骤添加各帧中箭头按钮上的动作语句现在我们再来看看这个MC元件各帧中箭头按钮上的动作语句。第、、帧上的语句是一样的均为:跳转到上一级路径(即“翻页效果”元件)中播放该元件第帧的动作on(release){with(parent){gotoAndPlay()}}第、帧上的语句是一样的均为:跳转到上一级路径下(即“翻页效果”元件)中播放该元件第帧的动作on(release){with(parent){gotoAndPlay()}}至此“相册”影片剪辑创建完毕。本例最吸引眼球的动画效果就是每个页面能前后翻动下面我们就来实现这个效果。.创建翻页效果我们要实现相册左右翻页的效果是通过动作脚本指令控制的。本例的脚本控制构思相当巧妙请你在学习过程中一定要搞清其逻辑关系。()创建名为“翻页”的影片剪辑首先创建一个名为“翻页”的影片剪辑在这个影片剪辑中只有三层如图所示。图翻页效果的时间轴面板从图中可以看出【rightflip】图层和【leftpage】图层中都没有补间动画这层的作用是使页面翻转时能看到左右两面的静止页面。页面翻转的动作是由【leftflip】图层完成的。下面我们就来编辑这个元件。请你先按图所示建好图层。()在相册元件中加临时层从【库】中把名为“相册”的影片剪辑拖到【leftpage】图层的场景中这时在场景中只看到一个小白点这是因为“相册”影片剪辑的第帧是“空白”的。这种在界面上“看不见”的对象在Flash中经常会碰到要选择它或者打开它相当困难本书第章我们已经学到过如何找出它的“注册点”从而打开它进行编辑的技巧。在这里我们将再介绍另外一种技巧即在该对象内增加一个“临时层”在该层的第帧临时放上一个“内页”图形对象使“不可见”对象变为可见为后面的编辑带来极大方便。当然完成全部制作后别忘记删除哦!现在我们就先回到“相册”这个元件中在按钮层上面新建个“临时层”图层在其第帧用“原地粘贴”的方法(将【底层背景】图层上第帧上的“内页”图形实例复制、粘贴到当前位置)放置一个“内页”图形元件第帧插入空白关键帧如图所示。现在场景中“相册”影片剪辑是“有形”的了。图加了临时层的相册元件再回到“翻页”影片剪辑我们已经能清楚地看到“相册”元件!现在我们继续编辑“翻页”影片剪辑。()编辑【rightflip】层在【rightfilp】这一层中也拖入一个“相册”元件在X轴上的位置为Y轴上的位置为实例名为:“rightfilp”如图所示。图rightflip图层中的“相册”属性在第帧上添加帧指令:with(rootgorightflip){nextFrame()}其动作面板如图所示。图rightflip层第帧的动作面板在第二帧加关键帧定义动作语句为:让此帧内的相册元件翻二页。二个nesxtFrame是连续二个下一帧。with(rootgorightflip){nextFrame()}with(rootgorightflip){nextFrame()}()编辑【leftflip】层关闭下面二层的“眼睛”在【leftflip】层的第帧中拖入“相册”影片剪辑在X、Y轴上的数值均为实例名“leftflip”如图所示。图leftflip层的属性面板保持【leftflip】图层为当前编辑图层在该图层的第、、、、、、、、帧处插入关键帧(参考图)。从第帧到第帧完成的是从右向左翻页从第帧到第帧完成的是从左向右翻页。现在我们把第、、、帧处的“相册”影片剪辑移到场景的左侧在这帧的属性面板上设置“相册”影片剪辑在X轴上的位置为如图所示。图移动元件到场景的左侧()移动注册点把元件移到场景的左侧后我们观察图会发现场景中有二个十字星右面的是场景“中心点”左面的是“相册”元件自身的“注册点”任何对象在变形的时候总是以一个“假想”的“点”为依据的这个点就是对象的“注册点”书本的“注册点”应该在“书”的“中轴装订线”处我们必须把页面的注册点移到书的中轴处也就是场景的“”坐标处。在创建补间动画前我们要先设置好第、、、帧处的注册点为“”。下面以第帧为例:在第帧处选取元件然后按下任意变形工具此时元件周围出现调节手柄如图所示。图元件周围出现的调节手柄注意左上角的那个白色圆点这就是注册点用鼠标左键按住它拖到右上角的十字星上松手就行了。此时元件周围如图所示。比较两两种情况可看出“相册”影片剪辑的“注册点”已经与场景“中心点”重合。图移动注册点按照同样方法把处于第、、帧中的“相册”影片剪辑进行移动编辑。()创建翻页动画【任意变形】工具有个选项如图所示。图任意变形工具的选项左面是“倾斜与旋转”工具右面的是“缩放”工具它们的编辑效果如图所示。图使用缩放、倾斜工具使元件变形利用这种编辑特点把第、、、帧处的元件作如图所示的变形。 图第、、、帧处元件的变形情况接着分别在第帧、第帧、第帧、第帧中建立动作补间动画。在第中加关键帧然后缩小场景到%(这样可以看到全部编辑界面)。把第、帧中的元件拖到场景外面任意位置即图中的红色区域以外的任意处。图第帧处的场景()向【leftflip】层中添加动作语句第帧:stop()第帧:with(rootgoleftflip){调用主时间轴中名字为go的影片剪辑实例中的leftflip实例nextFrame()在leftflip实例中播放下一帧}第帧:with(rootgoleftflip){nextFrame()}第帧:with(rootgoleftpage){nextFrame()}with(rootgoleftpage){nextFrame()}第帧:stop()第帧:with(rootgoleftpage){prevFrame()}with(rootgoleftpage){prevFrame()}第帧:with(rootgoleftflip){prevFrame()}第帧:with(rootgoleftflip){prevFrame()}with(rootgorightflip){prevFrame()}with(rootgorightflip){prevFrame()}stop()说明:以上动作脚本中出现一个名字为go的影片剪辑实例这个影片剪辑其实就是放置在主场景中的“翻页”影片剪辑实例在下面的步骤中有对它的定义。至此本例所需的各种组件基本准备完毕但是限于篇幅其中还有个影片剪辑没有介绍一个是“闪客沙龙作品集”它用的是“遮罩”技巧。下面我们该回到主场景完成最后的工作了。.创建主动画你的动画作品无论规模大小最后总得在主场景进行整合处理前面我们已经进行大量的动画素材的创建现在终于可以“组装”它们了这也同样也表明我们将马上欣赏到自己的劳动成果啦!所以下面的编辑就显得特别轻松还有那么一点点兴奋哦?好让我们赶快完成它!【背景层】的内容早已在创建影片属性时完成了现在我们在主场景的时间轴上再新建个图层请参考图。从【库】中把“翻页”元件拖到场景下部再从【库】中把“闪客沙龙作品集”元件放在场景的上部。此时场景大致如图所示。图没有删除临时层的主场景选择舞台上的“翻页”影片剪辑实例在【属性】面板中定义这个实例的名称为go。测试一下好像哪个地方有点不对劲?喔我们还没删除在“相册”影片剪辑中的“临时层”哩!马上删除成功啦!嗨前面付出的劳动没白费!完成后的主场景时间轴面板如图所示。图主场景中的时间轴面板测试没有问题就存盘吧。你可以在理解动画原理及逻辑关系的基础上把相册改造成你想得起的任何其它形式我们相信它一定会博得你朋友们的喝采!

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

文档小程序码

使用微信“扫一扫”扫码寻找文档

1

打开微信

2

扫描小程序码

3

发布寻找信息

4

等待寻找结果

我知道了
评分:

/29

FLASH相册制作

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利