Adobe Animate is an amazing tool to create interactive experiences for infographics, slide decks and web pages, just to name a few. This is because you can use HTML and javascript to build interactions with animation and button events.
In this tutorial, learn how to create an interactive sidebar menu for a slide deck presentation with open and close functionality using Adobe Animate.
To access the practice files and assets for this lesson, click the link below to download and follow along step-by-step.
The first step is creating a new document in Adobe Animate. This will be sized for iPad viewing, however there are many platforms and devices to choose from when setting up the document.
New Document
Click on New File.
Set the Width field to 2160px and Height to 1620px.
Set the Frame Rate to 30.00.
Set the Platform Type to HTML5 Canvas.
Click Create.
Here are the settings based on the steps explained above:
Next, open the Adobe Illustrator file included in the lesson files, which is saved as Digital Slide.ai.
This is the design that we will import onto the Adobe Animate stage, but before we do, let's take a closer look at the layers in the Illustrator file.
There is a layer called Content, which consists of the majority of the design. However, the first three layers are the ones that you will focus on in this lesson. They are Open_Button (the arrow icon to open the sidebar menu), the Close_Button (the x icon to close the sidebar menu) and Menu_Shape (the green rectangle shape and all its menu contents inside).
Here's a better look at the Layers as explained above:
You can save and close the Illustrator document now. Next, we'll import it to Animate, so let's jump back to the file we created at the beginning of the lesson.
Import to Stage
In Animate go to File > Import to Stage.
Choose the Illustrator document included in the lesson files and click Open.
In the Import to Stage window, ensure that the layers explained above are selected.
Select the Place Objects at Original Position option.
Click the Incompatibility Report button if there are incompatibilities in the document when importing to Animate. Apply the recommended settings and click OK.
Click Import.
Now that the design has been imported, it's time to add the animation to the sidebar menu.
First, convert the object to a Symbol. To do this, go to Modify > Convert to Symbol. You can also right-click the shape on the canvas and select Convert to Symbol.
In the Convert to Symbol window, rename it to mainMenu.
Set the Type to Movie Clip.
Click OK.
The next step is animating the sidebar and for this, we'll drive into the Symbol's own timeline to set the animation.
Adding Animation to Sidebar Menu
Double-click the sidebar on the canvas, which will take you into its own separate timeline.
Right-click the sidebar and select Create Classic Tween, which will set up a one-second tween in the timeline.
Move the playhead to the 10-frame mark in the timeline and press F6 on your keyboard to Insert Keyframe. Alternatively, you can also right-click the frame in the timeline and choose Insert Keyframe.
Move the playhead to the 20-frame mark in the timeline and press F6 to Insert Keyframe.
Move the playhead to the last frame in the timeline and press F6 to Insert Keyframe.
Move the playhead back to the beginning of the timeline and, with the Selection Tool, click and drag the entire menu off the canvas to the left.
Right-click the keyframe in the first frame and choose Copy Frames.
Go to the final frame in the timeline, right-click it and choose Paste Frames.
If you scrub through the timeline now, you will see the animation play out, with the sidebar menu sliding in and out.
Here's how it should appear once you've set up the animation:
Now let's add stop actions to the animation so they don't automatically play when the project is published. Instead, we'll be adding button events to open and close the sidebar menu.
Adding Stop Actions
Create a new layer above the animation and call it Actions.
While on the Actions layer and the playhead at Frame 1, go to Window > Actions and in the Actions window, click Add Using Wizard.
Select the Action of Stop.
Under Object in which to apply the Action, click This Timeline and click Next.
Select the Triggering Event With this Timeline.
Move the playhead to the 20-frame mark and repeat the same steps to add the Stop action here.
You will know that the action has been applied because you will see a little a symbol over frames 10 and 20 in the timeline.
Once the stop actions have been applied, you can exit this timeline by going back to Scene 1. This is the arrow located in the upper right corner of the workspace above the canvas.
The next part is assigning the button actions to the open and close icons on the canvas. Before that, let's convert the icons into Symbols – an essential step in creating the button interactivity.
Click on the Arrow icon on the canvas or select the layer Open_Button in the timeline.
Go to Modify > Convert to Symbol.
Name the Symbol openButton.
Set the Type to Button.
Click OK.
Click the X icon on the canvas. Because it is hidden behind the play icon, you should hide the Open_Button layer in the timeline to access it.
With the X icon selected, go to Modify > Convert to Symbol.
Name the Symbol closeButton.
Set the Type to Button.
Click OK.
It's important that both buttons as well as the sidebar menu have Instance Names applied, which will allow you to add them to the coding when creating the interactivity.
Let's start with the sidebar. With it selected, go to the Properties panel, which by default should be docked on the right side. Click the Object tab and in the Instance Name, type sidebarMenu.
Click on the open button and give it an Instance Name of openBtn.
Click on the close button and give it an Instance Name of closeBtn.
Awesome work! You've converted all the key objects to symbols and assigned Instance Names.
Now comes the part where you bring all the interactivity together with coding. For this, we'll once again be using the Actions panel to add the code.
Before that, you need to create another layer in the main timeline and call it Actions. Make sure this is at the very top of the layer stack in the timeline. Also, it's important that when adding the code, you're always selected on the Actions layer.
First let's add a Play action to the Open icon.
Adding Interactivity
Click the Actions window and then click Add Using Wizard.
Under Select an Action, choose Play.
Apply the Action to sidebarMenu and click Next.
Select a triggering event of On Mouse Click and click Next.
Under Object for the Triggering Event, select openBtn.
Click Finish and Add.
The first set of code should now appear inside the Actions window. If you're unsure, this is how it will look based on the settings explained above:
Place your cursor underneath the first set and let's add the close button action.
Click the Actions window and then click Add Using Wizard.
Under Select an Action, choose Play.
Apply the Action to sidebarMenu and click Next.
Select a triggering event of On Mouse Click and click Next.
Under Object for the Triggering Event, select closeBtn.
Click Finish and Add.
We can move on to the next part and focus on how to set Show/Hide actions to the buttons so when the sidebar opens, the close button appears and when the sidebar closes, the close button disappears and the open button reappears.
For this, once again you will use the Actions window and we'll be using Event Listeners with visible functions. Here's how to create the code for this.
First you will need to add a variation, or var for short.
Start with this:
var sym = this;
The variation name is sym for symbol and it equals this for the object you're triggering.
The next line of code will appear as such:
this.openBtn.addEventListener("click", hideOpen);
This line of code adds the Event Listener and the function name, which is hideOpen.
Next let's add the visible actions, or the Show/Hide functionality.
function hideOpen(){
sym.openBtn.visible = false;
sym.closeBtn.visible = true;
You have completed the open interactivity. To complete the close interactivity, you can copy/paste the code underneath, however, replace openBtn as the Event Listener to closeBtn and swap the true and false visibility actions.
Here's an image of the complete code as a reference:
The moment of truth is testing out the project in a web browser to ensure it is functioning as intended. Go to Control > Test to open the project in a web browser. As a shortcut, you can also click the play icon to preview the work. This is located in the upper right corner of the interface in Adobe Animate.
Once it's launched in a browser, it should look like this:
