Converting timeline tween to as3

Hi,

I found this tutorial on creating a sticker and made my own, but because its a timeline tween it really seems to slow down my entire site. I attempted to convert it to as3 using TweenMax, but can't seem to get the numbers right--it should play on(stick) and unstick(reverse animation).

Here is some of the TweenMax code, which as you can see is incredibly confusing and too hard coded(ie, I would like the x and y positions to be more relative):

Code:

---

myTween= new TweenMax(maskf,.61,{x:38,y:38,onComplete:addPdfListeners});
                        myTweenBack= new TweenMax(maskb,.212,{x:-43.5,y:-6.8,onComplete:function(){TweenMax.to(maskb, .1, {x:36.3,y:11.1,onComplete:function(){TweenMax.to(maskb, .29, {x:70,y:-7})}})}});
                        myTweenBackSticker= new TweenMax(stickerback,.17,{x:9.2,y:15.9,onComplete:function(){TweenMax.to(stickerback, .05, {x:34.7,y:36.56,onComplete:function(){TweenMax.to(stickerback, .098, {x:93.5,y:77.76,onComplete:function(){TweenMax.to(stickerback, .293, {x:117,y:150.76})}})}})}});

---

I've attached the fla.

Any help would be greatly appreciated...

Thanks,
---Yvette

Well of course it's confusing when you have an inline function within an inline function within an inline function. And if you want it to be relative you could just do

PHP Code:

---

TweenMax (maskf, .61, {x:maskf.x + 38, y:maskf.y + 38.....}); 


---

I used TweenMax before and I just think it's the best thing ever.

Hi 5Five555,

What do you suggest instead of the inline functions? Remember, I want the animation to reverse too...Also, re:relativity, I guess what you said is true, but I was thinking more in terms of percentages as I would like to include this animation in an existing site and the scale of the clip would be changed....and I don't have a clue as to what the numbers should be, as the experiment with TweenMax(which I think is wonderful too)didn't work out right.
I just can't seem to convert the timeline tweens into numbers in TweenMax, which replicate the animation in any satisfactory way...that is, it looks horrible.
I was hoping that someone knew of any easy way to do it, as my way was clearly not working....
There are really only a small number of tweens that need conversion....still looking for someone to invest a bit of time to help me out...

Thanks,
---Yvette

Do you know about the yoyo property of TweenMax?

PHP Code:

---

object.x = 0;
TweenMax (object, 30, {x:30, repeat:1, yoyo:true}); 


---

It makes the tween play backwards every other cycle.
If your repeat is 1, it will play forwards then backwards then stop.
If 2, forwards backwards forwards stop.
If 3, forwards backwards forwards backwards stop.

If you know at what percentage of the stage your object should be but not the exact coordinates you could do

PHP Code:

---

//This is always at the middle (50%)
object.x = stage.stageWidth / 2;

//20%
object.x = stage.stageWidth * 0.2;

//63%
object.x = stage.stageWidth * 0.63; 


---

Hi 5Five555,

yes, I am aware of the yoyo property...but I would be using the reverse property as I want the animation to reverse on a RollOver event attached to a different clip. I think my major issue is that I put that attached flas timeline into the main fla's library and that is where converting it to pure as3 using TweenMax got really confusing as I had to scale down the original clip to ~25% of the initial size ,reposition it and figure out the time per tween based on a new fps rate. The main fla runs at 41 fps and I think the one I posted was 24 fps. So, in order to replicate the animation through TweenMax I was trying to calculate the new values based on the new smaller size and new positions and framerate. I don't know, the math got a bit complicated and the resultant animation was really off. So what I was hoping is that someone could take that fla and figure out some code I could use which wouldn't be so hard coded as my numbers were all wrong, so that I could just have variables storing the initial positions(scale? And fps)and then just be able to place the sticker wherever I wanted(at whatever scale)and have it work. What would you suggest I do about the inline functions, as I believe there are around 4 tweens each for the sticker back and its mask that need to fire sequentially?

Thanks,
---Yvette

I would just give those functions actual names so you know which one you're calling. I have nothing against inline functions except for readability in some cases. In your case I cannot tell which function I'm in when I'm reading that one line.

ok...Here's what I've decided to do...I'm going to go back to that fla I posted and work out the TweenMax code there first..and then I'll worry about putting it in the main fla. If I can get it to look ok, I will just load it as an external swf, which should eliminate the need for changing any TweenMax values...
I'll let you know how it goes...wish me luck...

Thanks,
---Yvette

Hi,

I converted the tweens in the sample fla file and it still doesnt work..all of the numbers seemed to be correct except for the reverse_mask(maskb in attached), which were way way off..I put those numbers in by approximating the position in the timeline tweens for that mask.


As you can see it just doesnt work....

Help?

Thanks,
---Yvette
...............Actually, upon posting I see that there are no files attached....Had to clean up some prev attachments...;)

ok--attached is the fla and here is the as file:

Code:

---

package
{

        import flash.display.*;
        import flash.events.*;
        import com.greensock.TweenMax;
        import com.greensock.easing.*;
        import com.greensock.plugins.*;

        public class Sticker extends MovieClip
        {
                public var pdf:MovieClip;

                public function Sticker()
                {
                        if (stage)
                        {
                                init();
                        }
                        else
                        {
                                addEventListener(Event.ADDED_TO_STAGE,init);
                        }
                }
                private function init(e:Event=null):void
                {
                        removeEventListener(Event.ADDED_TO_STAGE,init);
                        /*stage.align = StageAlign.TOP_LEFT;*/
                        stage.scaleMode = StageScaleMode.SHOW_ALL;
                        handBackAdd();

                }
                private function handBackAdd():void
                {
                       
                        pdf.maskb.x=-190;
                        pdf.maskb.y=-283;
                        myTween = new TweenMax(pdf.maskf,.61,{x:145.75,y:-349.95,onComplete:addPdfListeners});
                        myTweenBack = new TweenMax(pdf.maskb,.22,{x:-140,y:-55,onComplete:function(){TweenMax.to(pdf.maskb, .098, {x:-80,y:21,onComplete:function(){TweenMax.to(pdf.maskb, .29, {x:120,y:175})}})}});
                        myTweenBackSticker= new TweenMax(pdf.stickerback,.17,{x:314.95,y:21.4,onComplete:function(){TweenMax.to(pdf.stickerback, .05, {x:424.5,y:109.3,onComplete:function(){TweenMax.to(pdf.stickerback, .098, {x:538.25,y:284.55,onComplete:function(){TweenMax.to(pdf.stickerback, .293, {x:902.55,y:637.85})}})}})}});

                }
                private function addPdfListeners():void
                {

                        trace(pdf.maskb.x,pdf.maskb.y,pdf.stickerback.x,pdf.stickerback.y);
                        pdf.buttonMode = true;
                        pdf.addEventListener(MouseEvent.ROLL_OVER,playOverPdf);
                        pdf.addEventListener(MouseEvent.ROLL_OUT,playOutPdf);
                        pdf.addEventListener(MouseEvent.CLICK,downloadPdf);
                }
                private function removePdfListeners():void
                {
                        pdf.buttonMode = false;
                        myTween.reverse();
                        pdf.gotoAndPlay("wipeoff");
                        pdf.removeEventListener(MouseEvent.ROLL_OVER,playOverPdf);
                        pdf.removeEventListener(MouseEvent.ROLL_OUT,playOutPdf);
                        pdf.removeEventListener(MouseEvent.CLICK,downloadPdf);
                }
                function playOverPdf(evt:MouseEvent):void
                {
                        var et:MovieClip = evt.currentTarget as MovieClip;

                        TweenMax.to(et, 1, {scaleX:.335, scaleY:.335, ease:Back.easeOut,onComplete:function(){TweenMax.to(et, .315, {scaleX:1, scaleY:1, ease:Back.easeOut})}});
                        tt = new Tooltip(this.stage,0xFFFFFF);

                        addChild(tt);
                        tt.showBottom("Download pdf");
                }
                function playOutPdf(evt:MouseEvent):void
                {
                        removeChild(tt);
                        var et:MovieClip = evt.currentTarget as MovieClip;

                        TweenMax.to(et, 1, {scaleX:.315, scaleY:.315, ease:Back.easeOut});
                }
                private function downloadPdf(evt:MouseEvent):void
                {
                       
                        removeChild(tt);
                        removeChild(pdf);
                       
                }
        }

}

---

Thanks,
----Yvette