• 思缘论坛首页
  • 论坛搜索
  • 下载记录
  • 每日签到
  • 设计软件,PS下载
  • VIP素材区预览
  • VIP素材区下载
  • 缘分币充值
发新话题
打印

[基础教程] [教程]使用AS3.0创建图片水波纹平滑切换

[教程]使用AS3.0创建图片水波纹平滑切换

本教程载转自爱闪客查看原帖


[flash]http://www.flashigot.com/files/images/articles/139/image_mask_revealer_v01_for_preview.swf[/flash]

步骤 1 – 简要概述

基于上面的预览效果,我们将创建一个图片平滑切换的特效。为此将需要新建两层:一层包含脚本,一层包含图片。为了使图片一点点展现出来还要创建一个动画的影片剪辑,此剪辑将在运行时加入进一个遮罩层。

步骤 2
新建一个ActionScript 3.0文档并设置长宽为600x420像素,帧频为24。基于这个尺寸来选择需要展示的图片。

步骤 3
将第一层重命名为image,然后导入选好的图片到库。并将图片放置到舞台中央


步骤 4
现在将图片转换成影片剪辑并加之命名为beach或其他名字并确保注册点在左上角


步骤 5
将刚才的影片剪辑设定一个实例名,在这里为imageToReveal_mc并锁定此层以防被修改

注意:之所以实例名以_mc结尾是为了在脚本中调用实例时好识别实例的类型.

步骤 6
现在开始作点动画处理,新建一个影片剪辑名为circle animation.


步骤 7
在编辑circle animation状态中,将第一层命名为animation并绘制一个80x80像素的圆形置于中央.


步骤 8
将圆转换为图形元素并命名为circle,确保注册点为center中间.


步骤 9
选择圆形,应用简单的动画补间,需要14帧。在第一帧圆的大小为1%,然后在最后一帧大小为100%。此外在帧之间还需要调整一下圆的位置/大小/角度(position/scale/rotation ),如图.


步骤 10
现在新建一层名为actions。在最后一帧(14)插入一个关键帧并打开脚本面板加入一些脚本。此脚本当循环时停止动画.


步骤 11
操作完成后再打开库面板,右击circle animation选择属性。确保脚本面板处于专家模式,勾选为ActionScript 导出和在第一帧导出。类名为CircleAnimation,基类为flash.display.MovieClip.


步骤 12 – 注意
现在回到主时间栏,确保image层在舞台上。刚建的circle animation不应在舞台上而应只存在库中。

步骤 13
新建一层名为actions并锁定它。选择第一帧打开动作面板.


步骤 14
首先,为图片创建遮罩层并加入舞台。遮罩的对象为图片影片剪辑。


步骤 15
然后,创建4个变量:xPos,yPos,spacingX和spacingY。xPos和yPos用来定位CircleAnimation的新实例。spacingX 和spacingY设置x轴和y轴的空格大小.


步骤 16
因为需要将circle animation的实例逐一添加进遮罩里。在这里将使用一个计时器(timer)来重复调用一个过程函数。函数revealimage将在第30毫秒内调用一次。为了启动计时还需要调用一个start方法。


步骤 17
现在开始编写revealimage函数。确保此函数带有一个类型为TimerEvent的参数.


步骤 18
然后新建一个circle animation实例并基于xPos和yPos定位,再加入进遮罩对象。


步骤 19
由于xPos和yPos总是同值,目前所有的CircleAnimation实例都被加入进一个堆栈里。现在要做的就是将实例从左到右,从上到下依次显示出来。所以需要知道xPos和yPos的增量。当yPos超出最大数组限制时,xPos就需要重新设置到最左边


步骤 20
如果现在测试影片就会有最终的效果了,但还有一点非常重要:当图片已经完全显示后,CircleAnimation的实例仍然在被创建。这是因为createChildTimer 事件的侦听还没删除。此时需要检查如果yPos超出最大限制时,即刻删除createChildTimer 事件侦听器.


步骤 21 – Final code
顺便说一下:imageToReveal_mc.x + imageToReveal_mc.width + spacingX 和imageToReveal_mc.y + imageToReveal_mc.height + spacingY 从没改变过,因此需要存入进变量maxXPos 和 maxYPos.
所有的脚本如下…
复制内容到剪贴板
代码:
var maskImg:MovieClip = new MovieClip();   
addChild(maskImg);   
imageToReveal_mc.mask = maskImg;   
   
var xPos:Number = imageToReveal_mc.x;   
var yPos:Number = imageToReveal_mc.y;   
var spacingX:Number = 50;   
var spacingY:Number = 50;   
   
var createChildTimer:Timer = new Timer(30);   
// createChildTimer.addEventListener(TimerEvent.TIMER, revealImage);   
createChildTimer.addEventListener(TimerEvent.TIMER, revealImage, false, 0, true);   
createChildTimer.start();   
   
var maxXPos:Number = imageToReveal_mc.x + imageToReveal_mc.width  + spacingX;   
var maxYPos:Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY;   
   
function revealImage(evt:TimerEvent):void {   
   
    var ca:CircleAnimation = new CircleAnimation();   
    ca.x = xPos;   
    ca.y = yPos;   
    maskImg.addChild(ca);   
   
    xPos += spacingX;   
   
    if (xPos > maxXPos) {   
        xPos = imageToReveal_mc.x;   
        yPos += spacingY;   
    }   
   
    if (yPos > maxYPos) {   
        createChildTimer.removeEventListener(TimerEvent.TIMER, revealImage);   
    }   
}
步骤 22 – 逐行选择
使用递归法,我们可以改变一下效果以使图片逐行逐行显示出来
复制内容到剪贴板
代码:
var maskImg:MovieClip = new MovieClip();   
    addChild(maskImg);   
    imageToReveal_mc.mask = maskImg;   
      
    var xPos:Number = imageToReveal_mc.x;   
    var yPos:Number = imageToReveal_mc.y;   
    var spacingX:Number = 50;   
    var spacingY:Number = 50;   
      
    var createChildTimer:Timer = new Timer(120);   
    // createChildTimer.addEventListener(TimerEvent.TIMER, revealImage);   
    createChildTimer.addEventListener(TimerEvent.TIMER, revealImage, false, 0, true);   
    createChildTimer.start();   
      
    var maxXPos:Number = imageToReveal_mc.x + imageToReveal_mc.width  + spacingX;   
    var maxYPos:Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY;   
      
    function revealImage(evt:TimerEvent):void {   
      
        var ca:CircleAnimation = new CircleAnimation();   
        ca.x = xPos;   
        ca.y = yPos;   
        maskImg.addChild(ca);   
      
        xPos += spacingX;   
      
        if (xPos > maxXPos) {   
            xPos = imageToReveal_mc.x;   
            yPos += spacingY;   
        } else {   
            revealImage(evt);   
        }   
      
        if (yPos > maxYPos) {   
            createChildTimer.removeEventListener(TimerEvent.TIMER, revealImage);   
        }   
    }  
步骤 23 – 逐列选择
以下是逐列版本,多数的x和y变量的值己对调了.
复制内容到剪贴板
代码:
var maskImg:MovieClip = new MovieClip();   
    addChild(maskImg);   
    imageToReveal_mc.mask = maskImg;   
      
    var xPos:Number = imageToReveal_mc.x;   
    var yPos:Number = imageToReveal_mc.y;   
    var spacingX:Number = 50;   
    var spacingY:Number = 50;   
      
    var createChildTimer:Timer = new Timer(120);   
    // createChildTimer.addEventListener(TimerEvent.TIMER, revealImage);   
    createChildTimer.addEventListener(TimerEvent.TIMER, revealImage, false, 0, true);   
    createChildTimer.start();   
      
    var maxXPos:Number = imageToReveal_mc.x + imageToReveal_mc.width  + spacingX;   
    var maxYPos:Number = imageToReveal_mc.y + imageToReveal_mc.height + spacingY;   
      
    function revealImage(evt:TimerEvent):void {   
      
        var ca:CircleAnimation = new CircleAnimation();   
        ca.x = xPos;   
        ca.y = yPos;   
        maskImg.addChild(ca);   
      
        yPos += spacingY;   
      
        if (yPos > maxYPos) {   
            yPos = imageToReveal_mc.y;   
            xPos += spacingX;   
        } else {   
            revealImage(evt);   
        }   
      
        if (xPos > maxXPos) {   
            createChildTimer.removeEventListener(TimerEvent.TIMER, revealImage);   
        }   
    }  
总结
类似形状、透明度和计时速度等,还有其他一些因素可以改变以便呈现出不同的效果。
source.zip (959.21 KB)

TOP

请问怎么变成多张图片的?现在只有一张图片有效果

TOP

谢谢了!非常好

TOP

发新话题

关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

Powered by Discuz Copyright © 2005-2019 www.MissYuan.com All rights reserved.站长QQ8713688 邮箱8713688@qq.com