Angelo Montilla
- Jul 5, 2022
- 6 min read

Learn how to create a HTML5 expandable banner using Adobe Animate

Follow along in this Adobe Animate tutorial and learn how to create an expandable HTML5 banner ad for a fictional sports ticket exchange company called Front Row.

In this lesson, we'll create an ad that expands to a full width of 1200 x 400 but collapses at 300 x 250. Topics covered in this tutorial include importing an Illustrator design, adding keyframe animations, using a shape tween to create the expandable animation and adding button actions.

As always, you can find the lesson files available for download here so you can follow along in the tutorial.

Let's get started!

Because the ad will be expanded to 1200 x 400 at full width, that will be the size of the document.

Creating a New Document

Open Adobe Animate and click the Create New button or go to File > New...
In the Create New window, create a custom size of 1200 for the Width and 400 for the Height.
Set the Frame Rate to 30.00.
Ensure the Platform Type is set to HTML5 Canvas.
Click Create.

Here is a look at the document setup using the same steps explained above.

Next will be to bring in the Illustrator file. You will find this in the lesson download files – it's named banner_ad.ai. If you open this file, you will notice that everything in the design is placed and marked on separate layers as follows:

Import to Stage

Back in Animate, go to File > Import > Import to Stage.
Locate the Illustrator file provided and click Open.
In the Import to Stage window, ensure that 'Select All Layers' option is checked.
Click Import.

The Illustrator file – as seen in the image below – is placed exactly on the canvas. This is because it's also sized at 1200 x 400, which is an important step in order for this to work properly.

Next will be adding the animation using the Timeline. First you will have to add blank keyframes to set the length of how long the animation will be. Click the empty frame at the 4-second mark on the Main Image layer. While holding Shift, click on the empty frame at the 4-second mark on the Background layer. With all frames selected under 4 seconds, press F5 on your keyboard or click the Frame icon in the Timeline tool panel.

Adding Animation

Main Image

Click the Main Image (Football Player) on the canvas and go to Modify > Convert to Symbol. Name it Main Image and set Type to Movie Clip.
Click the very first frame in the Main Image Layer and add a Keyframe by pressing F6. You can also add a Keyframe by clicking the Frame icon in the Timeline tool panel.
Move the Playhead to the 15 Frame mark and add another Keyframe.
While still on this Keyframe, use the Selection Tool (black arrow) to move the image to the other side of the canvas, centred to the circle on the right side.
Right-click anywhere in between these two frames and select Classic Tween.

Logo

Click on the Logo on the canvas and go to Modify > Convert to Symbol. Name it Logo and set the Type to Movie Clip.
On the Logo layer, click on the 15 Frame mark and insert a Keyframe (F6).
Move the Playhead to the 25 Frame mark and insert a Keyframe.
Click on the Keyframe on Frame 25 and with the Transform Tool, move the logo to the right and increase the size slightly by dragging out the corner handles.
Right click anywhere in between these two frames and select Classic Tween.

Title (Don't Miss text layer)

Click on the text object on the canvas and go to Modify > Covert to Symbol. Name it Top Title Text and set the Type to Movie Clip.
Click on the 1 second frame mark and insert a Keyframe.
Move the playhead to the 70 Frame mark and insert another Keyframe.
Click on the first Keyframe in the sequence and with the Transform Tool, scale up the text so it is outside of the canvas completely.
With the text still selected, go to the Object tab in the Properties panel and under the Color Effects dropdown, choose Alpha and set the Alpha opacity to 0%.
Right-click anywhere in the sequence and choose Classic Tween.
In the Properties panel, click Frame and under the Tweening dropdown, click the Ease button.
Click the Ease In-Out button and then choose Quint by double clicking the selection.

Title (The Action text layer)

Click on the text object on the canvas and go to Modify > Covert to Symbol. Name it Bottom Title Text and set the Type to Movie Clip.
Click on the 2 second frame mark and insert a Keyframe.
Move the playhead to the 100 Frame mark and insert another Keyframe.
Repeat the last five steps that were applied to the top title text. (See above).

Buy Now Button and Promo layers

Click on the Buy Now button and go to Modify > Convert to Symbol. Name it Buy Now Button and set the Type to Button.
Click on the Promo text (UFL Tickets...) and go to Modify > Convert to Symbol. Name it Promo Text and set the Type to Movie Clip.
On both of these layers, move the playhead to the 3 second frame mark and insert keyframes
Move the playhead to the 110 Frame mark and insert another Keyframe on both layers.
Move the playhead back to the 3 second frame and first click the Buy Now Button. In the Properties panel, under the Object tab, add an Alpha Color Effect to the button and change the Alpha to 0%.
Repeat the last step to the Promo text.
Individually, on both layers, click anywhere between the frame sequence and create Classic Tween. This will create a fade in effect to both the button and text as the last elements in the animation.

Great! You've added the animation to the expandable banner. Next, I'll take you through the steps on how to set up the expandable mask and add actions to open and close the banner animation.

Creating a Mask

Create a new layer at the very top in the Timeline and name this Mask.
Select the Rectangle Tool from the toolbar and roughly draw a rectangle on the canvas, starting in the upper left corner and dragging downwards to the right.
Click on the shape with the Selection Tool and in the Properties panel, change the size to 300 x 250 for width and height, respectively.
Right-click the shape and select Shape Tween.
Move the playhead to the 15 Frame mark and insert another Keyframe.
With the Transform Tool, drag the rectangle so it covers the entire canvas.
Move the playhead to Frame 110 – where the animation ends, and insert another Keyframe.
Click the first Keyframe in the Mask layer, right-click and select Copy Frames.
Move the playhead to the last frame in the layer (120 frame mark), right-click and select Paste Frames.
In the Timeline, right-click the Mask layer and choose Mask.
This only masks the next layer below. Select the remaining layers and drag them under the Main Image Layer.

Great! The mask animation is set up. Now to see it in work, click the Lock icon at the top of the Layers and scrub through the timeline. The banner to expand and collapse like this:

Next will be adding the Buttons and Actions, so the user can have control when the expandable banner opens and closers.

Creating Buttons

Create a new Layer at the very top, above the Mask layer and name it Buttons.
With the playhead on the first frame, select the Rectangle Tool and draw a rectangle the same size as the mask rectangle shape.
Click the shape and go to Modify > Convert to Symbol. Name it Open Button and set the Type to Button.
Give the Button an Instance name. This can be done in the Properties panel in the Object tab in the Instance Field. Name it open_btn.
Double-click the shape to launch the Button timeline.
Drag the Keyframe to the Hit state.
Go back to Scene 1 by clicking the arrow in the upper left corner.
To ensure that the button is invisible, click on the second frame and add a Blank Keyframe.
Move the playhead to the 110 Frame mark and insert a Keyframe.
Select the Text Tool and click anywhere on the canvas. Type the word Close and make the type Rift (Bold) and 30 pt size. Move it to the top right of the canvas.
Go to Modify > Convert to Symbol. Name it Close Button and set the Type to Button.
Give the Button an instance name of close_btn.
Double-click the button to drive into its timeline and insert a Keyframe on the Hit state.
Go back to Scene 1.
To ensure that the close button is invisible until the animation is finished, insert a Blank Keyframe after the Keyframe (111 Frame mark).

OK, there's just one last thing to do – add the Actions to the buttons so users have control on how the banner opens and closes.

Adding Actions

Create a New Layer at the very top and call it Actions.
Click on Frame 1 and insert a Keyframe.
Open the Actions panel by going to Window > Actions.
Click the Add Using Wizard button and add a Stop Action.
The Object is On this Timeline. Click Next.
Select With this Frame. Click Finish and Add.
Click Add Using Wizard again and add a Play Action.
The Object is On this Timeline. Click Next.
The Trigger Event is On Mouse Over.
The Object is open_btn.
Move the playhead to the 110 frame mark and insert another Keyframe.
In the Actions panel, once again click Add Using Wizard and add a Stop Action.
The Object is On this Timeline. Click Next.
Select With this Frame. Click Finish and Add.
Click Add Using Wizard again and add a Play Action.
The Object is On this Timeline. Click Next.
The Trigger Event is On Mouse Click.
The Object is close_btn.

To test the expandable banner, go to Control > Test, which will launch the project in a web browser. Hover over the image and then close the banner and it'll collapse to its original position.