外部媒体的使用

新手零起点学网页设计,开始,前页,后页,结束,新手零起点学网页设计,第1,8,章,外部媒体的使用,18.1,学习概述,Flash,不仅有强大的矢量绘图功能，而且还支持多种格式的外部媒体，比如图片、声音和视频。丰富的多媒体资源的支持，增加了,Flash,动画素材的来源，比如可以扫描图片，网上下载等等。本章通过制作多功能网上相册学习在,Flash,中使用外部媒体的知识，通过外部媒体的使用使,Flash,动画的内容更加丰富。,学习目的：,理解导入外部媒体的作用,掌握图片的导入以及使用方法,掌握声音的导入以及使用方法,掌握视频的导入以及使用方法,本章要点：,图片导入以及操作,声音的导入以及操作,视频的导入以及操作,18.2,工作应用实例多功能网上相册,前面的章节中学习了制作网上相册，当时是使用了图片和链接来完成，下面使用,Flash,来制作可以任意上下翻页和自动播放，并且还有音乐的多功能相册，比原来的相册酷多了。,本实例效果如图,18-1,所示。,“多功能网上相册”的制作过程如下：,（,1,）启动,Flash,中文版，新建文件，在主菜单中执行“修改”,/,“文档”命令或按组合键【,CTRL+J,】，,打开文件属性对话框，将宽度设置为,640,，高度设置为,480,，背景色设置为白色。,图,18-1,多功能网上相册效果图,（,2,）新建图形“透明边框”，先使用矩形绘制一个无边框的矩形填充，然后在工具箱中双击矩形工具，弹出矩形边角参数设置，设置边角半径为,10,，如图,18-2,所示。在刚才所绘制的矩形填充内部绘制圆角矩形线条，这样就把矩形填充分成两部分，使用选择工具选中圆角矩形内的填充，如图,18-3,所示。,图,18-2,设置圆角矩形参数,图,18-3,在舞台中画球,删除所选填充，并删除所有边框线条，得到如图,18-4,所示的相册边框。,图,18-4,相册边框,图,18-5,导航器,（,3,）按组合键【,Ctrl+F8,】,新建影片剪辑“相册导航器”，使用绘图工具绘制,如图,18-5,所示的导航器外观。,（,4,）按组合键【,Ctrl+F8,】,新建按钮“上一张”，如图,18-6,所示。,（,5,）按组合键【,Ctrl+F8,】,新建按钮“下一张”，如图,18-7,所示。,图,18-7,“下一张”按钮,图,18-6,“上一张”按钮,（,6,）按组合键【,Ctrl+F8,】,新建按钮“自动播放”，如图,18-8,所示。,（,7,）按组合键【,Ctrl+F8,】,新建按钮“暂停播放”，如图,18-9,所示。,图,18-8,“自动播放”按钮,图,18-9,“暂停播放”按钮,图,18-,10,“拖动导航器”按钮,（,8,）按组合键【,Ctrl+F8,】,新建按钮“拖动导航器”，如图,18-10,所示。,（,9,）按组合键【,Ctrl+F8,】,新建影片剪辑“上一张按钮组合”，进入影片剪辑进行编辑，更改默认图层名称为“按钮有效”，将按钮“上一张”从图库中拖到该图层第,1,帧。新建图层“按钮无效”，分别在该层第,1,帧和第,2,帧按快捷键【,F7,】,插入空白关键帧，在第,2,帧绘制按钮无效的图形，如图,18-11,所示。新建图层“动作”，分别在该层第,1,帧和第,2,帧按快捷键【,F7,】,插入空白关键帧，并分别选中第,1,帧和第,2,帧，按【,F9,】,在动作面板代码窗口中输入“,stop();,”。,制作完成后，该影片剪辑的时间轴如图,18-12,所示。,18-12,影片剪辑时间轴,图,18-11,按钮无效状态图,（,10,）按组合键【,Ctrl+F8,】,新建影片剪辑“下一张按钮组合”，进入影片剪辑进行编辑，更改默认图层名称为“按钮有效”，将按钮“下一张”从图库中拖到该图层第,1,帧。新建图层“按钮无效”，分别在该层第,1,帧和第,2,帧按快捷键【,F7,】,插入空白关键帧，在第,2,帧绘制按钮无效的图形，如图,18-13,所示。新建图层“动作”，分别在该层第,1,帧和第,2,帧按快捷键【,F7,】,插入空白关键帧，并分别选中第,1,帧和第,2,帧，按快捷键【,F9,】,在动作面板代码窗口中输入“,stop();,”。,制作完成后，该影片剪辑的时间轴如图,18-14,所示。,图,18-13,按钮无效状态图,18-14,影片剪辑时间轴,（,11,）按组合键【,Ctrl+F8,】,新建影片剪辑“播放暂停按钮组合”，进入影片剪辑并进行编辑，更改默认图层名称为“播放按钮”，将“自动播放”按钮从图库中拖到该图层第,1,帧。新建图层“暂停按钮”，分别在该层第,1,帧和第,2,帧按快捷键【,F7,】,插入空白关键帧，在第,2,帧将“暂停播放按钮”拖到舞台（可使用洋葱皮工具进行对齐），如图,18-15,所示。新建图层“动作”，分别在该层第,1,帧和第,2,帧按快捷键【,F7,】,插入空白关键帧，并分别选中第,1,帧和第,2,帧，按快捷键【,F9,】,在动作面板代码窗口中输入“,stop();,”。,制作完成后，该影片剪辑的时间轴如图,18-16,所示。,图,18-15,“暂停”按钮状态,18-16,影片剪辑时间轴,图,18-17,编辑“相册导航器”,（,12,）按组合键【,Ctrl+L,】,打开库面板，在库中双击“相册导航器”进行编辑，分别把影片剪辑“上一张按钮组合”、“下一张按钮组合”、“播放暂停按钮组合”和“拖动导航器”按钮拖到组件舞台中，如图,18-17,所示。,新建图层“动作”，选中第,1,帧按快捷键【,F9,】,调出动作面板，在代码窗口中输入“相册”需要的动作语句：,function updateFrame (inc) ,/,设置状态条,newFrame = _root._currentFrame + inc;,_root.gotoAndStop(newFrame);,updateStatus();,if (_root._currentFrame = 1) ,prevBtn.gotoAndStop(2);, else ,prevBtn.gotoAndStop(1);,if (_root._currentFrame = _root._totalFrames) ,nextBtn.gotoAndStop(2);, else ,nextBtn.gotoAndStop(1);,function updateStatus () ,_root.statusField = _root._currentFrame + of + _root._totalFrames;,function autoplayInit () ,startTime = getTimer();,hideControls();,updateStatus();,function autoplay () ,if (autoplayStatus != 0) ,/,得到当前时间和总时间,curTime = getTimer();,elapsedTime = curTime-startTime;,/,更新时间指示器,indicatorFrame = int(4/(delay/(elapsedTime/1000);,indicator.gotoAndStop(indicatorFrame+1);,/,如果延迟时间到自动跳到下一张,if (elapsedTime = (delay*1000) ,if (_root._currentframe = _root._totalframes) ,_root.gotoAndStop(1);, else ,_root.nextFrame();,autoplayInit();,function hideControls () ,nextBtn.gotoAndStop(2);,prevBtn.gotoAndStop(2);,updateFrame();,autoplayStatus = 0;,（,13,）回到主场景，更改默认图层为“相片”，依次执行“文件”,/,“导入”,/,“导入到舞台”命令，会弹出导入文件对话框，如图,18-18,所示。,图,18-18,导入对话框,使用鼠标选择合适的图片后，单击“打开”按钮，图片就会被导入到舞台中去。在第,2,帧插入关键帧，用类似的方法导入另外一张图片。这里可以根据需要导入多张图片。,（,14,）新建图层“边框”，按组合键【,Ctrl+L,】,从库中的把图形“透明边框”拖到舞台中，把它选中，在属性栏中的颜色参数中设置,alpha,为,50%,，效果如图,18-19,所示。,图,18-19,设置相册边框,（,15,）新建图层“导航器”，按组合键【,Ctrl+L,】,打开库面板，把影片剪辑“相册导航器”拖到舞台中。双击“相册导航器”，进入组件进行编辑。双击组件中的影片剪辑“上一张按钮组合”，进入后选择“上一张”按钮，按快捷键【,F9,】,调出动作面板，在其中输入：,on (release, keyPress ) ,_parent.updateFrame(-1);,on (keyPress ) ,_root.gotoAndStop(1);,_parent.updateFrame();,作用是鼠标单击和按“左方向”键时显示上一张照片，按“上方向”键回到第一张照片。,回到“相册导航器”，双击组件中的影片剪辑“下一张按钮组合”，进入后选择,“下一张”按钮，按快捷键【,F9,】,调出动作面板，在其中输入：,on (release, keyPress ) ,_parent.updateFrame(1);,on (keyPress ) ,_root.gotoAndStop(_root._totalFrames);,_parent.updateFrame();,作用是鼠标单击和按“右方向”键时显示下一张照片，按“下方向”键时跳到最后一张照片。,回到“相册导航器”，双击组件中的影片剪辑“播放暂停按钮组合”，进入后选择“播放按钮”，按快捷键【,F9,】,调出动作面板，在其中输入：,on (release) ,_parent.autoplayInit();,_parent.autoplayStatus = 1;,nextFrame();,作用是鼠标单击时自动播放。,在第,2,帧选择“暂停播放”按钮，按快捷键【,F9,】,调出动作面板，在其中输入：,on (release) ,_parent.updateFrame();,_parent.autoplayStatus = 0;,_parent.indicator.gotoAndStop(1);,prevFrame();,作用是停止自动播放。,回到“相册导航器”，选择“拖动导航器”按钮，按快捷键【,F9,】,调出动作面板，在其中输入：,on (press) ,startDrag(this, false, 0, 23, 495, 407);,on (release) ,stopDrag();,作用是实现导航器的拖放。,回到主场景，在“相册导航器”所在的图层，使用文本工具插入一个动态文本，如图,18-20,所示，变量命名为,statusField,，,如图,18-21,所示。,图,18-20,添加动态文本,图,18-21,设置文本变量,（16）新建图层“动作”，选中第1帧，按快捷键【,F9】,调出动作面板，在其中输入“,stop();”。,（17）,新建图层“背景音乐”，选中第1帧，依次执行“文件”/“导入”/“导入舞台”命令，弹出导入文件对话框，选择一个*.,mp3,文件，如图,18-22,所示。,在属性面板中的“声音”列表中选择刚导入的音乐，设置“效果”为淡入，设置“同步”为事件，播放方式为“循环”，如图,18-23,所示。,图,18-22,导入背景音乐,图,18-23,声音设置,（,18,）制作完成后，时间轴如图,18-24,所示。按组合键【,Ctrl+Enter,】,测试，就看到多功能相册的效果了。,（,19,）依次执行“文件”,/,“发布预览”,/,“默认”命令，快捷键为【,F12,】，,在浏览器中预览效果，如图,18-25,所示。,图,18-24,影片时间轴,图,18-25,浏览器中预览效果,18.3,知识要点,范例中通过,Flash,把外部的图片、声音集成到了一个动态的多功能相册中，大大增加了实用性和观赏性。下面来探讨一下外部媒体的相关问题。,图,18-26,库中的图片,图片的导入分为“导入到舞台”和“导入到库”两种方式。依次执行“文件”,/,“导入”,/,“导入到舞台”命令会把图片导入到当前舞台，依次执行“文件”,/,“导入”,/,“导入到库”命令会把图片导入到库中。在库中图片显示为图,18-26,所示。,实际上所有图片导入后都会存储到库中，所以即使采用“导入到舞台”方式也会在库的组件列表中找到。,Flash,支持目前大多数流行的格式，主要有,Post Script (*.ai,*.pdf,*.eps),、,Freehand,（,*.fh*,*.ft*,）、,PNG file,（,*.png,）、,Adobe Ilustratro,（,*.ai,*.eps,）、,AutoCAD DXF,（,*.dxf,）、,位图（,*.,bmp,*.dib,）、,增强图元文件（,*.,emf,）、,gif,图像（,*.,gif,）、,jpeg,图像（,*.,jpg,）,Window,图元文件（,*.,wmf,）。,18.3.1,图片的导入以及操作,18.3.2,声音的导入以及操作,声音的导入方法与导入图片类似，通过依次执行“文件”,/,“导入”,/,“导入到舞台”命令或者依次执行“文件”,/,“导入”,/,“导入到库”命令。说明声音在导入后同样被存储到库中。声音被导入到库中存储状态如图,18-27,所示。,图,18-,27,声音在库中,预览图中出现声音的波形，单击“ ”按钮进行播放试听和停止播放。,Flash,支持流行的音乐格式，有,wav,声音（,*.,wav,），,有,mp3,声音（,*.,mp3,）。,wav,文件是一种受到广泛支持的文件格式，但是文件占的空间比较大，所以在,Flash,中不推荐使用较大的,wav,文件。,MP3,是,MPEG Layer3,的缩写，它是一种超级声音文件的压缩方法，是目前最流行的音乐格式，具有音质好文件小的优点，它的压缩比可以达到,wav,的,10,倍。所以非常适合在,Flash,动画中使用。,声音导入到库中后，可以随时使用。使用方法与其它组件相似。主要有两种方法，一种是在关键帧的属性面板中“声音”参数的声音列表中进行选择，二是直接拖动。,Flash,中声音组件必须拖到关键帧上，每一个关键帧只能有一个声音，如果要使用多个声音就需要插入多个关键帧。,18.3.3,视频的导入以及操作,视频的导入与声音和图片类似，声音的导入方法与导入图片类似，通过依次执行“文件”,/,“导入”,/,“导入到舞台”命令或者执行“文件”,/,“导入”,/,“导入到库”命令。,视频在导入后也被存储到库中。视频被导入到库中存储状态，如图,18-28,所示。,图,18-28,视频在库中,视频素材的来源比较多，个人可以通过,DV,自行拍摄，专业制作可以使用专用设备进行拍摄和编辑。但是由于网络带宽和视频文件太庞大的缘故，在网络上传输视频文件要消耗大量的带宽和时间，所以在网页中使用较大的视频应该慎重。,Flash,中支持大多流行的视频格式，有,QuickTime,影片（,*.,mov,），,Windows,视频（,*.,avi,），,MPEG,影片（,*.,mpeg,），,数字视频（,*.,dv,*.dvi,），,Windows Media,（,*.asf,*.wmv,），,Macromedia Flash,视频（,*.,flv,）。,其中,avi,和,mpeg,是最常见的格式。,18.4,举一反三,通过给,Flash,动画添加多媒体元素，动画的表现力就增强了，特别是在一些,f,lash,制作网站宣传，广告片时外部图片，音效是必不可少的。实际工作中经常会用到外部媒体，下面是一些常见的应用技巧，音效按钮和广告宣传。,18.4.1,音效按钮,在,Flash,中，声音可以用在时间轴的关键帧上。那声音能否加到按钮中呢，当然能，现在就来制作一个有声音的按钮。,制作一个带有音效的按钮，而且在“指针经过”和“按下”状态有不同的声音。按组合键【,Ctrl+F8,】,新建按钮，进入组件进行编辑，新建图层“外形”，在“弹起”状态中制作如图,18-29,所示的图形，在“指针经过”状态中制作如图,18-30,所示的图形。,在“按下”状态制作如图,18-31,所示的图形，在“单击”状态中绘制如图,18-32,所示的图形。,图,18-30,“指针经过”状态,图,18-29,“弹起”状态,图,18-31,“按下”状态,图,18-32,“单击”范围,分别导入“指针经过”状态和“按下”状态需要声音文件“,overSound.wav,”,和“,downSound.wav,”。,新建图层“音效”，分别在“指针经过”和“按下”帧。按快捷键【,F7,】,插入空白关键帧，然后分别在两个关键帧的属性栏“声音”属性中选择“,overSound.wav,”,和“,downSound.wav,”。,制作完成后按钮的时间轴如图,18-33,所示。,图,18-33,“音效”按钮时间轴,18.4.2,广告宣传片,在网页中添加具有动感和交互的,Flash,动画是一个非常好的宣传方式。比较常见的方式是各种产品图片滚动展示，并且伴随着平和的背景音乐，到鼠标移动到某一个产品后动画会暂停，鼠标会变成手形，单击后会跳转到相关的页面。,下面来具体制作一个广告宣传片。,新建一个600120，背景为白色的影片。,按【,Ctrl+R】,分别事先导入的产品，并将各个产品图片对齐，如图,18-34,所示。,图,18-34,导入产品图片,提示：在调整对齐的时候使用对齐面板组合键【,Ctrl+K,】,可以得到非常好的效果。,选择产品图片，按快捷键【,F8,】,将其转换成按钮元件，选择按钮，按快捷键【,F9,】,调出动作面板，在其中输入语句：,/,当鼠标移到按钮上时使影片停止播放,on(rollOver),_root.stop();,/,当鼠标在按钮上按下并释放后打开链接的网页,on(release),/,产品广告所链接的网页，可以根据实际情况更改,getURL(,_blank);,/,当鼠标移出按钮时使影片继续播放,on(rollOut),_root.play(),然后按照同样的办法处理所有产品图片，动作语句只需要将要链接的网页地址更改就可以了。,选中所有的按钮元件，按快捷键【,F8,】,将所有按钮转换成一个大的影片剪辑元件。最好让所有产品排列起来的长度超过影片的宽度，这样才有滚动的必要，当然一般来说，这种滚动广告都适合比较多的产品。在第,1,帧调整总的影片剪辑到影片一侧，在第,120,帧插入关键帧，调整总的影片剪辑到影片另一侧。设置从第,1,帧到第,120,帧的,Motion,动画。,图,18-35,制作完成后的时间轴和场景,按组合键【,Ctrl+R,】,导入背景音乐。新建图层，将导入的背景音乐从库中拖到新图层中。,制作完成后时间轴和场景如图,18-35,所示。,按快捷键【,F12,】,在浏览器中预览效果如图,18-36,所示。,图,18-36,滚动广告效果,18.4.3,技巧总结,通过上面的实例总结出如下技巧：,（,1,）充分使用多媒体元素（图片和声音）,（,2,）通过,Action,来实现交互,（,3,）,Flash,动画插入网页后不能像图片一样直接添加链接，必须在动画内部使,用,getURL,语句来添加链接。,18.5,习题与上机练习,习 题,【选择题】,（,1,）下面哪种说法是正确的（）。,A,）,导入图片后，会自动存储到库中，所以图片与图形组件是一样的,B,）,外部图片只要,Flash,支持，既可以是位图，也可以是矢量图,C,）,外部图片只能是矢量图,D,）,外部图片只能是位图,（,2,）,Flash,调出混色器面板的快捷键是（）。,A,）,F9B,）,Ctrl+F9 C,）,Shift+F9 D,）,Alt+F9,（,3,）,Flash,分离命令的组合键是（）。,A,）,Ctrl+F B,）,Ctrl+L C,）,Ctrl+B D,）,Ctrl+X,（4）,Flash,中支持外部外部媒体不包括（）。,A,）,图片,B,）,声音,C,）,视频,D,）,OLE,对象,【填空题】,（,1,）,Flash,支持的矢量图格式有（）。,（,2,）,Flash,支持的声音格式有（）。,（,3,）,Flash,支持的视频格式有（）。,（,4,）编辑导入的位图图片时，必须先（）。,【简答题】,（,1,）,Flash,支持哪些格式多媒体？,（,2,）简述矢量图的优缺点？,上机实战,（,1,）制作多功能网上相册？,（,2,）制作一个有声音的导航按钮？,