플래시 AS3 이미지 효과

Question

다음 튜토리얼/소스 (code here)를 사용하여 이미지를 여러 블록으로 나눠 넣으려고 시도하고 있습니다 만 잘못된 방법입니다 - 순서를 조정하려면 어떻게해야합니까? 전체 이미지에서 시작한 다음 조각으로 나누십시오.

원본 코드 (www.riacodes.com의 제공) :에 링크 된 코드의

import com.greensock.*; 
import com.greensock.easing.*; 

const COLUMNS:uint=5; 
const ROWS:uint=5; 

var imagesGrid : Array = new Array();  

var imageLoader:Loader = new Loader(); 
imageLoader.load(new URLRequest("image.jpg")); 
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded); 

function onImageLoaded(e:Event):void { 

    var originalBitmapData:BitmapData = e.target.content.bitmapData; 

    var imageWidth : Number = originalBitmapData.width/COLUMNS; 
    var imageHeight : Number = originalBitmapData.height/ROWS; 

    for (var i = 0; i < ROWS; i++) { 

     for (var j = 0; j < COLUMNS; j++) { 

      var imageHolder:MovieClip = new MovieClip(); 

      var image:Bitmap = new Bitmap(); 
      image.bitmapData=new BitmapData(imageWidth,imageHeight); 
      image.bitmapData.copyPixels(
           originalBitmapData, 
           new Rectangle(j * imageWidth, i * imageHeight,imageWidth, imageHeight), 
           new Point(0,0)); 

      imageHolder.addChild(image); 

      imageHolder.x= j*imageWidth ; 
      imageHolder.y= i*imageHeight ; 

      imageHolder.alpha=0; 

      imagesGrid.push(imageHolder); 
      addChild(imageHolder); 

     } 
    } 
    revealImage(); 
} 

function revealImage():void { 
    for (var i:int = 0; i <imagesGrid.length; i++){ 
     var imageGrid:MovieClip = imagesGrid[i] as MovieClip; 
     imageGrid.alpha = 1; 
     TweenLite.from(imageGrid,.8,{alpha:0,y:-200,delay:i*.1,ease:Back.easeOut}); 
    } 
} 

Answer 1

revealImage()를 변경해야합니다.

onImageLoaded()는로드 된 이미지를 작은 부분으로 나누어 처리합니다. 다음 줄의 , 즉 투명성에 대한 0 값을 설정하기 때문에 shanethehat가 지적 하듯이 기능은 이미지가 표시되지 않습니다 완료되면,

const COLUMNS:uint=5; 
const ROWS:uint=5; 

: 당신은 실제로 이러한 조작하여 부품의 크기를 변경할 수 있습니다 (최대 값 = 1)

imageHolder.alpha=0; 

실제로는 주 이미지 조각이 포함 된 무비 클립 배열로 끝납니다. revealImage()에서이 배열을 반복하면서 각 무비 클립의 x & y에 임의의 값을 할당하여 주 이미지를 조각으로 나눌 수 있습니다.

for(var i:int ; i <imagesGrid.length; i++) 
{ 
    var imageGrid:MovieClip = imagesGrid[i]; 
    imageGrid.alpha = 1; 

    // Calculate a random value for x , y 
    // Tweak this according to the Fx you're looking for 
    var randomX:Number = Math.random() * stage.stageWidth; 
    var randomY:Number = Math.random() * stage.stageHeight; 

    TweenLite.to(imageGrid, 1, 
     {x:randomX, y:randomY, delay:i*.1,ease:Back.easeOut}}); 
} 

Answer 2

첫째, 변화 라인 38 :

imageHolder.alpha=1; 

이렇게하면 그 이미지의 시작의 부분 꺼져있다.

는 다음 변경 라인 52 :

TweenLite.to(imageGrid,.8,{alpha:0,y:-200,delay:i*.1,ease:Back.easeOut}); 

이 from()에서 to()에 TweenLite 기능을 변화, 바꾸어 말하면 그 객체에 지정된 에 값을 애니메이션화하는 각 요소를 야기한다.