Flash翻书效果研究
- 格式:doc
- 大小:310.50 KB
- 文档页数:15
flashforward写作手法一、 flashforward写作手法简介flashforward是一种文学写作手法,指的是在故事中提前展示某个未来事件或情节。
通常来说,flashforward常常被用来制造悬念、增加故事的紧张感,引起读者的好奇心和期待。
在文学作品中,flashforward的运用可以使故事更加生动有趣,让人难以预料到故事的发展方向,也能给读者留下深刻的印象。
二、 flashforward写作手法的优点1. 增加悬念性:通过提前展示未来情节或事件,让读者对故事的发展产生好奇心和期待,增加故事的悬念性。
2. 提升紧张感:flashforward常常被用来描绘紧张刺激的情节,让故事更加紧凑有力,增强读者的阅读体验。
3. 强化印象:将未来事件提前展示给读者,可以让读者在阅读过程中留下深刻印象,增加文学作品的震撼力和感染力。
三、 flashforward写作手法的运用方式1. 事件前瞻:在故事中,作者可以通过描述某个未来事件或情节的发生,来预示故事的发展方向,增加故事的悬念性和可读性。
2. 角色倒影:通过flashforward手法,作者可以展示主要角色的未来命运或情感走向,让读者更加关注角色的内心变化和成长过程。
3. 心理描写:作者可以利用flashforward手法来展现角色的内心世界,揭示其内心的矛盾、迷茫和挣扎,增加角色的立体感和真实感。
四、 flashforward写作手法在文学作品中的经典案例1. 经典案例一:《追风筝的人》在《追风筝的人》这部小说中,作者卡勒德·胡赛尼运用了大量的flashforward手法,通过提前展示未来事件的发生,增加了故事的悬念性和感染力,使整个故事更加引人入胜。
2. 经典案例二:《时间旅行者的妻子》《时间旅行者的妻子》这部小说中,作者奥德丽·尼芙涅格利展现了flashforward手法的高超运用,通过时间旅行的情节,提前展示了角色未来命运的变化,让读者对故事产生更加深刻的思考和共鸣。
摘要:翻转课堂的出现,颠覆了传统课堂中的师生角色,对课堂时间的分配进行了重新规划,并成为各学科研究的一个重点课题。
该文通过一年的时间,对两个班级的同学以flash动画的教学为例,进行“翻转课堂教学模式”的研究,并取得一定的成效。
关键词:翻转课堂;flash动画;微课视频中图分类号:g642 文献标识码:a 文章编号:1009-3044(2016)19-0119-031“翻转课堂教学模式”的研究背景1.1信息化是教育发展的必经之路中职学校的学生大都存在学习目的不明确、没有强烈的学习动机和愿望。
这些因素不仅困扰职业教育发展的顽疾,同时也制约了中职教学质量的提升。
如何才能改变这种教育现状,让教与学成为一件让教师和学生都喜欢的事情,这是很多职教工作者一直苦苦思索的难题。
翻转课堂的出现,颠覆了传统课堂中的师生角色,对课堂时间的使用进行了重新规划,是传统教学模式的革新。
众多教育研究者,在研究分析国外教学案例的基础上,提出适合我国国情的中国式翻转课堂,对我国的教学改革提供借鉴。
1.2以信息化手段改变传统教育2 “翻转课堂教学模式”概念的解析“翻转课堂模式”(flipped class model),也被称为“反转课堂式教学模式”。
它颠覆了传统课堂的教学模式,学生首先在家通过观看视频完成知识的学习,而课堂变成了学生与学生之间以及老师和学生之间交流互动的场所,课堂上主要答疑解惑、探讨难点、解决重点等。
这种教学模式让师生在课堂上的角色发生了反转性的变化,课堂上学生占据主动地位,而教师则是引导学生,起到解惑的作用,但教育效果却比传统的教学模式好得多。
“翻转课堂”教学模式,使学生不再单纯的、被动的依赖教师传授知识,而是通过互联网寻求优质的资源,实现自主学习。
在这一过程中,学生接触不同教师的不同教学方法,更加扩大眼界和知识面。
此时,老师在课堂中的角色也发生了重大变化,“翻转课堂”教学模式让教师摆脱了机械式重复的教学工作。
第一部分制作“页”影片剪辑元件1、制作“封面”影片剪辑元件,插入新建元件影片剪辑名为“封面”1—1、在图层1上新建六个图层,自下至上分别是:背景、花边、边线、字框、字、动画(图片也行)、遮罩7个图层。
如图:1—2、图层1(背景)第1帧用矩形工具,无笔触,画一矩形:240*300,颜色:#333300,全居中。
1—3、新建花边图案影片剪辑,图层第1帧画花边图案,(舞台放大)大小设为10。
8*18.5,颜色:#666600,复制多枚排列成236*292如图:1-4、花边图层第1帧把花边图案元件拖入,全居中,点图案打开滤镜面板增加投影效果,模糊设为:0,颜色设为:#999900,距离设为:1,挖空打勾。
其它默认。
1-5、边线图层第1帧用矩形工具,笔触设为:2,颜色为:#999966,填充色关闭,画一矩形宽210高260全居中,选中右边线和下边线颜色换成#000000,选中全部边线转为图片元件名为“页边线".1-6、字框图层第1帧制作字框大小:205*45,X轴—102,Y轴—106.2。
如图:1-7、字图层第1帧用文本工具写上鸟语花香(也可写其它)字体:方正小篆体,大小35.颜色#336600。
1-8、图片图层(动画)第1帧将库中准备好的荷花动画拖入,放在右下角的位置,调整后大小。
1—9、遮罩图层第1帧用矩形工具,笔触禁止,颜色随意,画一矩形宽190高162的遮罩片,放在右下角,遮罩片的右靠近右边线,遮罩片下边靠近下边线。
右键遮罩层设为遮罩。
这样“封面”影片元剪辑件就完成了,最后效果如图:2、制作“首页”影片剪辑元件,将库中“封面”直接复制改名为“首页”。
2—1、双击进入“首页"编辑场面,自下至上分别是:背景、花边、边线、字、4个图层。
删除字框、图片、遮罩图层。
2—2、打开字图层,用“毛体"书写两排诗词.2-3、打开边线图层,选中右边线和下边线将颜色替换成#999900,选中左边线和上边线将颜色替换成#FFFFFF。
知识点:遮罩的运用学习无脚本软翻书教材前请先看看遮罩的知识:1、遮罩动画的概念(1)什么是遮罩?“遮罩”:顾名思义就是遮挡住下面的对象。
在Flash8.0中,“遮罩动画”也确实是通过“遮罩层”来达到有选择地显示位于其下方的“被遮罩层”中的内容的目地,在一个遮罩动画中,“遮罩层”只有一个,“被遮罩层”可以有任意个。
(2)遮罩有什么用?在Flash8.0动画中,“遮罩”主要有2种用途,一个作用是用在整个场景或一个特定区域,使场景外的对象或特定区域外的对象不可见,另一个作用是用来遮罩住某一元件的一部分,从而实现一些特殊的效果。
2、创建遮罩的方法(1)创建遮罩在Flash8.0中没有一个专门的按钮来创建遮罩层,遮罩层其实是由普通图层转化的。
你只要在要某个图层上单击右键,在弹出菜单中把“遮罩”前打个勾,该图层就会生成遮罩层,“层图标”就会从普通层图标变为遮罩层图标,系统会自动把遮罩层下面的一层关联为“被遮罩层”,在缩进的同时图标变为,如果你想关联更多层被遮罩,只要把这些层拖到被遮罩层下面就行了。
(2)构成遮罩和被遮罩层的元素遮罩层中的图形对象在播放时是看不到的,遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等,但不能使用线条,如果一定要用线条,可以将线条转化为“填充”。
被遮罩层中的对象只能透过遮罩层中的对象被看到。
在被遮罩层,可以使用按钮,影片剪辑,图形,位图,文字,线条。
下面开始本教程打开FLASH文档,名称:《软翻书》文档属性大小:600*450其它默认。
素材准备:1、准备20张图片,用PS处理成:200*150像素。
2、准备1张背景图片,PS处理成:600*450像素。
3、以及兰花、荷花的动画。
4、字体:毛泽东字体、文鼎CS大隶书繁、方正小篆体。
新建位图文件夹,将位图全部导入。
第一部分:制作“页”影片剪辑元件1、制作“封面” 影片剪辑元件,插入新建元件影片剪辑名为“封面”。
1-1、在图层1上新建六个图层,自下至上分别是:背景、花边、边线、字框、字、动画(图片也行)、遮罩7个图层1-2、图层1(背景)第1帧用矩形工具,无笔触,画一矩形:240*300,颜色:#333300,全居中。
翻转动画——世界名画欣赏旋转、缩放、移动是课件中常用的动画方式,包括文字、图像、图形等对象的动作动画。
而翻转则是让动画对象以一个轴作翻转的过程,如书的翻页,文字的翻转等。
一、运行结果运行该动画,一幅幅外国名画沿着它的一条边自右向左翻转,向学生展示其风貌,如图1所示。
图1二、知识要点本例表现的是一种书页翻动的效果:翻动前,图像按所在层进行上下排列,上层的图像在上面,下层的图像在下面;翻动到左侧后下面一层的图像将遮挡上层的图像。
三、操作步骤1.设置文件属性及视图(1)执行“开始”—“Macromedia”—“Macromedia Flash MX 2004”命令,启动程序,并创建一个新Flash文档。
(2)选择“修改”→“文档”命令,在文档属性对话框中,按图2所示进行设置,背景选择青色。
以上参数也可以在属性面板中修改。
#669999图2(3)选择“视图”→“标尺”命令,在窗口中显示标尺。
(4)将鼠标放在左侧纵向标尺上,按住鼠标向右拖动,产生一条竖向的参考线,并拖动到编辑区的中央,标尺为350的位置。
2.输入文字(1)选择“绘图”工具栏上的“文字”工具,设置文字为:字体(华文行楷)、加粗、字号(55)、文字颜色(金黄色),在编辑区中输入文字“世界名画欣赏”。
(2)用鼠标拖动文本框右上角的调整点,向左移动,使文字变成竖排,并将其放在适当的位置,如图3所示。
图33.制作文字动画(1)在图层1的20帧单击鼠标右键,在快捷菜单中选择“插入关键帧”命令,插入一个关键帧。
(2)选中图层1的第1帧,选择工具面板中的“任意变形工具”,将图层1中的文字旋转180度角,并缩小。
(3)选中图层1的第1帧,在属性面板中,选择“补间”下拉列表中的“动作”,并保持右边“缩放”选项已被选中,如图4所示。
按下回车键可观看动画效果。
图44.制作第一页的翻页动画(1)单击“时间轴”面板上的新建图层按钮,新建图层2。
(2)选中图层2的第1帧,执行“文件”→“导入”→“导入到舞台”命令,打开“导入”对话框,选择素材中要导入的“外国名画1”图像文件,点击打开按钮,当出现对话框询问“此文件看起来是图像序列的组成部分,是否导入序列中的所有图像?”时,选择“否”,将指定的图像导入编辑区。
flash⾮组件的翻书效果制作过程flash⾮组件的翻书效果制作过程作者:tiger_0309 | 来源:⽹上有好多这样的东西,但是⼤都⽤组件做成的,有的往往还有收费,我的这个不⽤组件,基本都是代码,但是结构很简单,⼀⽬了然,⼤家下载原⽂件就可以看出来,⾄于代码的含义我就不详细说了,我在这主要说⼀下替换⾃⼰的图⽚时候怎么样改写代码。
主场景⼀共有四帧代码:第⼀帧代码:x1=50;y1=50x2=250;y2=50x3=450;y3=50x4=50;y4=200x5=250;y5=200x6=450;y6=200//这六个坐标点就是书摊开后的左上,中上,右上,左下,中下,右下点;其中左上点(x1,y1)是定位点,可以决定书在舞台的位置,然后其余的五个坐标就由你的图⽚⼤⼩决定,(x2-x1)和(x3-x2)相等是书的单页宽,同理(x5-x4)和(x6-x5)相等也是⼀样的道理,(y4-y1)和(y5-y2)和(y6-y3)相等是图⽚的⾼。
attachMovie("cover","p0",100)//这是第⼀张attachMovie("bottom","p19",120)//这是最后⼀张for(i=2;i<=20;i+=2){attachMovie("Page"+i,"p"+i,100+i/2)}//17这个数字是总图⽚数20-3得出for(i=1;i<=17;i+=2){//这个111的数字是根据上⾯Page20的level是110得出attachMovie("Page"+i,"p"+i,111+(i-1)/2)}//你的图⽚多少不⼀样,每张图⽚所在的level也很重要,这要你⾃⼰根据我的原⽂件的图⽚数⽬和你的⽐较后调整//图⽚都是从库⾥调⽤,所以都要有链接标识符,得把所有的图⽚建成影⽚剪辑,在每个影⽚剪辑⾥都要把图⽚左对齐和底对齐到舞台,这点很重要,还有你要准备的图⽚必须是双数//影⽚剪辑Page20⾥⾯画⼀个和图⽚⼤⼩⼀样的矩形,颜⾊和背景⾊⼀样,也要左对齐和第对齐到舞台mask1._x=x6;mask1._y=0mask2._x=x6mask2._y=0//遮罩尽量做⼤⼀点,在主场景⾥各占⼀半mask1._visible=falsemask2._visible=falsepage=0mouse2=0x=x6y=y6xmouse=x6ymouse=y6第⼆帧代码:flag=1if(page>0){eval("p"+(page-1))._visible=trueeval("p"+(page-1))._x=x4eval("p"+(page-1))._y=y4eval("p"+(page-1))._rotation=0}//20是我⽤的图⽚数字,你⽤多少改为多少if(page<20){eval("p"+page)._visible=trueeval("p"+page)._x=x5eval("p"+page)._y=y5eval("p"+page)._rotation=0eval("p"+(page+1))._visible=trueeval("p"+(page+1))._x=x6eval("p"+(page+1))._y=y6eval("p"+(page+1))._rotation=0eval("p"+(page+1)).setMask(mask1)eval("p"+(page+2))._visible=trueeval("p"+(page+2))._x=x5eval("p"+(page+2))._y=y5eval("p"+(page+2))._rotation=0eval("p"+(page+2)).setMask(mask2)}//这也要改for(i=0;i<=20;i++){if(i<page-1||i>page+2){eval("p"+i)._visible=false}}第三帧代码:xx=_xmouseyy=_ymouseif(Key.isDown(1)){mouse1=1}else{mouse1=0}if(mouse2==1&&mouse1==1&&((xx-x5)*(xx-x5)+(yy-y5)*(yy-y5)<=(x6-x5)*(x6-x5))&&((xx-x2)*(xx-x2)+(yy-y2)*(yy-y2)<=(x6-x5)*(x6-x5)+(y5-y2)*(y5-y2))){ xmouse=xxymouse=yy}if(mouse2==0&&mouse1==1){//150是我主场景宽的⼀半左右,它的值决定你的⿏标的灵敏度,你可以根据你的场景来调整if(flag==1&&xx<150&&page>0){page-=2x=x4y=y4xmouse=x4ymouse=x4gotoAndPlay(2)}}if(mouse1==1){flag=0x=xmouse/5+x*4/5y=ymouse/5+y*4/5}if(mouse1==0){//这个150也要改,和上⾯⼀样if(xmouse>150){x=x6/6+x*5/6y=y6/4+y*3/4}else{x=x4/6+x*5/6y=y4/6+y*5/6}}eval("p"+(page+1))._x=xeval("p"+(page+1))._y=yif(flag==0&&page<20&&Math.abs(x-x4)+Math.abs(y-y4)<1){page+=2x=x6y=y6xmouse=x6ymouse=y6flag=1gotoAndPlay(2)}if(Math.abs(x-x6)+Math.abs(y-y6)<0.5){a=0flag=1}else{a=Math.atan2(y6-y,x6-x)}eval("p"+(page+1))._rotation=2*a*180/Math.PImask1._x=(x+x6)/2mask1._y=(y+y6)/2mask1._rotation=a*180/Math.PImask2._x=(x+x6)/2mask2._y=(y+y6)/2mask2._rotation=a*180/Math.PImouse2=mouse1第四帧代码:gotoAndPlay(3);下载::。
8.5 综合实例——翻书效果随着电脑与互联网的普及,在电脑上看书已经成为人们获取知识的另一种途径,但是,在电脑上看书始终找不到翻书的感觉。
下面我们就通过一个实例向用户介绍翻书效果的模拟,在整个练习中用户将逐步了解关键帧和普通帧的区别,掌握声音添加方法,Scene的插入方法,网格设置方法和按钮的制作方法等,希望这个实例能够给读者带来一点收获。
具体操作步骤如下:(1) 进入Flash操作界面,选择File→New命令,新建一个文件。
(2) 按下Ctrl+Alt+G组合键打开Grid对话框,选中Show Grid以及Snap to Grid复选框,使所有操作捕捉到网格上,然后在下面的网格高度、宽度文本框中分别输入15PX,如图8-24所示。
图8-24 设置网格(3) 首先制作书的封底,将图层1命名为“封底”,选择矩形工具在舞台中绘制一个合适大小的矩形作为封底,注意网格的锁定,并根据需要设置颜色,如图8-25所示。
(4) 为了使封底产生厚度,可以选择矩形工具在其左侧、右侧和下方绘制细长的矩形以模拟其厚度,如图8-26所示。
图8-25 绘制封底图8-26 使封底产生厚度(5) 选择矩形工具在封底上绘制一个合适大小的矩形,将其填充为灰色,然后选择箭头工具双击该矩形的轮廓线将其删除,如图8-27所示。
(6) 选择矩形工具在灰色矩形上绘制一个相同大小的矩形,将其填充为白色,同样将其轮廓线删除。
注意,白色矩形要高出一些,因为书是有厚度的,如图8-28所示。
图8-27 绘制灰色矩形图8-28 绘制白色矩形(7) 按下Ctrl+R组合键打开Import对话框,在其中选择“头像”位图文件,单击“打开”按钮将此图片导入到当前文件中,然后按下Q键选择变换工具对图片大小进行调整。
选择文本工具在图片的下方输入文字“你还记得我吗?”如图8-29所示。
(8) 按下Ctrl+A组合键将前面绘制的图形全选,再按下F8键打开Convert to Symbol 对话框,如图8-30所示,在其中Name文本框中输入“封底”,选择Graphic单选按钮,单击OK按钮将所选图形转换为图形符号。
思路:使用补间动画制作封面的翻动效果。
使用补间形状制作书页的翻动效果。
主要练习精巧的动画过程的制作。
1.新建文件,首先制作封面的翻页效果,将“图层1”命名为“封面上”,因为封面的翻页效果需要两层完成,即没翻过中线时是一层,翻过中线后是一层,所以这里取名为“封面上”,下面将有“封面下”。
在舞台中绘制封面图案,如图所示:注意矩形边线的粗细,左边的线条较粗,表示书脊,其他线条较细。
将其转换成元件,取名为“封面”。
2.使用任意变形工具,将图形中心点移动到封面的左边线的中点,要以该点作为以后形变的基准。
如图所示:在第5帧插入关键帧,使用任意变形工具将封面通过缩放、倾斜调整如图所示,设置从第1帧到第5帧的补间动画。
在第9帧插入关键帧,使用任意变形工具将封面通过缩放、倾斜调整如图所示,设置从第5帧到第9帧的补间动画。
在第13帧插入关键帧,使用任意变形工具将封面通过缩放、倾斜调整如图所示,设置从第9帧到第13帧的补间动画。
到此,封面没翻过中线的动画就制作完了,可以测试一下看看效果。
3.在图层“封面上”的下方新建一个图层,取名为“封面下”,在这一层中设置封面翻过中线后的动画,书页翻过中线后所展示的就是封面的内面。
在第14帧插入关键帧,先创建封面内面的图案,如图所示:将其转换为元件,使用任意变形工具选择封面内面,将图形的中心点移动到封面内面的右边线中点,要以该点作为以后形变的基准。
为了便于对齐,将图层“封面上”的第13帧复制,然后粘贴到第14帧上。
再回到图层“封面下”的第14帧,使用任意变形工具将封面内面通过缩放、倾斜调整到与图层“封面上“的第14帧相对的位置上,如下图所示:设置好后将图层“封面上”的第14帧删除,因为它只是为对齐起一个基准的作用。
4.在图层“封面下”的第18帧插入关键帧,同时将图层“封面上”的第9帧复制粘贴到第18帧上起基准作用。
回到图层“封面下”的第18帧,使用任意变形工具将封面内面通过缩放、倾斜调整到与图层“封面上”的第18帧相对的位置上,如下图所示:完成后,在图层“封面下”设置从第14帧到第18帧的补间动画,同时将图层“封面上”的从第14帧到第18帧一起删除。
FLASH动画————翻页效果的制作安阳市第十四中学秦长喜本节主要是通过翻页效果实例练习任意变形工具的使用方法,以及Flash的基本动画的制作方法。
希望能对同学的所帮助。
1、起动FLASHMX。
2、设置舞台尺寸:双击图中红圈内的部分,如图1,出现“文档属性”面板(舞台尺寸设置面板),如图2。
图1图2设置:尺寸为600*500,背景颜色设为黑色,其它为默认,点“确定”。
3、点“视图”――“标尺”。
并把两根标尺横杆分别拖到纵轴的100和400处,三根标尺竖杆分别拖到50,300和550处,如图3。
图34、点“插入”----“新建元件”在“名称”栏中写入图片的名称,便于记住是什么图片(在这里我写1)。
在“行为”选项中可以点选“影片剪辑”,也可以点选“图形”。
在这里我点选“图形”。
如图四。
最后点“确定”。
图四5、点“文件”-----“导入”-----“导入到舞台”,出现“导入面板”,选择你要导入的图片到舞台中,下面再对图片进行编辑。
6、如果出现如下图所示的面板,点“否”就行。
图五7、点开舞台下面的属性栏,对图片进行设置,只设置图片大小即可,安照第三步中的标尺,将图片设置成高300宽250。
如图六。
图六8、重复第4、5、6三步,把需要的图片全部导入。
9、点击场景,回到场景中,如图图7。
图710、点“窗口”----“库”,在“库”中找到名称为1的元件,并将这个图片拖入舞台中,并将图片下好放入舞台右边的由四根标尺组成的方框中。
如图8图811、点击工具栏中“任意变开工具”舞台中的图片四周出现了8个小方块,中间出现一个小园圈如图9。
图912、将图片中的小园圈拖到左边的小方框上,要于左边的小方框对齐。
13、在图层1的第40桢处右键单击,并点“插入关键桢”。
再将鼠标放在图片右边中间的小方框上,鼠标会变成双向箭头,再按下鼠标左键向左拖动图片,图片就会变的很窄很窄,再松开鼠标左键,将鼠标移到变开的图片右侧,鼠标会变成上下两个箭头,再按下鼠标左键向上拖动图片,拖到一定的程度即可。
总论—概念描述这个项目的概念是使来到我站点的人有机会用FlashMX设计一本虚拟的书,就象一本真正的书那样,不过它是摆在你的计算机桌面上的。
你可以一页一页地阅读。
注意,这个课程是面向那些对ActionScript有所了解以及知道如何在FlashMX中编码的人。
如果你只知道如何创建一个球并让它在桌面上滚动,那么请过几个月再来吧。
只是开玩笑啦。
基本上在这个课程里只有很少的技术。
在这个教程中的所有函数是经常使用的。
编码非常容易,你需要知道的只是一些基本的三角知识,比如sine(正弦)、cosec(余弦)、hypotenuse(直角三角形的斜边)。
这些对于这个教程来说就足够了。
所以,放轻松,好好享受吧。
这是一个正在进行的项目。
如果你有任何问题,请给我e-mail。
让我们开始吧。
第一部分—基本计算函数(basic calculation functions)在这个根脚本(root script)里,我们有两个基本计算函数。
你可以把它们直接拷贝到你的舞台(stage)上,因为我们将会一遍遍用到它们。
一个是getDist,另一个是getAngle。
它们对你来说很简单,是吧?老实说,我都没兴趣解释这样的东西,这些是高中数学课上该学的。
第一个函数是获得两点之间的距离。
我们需要知道这两点之间的坐标。
好了,现在你进展已经不错。
我们可以试一下更难点的。
——怎么获得两点之间的角度。
我不需要做更多解释了吧?第二部分—舞台(stage)上基本的Movie Clips在库(library)中创建4个方块符号(symbol)。
它们是你书中的不同的页面。
如果你喜欢,你可以根据需要重新设计。
我只需要提醒你一件事,就是,把参考点放在每个symbol的左下角,我们需要用它们来找到页面的位置。
在这个演示例子里,假定我们的书只有4页。
如果你想让你的书页数更多,那就请自己加一些新的check situation函数。
要确保页面的大小与书本相符。
flash翻页效果上面这个示例稍微大了一点,所以如果网速比较慢的话还请大家稍稍多等一会儿,因为幸运鸟花了五个多小时才把它做好,不看是有点可惜(是我感到可惜,呵呵)。
花了这么长的时间是因为一来幸运鸟技术还不太熟练,许多地方改动过十几次;二来在做的过程中一直在构思还要做些什么内容,希望能有创意一点。
由于这一章是Flash的进阶教程,因此幸运鸟尽量先不使用Actions编程这样高级的Flash技术。
这一章中,我们主要学习如何运用简单的Flash基本操作来实现比较逼真的各类效果,以上的书本翻页效果就是典型的例子,在这个示例中,用到的技术只不过是最简单的形体渐变和运动渐变,但我们看到最后生成的效果还是比较真实的。
好了,下面我就把制作的方法给大家详细介绍一下。
首先,新建一个文件,把背景色设为黑色。
接着来制作书本的封面和封底,这个大家都会做,就是简单的矩形,我就不多说了。
如果想让封面和封底看上去有点厚度,可以在封面的上边和右边加上两条颜色稍有不同的细线就行了。
对封底来说,细线应该在上边和左边。
另外我们注意到封面和封底的内侧(封三)一样,封底和封面的内侧(封二)一样,所以只需要做成一个图符,我们在这里把封底做成图符起名为frontcoverinside,也就是封二,需要用到封三的时候只需水平翻转即可。
不过这样做出来的只是非常简易的封皮,我们还可以给封皮上加些图案和文字,注意添加图案文字最好新建几个层放置,这样便于修改。
为了实现流畅的翻页(变形)效果,我们需要把加工过的封面和封底分别单独做成图符front cover和back cover,见下图,在这里要说明的是请大家注意十字定位符的位置,因为它将是对象变形的中心点。
现在按Ctrl-F8新建一个电影片断类图符page flip,我们将把所有的翻页效果都做在这个图符中。
新建若干层备用,这一次我们把层的顺序自下而上排列,最下面的层是第1层。
我们先简要介绍一下层的分布关系。
Flash翻页介绍1.1 组件简介FFlipPage(Flash翻页组件)是一种具有很强的交互性的书本翻页效果的组件。
其在功能、表现力及翻动手感上面都是目前国内外同类效果中最出色的一款。
目前版本能够实现的功能包括自动翻页、多页联翻、不规则页面形状、透明页面等等。
而且使用起来也并不复杂,只需设置相应的参数,或编写简单的事件函数即可。
Flash翻页组件目前可运用的领域包括电子杂志、在线互动演示、产品广告、电子相册等等,具有很大的市场应用面,可满足多种不同的需求。
FFlipPage 3.0版采用FCL组件模型开发,具有很强的封装性和可扩展性。
但由于FCL组件模型基于ActionScript 1.0设计,对ActionScript 2.0及Flash Player 7格式无法兼容。
因此本组件只能使用在ActionScript 1.0及Flash Player 6环境下(以此格式导出swf即可,并非要求源文件用Flash MX进行编辑,该格式swf也可在Flash Player 7.0中正常播放)。
Flash翻页组件目前已有众多成功案例,其中较出色的几个案例如下:九天音乐网电子音乐杂志:/digibook/index.aspNewWebPick电子杂志创刊号:/news/other/2004/2174.asp江苏中电变压器广告:/intropage.htm《倾城》李宝斌首部数字文集:/blog/blog/?blogID=114上海国际数字内容展电子海报:/case/d/1.2 组件参数说明组件参数为在组件参数面板中可设置的属性,这些参数在组件显示之前已被接受并初始化。
通过对组件参数的设置,可相应改变组件的表现形式和效果。
具体参数说明如下表所示:1.3 事件函数说明事件函数可在组件参数面板中设置(event参数),也可在Action中通过:[翻页组件对象名称].[事件名称] = [事件调用函数或事件调用函数路径]来指定。
Flash怎么制作纸张翻动的效果?flash翻页动画的制作⽅法经常使⽤flash制作动画,该怎么制作⼀个纸张翻页效果呢?下⾯我们就来看看详细的教程。
adobe Flash CS6简体中⽂版(专业动画软件) v12.0.0.481 绿⾊精简版
类型:动画制作
⼤⼩:176MB
语⾔:简体中⽂
时间:2018-11-12
查看详情
1、打开Flash CS6软件,新建⼀个Flash⽂档。
2、使⽤矩形⼯具绘制⼀个长⽅形,并调整如图所⽰
3、延长时间轴到第70帧
4、在第30帧插⼊关键帧
5、在第30帧调整形状如图
6、选择中间帧,创建补间形状动画
7、这样就得到了纸张翻起的动画效果了
以上就是flash翻页动画的制作⽅法,希望⼤家喜欢,请继续关注。
软翻书效果------祖国风光神龙编写1、打开flash8.0软件,文档属性默认。
点文件-保存,另存为《软翻书—祖国风光》。
2、文件-导入到库,一张背景图,尺寸为550*400,再导入23张240*320的图片(你想做出很多页的效果,则需导入多张图片,多少由你来定),在库中将图片重命名并压缩。
(名称为图1、图2......图12、图011、图012、……图021,背景),文件-导入到库,导入一首MP3音乐。
3、插入----新建元件,名称为图1,类型为图形。
在图层1第1帧将图1位图拖入场景,尺寸为240*320,打开对齐面板,相对于舞台,水平中齐,垂直中齐。
4、在库中图1元件上点右键,选择直接复制,名称为图2,确定。
双击库中的图2元件,进入图2元件编辑场景,在属性中点交换,交换图2位图。
(注意尺寸为240*320)5、按上述方法做好图3元件、图4元件……图12元件,图011元件----图021元件。
6、双击图层一,改名为:背景。
点选背景图层的第1 帧,把位图背景拖进来,550*400,全居中对齐,此图层延长到820 帧(按你导入的音乐长短来定,我的音乐只有820帧)保存。
7、插入图层二,改名为:定位框。
点选此图层的第1 帧,点选矩形工具,笔触为红色,填充无,宽480,高320全居中。
此图层延长到820 帧,上锁,保存。
8、插入图层三,改名为:中缝。
点选此图层的第1 帧,点选矩形工具,笔触无,填充为线性。
打开颜色面板,中间添加一个色码:从左至右的色码依次为:FFFFFF, BBBBBB, FFFFFF,在场景中画一矩形,宽15,高320全居中。
此图层延长到820 帧,上锁,保存。
9、插入图层四,改名为:底图。
点选此图层的第1 帧,把图形元件图1 拖进来,X 轴396,Y 轴200。
第二帧插入关键帧,交换图2,在70、140、210、280、350、420、490、560、630、700帧插入关键帧。
Flash翻书效果研究——概念描述这个项目的概念是使来到我站点的人有机会用FlashMX设计一本虚拟的书,就象一本真正的书那样,不过它是摆在你的计算机桌面上的。
你可以一页一页地阅读。
注意,这个课程是面向那些对ActionScript有所了解以及知道如何在FlashMX中编码的人。
如果你只知道如何创建一个球并让它在桌面上滚动,那么请过几个月再来吧。
只是开玩笑啦。
基本上在这个课程里只有很少的技术。
在这个教程中的所有函数是经常使用的。
编码非常容易,你需要知道的只是一些基本的三角知识,比如 sine(正弦)、cosec(余弦)、hypotenuse(直角三角形的斜边)。
这些对于这个教程来说就足够了。
所以,放轻松,好好享受吧。
这是一个正在进行的项目。
如果你有任何问题,请给我e-mail。
让我们开始吧。
第一部分——基本计算函数(basic calculation functions)在这个根脚本(root script)里,我们有两个基本计算函数。
你可以把它们直接拷贝到你的舞台(stage)上,因为我们将会一遍遍用到它们。
一个是getDist,另一个是getAngle。
它们对你来说很简单,是吧?老实说,我都没兴趣解释这样的东西,这些是高中数学课上该学的。
第一个函数是获得两点之间的距离。
我们需要知道这两点之间的坐标。
// Get the distance between two points. (得到两点之间的距离)function getDist(px1, py1, px2, py2){x = px2 - px1;y = py2 - py1;hyp = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));return hyp;}好了,现在你进展已经不错。
我们可以试一下更难点的。
——怎么获得两点之间的角度。
// Get the angle between two points. (得到两点之间的角度)function getAngle(px1, py1, px2, py2){x = px2 - px1;y = py2 - py1;hyp = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));cos = x / hyp;rad = Math.acos(cos);// Ask your math teacher if you don’t understand this one.(如果你看不懂,就去问你的数学老师)deg = 180/(Math.PI / rad);// Yes, we do got one angle, rad, by 'Math.acos(cos)', but in radians.(是的,我们通过cos得到了一个角度“rad”,不过是以弧度为单位的)// Therefore, we need do one more step to transfer it to normal angle we need.(因此,我们需要再进一步把它转换成我们所需要的标准的角度)if(y <0){deg = -deg;}else if((y == 0) && (x <0)){deg = 180;}return deg;}我不需要做更多解释了吧?第二部分——舞台(stage)上基本的Movie Clips在库(library)中创建4个方块符号(symbol)。
它们是你书中的不同的页面。
如果你喜欢,你可以根据需要重新设计。
我只需要提醒你一件事,就是,把参考点放在每个symbol的左下角,我们需要用它们来找到页面的位置。
在这个演示例子里,假定我们的书只有4页。
如果你想让你的书页数更多,那就请自己加一些新的check situation函数。
要确保页面的大小与书本相符。
把它们拖到你的舞台上,确保它们在不同的层面。
按照这个顺序:第4页,第1页,第2页,第3页。
第3页应该在最上面一层。
确保将这些movie clip如下图所示放置。
第3页的具体位置没什么要紧,因为我们将会把它做动态调整。
2、创建一个符号(symbol)圆,并切割下来(cut)。
我们需要在移动鼠标的时候用它来检查不同的位置。
3、创建一个包含一个点的symbol,你可以用任何风格的点,这取决于你。
把“点”这个symbol在舞台上放5次,分别命名为D0,D1,D2,D3和D4。
我需要提醒你的是,不要在movie clip Page1和Page4的区域外放置任何movie clip。
4、我们还会需要一些别的符号(symbol),比如阴影或别的什么,我们可以迟一点再创建它们,别担心。
现在再数一次,你库(library)里的符号(symbol)有:s_circle, s_dot, s_page1, s_page2, s_page3, s_page4你舞台(stage)上的符号(symbol)有:checkcircle, D0, D1, D2, D3, D4, page1, page2, page3, page4把舞台(stage)上所有的movie clip选中,把它们转换(convert)为一个符号(symbol) s_stage。
把s_stage拖到舞台上,把它命名为movie clip“Stage”。
确保movie clip D0位于movie clip“Stage”的中心。
确保movie clip “Stage”的大小是Page 1 加 Page 4。
这就是为什么当你在转换符号s_stage的时候不要在区域外面放置任何movie clip的原因。
基本上,建立movie clip D0到D4 的目的是为了清楚找到参考点。
当我们完成这个教程的时候,你可以把这些movie clip的透明度设置为0。
我这里就是这么做的。
我们可以在下面的课程中开始编码了。
第三部分——初始化如下图所示初始化所有变量。
// Set the book's width and height. (设置书的宽和高)stageW = _root.stage._width;stageH = _root.stage._height;// Set reference points' position (设置参考点的位置)pax=_root.stage.d0._x - stageW/2;pay=_root.stage.d0._y - stageH/2;pbx=_root.stage.d0._x - stageW/2;pby=_root.stage.d0._y + stageH/2;pcx=_root.stage.d0._x;pcy=_root.stage.d0._y - stageH/2;pdx=_root.stage.d0._x;pdy=_root.stage.d0._y + stageH/2;pex=_root.stage.d0._x + stageW/2;pey=_root.stage.d0._y - stageH/2;pfx=_root.stage.d0._x + stageW/2;pfy=_root.stage.d0._y + stageH/2;_root.stage.page3._alpha = 0;// We need show movie clip Page2 at the beginning, so hide Page3 first.(我们需要在开始的时候显示movie clip Page2,所以先隐藏Page 3)把这部分代码放入你的第一个根脚本(root frame script)。
——怎么找到第一个点?第一个点,D1,是你鼠标的位置。
(说实在话,在D1的位置上有几种情况。
假设你的鼠标离开了movie clip圆,会发生什么?你可以迟一些时候再完成这部分。
我已经做好了。
这是留给你的作业。
)在给D1的位置赋值之前,我们首先需要一个主函数。
// The main function. (主函数)function startSlip(){getD1();// This function is the one what we need discuss in this course. (这个函数是我们要在这一课中讨论的)getD234();DrewMask();// We will add these two functions later. (我们将在以后添加这两个函数)}现在你可以检查如何设置D1了。
// Get the first point, D1's position. (得到第一点,D1的位置)function getD1(){if (_root.stage.checkcircle.hittest(_xmouse, _ymouse, true)) {_root.stage.d1._x = _root.stage._xmouse;_root.stage.d1._y = _root.stage._ymouse;}else{// Finish this part yourself. Basically, I have 3 more functions to set the D1's position. (自己完成这部分。
基本上,我还要用三个函数来设置 D1的位置)}}提示:你的鼠标要去四个区域,在每个区域里,D1的位置是不同的。
在这个例子里,我们只讨论区域A。
我会把所有的代码放在最终文件里,你如果感兴趣的话,可以稍后查看。
因为要按住鼠标拖动页面,你需要移动的第一个点是在页面右下角的点。
很好,我们还有三个点要做,耐心一点。
第四部分——得到所有其他三个点:同上面一样,你有几种情况要考虑。
第一种情况比较简单。
第3点位于边EF上。
在这种情况下,点D4与点D3位于同一位置。
另一种情况比较难一点。
点D3位于边CE上。
你需要计算D3和D4。
或者:这里,我们需要一些三角函数来获得所有的数值。
嗨,一定有更有效的方式来编码,我真是没兴趣再做一遍。
:(我只需要提醒你一件事:Flash的坐标系开始于左上角,逐渐向下扩展到右边。
对于一个数学家来说,求得所有的点很可能只需要几分钟,但是我却花了整整一个上午。
如果你想做,你可以自己做,或者只需拷贝这些代码。
// Using point D1 and Point F find all the other points. (用D1和F来找到其他的点)function getD234(){len = _root._root.getDist(pfx, pfy, _root.stage.d1._x,_root.stage.d1._y);len1 = len/2;len2 = (pfx - _root.stage.d1._x)/2;_root.stage.d2._x = pfx - len1*len1/len2;_root.stage.d2._y = pfy;len2 = (pfy - _root.stage.d1._y)/2;len3 = len1*len1/len2;_root.stage.d3._x = pfx;_root.stage.d3._y = pfy - len3;// Check out weather point D4 is at the same location of point D3. (检查D4是否和D3在同一个位置)if (_root.stage.d3._y < pey){ptx = pex - (pfx - _root.stage.d2._x)*(pey - _root.stage.d3._y)/len3; pty = pey;len = _root.getDist(_root.stage.d3._x, _root.stage.d3._y, ptx, pty); len1 = (pex - ptx)*(pey - _root.stage.d3._y)/len;len2 = len1*len1/(pex - ptx);_root.stage.d4._x = pex - len2*2;len2 = len1*len1/(pey - _root.stage.d3._y);_root.stage.d4._y = pey - len2*2;_root.stage.d3._x = ptx;_root.stage.d3._y = pty;}else{_root.stage.d4._x = _root.stage.d3._x;_root.stage.d4._y = _root.stage.d3._y;}}哇,现在我们快完成了,继续!第五部分:——绘制mask shape你只需要知道两个特别的点。