Converting timeline tween to as3
A Flash Developer Resource Site

Results 1 to 9 of 9

Thread: Converting timeline tween to as3

  1. #1
    Senior Member
    Join Date
    Oct 2005
    Posts
    198

    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

  2. #2
    Senior Member
    Join Date
    Jul 2008
    Posts
    391
    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.38y:maskf.38.....}); 
    I used TweenMax before and I just think it's the best thing ever.

  3. #3
    Senior Member
    Join Date
    Oct 2005
    Posts
    198
    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
    Last edited by yvillicana; 04-06-2012 at 05:17 AM.

  4. #4
    Senior Member
    Join Date
    Jul 2008
    Posts
    391
    Do you know about the yoyo property of TweenMax?
    PHP Code:
    object.0;
    TweenMax (object30, {x:30repeat:1yoyo: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.stage.stageWidth 2;

    //20%
    object.stage.stageWidth 0.2;

    //63%
    object.stage.stageWidth 0.63

  5. #5
    Senior Member
    Join Date
    Oct 2005
    Posts
    198
    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
    Last edited by yvillicana; 04-07-2012 at 04:20 AM.

  6. #6
    Senior Member
    Join Date
    Jul 2008
    Posts
    391
    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.

  7. #7
    Senior Member
    Join Date
    Oct 2005
    Posts
    198
    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

  8. #8
    Senior Member
    Join Date
    Oct 2005
    Posts
    198

    Still not working

    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...
    Last edited by yvillicana; 04-09-2012 at 05:29 PM. Reason: attachments didnt show up

  9. #9
    Senior Member
    Join Date
    Oct 2005
    Posts
    198

    2nd attempt to post files

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width


HTML5 Development Center