PDA

View Full Version : revealing mask on mouse over



tizbo1423
August 25th, 2008, 10:04 AM
i need a little help in figuring out how to create this effect i'm going for.

i have a gallery of thumbnails on a page that have been cropped down just show the top left corner. what i would like to happen is when the viewer mouses over the thumbnail, it expands from the top left corner into the full image.

i'm not very familiar with flash or as3, and can really only figure out tweens :/ i'd appreciate any help.

Anil_kumar
August 26th, 2008, 08:40 AM
paste this code to the first frame of your flash CS3(AS3) document

import fl.transitions.Tween;
import fl.transitions.easing.*;

var i = new int;
var MyRoot = root;

//thumbnails
for (i=0; i<4; i++) {
var smallBox = createBox(50,0xFFCC00/i);
addChild(smallBox);
smallBox.y=53*i;
smallBox.id=i;
smallBox.addEventListener(MouseEvent.CLICK,ClickHa ndler);
smallBox.buttonMode=true;
}

//full image
for (i=0; i<4; i++) {
var BigBox = createBox(400,0xFFCC00/i);
MyRoot.addChild(BigBox);
BigBox.x=55;
BigBox.alpha=0;
BigBox.name="BigBox_"+i;
}

function createBox(Size:Number,clr:Number):MovieClip {
var box = new MovieClip();
box.graphics.beginFill(clr,1);
box.graphics.drawRect(0,0,Size,Size);
return box;
}
var Currenttarget = MyRoot.getChildByName("BigBox_0");
TweenHandler(Currenttarget,0,1);
function ClickHandler(e:MouseEvent):void {
var target = MyRoot.getChildByName("BigBox_"+e.target.id);
TweenHandler(target,0,1);
TweenHandler(Currenttarget,1,0);
Currenttarget=target;
}

function TweenHandler(MyObject:MovieClip,Start:Number,End:N umber ):void {
var MyTween:Tween = new Tween(MyObject, "alpha", Regular.easeIn, Start, End, 1, true);
}

//in Line 13 change ClickHa ndler to ClickHandler
//in Line 41 change N umber to Number

Anil
anilkumarnd@gmail.com