Home » Uncategories » Which Version of Adobe Animate People Like the Most

Which Version of Adobe Animate People Like the Most

Ane of the outset articles I wrote for Adobe eLearning was based on a presentation at the third Annual Adobe eLearning Conference in April 2022. In that blog mail service, I demonstrated how to create an OAM file in Adobe AnimateCC and import it into CaptivateAdd AnimateCC to Captivate. In this blog mail, I'll footstep you through the process of creating a simple timeline animation in Adobe AnimateCC. There are several key parts to making an animation. The of import points to go along in listen are:

But animate a symbol (movie clip is the near popular)
Just one symbol to be animated per layer
Utilise Keyframes to build your Tween animations

Just in case you're not sure what a Tween blitheness is, information technology's what is calculated between two cardinal frames. For example, let'south say a movie clip is located 10 pixels from the left side of the screen on frame ane. On frame 24, that aforementioned movie clip is located 110 pixels. When y'all make a tween blitheness, the software volition calculate how many pixels the object moves with each frame.

Step 1

In Adobe AnimateCC, create a new HTML5 Canvas file. Nosotros'll keep the default setting for the stage size and the frames per second (fps).

Step 2

Click the Oval Tool. Set the Fill color to no colour (carmine stroke through a white box). Set the Strokecolour to blackness. Set the stroke thickness to 20 pixels. Hold the Shift cardinal downward and draw a circumvolve that is approximately 130 pixels wide. It doesn't have to exist exact.

Pace 3

Add a new layer by clicking on the New Layer button equally shown below.

Step 4

Select the Line Tool. Set the line thickness to 10 pixels. Concur the Shift key down and describe spokes inside the circumvolve. Information technology should expect similar to the image below.

Step five

The objects (oval and lines) that are drawn on different layers need to be combined into one moving-picture show prune symbol to do that:

Make sure the Select Tool is selected.
Draw a rectangle around the entire wheel then it's all highlighted.
Click Modify > Convert to Symbol.
Cull a Movie Prune as the symbol. Also make sure the Registration bespeak is in the centre of the symbol as shown beneath.
Give it the proper name "cycle".

Footstep 6

When you made the symbol, content from the two layers were combined together into one symbol. So you should take a bare layer. Earlier making an animation, you should remove the blank layer. This reduces the chances of making a mistake. To remove the bare layer, click on the layer that is empty. Click the Trash tin can icon under the Timeline panel.

To create a tween animation, click on frame 48. This will make a ii second animation (24 fps x 2 seconds = 48). Insert a keyframe (Right-click > Insert Keyframe) or press F6. You should see a solid black dot in the frame now. That's a keyframe. It's telling AnimateCC that at frame 48, you want the movie prune "wheel" to exist at a specific location and await a specific way. Then with the keyframe nevertheless selected, move the bike movie off the right side of the stage. It should look like the prototype below.

Step seven

Correct click on the timeline between the 2 keyframes and select Create Archetype Tween. The timeline should now have a bluish colour with a line going through it. This indicates your accept successfully created a tween animation. If yous press the Enter key, yous'll come across the blitheness play in AnimateCC. If you press CTRL+Enter, it volition play in your default browser.

Final Steps

While this is practiced, it can be meliorate. To make information technology better, you tin can spin the wheel. Click on whatever frame betwixt the two primal frames. In the Properties console, locate the Rotate pull down menu. Choose CW. Keep the rotation at 1.

When a car starts moving from a finish sign, it doesn't go 0 – 30 instantly. Information technology slowly picks up speed. This is known as an ease in animation. To ease in the animation, click the Classic Ease button in the Backdrop panel and choose Ease In.

That's it – your washed a simple timeline tween animation. There is SO much more that tin be done inside AnimateCC. We can put movie clips inside movie clips and create simple JavaScript code to get these movies to play at specific times or on specific events. Just keep the main points in listen that this blog opened with. Only animate symbols. Merely 1 symbol animated per layer. Employ keyframes to plant the kickoff and end points.

BTW, you can have multiple keyframes on a layer. Start experimenting and happy animating.