第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");
}
}
|