Flash教程:旋转相册的制作

xyz36963zyx

xyz36963zyx

2016-01-29 12:31

Flash教程:旋转相册的制作,旋转相册上有,但他写得比较简单。现在根据自己掌握的一点微薄知识,按自己的设想也作了一个旋转相册。外貌、效果一样,但内核完全不同,高手的那个是靠AS代码来指挥的,我做的只是用了一点简单的代码,步序可能比他多,但比较容易理解原理。

本文由中国 txwh2006(踏雪无痕)  原创,转载请保留此信息!

旋转相册上有,但他写得比较简单。刚接触FLASH时,很想做一个,但教程看不懂,源文件的代码,更是不懂,只得作罢。现在根据自己掌握的一点微薄知识,按自己的设想也作了一个旋转相册。外貌、效果一样,但内核完全不同,高手的那个是靠AS代码来指挥的,我做的只是用了一点简单的代码,步序可能比他多,但比较容易理解原理。

下面言归真传:

 (由于我讲得比较细,就不附图片了。)

看效果:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/fjc/)

【友情提示】看不到动画效果的朋友请去这里观看:http://bbs.jcwcn.com/viewthread.php?tid=164120

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/fjc/)

[next]

 *** 先分析一下:

1、从画面看场景中有二个影片剪辑,一个是中间的大图的影片剪辑(我简称为d),一个是像“快乐大转盘”的影片剪辑(我简称为sl)。

2、“快乐大转盘”的影片剪辑sl,在转动的时候,里面的缩略图也在自转,这缩略图就是sl的子mc,里面共有8个子mc.那么为什么要自转呢,因为如果不自转,缩略图就不能保持水平状态。动一下脑子,可以断定sl顺时针旋转,缩略图必定逆时针旋转,这样就能保持平衡(sl和缩略图影片剪辑它们的帧数的长度肯定是一样,要不然就不能平衡)。

3、把鼠标移到sl上任意一个缩略图上,sl就停止转动,里面的缩略图也停止转动;按下鼠标就显示大图;鼠标离开缩略图sl又旋转了,里面的缩略图也自转了。这一条所述的效果肯定由as代码操从。

4、代码涉及到:当(鼠标移到缩略图上时){停止播放sl、停止播放缩略图mc}。
             当(鼠标离开缩略图上时){播放sl、播放缩略图mc}。
             当(鼠标在缩略图上按下时){播放大图d}(其实大图d不止一个,共有8个)。
      另外还有一句至关重要,就是因为大图在主场景中分八个层,影片播放时显示的是最上层的图,如果你不加命令控制,这8张图全部显示出来,因此当你点击非第一张缩略图时,尽管它播放了d的大图,但被上面一张大图所说覆盖,所以我们必须再加一句命令来控制(这一句我是跟博士老师学的。):
             当(鼠标在缩略图上按下时){除了该缩略图的大图可见外,其他大图mc均为不可见}。
分析以后我们写教程就比较简单了。

***具体操作:

新建文档,导入8张图片。图片最好处理过,大小一样为最佳,另外要考虑圆形取景的因素。

下面分三个大步骤来叙述:

一、制作大转盘mc:大转盘mc是一个嵌套的影片剪辑,先要从最里面的做起:
1、制作8个圆形的缩略图mc:
⑴ 插入/新建元件/影片剪辑(名为m1);
⑵ 建立二个层,第一层第一帧拖入图片1,把它调小到适当的尺寸;
⑶ 第二层第一帧,画一个无边线正圆,大小与图片相同(我取100),设为遮罩层。
⑷ 其他7个缩略图mc(m2~m8),如法炮制。

2、制作8个会自转的缩略图mc:
⑴ 插入/新建元件/影片剪辑(名为z1);
⑵ 第一层第一帧拖入m1,第100帧插入关键帧,在1~100帧中间点一下,在属性面板里“补间”选择“动画”;“旋转”选择“逆时针”1周。
⑶ 其他7个会自转的缩略图mc(z2~z8),如法炮制。

3、再做一个静止的大转盘mc:
⑴ 插入/新建元件/影片剪辑(名为s);
⑵ 第一层第一帧画一个大圆,大小自定(我取350),圆周等分一下,分为8等分,具体分法不再赘述(提示:可以画一条穿过圆心的直线,利用变形复制的办法)。
⑶ 第二层第一帧把z1~z8分别拖入到场景,位置放在大圆的外边,中心与八个点对齐。每个mc在属性面板里都为它填上实例名z1~z8。然后把图层一删除,不过为了在主场景中制作方便,这一步你可以以后再做。

4、制作转动的大转盘mc:
⑴ 插入/新建元件/影片剪辑(名为sl);
⑵ 第一层第一帧拖入s实例名s,第100帧插入关键帧,创建动画补间,顺时针旋转一周。

二、制作8个大圆mc:
⑴ 插入/新建元件/影片剪辑(名为d1)只要把原图片拖入场景就可以了。(注意:大图的序号要和缩略图的序号相对应,后面输入代码时不要搞错。)
⑵ 其余d2~d8如法炮制。

注意:制作8个大圆mc还有一个非常好的办法,那是博士版主提供的,请见6楼。

三、组装:
⑴ 回到主场景建立10个图层,
⑵ 图层1拖入转动的大转盘mc,在属性面板里为它填上实例名sl,居中对齐;
⑶ 图层2~9分别拖入d1~d8mc,每个mc在属性面板里都为它填上实例名(d1~d8),全部居中对齐;
⑷ 图层10做一个大图的遮罩层,按照“大转盘”的圆画一个无边线的圆(画的时候可先隐藏图层2~9),大小与其一样。设置为遮罩层。
(然后回到s中把图层一删除。)

四、加代码:
下面的代码看似很多,其实你仔细辨认一下,都是一个品种,不要害怕。

回到静止的大转盘mc(s)中,分别点击每个自转的缩略图mc,为它们加入as代码。
例如:选中z1,打开动作面板,输入代码:
on (release) {
        _root.d1._visible = true;
        _root.d1.play();
        _root.d2._visible = false;
        stop();
        _root.d3._visible = false;
        stop();
        _root.d4._visible = false;
        stop();
        _root.d5._visible = false;
        stop();
        _root.d6._visible = false;
        stop();
        _root.d7._visible = false;
        stop();
        _root.d8._visible = false;
        stop();
}

以上这段代码意思是:当(鼠标在z1上按下时){
                       主场景中的d1设置为可见;
                       主场景中的d1播放;
                       主场景中的d2~d8设置为不可见;
                       停止;}

on (rollOver) {
        _root.sl.stop();
        _root.sl.s.z1.stop();
        _root.sl.s.z2.stop();
        _root.sl.s.z3.stop();
        _root.sl.s.z4.stop();
        _root.sl.s.z5.stop();
        _root.sl.s.z6.stop();
        _root.sl.s.z7.stop();
        _root.sl.s.z8.stop();
}

以上这段代码意思是:当(鼠标滑到z1时){
                       主场景中的sl停止播放;
                       主场景中的sl中的s中的z1~z8停止播放;                     
                       }


on (rollOut) {
        _root.sl.play();
        _root.sl.s.z1.play();
        _root.sl.s.z2.play();
        _root.sl.s.z3.play();
        _root.sl.s.z4.play();
        _root.sl.s.z5.play();
        _root.sl.s.z6.play();
        _root.sl.s.z7.play();
        _root.sl.s.z8.play();
}

以上这段代码意思是:当(鼠标滑离z1时){
                       主场景中的sl播放;
                       主场景中的sl中的s中的z1~z8播放;                     
                       }

注意:
①以上三段代码一起写入z1中,中间的注解不要。
②然后根据这个原理z2~z8分别写入这三段代码,要注意的是每个mc的第一段有三句要更改一下,具体我不讲了,要求你动一下脑子,很简单的。(提示:当你每选中一个缩略图mc时,因为对象不一样所以播放、停止、可见、不可见的对象也不一样,说白了就是把z1~z8的名字换来换去。)
③另外要说一下的是路径,路径其实和电脑中的文件存储的路径一样,它的分隔符不是“/”,而是“.”。
“_root” 代表根时间轴就是主场景的意思,
“_root.sl.s.z1.play();”这句意思是:主场景中的sl影片剪辑中的s影片剪辑中的z1影片剪辑播放。“.”的意思相当于“的”。

教程完,测试!

最后说明一下:我这种做法并不很高明,对高手来说,肯定会笑我那是笨办法。但对as不熟悉的人来说可能会有所启发,有点帮助。

与本文相关讨论请到这里与作者交流:http://bbs.jcwcn.com/viewthread.php?tid=164120

展开更多 50%)
分享

猜你喜欢

Flash教程:旋转相册的制作

flash教程
Flash教程:旋转相册的制作

flash教程Flash相册制作大师的操作步骤

电脑应用
flash教程Flash相册制作大师的操作步骤

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Flash教程:旋转花朵效果的制作

flash教程
Flash教程:旋转花朵效果的制作

Flash CS4制作旋转立体字教程

FLASH flash教程 autocad教程
Flash CS4制作旋转立体字教程

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

小软件制作漂亮的flash相册

FLASH flash教程
小软件制作漂亮的flash相册

Flash教程:旋转拖尾文字效果的制作

flash教程
Flash教程:旋转拖尾文字效果的制作

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

《超级英雄》克隆体的玩法与实际作用

《超级英雄》克隆体的玩法与实际作用

Flash 【AS2.0】教程:获取外部按钮方法

Flash 【AS2.0】教程:获取外部按钮方法
下拉加载更多内容 ↓