It's time for lift off in Adobe Animate! Follow along in this tutorial and learn how to animate a rocket and other objects in this design for a fictional telecom company.
In this lesson, I'll go over how to import a layered Adobe Illustrator design into Animate, use both Classic and Motion tweens as well as how to publish the project for social media use.
As a bonus, I'll go over how to add a button to direct users to a web page if you are placing this ad on a web page.
As always, you can find the lesson material available for download here. For this tutorial, I'll be importing an Illustrator design into the Animate Canvas. You can find the Ai file in the download folder as well.
So let's jump right into it and start creating!
As a first step, we'll create a new document in Animate.
Creating New Animate Document
Go to File > New or simply click the Create New button on the Animate home screen
From the top menu options, choose Ads
Select Large Rectangle (336 x 280)
Set the Frame Rate to 30 and ensure the Platform Type is HTML5 Canvas
Click OK
Next, we'll import the Illustrator document into the Animate canvas.
Importing Illustrator file to Animate Stage
Go to File > Import > Import to Stage
Locate the Illustrator file on your computer and click Open
In the Import to Stage dialog box, ensure that you have Select All Layers checked
Click Import
Here is a carousel slide showing steps on how to import the Illustrator file to Animate:
To mask the content that is extending outside of the canvas, click the "Clip content outside the stage" icon in the upper right corner of the workspace.
Remember, in order to animate content in the stage, objects must be converted to converted to symbol. This step will be applied to the objects when animated in the lesson.
Let's start with the Title layer, which is the Unlimited Internet text.
Animating Text
Right-click the Unlimited Internet text in the stage and select Convert to Symbol.
Name the Symbol to Main Title.
Click on the Title layer and move the playhead to the 1 second mark in the timeline.
Click on the timeline and add a Keyframe by clicking the Keyframe icon.
Click on the first frame in the sequence and with the Free Transform Tool, scale the frame out of the scene. This can be done by holding Shift + Command (or Shift + Ctrl on Windows) and dragging one of the corner handles until the text is scaled out of the scene completely.
Right-click any where between the two keyframe sequence and choose Create Classic Tween.
Click any where in the Classic Tween and in the Properties Panel, choose the Frame tab.
In the Tweening dropdown, click the Classic Ease effect and set the ease to Ease In Out. Then double-click Cubic effect setting.
Here's a preview of how the title animation will look using the steps mentioned above:
Next will be animating the details text just below the main headline. This layer is called Details in the project timeline.
Right-click the details text in the scene and select Convert to Symbol.
Rename this Details Text.
Click on the Details layer in the timeline and move the playhead to the 1 second mark and insert a Keyframe.
Move the playhead to the 45 frame mark – the halfway point between the 1 sec and 2 sec mark – and insert another Keyframe.
Click on the first keyframe in this sequence and with the Selection Tool, click on the Details frame in the scene and while holding Shift, drag it outside of the canvas completely until it's not visible.
Right click anywhere between the two keyframes in this sequence and select Create Classic Tween.
Click any where in the Classic Tween and in the Properties Panel, choose the Frame tab.
In the Tweening dropdown, click the Classic Ease effect and set the ease to Ease In Out. Then double-click Cubic effect setting.
Here's a preview of how the title animation will look using the steps mentioned above:
Next will be adding a fade in animation to the button in the design to appear after the details. While this isn't a critical step when posting to social media, later in this tutorial I will be going over how to add an action to this button if publishing to the web.
Animating Button
Right-click the button on the canvas and select Convert to Symbol.
Name the symbol Learn Button and change the type from Movie Clip to Button. This is important in order to add the Action later on.
Click on the Button Layer and move the playhead to the 2 second mark in the timeline.
Insert a Keyframe.
Move the playhead to the 70 frame mark in the timeline and insert another keyframe.
Click the first frame in the sequence and in the Properties panel, under the Object tab, click the Color Effect dropdown and choose Alpha.
Turn the Alpha to 0%.
Click on the second frame in the sequence and in the Color Effect dropdown, choose Alpha.
Turn the Alpha to 100%
Right-click any where between these two keyframes and choose Create Classic Tween.
Here's a preview of how the button fade in animation will look using the steps mentioned above:
Next will be animating the rock to blast off with the smoke underneath. You will notice there are two layers for this – Rocket and Smoke. Let's start with the rocket and work our way through the animations.
Animating Rocket & Smoke
Right-click the Rocket on the canvas and choose Convert to Symbol.
Move the playhead to the 3 second mark in the timeline and insert a Keyframe.
Right-click anywhere after the Keyframe and choose Create Motion Tween.
With the first frame still selected, move the Rocket out of frame below the clouds.
Move the playhead to the 5 second mark and insert another Keyframe.
With the second frame now selected, move the Rocket out of frame above the canvas. (You can now scrub the playhead back and forth to view the Rocket animation).
Click on the Smoke layer and with the Selection Tool right-click on the Smoke object in the canvas and Convert to Symbol.
Rename the Symbol to Smoke and ensure the type is set to Movie Clip.
Click OK.
Move the playhead to the 3 second frame and insert a keyframe.
Right-click anywhere after this keyframe and choose Create Motion Tween.
Move the playhead to the 4 second mark and insert another keyframe.
Click on the first keyframe in this sequence and in the Properties panel, choose the Object tab and apply an Alpha colour effect with a 0% Alpha.
Click on the second keyframe in this sequence and with the Free Transform Tool, drag the top of the Smoke object handle up. Ensure that the middle anchor point is at the bottom of the frame before dragging the frame. Watch the video as I go over this key step
Go to the Properties panel and in the Object tab, click Color Effects and add an Alpha with 100% Alpha setting.
Move the playhead to the 5 second mark and insert another keyframe.
Go to the Properties panel and in the Object tab, click Color Effects and add an Alpha with 0% Alpha setting so the smoke fades out after the Rocket launches.
Here is a preview showing steps on how to import the set animation to the Rocket and Smoke mentioned in the steps above:
Follow along closely in the video tutorial as I will go over the steps on how to import the project as a video file or animated GIF to share on social media.