Passe o mouse para revelar o Cartaz

Aprenda a revelar os pedaços do cartaz quando o usuário passa o mouse sobre ele.

Exemplo: Passe o mouse sobre o palco (parte branca abaixo que vai aparecendo o cartaz)

Etapa 1

Este tutorial é uma variação do nosso tutorial anterior, intitulado «Revelando uma imagem com um efeito de animação Grid".

Etapa 2

Crie um novo arquivo flash (Actionscript 3.0) e defina as suas dimensões com as dimensões de sua postagem. Abra o painel de ações.

Etapa 3

3. Colar o código a seguir. É o mesmo que o tutorial anterior, exceto para as linhas de destaque. A diferença aqui é a nossa maneira de posicionar os elementos para que a animação tween escala em cada peça terá início a partir do centro da peça.
Também nós adicionamos um event listener MOUSE_OVER para cada parte do cartaz. 

// File downloaded from www.riacodes.com
import com.greensock.*;

const COLUMNS:uint=10;
const ROWS:uint=10;

var imagesGrid : Array = new Array();    

var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("http://www.revistaminha.com.br/flash/swf/theamerican.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 < COLUMNS; i++) {
 
  for (var j = 0; j < ROWS; j++) {
 
   var imageHolder:MovieClip = new MovieClip();
    
   var image:Bitmap = new Bitmap();
   image.bitmapData=new BitmapData(imageWidth,imageHeight);
    image.bitmapData.copyPixels(
        originalBitmapData,
          new Rectangle(i * imageWidth, j * imageHeight,imageWidth, imageHeight),
          new Point(0,0));
 
   imageHolder.addChild(image);
    
   image.x = -imageWidth / 2;
   image.y = -imageHeight / 2;
 
   imageHolder.x= i*imageWidth + imageWidth/2;
   imageHolder.y= j*imageHeight + imageHeight/2;
   
   imageHolder.alpha=0;
   imageHolder.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
 
     imagesGrid.push(imageHolder);
   addChild(imageHolder);
  }
 } 
}

Etapa 4

OverHandler A () função é a parte do cartaz que disparo o evento e usa o motor TweenLite para animar o seu alfa e propriedades escalas. Então, impedir que a parte que foi revelado de receber mensagens do mouse e retire a sua event listener.

function overHandler(e:MouseEvent):void {
 var imageGrid = e.target as MovieClip;
  imageGrid.scaleX = imageGrid.scaleY = 0;
  TweenLite.to(imageGrid, .5, {alpha: 1,scaleX:1,scaleY:1});
  imageGrid.mouseEnabled = false;
  imageGrid.removeEventListener(MouseEvent.MOUSE_OVER, overHandler);
}

Etapa 5

Aqui está o código final. Teste seu filme para vê-lo em ação.

// File downloaded from www.riacodes.com
import com.greensock.*;

const COLUMNS:uint=10;
const ROWS:uint=10;

var imagesGrid : Array = new Array();    

var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest("http://www.revistaminha.com.br/flash/swf/theamerican.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 < COLUMNS; i++) {
 
  for (var j = 0; j < ROWS; j++) {
 
   var imageHolder:MovieClip = new MovieClip();
    
   var image:Bitmap = new Bitmap();
   image.bitmapData=new BitmapData(imageWidth,imageHeight);
    image.bitmapData.copyPixels(
        originalBitmapData,
          new Rectangle(i * imageWidth, j * imageHeight,imageWidth, imageHeight),
          new Point(0,0));
 
   imageHolder.addChild(image);
    
   image.x = -imageWidth / 2;
   image.y = -imageHeight / 2;
 
   imageHolder.x= i*imageWidth + imageWidth/2;
   imageHolder.y= j*imageHeight + imageHeight/2;
   
   imageHolder.alpha=0;
   imageHolder.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
 
     imagesGrid.push(imageHolder);
   addChild(imageHolder);
  }
 } 
}

function overHandler(e:MouseEvent):void {
 var imageGrid = e.target as MovieClip;
  imageGrid.scaleX = imageGrid.scaleY = 0;
  TweenLite.to(imageGrid, .5, {alpha: 1,scaleX:1,scaleY:1});
  imageGrid.mouseEnabled = false;
  imageGrid.removeEventListener(MouseEvent.MOUSE_OVER, overHandler);
}

Site de Origem: http://www.tutoriaisflash.net