免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

标题: [AS3源码] AS3相册 [打印本页]
作者: 网雨霏霏    时间: 2019-3-17 22:27     标题: AS3相册

本例要实现的效果是：
5张图片陈列在舞台上，单击任意一张图片后，会放大显示，同时出现一个关闭按钮，单击它就回到初始样子:

[flashroadswf=http://flashroad.dhlog.com/attachment.php?aid=MTM3NHw5ZGVjNzE5ZnwxNzc3OTcwODgyfDAxOGFvc3dTSUUzeWR1cjAvRWZuY3pLTHVRWkp3SUJvZXMyRWxhMHYyTzBRQk93&request=yes&_f=.swf,656]492[/flashroadswf]
加载需要一定时间，请耐心等待
作者: 网雨霏霏    时间: 2019-3-17 22:29     标题: 制作过程

【1】设置舞台属性：
这个视图片的宽高而定。我这里准备的5张图片分辨率都是656×492的，所以舞台的宽高分别设为相同值

【2】将5张图片放在同一个影片剪辑的5个不同的关键帧内：
（1）在系统的资源管理器内，将5张图片重命名，按照数字顺序命名为12345
（2）按Ctrl+F8键 名称任意 类型 影片剪辑  按确定
（3）执行菜单栏的 文件>导入>导入到舞台
选择第一个图片，导入。会提示你是否导入所有图像，选择 是
就会将5张图片依次序导入到5个不同的关键帧之内

【3】插入关闭按钮
（1）在当前影片剪辑内部的图层面板内 新建一个图层
（2）绘制一个关闭按钮，并在属性面板内设定实例名为close_btn

【4】布置舞台
（1）单击“场景1”来到主场景，将库内的影片剪辑拖放到舞台上。并在属性面板内指定实例名为mc 它用于呈现图片的放大效果
（2）新建一个图层，准备放置5个小图：
将刚才的影片剪辑复制、粘贴到本图层，由于影片剪辑的宽高与舞台一样，但是我们需要5个影片剪辑，所以需要将它缩小。
我们以宽度为基准，656÷5=131.2  那么，将影片剪辑的宽度设为131
用选择工具选中影片剪辑，在属性面板内调整宽高，在锁是锁住的前提下，在 宽：后面直接输入数字131 ，回车即可
[attach]1375[/attach]
（3）设定实例名
在“实例名称”那里设定即可。由于这个影片剪辑是复制自第一个图层的，而且已经有实例名mc，所以直接复制粘贴4份，共5个影片剪辑。然后分别设置实例名为mc1 mc2 mc3 mc4 mc5
（4）为了让大图能在最上面，我们将现有的两个图层交换一下位置：
在图层面板内，选看到中下面的图层，不要松开鼠标，拖到上面图层的上方，松开鼠标即可。此时，只能看到大图，为了操作小图，我们将大图所在的图层给关闭显示：
[attach]1376[/attach]
（4）Ctrl+A全选5个小图，然后Ctrl+K打开对齐面板
在“与舞台对齐”不被选中的状态下，分别单击 垂直中齐、水平居中分布：
[attach]1377[/attach]
如图，5个影片剪辑就乖乖的呆好位置了。如果效果不完美，就手动调整一下位置吧。

【5】写代码
新建一个图层，按F9键打开动作面板，输入下面的代码
  1. mc.visible=false//让大图隐藏
  2. //下面的for循环是一次性给5个小图写代码
  3. for(var i:uint=1;i<=5;i++){//初始值为1，条件为不大于5，则共循环5次
  4.         this["mc"+i].gotoAndStop(i)//让5个小影片剪辑分别停止在对应的关键帧上，以实现5个小图的观感。
  5.         this["mc"+i].close_btn.visible=false//让小图的按钮隐藏
  6.         this["mc"+i].addEventListener(MouseEvent.CLICK,openPic)//给5个小图都注册单击鼠标的侦听
  7. }

  9. //下面的就是5个小图都要调用的单击鼠标的侦听
  10. function openPic(e:MouseEvent){
  11.         mc.visible=true//让大图恢复显示
  12.         var xuhao:uint=uint(e.target.name.charAt(2))//获取当前被单击对象的数码
  13.         mc.gotoAndStop(xuhao)//让大图跳转到对应的关键帧
  14.         mc.close_btn.addEventListener(MouseEvent.CLICK,closePic)//注册关闭大图的侦听器
  15. }


  18. //下面的就是关闭大图的侦听：
  19. function closePic(evt:MouseEvent){
  20.         mc.visible=false//让大图隐藏
  21. }
复制
【6】大功告成，本例结束。
作者: 网雨霏霏    时间: 2019-3-17 22:30     标题: fla文件下载（flashCS6格式）

本帖隐藏的内容需要回复才可以浏览
作者: flashroad    时间: 2019-12-17 10:22

神马东东.....




欢迎光临 flash之路-flash技术交流 (http://flashroad.dhlog.com/) Powered by Discuz! 7.2