Trying To Reverse [SOLVED]

[beno]

Hi;

I have the following line of code:

 

TweenMax.to(leftHand, 2, {x:200, startAt:{totalProgress:1}}).reverse();

 

The Flash movie plays, no errors are thrown, however it doesn't play in reverse. As you can tell, I want the mc to go to the end of the clip and play in reverse. Please advise.

TIA,

beno

[ukla]

Don't you need to use TimelineMax or TimelineLite for the reverse() function?

[GreenSock]

Your tween was literally telling leftHand's totalProgress property to start at 1. Like at the beginning of the tween it would do leftHand.totalProgress = 1. That's obviously not what you're after, though. I'm not entirely sure the effect you're after, but you could do either of these:

 

1) Just do a from() tween instead of a to() tween:

TweenMax.from(leftHand, 2, {x:200});

 

2) create your tween, then set the totalProgress, then reverse(), like:

 

var myTween:TweenMax = new TweenMax(leftHand, 2, {x:200});
myTween.totalProgress = 1;
myTween.reverse();

 

Hope that helps.

[ukla]

"TimelineLite and TimelineMax make it surprisingly simple to create complex sequences or groups of tweens that you can control as a whole. play(), pause(), restart(), or reverse(). You can even tween a timeline's currentTime or currentProgress property to fastforward or rewind the entire timeline. Add labels, gotoAndPlay(), change the timeline's timeScale, nest timelines within timelines, and lots more. "

 

Where is the reverse() method in the documentation for TweenMax?

[beno]

Neither one of those suggestions worked which makes me suspect a more fundamental problem. Here is my complete code:

 

package

{

import LightExplosion;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.display.MovieClip;

import gs.*;

import gs.TweenMax;

import gs.easing.*;

 

public class Main extends MovieClip

{

//Import Library Assests

public var head:HatAndFace;

public var leftEye:Eyeball;

public var rightEye:Eyeball;

public var leftHand:Hand;

public var rightHand:Hand;

 

public function Main()

{

init();

 

}

 

public function init():void

{

hatAndFace();

eyeball1();

eyeball2();

myRightHand();

myLeftHand();

}

 

//Place Head and Hat on stage and fade in

public function hatAndFace():void

{

head = new HatAndFace();

head.x = stage.stageWidth/2;

head.y = stage.stageHeight/2;

head.alpha = 0;

addChild(head);

 

TweenLite.to(head, 2, {autoAlpha:1});

}

 

//Place left eye on stage and fade in

public function eyeball1():void

{

leftEye = new Eyeball();

leftEye.x = head.x - 30;

leftEye.y = head.y;

leftEye.alpha = 0;

addChild(leftEye);

 

TweenLite.to(leftEye, 2, {autoAlpha:1});

}

 

//Place right eye on stage and fade in

public function eyeball2():void

{

rightEye = new Eyeball();

rightEye.x = head.x + 30;

rightEye.y = head.y;

rightEye.alpha = 0;

addChild(rightEye);

 

TweenLite.to(rightEye, 2, {autoAlpha:1});

}

 

//Place right hand on stage and fade in

public function myRightHand():void

{

rightHand = new Hand();

rightHand.x = head.x + 100;

rightHand.y = head.y + 100;

rightHand.alpha = 0;

addChild(rightHand);

 

rightHand.addEventListener(Event.ENTER_FRAME, checkFrame);

 

TweenLite.to(rightHand, 2, {autoAlpha:1});

}

 

//Place left hand on stage and fade in

public function myLeftHand():void

{

leftHand = new Hand();

leftHand.x = head.x - 100;

leftHand.y = head.y + 100;

leftHand.alpha = 0;

addChild(leftHand);

 

leftHand.addEventListener(Event.ENTER_FRAME, checkFrame);

 

TweenLite.to(leftHand, 2, {autoAlpha:1});

 

}

 

//check the hands and stop when they reach the 40 frame

public function checkFrame(e:Event):void

{

if (e.target.currentFrame == 40)

{

e.target.stop();

trace("hand is done tweening");

e.target.removeEventListener(Event.ENTER_FRAME, checkFrame);

 

}

if (e.target.currentFrame == 40)

{

TweenMax.from(leftHand, 2, {x:200});

// var myTween:TweenMax = new TweenMax(leftHand, 2, {x:200});

// myTween.totalProgress = 1;

// myTween.reverse();

//TweenMax.to(leftHand, 2, {x:200, startAt:{totalProgress:1}}).reverse();

}

}

 

}

}

 

The uncommented suggestion did nothing at all; that is, leftHand played the exact same as rightHand with no reverse. When I tried the commented out solution, Flash complained about a possibly undefined property of "totalProgress". Please advise.

TIA,

beno

[GreenSock]

Where is the reverse() method in the documentation for TweenMax?

 

It is inherited from the TweenCore class, just like TweenLite, TimelineLite, and TimelineMax

You might need to click the "Show Inherited Public Methods" link at the top of the list of methods to see it (like all ASDocs including Adobe's)

[GreenSock]

Flash complained about a possibly undefined property of "totalProgress".

 

You're using a stale version of TweenMax. The totalProgress property was introduced in v11, but you're using v10 or earlier. I can tell because you're using the old import statements - "import gs.*;" instead of "import com.greensock.*"

 

http://blog.greensock.com/v11/

[beno]

Well, I'm new to all this and used some code someone graciously supplied me. I changed the offending import lines to the lines I actually originally had, which you also suggested, that of import com.greenstock.* and the other import accordingly. I downloaded that edition of greensock last month. However, it didn't give me any better results.

 

If I can tag on a second question, I also have this line:

 

TweenMax.to(myPic, 1, {shortRotation:{rotation:60}});

 

However, in addition to tweening the rotation, I would also like to move it from one (x,y) to another. Should I have two different TweenMax.to() lines, or should I combine it in one, and how would it look?

 

Here again is the revised code:

 

package

{

import LightExplosion;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.display.MovieClip;

import com.greensock.*;

import com.greensock.easing.*;

 

public class Main extends MovieClip

{

//Import Library Assests

public var head:HatAndFace;

public var leftEye:Eyeball;

public var rightEye:Eyeball;

public var leftHand:Hand;

public var rightHand:Hand;

public var myPic:pic;

 

public function Main()

{

init();

 

}

 

public function init():void

{

hatAndFace();

eyeball1();

eyeball2();

myRightHand();

myLeftHand();

thePic();

}

 

//Place Head and Hat on stage and fade in

public function hatAndFace():void

{

head = new HatAndFace();

head.x = stage.stageWidth/2;

head.y = stage.stageHeight/4;

head.alpha = 0;

addChild(head);

 

TweenLite.to(head, 2, {autoAlpha:1});

}

 

//Place left eye on stage and fade in

public function eyeball1():void

{

leftEye = new Eyeball();

leftEye.x = head.x - 30;

leftEye.y = head.y + 15;

leftEye.alpha = 0;

addChild(leftEye);

 

TweenLite.to(leftEye, 2, {autoAlpha:1});

}

 

//Place right eye on stage and fade in

public function eyeball2():void

{

rightEye = new Eyeball();

rightEye.x = head.x + 30;

rightEye.y = head.y + 15;

rightEye.alpha = 0;

addChild(rightEye);

 

TweenLite.to(rightEye, 2, {autoAlpha:1});

}

 

//Place right hand on stage and fade in

public function myRightHand():void

{

rightHand = new Hand();

rightHand.x = head.x + 420;

rightHand.y = head.y + 100;

rightHand.alpha = 0;

addChild(rightHand);

 

rightHand.addEventListener(Event.ENTER_FRAME, checkFrame);

 

TweenLite.to(rightHand, 2, {autoAlpha:1});

}

 

//Place left hand on stage and fade in

public function myLeftHand():void

{

leftHand = new Hand();

leftHand.x = head.x - 20;

leftHand.y = head.y + 100;

leftHand.alpha = 0;

addChild(leftHand);

 

leftHand.addEventListener(Event.ENTER_FRAME, checkFrame);

 

TweenLite.to(leftHand, 2, {autoAlpha:1});

 

}

 

//check the hands and stop when they reach the 40 frame

public function checkFrame(e:Event):void

{

if (e.target.currentFrame == 40)

{

e.target.stop();

trace("hand is done tweening");

e.target.removeEventListener(Event.ENTER_FRAME, checkFrame);

 

}

if (e.target.currentFrame == 40)

{

// TweenMax.from(leftHand, 2, {x:200});

var myTween:TweenMax = new TweenMax(leftHand, 2, {x:200});

myTween.totalProgress = 1;

myTween.reverse();

//TweenMax.to(leftHand, 2, {x:200, startAt:{totalProgress:1}}).reverse();

}

}

 

public function thePic():void

{

myPic = new pic();

myPic.x = stage.stageWidth/4 + 20;

myPic.y = stage.stageHeight/1.5 - 10;

addChild(myPic);

TweenMax.to(myPic, 1, {shortRotation:{rotation:60}});

}

}

}

 

TIA,

beno

[GreenSock]

...it didn't give me any better results.

 

What does that mean? Please be as specific as possible. I have no idea what's going on in your MovieClip, but it looks like you're trying to sense when it hits frame 40 and then do the tween - very difficult to troubleshoot without seeing the files. Please make sure you've read http://blog.greensock.com/get-started-tweening/ first. Some of your questions make it seem like you haven't read the basics yet.

 

TweenMax.to(myPic, 1, {shortRotation:{rotation:60}});

 

However, in addition to tweening the rotation, I would also like to move it from one (x,y) to another. Should I have two different TweenMax.to() lines, or should I combine it in one, and how would it look?

 

If you want them to all tween at the same time, just put them in the same tween, like:

 

TweenMax.to(myPic, 1, {shortRotation:{rotation:60}, x:100, y:200});

 

Also, I would highly recommend creating a separate FLA in which you isolate problems so that you can limit the complexity. For example, try only doing one function and see if you can get a tween to work as expected. Then build on that and get more fancy until it breaks. If you want to increase your chances of getting an answer in forums and on lists (I've seen your posts in at least one other mailing list), create a super simple file with the problem isolated, and then post a specific question like "how can I make a tween go backwards..." or "why is this function causing the alpha to fade out instead of in?" and attach the file or code if at all possible. The simpler and more isolated the code, the more likely you'll get an answer.

 

Hope that helps.

[beno]

The following code makes the hand slide along the x axis a bit (which I've tried to limit and would like to eliminate). It doesn't make it reverse the actual mc. The mc is a shape tween not a motion tween.

 

package

{

import flash.net.URLRequest;

import flash.display.Loader;

import flash.events.Event;

import flash.events.ProgressEvent;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.display.MovieClip;

import com.greensock.*;

import com.greensock.easing.*;

 

public class Main extends MovieClip

{

//Import Library Assests

public var leftHand:Hand;

 

public function Main()

{

init();

 

}

 

public function init():void

{

myLeftHand();

}

 

 

//Place left hand on stage and fade in

public function myLeftHand():void

{

leftHand = new Hand();

leftHand.x = head.x - 20;

leftHand.y = head.y + 50;

addChild(leftHand);

TweenMax.from(leftHand, 2, {x:420});

 

}

 

 

}

}

 

 

Please advise.

TIA.

beno

[GreenSock]

Oh! Are you thinking that doing myTween.reverse() would make your MovieClip play in reverse? No no, it would make the tween itself play in reverse. If you want to play a MovieClip in reverse, you'd need to use the "frame" plugin and tween the frame numbers. There's an interactive demo in the Plugin Explorer.

 

Also, your code did this TweenMax.from(leftHand, 2, {x:420}); but you said you DON'T want the x-coordinate to change? I'm confused - why would you do a tween of the x property if you don't want it to change?

[beno]

This is strange, but I see greensock has updated this thread, but I don't see the update!! Also, re-reading your last post, I evidently didn't notice your last paragraph. Yes, that's an excellent suggestion. The code I supplied in my last post works with a change to the reference to "head" (which is just used for positioning), but it still produces the same effect. I look forward to your comments.

beno

[GreenSock]

Oh! Are you thinking that doing myTween.reverse() would make your MovieClip play in reverse? No no, it would make the tween itself play in reverse. If you want to play a MovieClip in reverse, you'd need to use the "frame" plugin and tween the frame numbers. There's an interactive demo in the Plugin Explorer.

 

Also, your code did this TweenMax.from(leftHand, 2, {x:420}); but you said you DON'T want the x-coordinate to change? I'm confused - why would you do a tween of the x property if you don't want it to change?

 

beno, did you see this response?

 

If you're still having trouble, please explain in precise details exactly what the problem is and include the most simplified FLA possible that reproduces the issue. (don't forget to zip your file before posting)

[beno]

Yes. I didn't notice until now that there was a second page! I don't want to tween x. I want to reverse shape tween. Impossible?

beno

[GreenSock]

Yeah, like I said, you can make a MovieClip play in reverse using the "frame" plugin. There's an interactive demo in the Plugin Explorer.

 

mc.gotoAndStop(mc.totalFrames);
TweenMax.to(mc, mc.totalFrames-1, {frame:1, useFrames:true, ease:Linear.easeNone});

[beno]

Following your previous good advice, I chopped down this file to only the pertinent:

 

package

{

import flash.net.URLRequest;

import flash.display.Loader;

import flash.events.Event;

import flash.events.ProgressEvent;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.display.MovieClip;

import com.greensock.*;

import com.greensock.easing.*;

 

public class Main extends MovieClip

{

//Import Library Assests

public var leftHand:Hand;

 

public function Main()

{

init();

 

}

 

public function init():void

{

myLeftHand();

}

 

//Place left hand on stage and fade in

public function myLeftHand():void

{

leftHand = new Hand();

leftHand.x = 200;

leftHand.y = 200;

addChild(leftHand);

leftHand.addEventListener(Event.ENTER_FRAME, checkFrame);

TweenMax.from(leftHand, 2, {x:420});

 

}

 

//check the hands and stop when they reach the 40 frame

public function checkFrame(e:Event):void

{

if (e.target.currentFrame == 40)

{

e.target.stop();

trace("hand is done tweening");

e.target.removeEventListener(Event.ENTER_FRAME, checkFrame);

// TweenMax.from(leftHand, 2, {x:200});

var myTween:TweenMax = new TweenMax(leftHand, 2, {x:400});

leftHand.gotoAndStop(leftHand.totalFrames);

TweenMax.to(leftHand, leftHand.totalFrames-1, {frame:1, useFrames:true, ease:Linear.easeNone});

myTween.totalProgress = 1;

myTween.reverse();

}

}

}

}

 

Unfortunately, the code you supplied me does not seem to do anything noticeable. leftHand proceeds forward; it does not reverse. What have I missed?

TIA,

beno

[GreenSock]

beno, please isolate the problem and post an FLA. It's very difficult to troubleshoot things based on the info you are providing. If you want to make the leftHand MovieClip play in reverse, then remove ALL other unnecessary code (like the x tween and the ENTER_FRAME handler, etc.) and see if you can get it to work. Then start introducing other things until it breaks.

[beno]

Criticism well taken. I have done the best I can below. I have probably left in too many import statements, but I don't think that will make any difference. I have left in a few commented-out lines that maybe should be uncommented, I don't know. The script runs without errors, but doesn't reverse. Please advise.

beno

 

package

{

import flash.events.Event;

import flash.events.ProgressEvent;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.display.MovieClip;

import com.greensock.*;

import com.greensock.easing.*;

 

public class Main extends MovieClip

{

//Import Library Assests

public var leftHand:Hand;

 

public function Main()

{

init();

 

}

 

public function init():void

{

myLeftHand();

}

 

//Place left hand on stage and fade in

public function myLeftHand():void

{

leftHand = new Hand();

leftHand.x = 300;

leftHand.y = 100;

addChild(leftHand);

leftHand.addEventListener(Event.ENTER_FRAME, checkFrame);

}

 

//check the hands and stop when they reach the 40 frame

public function checkFrame(e:Event):void

{

if (e.target.currentFrame == 40)

{

// e.target.stop();

// trace("hand is done tweening");

// e.target.removeEventListener(Event.ENTER_FRAME, checkFrame);

var myTween:TweenMax = new TweenMax(leftHand, 2, {x:400});

leftHand.gotoAndStop(leftHand.totalFrames);

TweenMax.to(leftHand, leftHand.totalFrames-1, {frame:1, useFrames:true, ease:Linear.easeNone});

myTween.totalProgress = 1;

myTween.reverse();

}

}

}

}

[GreenSock]

I'll ask a 4th time - please post your FLA file. (zip it first and remove ALL unnecessary assets, code, etc.)

[beno]

Hi;

No zip s/w on this computer at the internet cafe. Light file, but couldn't upload through your form. Please go here:

http://angrynates.com/cart/main.fla

http://angrynates.com/cart/Main.as

TIA,

beno

[GreenSock]

Your leftHand MovieClip only had 20 frames, and you had a stop() on frame 20. However, your Main.as code is looking for when it hits frame 40 before it fires the tween code. It never reaches frame 40! There is no frame 40, so your tween code never runs. This is a classic case where a simple trace() inside your if() block would have immediately told you that the problem had nothing to do with the tween - that code was never being run in the first place. Try using trace() a lot when you're troubleshooting so that you can see what's happening (or not happening) in the code at runtime.

 

This code should make it reverse the shape tween like you wanted:

 

package
{
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.MovieClip;
import com.greensock.*;
import com.greensock.easing.*;

public class Main extends MovieClip
{
	//Import Library Assests
	public var leftHand:Hand;

	public function Main()
	{
		init();

	}

	public function init():void
	{
		myLeftHand();
	}

	//Place left hand on stage and fade in
	public function myLeftHand():void
	{
		leftHand = new Hand();
		leftHand.x = 300;
		leftHand.y = 100;
		addChild(leftHand);
		leftHand.addEventListener(Event.ENTER_FRAME, checkFrame);
		}

	//check the hands and stop when they reach the 40 frame
	public function checkFrame(e:Event):void
	{
		if (e.target.currentFrame == 20)
		{
			e.target.removeEventListener(Event.ENTER_FRAME, checkFrame);
			leftHand.gotoAndStop(leftHand.totalFrames);
			TweenMax.to(leftHand, leftHand.totalFrames-1, {frame:1, useFrames:true, ease:Linear.easeNone});
		}
	}
}
}

 

Based on what I saw in your code, I'd HIGHLY recommend reading up on the basics of ActionScript and Flash because your project is going to make you really frustrated if you don't understand some of the basics. I don't mean it as an insult at all - I'm simply trying to save you some heartache and confusion. If you can't get your hands on a book (I saw your post on Flashcoders that indicated you may not be able to get a book), check out http://wiki.mediaboxtraining.com/doku.p ... :tutorials. Pour over it. Get the basics down before you throw yourself into a full-fledged project. Again, I don't mean it as an insult - just offering some friendly advice to maximize your effectiveness. I probably won't have much time to pursue this thread further. Best wishes and good luck on the project.

[beno]

Absolutely no offense taken whatsoever, and thank you. Frankly, this is typical of the mistakes I make. I'm not well suited for programming because I'm primarily an artist...I think out of the right hemisphere. On the book, a list member said he's bought and is sending me one. Computer time for me is also a premium until I buy my Mac in a few weeks. However, once I finish this mammoth shopping cart I'm writing in Python, I'll be devoting almost all my computer time to Flash either in studying or working on my projects until I get this last brush fire put out. I muddled through Python and am actually now pretty decent as a programmer in the same. I'll muddle through Flash too, books and all And eventually it will stick

beno