In the past, the animations you created on the timeline were tied to the object or objects you are animating. There was no way to separate the actual animation from the objects that were being animated. Your only solution was to re-create the animation or do some clever keyframe copy/paste magic if you wanted to make your animation reusable.
In Flash CS4, you no longer have the tight coupling between the animation and the animated objects. A new feature known as motion presets gives you the ability to take just your animation, save it as something that you can reuse, and apply this saved animation to a different object fairly easily!
If you are looking to learn more about motion presets, you have come to the right place. This tutorial will briefly walk you through creating and using motion presets. To save you some time by not having to create a new animation just for this tutorial, download an animation that I have already created for you:
Don't worry - the above animation does not contain anything outside of a simple motion tween. You will still have to do all of the interesting stuff yourself.
Once you have downloaded, extracted, and opened the source file in Flash CS4, you will see a simple animation that involves an image of a box sliding in from the left, slowing down, and speeding out of view as it moves to the right. The implementation of the animation is nothing more than a simple tween with a custom ease that is responsible for the slowdown.
Creating (Saving) a Motion Preset
What we want to do is save this animation (tween) as a motion preset so that we can apply the animation to other things besides our image of the Flash CS4 box. Select your animation by clicking on it in the timeline:
Give your preset the name Ease and Slide and click OK. Your Save Preset As dialog will disappear, and you will see your Ease and Slide motion preset appear in the Motion Presets panel in the Custom Presets folder:
In the previous part, you took an animation and saved it as a motion preset. In this page, let's look at how to use your saved motion preset in a new file.
Using a Motion Preset
To use a motion preset, first, go ahead and create a new Flash CS4 file by going to File | New. In your new file, draw a blue square:
Displaying the Motion Preset Preview
If you look in your Motion Presets panel and select any of the already-provided presets, notice that you see a preview of what the preset actually looks like:
To add your own preview, first save this animation that you currently have open and publish it to create a SWF file. If you have been following along, this SWF file will be nothing more than your blue square with the Ease and Slide preset applied to it. Once you have published, go to your publish location on your hard drive to see your SWF file:
In that folder, you will see all of the custom Motion Presets that you created via the Motion Presets panel. At the very least, you will see your Ease and Slide preset displayed:
Conclusion
As you can see, motion presets are a nice addition to Flash. Much of this is possible because the default animation system is now property-based. This allows you to alter the properties of an object where the object does not have to be anything specific but a symbol. This means you can easily separate the properties and what time they are changed from the actual object itself. If you look at your motion preset file in Notepad, you will basically see an XML-view of what I just described - a list of properties, their values, and times.
In Flash CS4, you no longer have the tight coupling between the animation and the animated objects. A new feature known as motion presets gives you the ability to take just your animation, save it as something that you can reuse, and apply this saved animation to a different object fairly easily!
If you are looking to learn more about motion presets, you have come to the right place. This tutorial will briefly walk you through creating and using motion presets. To save you some time by not having to create a new animation just for this tutorial, download an animation that I have already created for you:
|
Once you have downloaded, extracted, and opened the source file in Flash CS4, you will see a simple animation that involves an image of a box sliding in from the left, slowing down, and speeding out of view as it moves to the right. The implementation of the animation is nothing more than a simple tween with a custom ease that is responsible for the slowdown.
Creating (Saving) a Motion Preset
What we want to do is save this animation (tween) as a motion preset so that we can apply the animation to other things besides our image of the Flash CS4 box. Select your animation by clicking on it in the timeline:
[ click anywhere in the highlighted blue area to select your tween ]
With your animation now selected, go to Window | Motion Presets to bring up the Motion Presets panel:
[ your Motion Presets panel contains....motion presets! ]
It is this panel where you can see all of the motion presets that have been provided for you as well as any presets that you have created. Towards the bottom left of that panel, you will see a small button with an image of what looks like sticky notes being peeled back. This button will allow you to save your animation as a preset, so go ahead and click on it:
[ click on the Save button to save your tween as a preset ]
Once you have clicked on the save preset button, a dialog will appear asking you what you want to name your preset as:
[ your newly saved preset will now appear in the Custom Presets folder ]
Great. You now have a custom motion preset saved. In the next page, let's look at how to apply this motion preset to a new object in an entirely new project.In the previous part, you took an animation and saved it as a motion preset. In this page, let's look at how to use your saved motion preset in a new file.
Using a Motion Preset
To use a motion preset, first, go ahead and create a new Flash CS4 file by going to File | New. In your new file, draw a blue square:
[ create a new document and draw a blue square ]
Select your newly drawn square with your mouse, and make sure you have your Motion Presets panel displayed. Inside your Motion Presets panel, right click on the Ease and Slide entry and select Apply at current location:
[ right click on the preset you wish to add and select Apply at current location ]
Once you have done that, your square is automatically converted into a symbol and your earlier animation is applied to it. Besides pressing Ctrl + Enter to preview your motion preset applied to your square, you can tell by looking at the tween that mysteriously appears in your timeline, and you can also tell by looking at the keyframes that appear on your stage indicating something is going on:
[ your earlier animation has now been applied ]
The animation you saw on the previous page has pretty much been transferred over in its entirety. The only variation is that, instead of your animation working on an image, it is working on the blue square you created earlier.Displaying the Motion Preset Preview
If you look in your Motion Presets panel and select any of the already-provided presets, notice that you see a preview of what the preset actually looks like:
[ all of the default presets display a preview of what the preset will be like ]
If you go back and select your custom Ease and Slide preset, you don't see such a preview as you did for any of the built-in presets. The reason is that the preview is actually a SWF file that lives in the same location as the preset. The preview is not something that is automatically generated based on the preset you have selected.To add your own preview, first save this animation that you currently have open and publish it to create a SWF file. If you have been following along, this SWF file will be nothing more than your blue square with the Ease and Slide preset applied to it. Once you have published, go to your publish location on your hard drive to see your SWF file:
[ when you publish, the HTML and SWF file will be generated for you ]
Copy your SWF file and go to the special Motion Presets folder found in your Application Data location for Flash CS4. It isn't the easiest of locations to find, but you can access that folder via the following path (on Vista): C:\Users\< user name >\AppData\Local\Adobe\Flash CS4\en\Configuration\Motion PresetsIn that folder, you will see all of the custom Motion Presets that you created via the Motion Presets panel. At the very least, you will see your Ease and Slide preset displayed:
[ all of your custom presets are displayed! ]
Paste the SWF file that you copied into this location. Once you have pasted it, rename this SWF file from whatever it was to Ease and Slide. Essentially, the SWF file should match the name of the preset you are creating the preview for:
[ you now have a motion preset and a preview SWF file bearing the same name ]
Once your SWF file's and the motion preset's names match, you are all set. Go back to Flash, look in your Motion Presets panel, and select your Ease and Slide motion preset. Unlike before where you didn't see anything in the preview area, you will now see the SWF file you just pasted and renamed appear:
[ your Ease and Slide preset now shows a preview ]
The thing to note is that Flash does not check to see if the preset animation actually contains a copy of the preset that you applied. You could have placed a SWF file of a dancing banana, renamed it to Ease and Slide, and seen the dancing banana animation appear as a preview for your motion preset.Conclusion
As you can see, motion presets are a nice addition to Flash. Much of this is possible because the default animation system is now property-based. This allows you to alter the properties of an object where the object does not have to be anything specific but a symbol. This means you can easily separate the properties and what time they are changed from the actual object itself. If you look at your motion preset file in Notepad, you will basically see an XML-view of what I just described - a list of properties, their values, and times.
No comments:
Post a Comment