The animations that we have created up to this point are all non-interactive animations, that means they are just going to start when the window is loaded and continue on. In the triggers inspector, there is a window loaded events trigger and when you click on it you will see that says when the window is loaded the simple move timeline will begin. I am going actually to delete the simple move timeline and we are going to create some new timelines.
The first timeline I am going to create is moved to red. This timeline is going to tell the sphere to move closer to the red number one control after three seconds. So I am going to advance the play head to three and move the sphere. I am going to create another timeline, move to blue and do the same thing. Finally, one more moving to green and repeat the process. Now, this time I forgot to move the play head to three, but that can be easily remedied by just clicking and dragging the key frame to the desired time.
Now, I have created three different timelines, all of which move the ball to a different location. I am going to create event triggers on the three controls, one, two, and three to start their own animation. So I am going to first select my number one control and add an event trigger to it. Now, by default the event trigger says when the window is loaded. I am going to first drop down this field to choose the number one element and then the event we are looking for in the second field is mouse enter. I will just drag through the list to locate it.
Now, when number one has the mouse entered it. I am going to press this play button to add an action and I want to move to red timeline to begin. Similarly, I am now going to select number two and add an event trigger to it and when number two has the mouse enter. I want to move to blue timeline to begin, the same behavior with event three.
You will notice when I drop down the box this time, it will only display window in number two. Whenever this box is dropped down it will only show the currently selected element and its parent container. Since number three is not selected, it does not appear on the box, but just clicking on number three will now put it in the box so I can have the events occur on it.
Now, let us take a look at what happens when I run the application. The ball started moving directly to the green. I will show you why that happened in a moment. Now, when I move to the blue button, the ball moves over to the blue position, when I move over to red it does the same. If I happen to move somewhere, say to the green and then move to the blue before it is completed you will see that the ball changes its direction and moves. Let me explain why that happened.
This type of animation is called the hand-off animation. If we look in the timeline, we see that we have established key frames at time three, but no starting key frames. This means that when this timeline plays. I do not care where the sphere is at the start of the animation. I just care that after three seconds the sphere is at a specified location.
So, when the sphere was moving from number one control to the number three control the move to blue timeline caused it to stop wherever it was and immediately start moving towards the number two. You will also notice that when the window came up the move to green animation started immediately. Let us take a look at why that happened.
In the trigger inspector, in addition to all of our mouse enter events there is a window loaded event. By default, when the window is loaded, it will start every timeline in your project. Since these three timelines all affect the same properties, only the final timeline actually has its effects displayed.
So, move to red begins, move to blue begins and at the end it moved to green begins. Since, we do not want this I can click the minus buttons to delete all three of those actions. So, now when I press F5 to run the application, the ball at stationary, until I cause one of the animations to start.
Transcription by:
Scribe4you Transcription Services