FromTo Animations
So far, all the animations we created had to have a starting point or an ending point. We have used the from or the to methods. In TweenLite and above, we can use the fromTo method, enabling us to control both the starting and ending point within one method. In this lesson, we'll explore how to work with the fromTo method.
Video Transcript
00:00Let's continue.
00:01So what I wanna do next is I wanna create
00:03a little fade event or some sort of wipe event
00:06and with it kinda introduce a few more properties.
00:10So to do that, what I'm gonna do next is
00:12I want to create a new shape.
00:15So I'm just gonna create a little shape here.
00:17Shape, shape, shape hole.
00:21We're gonna create a little shape hole.
00:24That's what I hate when you know that you have a typo.
00:26It's like, it's never ending.
00:28All right, so new shape, fantastic.
00:32And I wanna take that shape and I wanna draw,
00:34I wanna go to its graphics library
00:36and I'm just gonna draw a rectangle.
00:38So I'm gonna begin fill first
00:40and I'm gonna select the color
00:42and that color is gonna be just complete darkness,
00:44complete black and I'm gonna go to shape
00:48and I'm gonna graphics again
00:49and I'm gonna draw rectangle, draw a rect, draw a rect.
00:54And I'm gonna set it just like any value here from X zero,
00:58I'm gonna just set a small little box,
01:01I'm gonna add it to the stage, add child.
01:05Let's just see that our child,
01:06our little shape is there and it sure is.
01:09So let me just close that up.
01:11So now that we're gonna take our little shape,
01:12what I wanna do next is I wanna actually
01:15go to my tween library
01:18and this time around I'm gonna use the function from two.
01:21We've talked about it earlier
01:22but we haven't really done it yet.
01:24So we're gonna take that shape
01:25and we wanna create a one second animation
01:28and we're gonna say what are the starting values?
01:30So the starting values are gonna be from X position zero,
01:34well, the X is already at zero I believe
01:38because if the child automatically was zero
01:40but let's set it anyways, Y position zero,
01:42we wanna set the height of our element to be the stage height
01:50and we wanna set our width to be zero.
01:54So we're gonna start from absolute zero
01:56and what we wanna do is we wanna animate it through
01:58and fill up the whole screen.
02:00So next step is we wanna take our position.
02:02We're not gonna change the position
02:04but we're gonna take our height
02:09is not changing as well, right?
02:10So the only thing that's changing is actually our width
02:14which will turn into the stage stage width, right?
02:17So let's see what we've just done.
02:19So before you wanna see it, let's look at it two steps.
02:22So first is our object, then how long,
02:24then we set the initial properties,
02:27then we set the final properties
02:30and it's time for us to complete our animation.
02:33So if I go here and I just click on enter to complete
02:36and that is doing exactly what we wanted it to do
02:40only we wanted also to then maybe animate out
02:42once it's complete.
02:43So how about we'll add here a reverse, no, not reverse.
02:48We wanna continue on.
02:49So we're gonna just continue on and take this animation
02:52and we're going to start from where we were.
02:56So we're gonna go to two
02:58and we're gonna start here a little animation
03:01and we're gonna take it to,
03:05we're gonna take it to with zero
03:10and to exposition is gonna be stage, stage width.
03:14Basically pushing our content out of the way
03:17and we're gonna put here a delay of one second.
03:19That way it's gonna happen right afterwards.
03:22Oh, let me see what is my typo here.
03:28Okay, so two is uppercase that was wrong.
03:31So it's lowercase two and there we go.
03:34And then our animation begins.
03:36Now, perfect.
03:37That's exactly what we wanted to happen.