Hey guys,
so I´ve been experimenting with TweenLite and TweenMax. I´m currently working on flash document containing 9 images, all of them moving slightly to the left/right/top/buttom in order to make the flash document appear more vivid (wiggle effect). Each image is supposed to be scaled times 1.5 on mouseover and move to the center. I hope i´ve explained it well.
I´ve also attached the swfjust in case some of you can take the time and look at it.
So here´s how I´ve built it: for the sake of simplifying it i will just post the code for three images instead of all 9.
Imported classes:
import com.greensock.*;
import com.greensock.easing.*;
tweens for the mouseoverfunction when the images center and are scaled up:
var myTween:TweenLite = new TweenLite(end1_mc, 2, {x:150, y:150, scaleX:1.5, scaleY:1.5});
myTween.pause();
var myTween2:TweenLite = new TweenLite(end2_mc, 2, {x:150, y:150, scaleX:1.5, scaleY:1.5});
myTween2.pause();
var myTween3:TweenLite = new TweenLite(end3_mc, 2, {x:150, y:150, scaleX:1.5, scaleY:1.5});
myTween3.pause();
eventListeners for MouseOver
end1_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler1);
end2_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler2);
end3_mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler3);
eventListener for MouseOut (Tween is supposed to be reversed and images set back to original pos/size
end1_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler1);
end2_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler2);
end3_mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler3);
functions containing the "wiggle" or "float" effect of the images when there´s no mouseover. I´ve created two functions containing tweens that call eachother on complete so I get an infinite loop.
function doTween1():void {
var wiggle1:TweenLite = new TweenLite(end1_mc, Math.random()+ 1, {delay: Math.random(), onComplete:doTween2, x:end1_mc.x + Math.random() * 10, y:end1_mc.y + Math.random() * 10, ease:Sine.easeInOut});
var wiggle2:TweenLite = new TweenLite(end2_mc, Math.random()+ 1, {delay: Math.random(), onComplete:doTween2, x:end2_mc.x + Math.random() * 10, y:end2_mc.y + Math.random() * 10, ease:Sine.easeInOut});
var wiggle3:TweenLite = new TweenLite(end3_mc, Math.random()+ 1, {delay: Math.random(), onComplete:doTween2, x:end3_mc.x + Math.random() * 10, y:end3_mc.y + Math.random() * 10, ease:Sine.easeInOut});
function doTween2():void {
var wiggleBack1:TweenLite = new TweenLite(end1_mc, Math.random()+ 1, {delay: Math.random(), onComplete:doTween1, x:end1_mc.x - Math.random() * 10, y:end1_mc.y - Math.random() * 10, ease:Sine.easeInOut});
var wiggleBack2:TweenLite = new TweenLite(end2_mc, Math.random()+ 1, {delay: Math.random(), onComplete:doTween1, x:end2_mc.x - Math.random() * 10, y:end2_mc.y - Math.random() * 10, ease:Sine.easeInOut});
var wiggleBack3:TweenLite = new TweenLite(end3_mc, Math.random()+ 1, {delay: Math.random(), onComplete:doTween1, x:end3_mc.x - Math.random() * 10, y:end3_mc.y - Math.random() * 10, ease:Sine.easeInOut});
now I call the first function and start the animation loop:
doTween1()
RollOver handler for every single image, starting the corresponding scale/position tween that I´ve specified in the beginning as a var inside a function. in order to have the hovered image on top i´ve added the addChild command:
function rollOverHandler1(event:MouseEvent):void {
addChild(end1_mc);
myTween.play();
}
function rollOverHandler2(event:MouseEvent):void {
addChild(end2_mc);
myTween2.play();
}
function rollOverHandler3(event:MouseEvent):void {
addChild(end3_mc);
myTween3.play();
}
Same for RollOut: Tween is reversed:
function rollOutHandler1(event:MouseEvent):void {
myTween.reverse();
}
function rollOutHandler2(event:MouseEvent):void {
myTween2.reverse();
}
function rollOutHandler3(event:MouseEvent):void {
myTween3.reverse();
}
So far so good.
When I compile it works fine, wiggle movement looks quite cool and MouseOver animation runs. However, I notice that the Tweens (wiggle animation and mouseover animation) get in conflict with each other and mess up the whole animation. Sometimes the scaling stops or it jumps to random positions.
I´ve tried various overwrite options with the overwrite manager but couldn´t quite figure out a way to solve it. Maybe my document´s too buggy anyway and I need to write a totally different code that simplyfies everything.
Any help is greatly appreciated, I know it´s a big chunk of code to look at but I´m really stuck here.
Thanks and best wishes!
Untitled-1.zip