炫出自我打造超酷e名片 依恩多媒体工作室 2001年 31期 #1e名片碟构思及规划 　　首先，你应该了解亲友们想要知道自己的哪些个人信息：我的简介、成长历程、我的家庭、个人影集、个人网上主页、电子信箱地址……等等。整理好主要内容后，就该策划软件的表现形式了。 　　我的e名片可以这样构思：首先，在运动的星空（这些网上都有素材www.contechcn.com）中，一段漂亮的视频动画片头--我的e名片后，程序会自动进入个人简介主界面。主界面上的正文内容直接是我的简介。为了便于朋友们浏览时无论怎样兜圈子，都会在我们规定的圈圈内周转，不至于转得晕头转向，找不到边际。成长历程、我的家庭、个人影集、个人网上主页、电子信箱地址几项都设计在主界面上便于交互浏览。至于表现形式嘛，因为个人影集最为经典了，可以让个人影集的每张相片像电影一样一张张放映，而且背景的星空星光灿烂。这样，具体软件结构规划就定下来了（如^31020201a^）。 　　好的，现在我们就开始制作我们的得意之创作吧。 　　首先，在制作软件的开始时，在“我的电脑”D盘中新建一个名为“我的e名片”的文件夹，将“我的简历”、“成长历程”、“我的家庭”、“个人影集”、“个人网上主页”、“电子信箱地址”各项内容所需的多媒体素材一一准备好，并存放在“名片碟”的文件夹中，以便于在后面的工作中直接调用。素材应包括：文本（个人信息文字介绍啦）、图片（星空背景、相片等）、视频动画、音乐等。 　　1.文本文件的准备：在“写字板”程序中，分别将“我的简历”、“成长历程”、“我的家庭”、“个人影集”、“个人网上主页”、“电子信箱地址”正文内容一一打出后并另存为“.txt”的纯文本文件。 　　2.图片素材的准备：在photoshop程序中分别将从网上下载的星空背景、个人影集中精选的相片等图片扫描或制作成512×384（单位：像素）大小的图片后，进行保存。 　　3.视频动画与音乐的准备：音乐选择较简单，可以直接用电脑C:\Windows\Media中的Media音乐或从网上（www.contechcn.com）下载现有的“.wav”格式的音乐文件。视频动画素材需要制作，以下就是制作“我的e 名片”软件素材准备较困难的、也是最重要的部分。 　　 现在我们首先要制作一个炫的背景，而且这部分是制作的重点，不可忽视，因为背景制作的好坏是衡量名片碟档次的高低。在这里我们选择的是一个很神秘的深蓝色星空图片做背景，然后让一些小星星在其中不停地闪烁，幽静而深远，富有动感和节奏。通过这个实例的学习，我们对用Flash制作一些简单的动画也会有一定的了解。OK，废话少说，Let＇s go！ 　　#1新建编辑窗口 　　1.打开Flash 5 应用程序。选择主菜单中的Edit→prefereuces命令，弹出Flash 5的属性编辑对话框，勾选Flash 4 Selection Style和Flash 4 Frame Drawing，然后按“确定”。 　　2.在Photoshop中处理一个512×384的星空背景，将“我的简历”、“……”几块内容放在一个界面，将其设计成按钮。界面做好后，回到Flash程序中，使用主菜单File→Import命令（或采用快捷键“Ctrl+R”）将在Photoshop中已做好的主界面“星空背景”图片导入到Flash 5中。 　　3.选择主菜单Windows→Library命令（或采用快捷键“Ctrl+L”）打开图库面板。 　　4.点击刚才导入的图片，然后选择主菜单Modify→Break Apart命令（或采用快捷键“Ctrl+B”），将图片由位图变换成由各个像素组成的图形（见^31020201g^1-1），以便于下一步做动画。在此，做一次保存工作，选择主菜单File→Save as命令，取名“漫天星光”。 　　#1 划分可视区域 　　5.选择左边工具栏（见图1-2）（^31020201b^）中的“黑色箭头”，在场景中按住左键拖拉，选取不需要做动画的部分，按键盘的“Delete”将其删除。这一步可重要哦，假如不删除这些部分，我们制作的软件界面就会和Flash动画相重合，会把主界面上所有内容遮住，使人们看到的只是Flash动画，显示不出界面需要的部分，界面也就白做了。把如图1-3（^31020201c^）所示的线框内的部分为不需要做动画的部分。 　　然后，再选取剩下的部分，选择主菜单Insert→Convert to Symbol（或采用快捷键F8），会弹出“Symbol Properties”对话框，在“Name”栏内输入“背景”做一标识，选择“Behavior”项的“Graphic”（组件），按“OK”确定（见^31020201d^1-4），将其转化成Flash 5的组件。此时，在图库面板内会显示出被转化成的Flash 5的组件“背景”。 　　选择主菜单Windows→Panels→Info命令，弹出“Info”面板（见图1-5）（^31020201e^），其中会显示图片的长和宽（W为宽，H为高）及所在场景的相对坐标位置，单位是像素。 　　根据图片的长宽来确定场景的大小。选择主菜单Modify→Movie命令，弹出“Movie Properties”对话框，其中会出现场景的相关参数（“Frame Rate”是场景播放动画的速度：每秒12帧；“Dimensions”为场景的大小：“Width”为宽，“Height”为高；“Match”带有两个参数，这两个参数是系统默认的，此处不去修改；“Background”为背景色的选取）。修改“Movie Properties”对话框中的相关参数值，根据上述“Info”面板上的图片长和宽的值，修改“Dimensions”相应的参数值；选取“Background”中的调色板，设置背景色为黑色（见^31020201f^1-6、^31020201h^1-7）。点击“OK”确定，此时场景的大小将变为你所设置的大小。 　　点击图片并进行拖拉，使图片与背景重叠。 　　#1画一个漂亮的星星 　　6.新建一个组件（选取主菜单Insert→New Symbol，弹出“Symbol Properties”对话框（见图1-4），在“Name”栏内输入“星光”做一标识，选择“Behavior”项的“Movie Clip”（影片片段），按“OK”确定。此时图库面板中将显示出“星光”的 Flash 5组件。 　　在编辑窗口中也同时转到“星光”影片的编辑窗口。 　　然后选取工具栏内的画圆工具（^31020201i^），接着再选取“Colores”中（^31020201j^）栏，点击下方的（^31020201k^），使其成为（^31020201l^）状态，以防画圆时有个边框。选取“Colores”中的（^31020201m^），点击其右边的（^31020201n^），弹出调色板，选取白色（见^31020201o^1-8），开始画圆工作。 　　7.首先按住键盘中的“Shift”键在“星光”编辑窗口中画个大小适宜的正规的无边框的圆，选中所画的圆，选取主菜单Insert→Convert to Symbol（或采用快捷键F8），弹出“Symbol Properties”对话框，选择“Behavior”项的“Graphic”（组件），按“OK”确定。同时，进入“Info面板”，设定其相应的位置参数，使其中心位置在影片片段的中心（见^31020201p^1-9、^31020201q^1-10）。为了做出星星光芒四射的效果，然后再用画圆工具画一个适宜的椭圆，并如正规圆一样转化为组件，并使其中心位置在影片片段的中心。 　　为了星星的光芒逼真，选中已转化成组件的椭圆，按键盘的“Ctrl+D”快捷键复制出另一个椭圆图形，选择主菜单Windows→Potate→Transform命令，弹出“Transform面板”，在其“Rotate”属性栏中修改相应的旋转值（输入90度，回车）（见^31020201r^1-11）。调整“Info面板”中的参数并使其中心位置在影片片段的中心。假如需要更多的光芒，接上步进行制作就可以了。 　　啊，是不是有点累和繁琐了？这才刚刚做完影片的准备工作。而接着的工作就是制作星星光芒四射的影片效果了，慢慢来，多做几遍就很简单了。 　　#1 让这个星星光芒四射 　　8.选中星星的所有组件，将它们一起转化为新的组件，然后点击时间轴上的第5帧（见^31020201s^1-12）。 　　选择主菜单Insert→Keyframe（关键帧）命令（见图1-13）（^31020201t^），选中第5帧的内容，点击主菜单下的快捷工具栏中的（^31020201X^）键（Windows→Toolbars→main命令可调出此工具栏）进行缩放，缩放至合适大小。 　　选择主菜单Windows→Panels→effect弹出“Effect面板”进行透明效果处理。在其下拉式菜单中选择“Alpha”选项，再在其右边的输入框内修改参数（0%～100%，0%为全透明，100%为不透明），此处50%较为合适（见图1-14）。（^31020201u^） 　　在时间轴的1～5帧中任选一帧（此处选第4帧）击右键，在弹出的菜单中选择“Create Montion Tween”命令使其产生渐变效果。 　　9.接下来看看我们制作的星光闪烁效果。选择主菜单Control→Loop Playback命令进行循环播放选择；点击主菜单下的快捷工具栏中的（^31020201W^）键（选择主菜单Windows→Toolbars→controller可调出此工具栏）。 　　现在就可以看见我们的制作效果了，星星的闲烁效果满意吗？OK！我们马上把它融合到背景图片中去。 　　怎么样？星星的闪烁效果还可以吗？ 　　点击时间轴上的“Scene 1”按钮（见图1-15）（^31020201v^），切换到场景编辑窗口，从图库面板中把刚才做好的“星光”影片拖入到场景中，并放置到合适的位置上。如对星光的大小不满意，可通过上述的“缩放”工具对“星光”影片直接进行缩放操作。 　　10.以上是单个星光的制作过程，现在做漫天星光的效果，黑暗的天空一个个星星一闪一闪的效果。 　　在场景中双击刚刚从图库中拖过来的“星光”影片（也可双击图库中“星光”影片）进入“星光”影片编辑状态。将鼠标移至时间轴上的2～4帧之间，鼠标会变成“手形”，点击左键进行选定；再进行右击以弹出相应菜单，选择“Copy Frames”命令对所选中的帧进行拷贝。 　　然后再回到场景编辑窗口（点击时间轴上的“Scene 1”按钮），新建一个影片片段，取名为“星光2”并切换到“星光2”影片编辑窗口；在时间轴上进行右击，选择弹出菜单中的“Paste Frames”命令；选中所有的帧并向时间轴后面拖拉2帧（这是为了达到视觉上的真实效果，如果直接在场景中复制“星光”影片，出来的效果将是所有的星光都会在同一时间内闪动，一点也不真实）。 　　再次回到场景编辑窗口，将“星光2”影片拖到场景中去。假如需要更多的星光，重复以上步骤，再加上你自己的创意，你将会获得非常逼真的漫天星光的效果。 　　现在让我们看看做的整体效果吧。选择主菜单Control→Test Scene进行预览。哦，是不是有些不理想？有些星星是不是太大了？没关系，关闭预览窗口以回到编辑窗口。 　　在场景编辑窗口双击不满意的星星，进入其编辑窗口，选择星光影片片段的第1帧，用“缩放”工具进行缩放。对不满意的星星──进行修改，在此你也可针对星空界面的情况对每个星星进行调整，直到满意为止。再次进行预览。 　　关闭预览窗口，保存我们的工作，将前面保存了的“漫天星光.fla”覆盖掉。这样，漫天星光的星空动画背景就制作完成了，有兴趣的朋友可以参照后面发布成多媒体文件的步骤将其转换成其他格式的文件，可作成网页主界面，或个人VCD的背景等等，这里是为Authorware制作软件作准备的。好的，接着我们下面的工作吧。 　　漂亮的星空背景制作完了，现在我们来做名片碟精彩的部分，在星空的背景上将自己的照片做成动画效果，照片在星光闪烁的星空水平移动，鼠标靠近时，照片自动放大，照片上自动标注照片的简要内容；鼠标一移开，照片又恢复以前的状态。而且，这部分主要运用了Flash编程等手段，让你更了解Flash的核心技术。 　　#1在星空中导入照片 　　1.在Flash程序中打开“漫天星光.fla”文件进行编辑。 　　点击编辑栏上的“锁形”按钮（^31020201d1^），将所有的层锁定（这是为了在以后编辑其他层时避免对已编辑好的层的元素进行误操作。）（见^31020201a1^2-1） 　　而后增加一个层（在图的左下方有一个“+”符号（^31020201e1^），就是添加“层”的按钮），并将其改名为“buttonstrip” （见图2-2）（^31020201b1^）。 　　2.在个人影集中，我们准备了10张照片，大小为200×150（在此首先在Photoshop里将图片的大小设定好，每张图片的高度要一致，最好宽度也一致）。 　　在“buttonstrip”层中导入其中一张照片。而后在“Info”面板中，将照片的高度和宽度改为108×77。 　　选择工具栏内的画矩形工具（^31020201f1^），点击“colors”栏内（^31020201g1^）按钮，点击（^31020201h1^）按钮，将鼠标移到场景内其他地方画一个无边框的、颜色为黑色的矩形图案。运用工具栏内的（^31020201i1^）选取这个矩形图案并将其转换为组件（见图2-3）（^31020201c1^），并取名为“button background”。将其大小设定为108×77。 　　#1让照片产生动画效果 　　3.再将其转换为影片（“Movie Clip”）并取名为“button-back”。 　　双击蓝色框矩形，分别点击时间轴上的第4帧和第7帧按F6快捷键（即选择主菜单里的Insert →Keyframe命令）添加关键帧（见图2-4）。（^31020201k1^） 　　选中第4帧，选择主菜单中的Windows→Panel→Effect命令，调出“Effect”面板，在“Effect”面板的下拉菜单中选择“Tint”选项，在参数（R.G.B）中输入0～255之间的值（我们分别输入的是255，）（见图2-5）（^31020201l1^），使黑色矩形变为白色。分别选中1～4帧和4～7帧之间，选择主菜单中的Insert→Create Motion Tween命令，使其产生渐变（见图2-6）（^31020201m1^）。点击主菜单下的快捷工具栏中的（^31020201w^）播放键（选择主菜单Windows→Toolbars→controller可调出此工具栏）可以预览到矩形由黑到白的闪烁效果。 　　双击第7帧，弹出“Frame Actions”面板，点击左边命令框的“Basic Actions”集合，会出现相应的脚本命令，双击“Go To”命令进行选择，对第7帧进行添加帧的动作，选择默认的参数设置（见图2-7）（^31020201n1^）。即当动画播放到第7帧的时候，会马上跳到第1帧播放，形成一个循环播放的效果。 　　4.关闭“Frame Actions”面板，返回到场景编辑窗口，将刚才导入到场景中的图片和做好的影片“button back”删除（这一步是为了保证编辑窗口的清洁，以便于后面的编辑工作；而刚刚删除的在图库面板中都有保存，如要调用，可直接将图库中的所需元素拖拉到编辑窗口即可）。 　　5.将“button background”从图库中拖入到场景中，并同时设置Info面板中的坐标值X：0，Y：0；同时将其转换成按钮（“button”），取名为“照片1”。然后双击按钮“照片1”，进入编辑窗口，并添加一个“层（Layer）”，使编辑窗口中出现两个层；选择“Layer 1”层，点击“Over”帧，再按“F7”快捷键（即选择主菜单中的Insert→Blank Keyframe命令）插入一个空白帧。然后将刚才做好的影片“button-back”也从图库面板中拖到编辑窗口中，设置Info面板中的坐标值X：0，Y：0，大小设定为“113×84”，以使影片“button-back”与组件“button background”的中心点在同一个坐标点上。点击“Hit”帧，按“F5” 快捷键（即选择主菜单中的Insert→Frame命令）。点击层“Layer 2”的“Up”帧，将刚才导入的照片从图库中拖到“Up”帧的编辑窗口中，设置Info面板中的坐标值X：0，Y：0，大小设定为108×77，使其中心坐标与组件“button background”的中心坐标一致。选择“Down”帧，按“F5”快捷键添加帧（见图2-8）（^31020201o1^）。退出按钮的编辑状态进入场景编辑窗口并通过选择主菜单Window→Panels→Instance命令，调出“Instance”面板，设置“Behavior”项为“Button”、“Options”项为“Tiack as button”（如图2-9）（^31020201p1^）。 　　这时，返回到场景中，选择主菜单中Control→Test Scene进行预览。在出现的播放窗口中，将鼠标移至照片上，看看是不是达到了我们创造的效果。 　　#1 设置照片的显示效果 　　关闭预览窗口。选中场景中的按钮“照片1”，选择主菜单中Windows→Actions调出脚本编辑窗口，点击右上方的三角形按钮，在弹出式菜单中选择“Expert Mode“命令。将下面的按钮脚本语言输入到编辑框中（见图2-10）（^31020201q1^）。 　　按钮的“Action Script”（脚本语言）设置如下： 　　on（rollOver）{  　　/:menu = “chongqing huanghuayuan bridge ”; 　　tellTarget （“/popmenu”）}  　　gotoAndPlay（1）; 　　} 　　 } 　　这段代码的意思是：每当鼠标移到照片上，照片上方就会出现照片的注解：“chongqing huanghuayuan bridge”（照片的注解只限于英文输入）。 　　on（rollOut）{  　　/:menu = “”; 　　tellTarget （“/popmenu”）{ 　　gotoAndStop （1）; 　　} 　　} 　　这段代码的意思是：每当鼠标移出照片时，照片的注解就会消失。 　　6.分别导入剩下的9张照片，重复上述第5步骤一一制作成按钮并完成其余操作。 　　#1 利用照片制作一段动态影片 　　7.返回到场景编辑窗口。点击工具栏中的文本编辑器，在场景中画一个文本框。通过主菜单Window→Panel→Text Options命令调出“Text Options”面板，文本框的参数设置（见图2-11）。（^31020201r1^） 　　8.将文本框转换为影片“menu”，再新建一个影片“pop_menu”，将影片“menu”从图库拖入到影片“pop_menu”编辑窗口中，并相应缩小，在第五帧处添加一个关键帧（按“F6”），并将文本框相应放大，然后在1～5帧产生渐变。分别双击第一帧和第五帧进行添加帧的动作“stop （）;”（此命令在“Frame Actions”面板的“Basic Actions”集合中）；退出编辑状态，返回到场景的编辑状态，新建一层，取名为“Layer 15”。将刚才做好的影片“pop_menu”拖入到场景中并通过“Instance”面板将参数如图2-12（^31020201s1^）所示设置。在“name”属性填入“popmenu”。 　　9.建一个组件“ButtonPart”，进入其编辑状态，在其中添加一个“层”，然后将做好的10个按钮，分别拖入到第二层中。在第一层中导入“胶片”图片，衬托照片，并转换为组件（Graphic）“胶片”。选中组件“胶片”，在“Effect”面板中选择“Alpha”选项，将其参数设置为“40%”（见图2-13）（^31020201t1^）。选中所有的照片和图片，运用“Align”面板中的相应选项将所有的照片和图片的X轴中心点处于同一水平位置上（“Align”面板中的选项见图2-14）（^31020201u1^），按照自己希望的顺序排列10个按钮。将第一个按钮和最后一个按钮调到相应的位置并运用“Align”面板中的“Space”选项中的第二个按钮，使所有按钮的间隔距离相等。见图2-15。（^31020201v1^） 　　10.返回场景编辑窗口，将组件“ButtonPart”转换为影片并取名为“buttonslide”，并通过“Instance”面板将参数设置为如图2-16所示（^31020201w1^），在“name”属性填入“slide”。双击影片“buttonslide”，进入影片“buttonslide”编辑窗口，将组件“ButtonPart”复制一个（选中组件“ButtonPart”按“Ctrl+D”），将两个组件“ButtonPart”首尾相连（这是为了在播放动画的时候，使照片的移动具有连贯性。），并使两组件的X轴中心点在同一水平线上。返回场景，再将影片“buttonslide”转换为另一个影片并取名为“Buttonscale”，通过“Instance”面板将参数设置为如图2-17（^31020201x1^）所示，在“name”属性填入“scale”。返回场景编辑窗口，将影片“Buttonscale”的中心位置设定在场景的中心点上。 　　#1 影片的播放控制 　　11.新建一层并取名为“code”，在帧上添加脚本“startDrag（“mousetrack”，true）;”。在“Action”集合中调用“starDrag”命令，在“Targer”属性框中填入“mousetrack”，并勾选“Lock mouse to center”选项。（见图2-18）（^31020201y1^） 　　12.新建一个空的影片“mousetrack”，再按“F7”快捷键（即选择主菜单中的Insert→Blank Keyframe命令）插入一个空白帧。使影片有两个空白帧，设定第一帧“Frame Tctionrs”人码如下。 　　/:xPos = getProperty（“”，_x）; 　　/:yPos = getProperty（“”，_y）; 　　/:xBut = getProperty（“/scale/slide”，_x）; 　　/:yBut = getProperty（“/scale/slide”，_y）; 　　/:xButSca = getProperty（“/scale”，_xscale）; 　　/:yButSca = getProperty（“/scale”，_yscale）; 　　这段代码的意思是：设置一些相关的参数， 　　move = Number（/scale/slide:_x+Number（（（255-_x）/50））; 　　这句代码的作用是设定滚动照片的速度，可以根据自己的需要调节速率，方法是修改第二个“Number”中的除数的大小，除数越小，速度越快，除数越大，速度越慢。 　　if （Number（move）>1352.8）{  　　move = move-1352.8; 　　 }else if （Number（move）=300{  　　（growth）=300; 　　照片缩放的最大值，修改方法是修改数字“300”。 　　} else if （Number（growth）<=100）{  　　growth = 100; 　　照片缩放的最小值，修改方法是修改数字“100”。 　　} 　　setProperty（“/scale”，_xscale，growth）; 　　setProperty（“/scale”，_yscale，growth）; 　　setProperty（“/popmenu”，_x，/:xPos）; 　　setProperty（“/popmenu”， _y，getProperty（“/scale”，_y）-（getProperty（“/scale”，_height）/3））; 　　这句代码的作用是设定影片“pop_menu”的“X”和“Y”的起始坐标。 　　第二帧的动作为：gotoAndPlay （1）; 　　13.退出编辑状态，返回到场景中，将这个空白影片拖入到场景中的“code”层中，并通过“Instance”面板将参数设置为如图2-19（^31020201z1^）所示。在“name”属性中填入“mousetrack”。并将其中心坐标设置在场景的中心点上。 　　14.在场景中新建一个层“labels”，在帧上设置动作“stop （）;” 　　返回到场景中，选择主菜单中的“Control”中的“Test Scene”，在出现的播放窗口中，将鼠标移至照片上，看看效果吧。就是不一样吧？ 　　#1将影片发布成正式文件 　　15.把刚才做好的发布成“Authorware”能调用的文件格式。选择主菜单中的File→Publish Settings命令，调出发布设置面板（见图2-20）（^31020201a2^），这里有许多的格式可以发布，我们现在要选择的是“swf”格式的发布选项，可以同时勾选多个复选框，就能同时发布多种格式的文件，勾选“Use default names”时，发布的文件与Flash源文件名相同，不勾选时，可以自己确定发布的文件名。勾选的是第一个复选框，这时会在顶部出现一个“Flash”菜单，点击这个菜单，就会弹出如图2-21（^31020201b2^）的面板，在这里可以设置发布文件的质量，版本和下载方式。选择好后按“Publish”按钮，进行发布，发布完后点击确定按钮，发布后的文件会自动保存到与源文件同一目录下。