CSDN博客

img Orrico

翻页相册(www.lancy.com)

发表于2004/11/4 2:28:00  1494人阅读

分类: 创意|设计

效果描述
好象一本真正的相册一样翻动,一幅幅相片展现在你的面前

所用知识点
1. INFO面板的充分使用
2. 桢标签的应用
3. 对象的旋转及倾斜的调节
4. 逐桢动画
5. 基本ACTION SCRIPT指令

启动FlashMX,新建一个文档。

准备工作
选择【View】菜单下的【Rulers】命令显示标尺。用鼠标从左边的刻度中拖出一条参考线至编辑区中。
再选择【File】菜单下的【Import】命令导入一张可爱的Snoopy图片用于作封面,另外导入你要制成相册的照片若干张(这里共4张)。如图1所示。


图1

制作封面,封面二,内页相片,内页相片二,封底,封底二符号的制作。
选择【Insert】菜单下的【New Symbol】命令或者直接按Ctrl+F8新建一个图符(Graphic),命名为"封面正面"。进入工作区。选择工具面板中的矩形工具。按Ctrl+F3调出属性面板。设置边框宽度为1,边框颜色为黑色,边框填充色为橙红色。在工作区中画出一个矩形。设置矩形的宽度(W)为120,高度(H)为160。位置横坐标X为0,纵坐标Y为-80(即高度的一半)。使得矩形左边框的中心与工作区中心的"十"字吻合。如图2所示。


图2

新建一图层,将刚才导入的Snoopy图片拖放到工作区,用缩放工具调整其大小直到满意为止。然后在工具面板中选择文字工具输?quot;我的相册"。在属性面板里设置一下文字的字体,尺寸,颜色等等。最终效果如图3所示。
制作封面反面,按Ctrl+F8新建一个图符(Graphic),命名为"封面反面"。用矩形工具绘制一个与封面正面一样大小的矩形。设置X为-120,Y为-80。使得矩形右边框的中心与工作区中心的"十"字吻合。如图4所示。
同理,再新建两个图符,分别命名为"封底正面"和"封底反面"。矩形填充和边框设置跟封面正反面一样,矩形的尺寸和位置也请参考封面的正反面图符。如图5和15.6所示。(注意图中的"十"字中心位置)


图3 封面正面      图4封面反面

  
图5 封底正面        图6 封底反面

封面和封底图符做好了,现在制作照片图符。按Ctrl+F8新建一个图符,命名为"相片1"。进入图符工作区,将导入的第一张照片拖进来。在属性面板中设置其大小和位置如下:宽度W:100,高度H:140,X:0,Y:-70。同理,"相片2"、"相片3"、"相片4"的大小和位置设置如下:
相片2:W(100),H(140),X(-100),Y(-70)
相片3:W(100),H(140),X(0),Y(-70)
相片4:W(100),H(140),X(-100),Y(-70)
回到主场景中。新建八个图层。从下到上分别命名为封底、第一页、第二页、封面翻页、第一页翻页、第二页翻页、封底翻页和按钮:如图7所示。

      
图7                 图8

下面开始制作翻页相册。下面先来看看最终时间线效果。如图9所示。


图9

对各图层有操作如下:
l "封底"层:在第59帧按F5插入帧。将"封底反面"图符拖到主场景中,注意,将图符左边框跟场景中的绿色参考线重合。如图8所示,并记下图符的位置X,Y值。
l "第一页"层:在21帧按F5插入帧。将"相片1"图符拖到主场景并将图符的左边框跟参考线重合。Y值参考封底层作适当的调整,使其居中。
l "第二页"层:在第22帧按F6插入关键帧,并将"相片3"图符拖到主场景。设置跟"第一页"层的"相片1"一致。并在第41帧按F5延长该帧。
l "封面翻页"层:将"封面正面"图符拖到场景中,其位置设置与"封底"层的"封底反面"图符一样。然后分别在第2、7、11帧按F6插入关键帧。选中第7帧的图符,单击工具面板中的缩放工具,现在可以对图符进行缩放,旋转,变形等操作。将鼠标移到图符右上方,可以看到鼠标变成两个半箭头符号,此时沿着箭头方向向上移动鼠标拖动图符。如图11所示。
或者按Ctrl+T调出变形(Transform)面板。直接在面板中设置图符的变形操作。将Constrain前面的可选框的勾勾去掉。将宽度设为90%,即将图符的宽度设为原宽度的90%。然后选中下面的Skew单选框。将后面竖向切变值设为-40。如图10所示。这样也可以得到如图11的效果。
同理,选中第11帧的"封面正面"图符,设置宽度为20%,Skew单选框后面的竖向切变值设为-88。得到效果如图12所示。
接下来分别用鼠标右键单击第2、7帧,在弹出菜单中选择"Create Motion Tween"。将鼠标移到第一帧,按Ctrl+Enter看看,封面正面是否翻动了?
现在制作封面反面的翻页。在第12帧按F7插入一空帧。第13帧按F6插入一关键帧,?quot;封面反面"图符拖入场景中。右边框线跟绿色参考线重合。设置竖向位置即Y值跟"封面正面"图符的Y值相同。然后分别在第17和21帧插入关键帧。其中17帧中的图符设置跟第7帧的设置一致,如图10所示。第13帧各参数的设置跟第11帧图符设置相同。分别选中第13至17帧和17至21帧间的任一帧创建"Create Motion Tween"。


图10          图11        图12

阅读全文
0 0

相关文章推荐

img
取 消
img