第3节 旋转的三棱锥

　　本实例最终效果如图1所示:



图1 旋转三棱锥最终效果

　　1.首先启动flash,新建一个影片,设置影片舞台大小为253px*205px(单位为象素),影片背景色为白色.

　　2.为了方便下面的制作,这里依次选择查看/网格/显示网格菜单命令,打开影片的捕捉网格功能。 

　　3.选择工具箱中的直线工具，在舞台中绘制出三棱锥的轮廓，如图2所示: 



图2 绘制三棱锥的轮廓

　　4.打开混色器面板,在填充样式下拉列表中选择填充类型为线型渐变,然后分别设置渐变为从浅黄色(颜色rgb代码为251,217,162)到深黄色(颜色rgb代码为224,126,31)的渐变,如图3所示;



图3 设置填充色

　　设置完毕，在三棱锥的正面点击鼠标,填充效果如图4所示: 



图4 填充三棱锥的正面

　　5.按照相同的方法再将混色器中的填充颜色设置成深黄色到暗黄色的线型渐变色，其中深黄色的rgb值为（244，156，11）,暗黄色的rgb值为（116，66，16）,如图5所示;



图5 设置填充色

　　设置完毕后，在三棱锥的侧面点击鼠标,最后的填充效果如图6所示: 



图6 填充三棱锥的侧面

　　6.选择箭头工具，双击三棱锥的轮廓线，将轮廓线全部选中,然后按下delete键将三棱锥的轮廓线删除,最后只剩下如图7所示的三棱锥色块:



图7 删除三棱锥的轮廓线

　　7.在图层layer1的第20帧插入一个关键帧,选择箭头工具，并选中三棱锥的右侧面,然后选择修改/变形/水平翻转菜单命令,将三棱锥的右侧面水平翻转，然后用箭头工具将它挪动到三棱锥的左侧，如图8所示: 



图8 制作三棱椎的左侧面

　　8.然后设置第1帧到第20帧之间为形状渐变动画效果,不过这时候可以选择控制/播放菜单命令预览其效果,可以看到三棱锥图形的变形并不是很正确，所以还要设置控制精确变形的形状提示点。选中图层layer1的第1帧，然后选择修改/形状/添加形状提示菜单命令,给图形添加形状提示点,这时在工作区中将 
出现一个红颜色的圈，且其内有一个字母a,如图9所示: 



图9 添加形状提示

　　接着按键盘上的ctrl+h快捷键，将增加一个形状提示点b，用同样的方法分别添加形状提示点c,d,e,f,然后使用箭头工具拖动各形状提示点为如图10所示的位置; 



图10 调整形状提示点的位置

　　9.选中图层layer1的第20帧，用箭头工具拖动图形中的形状提示点b,c,d,e,f为如图11所示的位置: 



图11 重定位形状提示点的位置

　　10.为了使三棱锥产生连续转动的效果，在图层layer1的第21帧处插入一个关键帧,并删除三棱锥的左侧面,如图12所示:



图12 删除三棱锥的左侧面

　　11.最后将图层layer1的时间线延伸到第22帧即可,最终时间轴如图13所示;



图13 主场景中的时间轴

Flash3d效果精彩实例(4) 

第4节 变换矩阵

　　本实例中的方块矩阵会在横向和纵向顺序翻转,很象翻动魔方时的效果,最终效果分别如图1和图2所示;



图1 水平翻转效果



图2 垂直翻转效果

　　1.启动flash,新建一个影片,设置影片舞台大小为200px*260px(单位为象素),影片背景色为紫色,颜色代码为#1b1c47.

　　2.首先制作方块矩阵里的方块单元,为了在后面排列矩阵时方便,本例中以一列方块为单位,每列有8个方块单元,将8个方块列水平排列,就成了8*8的方块矩阵.

　　新建一个图形元件,命名为square row,进入元件的编辑区后,使用矩形工具绘制一个无边框的正方形,填充色为蓝色,颜色代码为#33ccff,然后连续复制7个方块的副本,在垂直方向将其排成一列,如图3所示:



图3 制作方块列

　　3.下面制作方块垂直翻转的效果.新建一个影片元件,命名为row flip,进入元件的编辑区后,将元件square row拖到图层一中,然后在第20帧插入一个关键帧,回到第1帧square row点右键,从弹出的快捷菜单中选择缩放命令,这时在元件四周出现了缩放调整手柄和元件的中心点,首先拖动元件的中心点到元件的最下面,如图4所示;



图4 调整元件的中心点

　　然后向下拉动最上面中间位置的手柄,使其高度逐渐缩小,如图5所示;



图5 向下拉动方块列

　　直到方块列被压缩成如图6所示的样子即可;



图6 被压缩后的方块列

　　4.建立第1帧到第20帧的运动渐变动画,在上面新建一个图层,分别复制图6中压缩后的元件和图4中压缩前的元件到图层layer2的第1帧和第20帧,不过这里元件的位置需要放好,将压缩后的元件放在压缩前元件的最上部,同样建立运动渐变动画,最后在第20帧添加action: stop();,这时候把时间轴移动到第10帧,会看到图7所示的翻转效果:



图7 垂直翻转效果

　　5.下面就利用前面做好的垂直翻转,通过简单的旋转操作,将其旋转成水平位置,就实现了水平翻转的效果.新建一个元件命名为controller movie,进入元件的编辑区后,插入两个关键帧,分别设置其帧标签为horizontal和vertical,然后给两个帧都添加action:stop();.其中第1帧设置为水平翻 
转效果,第2帧设置为垂直翻转效果.

　　回到第1帧,将元件row flip拖到编辑区中,使用旋转工具将其旋转成水平,然后复制7个副本,排列其为一个方阵,如图8所示;



图8 排列元件成方阵

　　回到第2帧,同样将元件row flip拖到编辑区中,也复制7个副本,然后也排列成一个方阵,这里要注意两帧里方阵的位置要相同,不要出现错位的现象.

　　6.最后回到主场景中,将元件controller movie拖到舞台中间,在属性面板中设置其实例名为box,如图9所示;



图9 给方阵设置实例名

　　最后只要在下面添加两个按钮,分别用来显示水平翻转和垂直翻转效果,如图10所示;



图10 给影片添加控制按钮

　　给左边的水平按钮添加如下action:

on (release) {

telltarget ("/box") {

gotoandplay("horizontal");

}

}

　　给右边的垂直按钮添加如下action;

on (release) {

telltarget ("/box") {

gotoandplay("vertical");

}

}