Create an animated infographic

Import an Adobe Illustrator file in Adobe Animate.

What you learned: Import an Adobe Illustrator file into Adobe Animate

• The layer structure in an Illustrator document will be converted into Adobe Animate Timeline layers, so it's important to set them up properly first in Adobe Illustrator. In this case, create two layers: one layer for all the moving objects, and one for all the background objects.
• You’ll now set up the Adobe Animate file. In the Animate Start Screen choose Advanced > HTML5 Canvas. Choose the exact same size as your Illustrator document. In this case, it is 900 by 500 pixels.
• Go to File > Import > Import to Stage. Select your file, make sure Select All Layers is checked, and click Import. You see that all objects are placed now, and can be selected separately.
• Before you can start animating, first lock your Background Layer, because you don’t want to move your background contents accidentally. Click the Background Layers lock icon in the Timeline Panel.

Animate a cloud by making a looping Motion Tween.

What you learned: Make a Motion Tween and animate a cloud

• Select the Selection Tool in the Tools panel. Now select the cloud on the Stage, right-click, and choose Convert to Symbol.
• In the Convert to Symbol dialog box, name the symbol Cloud and click OK.
• Now that you’ve got a symbol, you can start animating it. First, move the cloud to the starting position, on the left-hand side outside the Stage.
• Double-click on the cloud to go to the cloud symbol’s own timeline. You have to go ‘inside’ this symbol because you’ll animate it here. You can check if you’re inside the symbol by looking at the top-left corner of the Adobe Animate window. If you see Scene 1 > Cloud, it’s all okay.
• Now, right-click the cloud and click Create Motion Tween to add a Motion Tween to the Cloud symbol. This allows us to move it from left to right.
• Animate now asks you to convert this cloud to a symbol again. You’ll be able to animate it then. You could have done this earlier, but actually it’s not really wrong to do it now. So just click OK.
• Adobe Animate now automatically adds a Motion Tween to your timeline. This is an animation of one second (but nothing happens yet).
• Now move the cloud to the right, outside the Stage.
• Animate has now made an animation. Press Enter or Return to view it. It’ll be a very fast animation, because it only takes one second. You’ll change this in the next step.
• Now make the Motion Tween in the Timeline panel a lot longer by dragging it from the end position to the right, all the way to 16 seconds.
• Click Control > Test in the menu bar, to test this movie in the browser.

Make rotating Motion Tween animations.

What you learned: Make rotating Motion Tween animations

• Select the windmill blades on the left with the Selection Tool.
• Right-click and choose Convert to Symbol to convert the blades to a symbol.
• Name the symbol Windmill in the Convert to Symbol dialog box and click OK.
• Double-click the blades to go in the symbol’s own timeline. You should see Scene 1 > windmill at the top left of your window.
• Now right-click the blades again and choose Create Motion Tween.
• Click OK in the dialog box that appears.
• Now click somewhere in the middle of the Motion Tween in the Timeline Panel.
• Go to the Properties panel and type 1 in the Rotate field. The blades will now rotate one time, in one second.
• Press Enter to play the Timeline.
• The blades rotate too fast now, so make the Motion Tween a bit longer by dragging it from the end position in the Timeline panel to the right, to 3 seconds.
• Click Control > Test in the menu bar, to test this movie in the browser.

Make items move along a custom path.

What you learned: Make items move along a custom Motion Path

• The basic steps to move arrows along a Motion Path are similar to animating the objects in the previous video.
• First of all, you need the pipeline Illustrator path in the future. So, select it first and copy it with Command-C (MacOS) or Control-C (Windows), to use it later.
• Select the arrow with the Selection Tool.
• Right-click and choose Convert to Symbol to convert the arrow to a symbol.
• Name the symbol arrow1 in the Convert to Symbol dialog box and click OK.
• Now double-click the arrow to go in the symbol’s own timeline. You should see Scene 1 > arrow at the top left of your window.
• Now right-click the arrow again and choose Create Motion Tween.
• Click OK in the dialog box that appears.
• Make sure your playhead is at the end of the Motion Tween in the Timeline panel and then move the arrow to the right-hand side of the pipeline on the Stage. Hold Shift when you do this.
• Test the animation by pressing Enter or Return. The animation is now too fast, so drag the end of the Motion Tween in the Timeline Panel to 6 seconds. That’ll be long enough.
• Press Enter again to test the animation speed.
• Select the Motion Path on the Stage. Now you can swap the Motion Path with the path you’ve copied earlier. All you have to do is going to Edit > Paste.
• Move the path up a little to make it fit on the main path. Click on it and then move it to the right place.
• Press Enter to test the animation. As you can see, the arrow is not rotating in the right direction yet. The only thing you have to do to make this happen, is to select the Motion Tween, and then check the Orient To Path option in the Properties panel.
• Click on Scene 1 to go back to the main Timeline. You can animate the other arrow there.
• Click Control > Test in the menu bar, to test this movie in the browser.    

Create interactive buttons and pop-up windows with the Actions panel.

What you learned: Adding interactivity to your document

• In the previous videos, you animated rotating and moving objects. Now you’ll add interactivity to your document.
• To keep this tutorial as simple as possible, you’ll see this new, more empty document to show you how interactivity works.
• Test this in a browser. Choose Control > Test.
• As you can see, this document contains a looping animation. The pop-up opens, closes again, and so on. The first thing to do is to add a few stop actions to stop this animation. Then you’ll add some actions to the button, so that it starts the animation when a user clicks on it.
• In Adobe Animate, double-click on the pop-up on the right-hand side of the button.
• Press Enter or Return to test the animation.
• You now see the pop-up animation, but want to stop it in the first frame. Click on the first frame in the Actions layer that is already created.
• Go to Window > Actions to open the Actions panel. You can add some code here with the Actions Wizard.
• Click the Add Using Wizard icon to do this. Now you have to tell Animate what to do at this position in the timeline. In this case you have to stop the animation. Scroll down in the first menu, and click Stop.
• In the next menu click on this Timeline, then on the Next button to go to the next step, and now on With this Frame. Click on Finish and Add to add the code.
• Repeat these steps for the tenth frame. The animation has to stop there again, when a user clicks the button. Select the tenth frame in the Timeline panel, click the Add Using Wizard button, scroll down in the first menu, and click Stop. Click on This Timeline, then Next, then With this Frame, then Finish and Add.
• All Stop actions have been added. Click on Scene 1 to go back to Scene 1.
• Before you can add interactivity, you must name all symbol instances on the main Timeline. Click the info button with the Selection tool. In the Properties panel, type info_button in the Instance Name field.
• Select the pop-up instance. In the Instance Name field, name it: popup.
• Add the actual interactivity in the first frame in the actions layer. Click on frame 1 in the Timeline panel, and then access the Actions panel.
• Click the Add using wizard button. Scroll down in the first menu and click on Play. This causes the pop-up animation to play when you click the info button. That’s why you’ll click Popup in the next field.
• Click Next. Now you have to designate the trigger to start the animation. This is a Mouse Click, so select On Mouse Click. Since the user will click on the Info_button, you’ll select Info_button in the next field. Click Finish and Add.
• The code is now added to the first frame.
• The interactivity is complete. Test it in a browser by choosing Control > Test in the Menu bar.