Angelo MontillaLearn how to create animated digital ads using Adobe Animate
Adobe Animate is a powerful tool to create character animations. But it has many more uses and is also extremely useful to create web, social media and digital ad animations.
Follow along in this tutorial as we'll go over how to create an animated digital advertisement for a fictional banking company, which will feature ease-in-and-out animations to images and text. I'll also go over how to set button actions as well as export the scene as an MP4 and GIF.
As always, you can find the material for this tutorial available for download here. The font I am using in this tutorial is Filson Pro and can be downloaded from Adobe Font's collection.
For the first part of the tutorial, we'll design the add and create multiple layers which will help us to add the animation later on. The second part of the tutorial will be using the Timeline panel to add Keyframes and other effects to create the animations.
Let's get started!
Document Setup
Open Adobe Animate and click the Create New button or go to File > New.
In the New Document preset selections, choose the Ads icon.
Select Half-page Ad (300 x 600).
Set the Frame Rate to 30.00.
Ensure that the Platform Type is set to HTML5 Canvas.
In the tutorial download folder you will find images for both mobile phones and the logo for the fictional company, called Quest_Logo.
Follow along in the video tutorial to go over placement of the content, while also focusing on hierarchy, balance and proximity for the ad design.
Adding Animation to Phone Images
Click on the Phone_1 Layer and drag the timeline playhead to the 15 frame mark.
Add a Keyframe by pressing F6 on your keyboard or clicking the Keyframe icon in the Timeline controls.
Drag the playhead back to the first frame and with the Selection Tool, click and drag the Phone_1 image out of the scene at the bottom.
Click anywhere between frames 0 and 15, right-click and choose "Create Classic Tween".
Repeat the steps for Phone_2 Layer.
On Phone_2 Layer, click Frame 1, hold the Shift key and click frame 15.
Click and drag the sequence to the right, so that the first frame is now at the Frame 15 mark. Both sequences will play at a 1 second duration.
Example: Here is a look at how all three animations will appear at the end of the lesson.
Next, we will focus on the "Online banking" and "made simple" text objects. Once again these are two separate elements in the digital ad design that will have the same animation applied at different times in timeline.
Adding Animation to Main Title
Click on the Online banking Layer and drag the timeline playhead to the 35 frame mark.
Add a Keyframe by pressing F6 on your keyboard or by clicking the Keyframe icon in the Timeline controls.
Drag the playhead to the 50 frame mark and add another Keyframe by pressing F6 on your keyboard.
Drag the playhead back to the first frame in this sequence (frame 35) and set the Color Effects dropdown to Alpha. This can be found in the Properties panel.
Adjust the Alpha slider to 0. If you use the playhead and scrub through the sequence you will notice you added a fade in Animation.
Still on the same frame, select the Transform Tool from the tools panel and click on the "Online banking" text on the ad.
While holding Shift, drag one of the four corner handles outwards to increase the size so much of the word is off the canvas.
In the Timeline, click anywhere in between frames 35 and 50, right-click and choose "Create Classic Tween" for a smooth transition.
Repeat the steps for the "made simple" text object in the
On the "made simple" Layer, click the first frame in the sequence, hold Shift and click the second frame.
Click and drag the sequence to the right so that the first frame is now at the Frame 50 mark and the second ends at the 65 frame mark.
Great! You should have the mobile phones and the main title text animated. Next, we'll move on to the secondary text – "Download the app" – and the "Learn More" button.
Adding Animation to Secondary Text and Button
Click the Download Layer and drag the playhead to the 70 frame mark.
Add a Keyframe by pressing F6 on your keyboard or by clicking the Keyframe icon in the Timeline controls.
Drag the playhead to the 80 frame mark and add another keyframe.
Click on the first frame in this sequence and with the Selection Tool, drag the text to the right out of the scene.
Click anywhere in between frames 70 and 80, right-click and choose "Create Classic Tween".
On the Button Layer, now drag the playhead to frame 85 and create a Keyframe.
Drag the playhead to frame 95 and add another Keyframe.
Drag the playhead back to the first frame in this sequence (frame 85) and set the Color Effects dropdown to Alpha. This can be found in the Properties panel.
Adjust the Alpha slider to 0. If you use the playhead and scrub through the sequence you will notice you added a fade in Animation to the button.
That is it! You have set up complete animation to the digital ad using Adobe Animate. Follow along in the video tutorial to learn how to export the project as a GIF or movie file.