Create Interactive Infographic Presentation using Adobe Animate

Angelo Montilla
Feb 16, 2022
6 min read

Updated: Jun 23, 2024

Infographic designs are a great way of communicating vital pieces of information. But what if you could elevate them to make that communication even stronger with animation and interaction?

In this tutorial, i'll go over how to bring your infographic designs to life with animation and interactivity using Adobe Animate.

Follow along and learn how to add looping rotation animation to windmills and motion path animation to clouds in the infographic presentation. We'll also go over how to set up interactive buttons to open and close information in the graphic.

As always, you can find the files available for download here. You will need the Illustrator file in order to place it directly into the Animate stage.

So, let's get started!

Creating the Document

Open Adobe Animate and then go to File > New or simply click the Create New button on the home page
Click on the Advanced Tab in the top menu.
Click HTML5 Canvas.
In the Width field, type 1280 and in the Height field, type 720. This is the exact same size of the Illustrator file that will be imported.
Set the Frame Rate to 30.00.
Click Create.

https://youtu.be/SrzVahzwVV4

Next, we'll import the Illustrator infographic file to the Adobe Animate document. However before you do, please note that I placed all the elements that we'll animate on separate layers in Illustrator. This is important because it will make animating the object much easier once placed in the Animate stage.

I'll go over the Illustrator setup in the video tutorial if you need more clarity.

Importing From Adobe Illustrator

Go to File > Import > Import to Stage
Locate the Illustrator file, named "Renewable Energy.ai" and click Open.
An Import dialog box will appear, where you can check the "Select all layers" option to preserve all the layers from the Ai file.
Click Import.

As you can see it places the Ai file nicely in place because it is the same size. Here's a visual look at the steps explained above.

Next, we'll start adding the animation. Let's begin with the three windmills in the scene. Essentially we'll create the same animation for all three and going through the same process.

Animating the Windmills

With the Selection Tool, click on the blades in the centre windmill.
Go to Modify > Convert to Symbol or press F8 on your keyboard as a shortcut.
Rename the Symbol to Windmill_1 and leave the Type to Movie Clip.
Click OK
With the Selection Tool, double-click the blade object to drive into the Scene timeline. Any animation you create will occur in this separate timeline.
Right-click the blade object and choose Create Motion Tween.
In the Properties Panel, locate the Rotate dropdown under the Tweening section. In the Count field, set it to 1x.
In the Timeline, drag the right side of the animation to the 14 second mark.
Click on the Free Transform Tool and drag the anchor to the centre point of the circle in the windmill. This will ensure that the animation plays with proper orientation. You may have to zoom in tight to ensure the anchor is as close to the centre as possible.
Test out the animation by clicking the Play button in the timeline or go to Control > Test, which will open the project in a web browser.
Repeat these same steps for the other two windmills, however, you can set them to play at 16 seconds for a slower pace than the centre windmill.

Next, it's time to animate the two clouds in the scene, which are also on a separate layer called "clouds". This will be similar to how the windmill was set up, but instead of rotation, the animation

Animating Clouds

Click on the first cloud and go to Modify > Convert to Symbol or press F8 on your keyboard as a shortcut.
Rename the Symbol to Cloud_1 and leave the Type to Movie Clip.
Click OK
With the Selection Tool, double-click the blade object to drive into the Scene timeline. Any animation you create will occur in this separate timeline.
Right-click the cloud object and choose Create Motion Tween.
While still on the first keyframe in the sequence, move the cloud to the left out of the scene completely.
Move the playhead to the end of the sequence and insert a new Keyframe at the 1 second mark by pressing F6 on your keyboard, right-clicking and choosing Insert Keyframe or going to Insert > Timeline > Keyframe.
Click on the cloud and while holding Shift drag the cloud to the right, out of the scene completely. You will notice a motion frame was created with the animation.
Click and drag the right side of the Motion Tween in the timeline and extend to about 14 seconds.
Repeat these same steps for the second cloud, but rename the Symbol to Cloud_2 and change the Motion Tweet animation to 18 seconds so the clouds.

Go ahead and test out the work so far by going to the main scene and pressing Comannd + Return or going to Control > Test to view the animation in a web browser.

The final step in this lesson will be setting up interactive buttons so users can click the Plus icons in the infographic to open and close pop-out windows to view more additional information.

There are a lot of steps here so it's not a bad idea to watch the video tutorial and reference this as needed.

Interactive Buttons

Click on the first Plus icon in the infographic and go to Modify > Convert to Symbol.
Rename the Symbol to Button_1 and change the Type to Button.
Repeat the same steps for the other Plus icons, renaming them to Button_2 and Button_3, respectively.
Click on the first info box and go to Modify > Convert to Symbol.
Rename the Symbol to Infobox_1 and leave the Type to Movie Clip.
Repeat the same steps for the other two info boxes, renaming them to Infobox_2 and Infobox_3, respectively.
Double-click the first info box and rename the Layer to Popout_1.
Right-click the info box in the scene and choose Create Classic Tween. This is to create a looping animation that can be controlled through play and stop interactions.
Move the playhead to the 15 frame mark and Insert a Keyframe. Move the playhead to the 30 frame mark and insert another Keyframe.
Click on the first frame in the sequence and with the Free Transform Tool, scale down the info box object until it's small.
Go to the Properties Panel and in the Color Effects dropdown, choose Alpha. Then set the slider to 0%.
Right-click the first frame, choose Copy Frames and then go to the last keyframe in the sequence, right-click and choose Paste Frames. You should now have an animation that appears and disappears.
Create a new layer and call it Actions. This is to add two stop actions for when the interactivity is set up as the final step.
Click on the first frame in the Actions layer.
Open the Actions panel by going to Window > Actions.
Go to Add using Wizard.
In the Step 1, Select and Action, scroll down and choose Stop.
In the Object on which to apply the action, choose In this Timeline and click Next.
In the Step 2, Select a Triggering Event, choose With this frame.
Click Finish and Add.
Go back to Scene 1 – the main scene in the project.
Repeat the same steps to set up the animations and stop actions to the other two info box objects in the scene.

OK let's pause and recap what's been accomplished so far. After converting the buttons and info boxes to symbols, animations were created to the info boxes and then stop actions were added. Next it's time to add the actual interactivity to activate the buttons to trigger the info boxes.

Create a new layer in the main timeline in Scene 1 and rename it Actions or Interactivity.
Click on the first Plus icon button and in the Object panel, set the Instance name to Trigger_1.
Click on the first info box and set the Instance name to Popout_1.
Click on the first frame on the Actions layer.
Open the Actions panel and click Add using Wizard.
In the Select an Actions, choose Play.
In the Object on which to apply the Action, choose Popout_1.
In Step 2, Select a triggering event, choose On Mouse Click.
In the Select an object for the triggering event, choose Trigger_1.
Click Finish and Add.
Repeat these steps for the other two interactive buttons using the same technique, but using proper instance naming conventions.

This is how the final version should look like with the rotating windmill animation, cloud animations as well as the interactive buttons.