Hi there, welcome to this tutorial on creating expandable banners using Adobe Animate.
In this video, you'll learn how to make one for yourself.
Before we start, let's look at what we're trying to create.
Here's an expandable banner for an airline called skyhigh.
This is how our banner looks in the collapsed position and when it's fully expanded.
Creating an expandable banner like this is a five-stage process.
The first step is to construct a mask.
Open your animation and create a mask the size of the closed banner on frame 1.
We want our banner to expand from left to right.
So, we'll place our rectangle on the top left corner.
Next, we have to define the size of the fully expanded banner and create a transition between the closed and opened positions using Shape Tween.
Now that we've instructed Adobe Animate how to expand the banner, we have to tell it how to collapse the banner.
Do note the collapse process starts when the animation ends.
We've defined how our banner opens and closes.
All we need to do is convert this layer into a mask and bring all the other layers under it.
Let's preview our work.
Click on the Lock icon to activate the mask.
As you can see, the mask works, well done.
Next, we have to figure out how users should interact with the banner.
They can either click on the add or mouse over it to open the banner.
We'll show you how to activate a banner with a mouse over.
Add a layer for a button and create a rectangle in the same dimensions as the closed banner.
This ensures users can mouse over any part of a closed banner to activate it.
Convert this shape into a button.
Since users will activate the button with a mouse over it should be invisible.
Do that by moving the state to Hit.
Select the button and add an instance name to it.
Let's check our work.
Notice how the button is visible throughout the banner’s expansion.
That's not right.
It should only be visible at the start.
Fix this by inserting a blank keyframe in frame 2.
Now that we've created a button that opens the banner, we have to create another button that closes the banner.
Insert a keyframe at the end of the animation and create a Close button.
Name the instance.
Now let's ensure that the button is only visible at the end of the animation.
Let's preview again.
It works.
To understand the next step, let's preview our work in a browser.
You'll notice that the banner opens and closes by itself in an endless loop.
That's not quite right.
It should only open and close when users interact with it.
Let's fix that.
Create an Actions layer.
Use the wizard to ensure the animation stops in the first frame so that the banner only opens when users place their mouse over it.
Let's use the wizard again to put a stop at the end of the animation so that the banner only closes when users click on the Close button.
Let's preview.
The banner works as it should.
The next stage is required to ensure that the banner works well on marketing platforms such as Google DoubleClick or Seismic.
Marketing platforms such as Google DoubleClick provide pre-approved templates Which we need to integrate into an Animate HTML wrapper.
The first step is to download the right template from the Google rich media gallery template database.
In parallel, we need to export an Animate HTML wrapper.
Open both files in a text editor.
The Google template is on the left.
Extract code from the Google template and place it in the Animate HTML wrapper.
We're done with the Google template, so you can close it.
Open the JavaScript file and remove unnecessary code.
It may take a couple of minutes.
Take your time and do it carefully.
With that done, we can take the code from the JavaScript file and place it into the Animate HTML wrapper.
Before we can go to the next step, we need to tweak some code on the Animate HTML wrapper.
Next, we need to ensure that Google DoubleClick can track when users open or close the ad.
To do this, let's copy script from the Animate HTML wrapper to the Actions panels of the appropriate frames.
Google DoubleClick can now track when users interact with the banner, but not when users click on the call to action button.
Let's do that.
We're now ready to publish.
It's a good practice to create a profile because they can be reused the next time you create a similar banner.
Import the Animate HTML wrapper and publish.
You'll find an HTML and a JavaScript file in our Project folder.
Our banner is ready to upload to Google DoubleClick.
Great job.
Before we can upload our file to Google DoubleClick, we need to create a backup image of the banner in a collapsed position.
This is what Google DoubleClick will use if the banner doesn't work as it's supposed to.
Zip all the files we just exported plus the backup image.
Upload the zip file into your DoubleClick Studio account.
In the following screen, input the URL where users will be directed when they click on the call to action.
Finally, enter the width and height of the expanded banner.
Check if it works.
It does, excellent.
On the next screen we can publish.
You now know how to create an expandable banner using Adobe Animate.
The good news is you also have a sample template you can download that has all the code you need to create an expandable banner of your own.
Good luck.
