Create a simple animation of two logos colliding using Motion and Shape tweens .
Motion Tweens and Shape Tweens
Click here for the fireball picture.
NOTE: MOTION TWEENS: Objects must be converted to symbols (Right-click)
NOTE: SHAPE TWEENS: Objects must be broken apart (Right-click)
Start Adobe Animate
Create a New Animate Document
Select HD 1,280 x 720 from the Presets
Change the Frame Rate to 24
Make sure Platform Type is Flash ActionScript 3.0
Click on your stage and change the color to black in the Document Settings Panel
In your timeline, make sure Auto KeyFrame is on (checkmark)
Right-Click on the Insert Keyframe Icon.
Click on Auto KeyFrame to add the checkmark. (if it's not already)
TEXT LAYER
Rename the layer to Text.
Grab the Text Tool, pick a color and size and write your first word on frame 1.
Grab the selection tool then open up the Align Panel (Window > Align) or Click on the Align Icon. Make sure the Align to Stage checkbox is checked and click on the Align Horizontal Center icon.
Create a keyframes (F6) on frames 15 and 60.
Select the Keyframe on frame 15 and right-click and select Break Apart. Do this step a second time.
On frame 60, highlight your word with the text tool and change it to something else.
Grab the selection tool then open up the Align Panel (Window > Align) or Click on the Align Icon and center your text by clicking the Align Horizontal Center icon.
Right-click and Break Apart this piece of text TWICE.
Right-click on any frame between 15 and 60 and select Create Shape Tween.
Insert keyframes (F6) on frames 65, 70, 75, 80, 85, 90, 95 and 100.
Select and delete the text on frames 65, 75, 85 and 95.
Insert a Frame (F5) on frame 120 to hold the text another 20 frames.
WINNING IMAGE
Create a New Layer and give it your winning logo name.
Go File > Import > Import to Library and select all of your images (2 Logos and one fireball).
Zoom out to 50%
Select the 1st keyframe on the Winning Logo Layer. (Frame 1)
Go to your library and drag the winning image to the left of your stage.
Grab the Transform Tool and resize your logo (hold SHIFT while resizing to keep the proportions)
Right-click the image and select Motion Tween. (it will ask you to convert it to a Symbol, click OK)
The tween should span the length of the animation which is currently 120 frames.
With the selection tool, click on frame 60 and move your image to the center of the stage.
LOSING LOGO
Create a new layer for the losing logo and give it a name.
Select the 1st keyframe on the Losing Layer.
Go to your library and drag the losing image just off of stage right.
Grab the Transform Tool and resize your logo (hold SHIFT while resizing to keep the proportions)
We will need two Motion tweens for this logo. One to come in from the side and one to leave spinning away.
Right-click the image and select Create Motion Tween.
Place your cursor at frame 60 then move the losing logo to the center of the stage.
Place your cursor at frame 61 then right-click and select Split Motion. This will enable us to create a 2nd motion tween with our logo.
Place your cursor at frame 120 and move your image off the screen up and to the left off the stage.
To get the rotation, with the selection tool, click anywhere on the Tween (the dotted line).
In the Tween properties, you should see the option to rotate. Set the direction to Counter Clockwise and increase the count. (the number of full rotations to complete)
Move the losing logo layer to the BOTTOM of the layer stack so that it's behind the winning logo and text.
FIREBALL
Create a new layer and call it Fireball.
Since we don't want the fireball until frame 60, we insert a Blank Keyframe (F7) on frame 60.
Import the fireball image from the library on the keyframe.
Right-click anywhere on the timeline between frames 61 and 120 and select Create a Motion Tween.
On frame 120 and with the transform tool, grow the fireball larger than the stage.
Go back to frame 60 and shrink the fireball until it's super small.
Move the fireball layer to the bottom of the layers.
Press CTRL + ENTER to preview your animation.
Export your animation as a VIDEO file and upload it to your PAH-ASM folder then insert it into your website.