Follow along in this tutorial and learn how to create a text mask animation and set button actions to direct users to a web page – all using Adobe Animate.
For this, we'll create an animated web advertisement for a fictional artist's upcoming album. The focus of this tutorial will be to animate the artist's image as well as the name 'Tabitha Kelly' – the latter using a mask technique.
As a final step, I'll go over how to set up a button with an action to click to a website.
Once again, we'll be importing an existing Adobe Illustrator document into Animate, which you can find in the download folder.
The first step in this lesson is creating the Animate document.
Document Setup
Open Animate and go to Create New.
Click the Advanced tab and choose HTML5 Canvas.
In the Width field, type 672 and in the Height field, type 560
Click Create.
Now that the document has been created, it's time to import the Illustrator file into the Animate canvas.
Importing Illustrator File to Animate
Go to File > Import > Import to Stage.
Locate the Illustrator file on your computer – it should be named 'artist_design.ai' – and click open.
When the design is placed on the canvas, click the "Clip Content Outside of the Stage" icon located in the upper right corner of the workspace. This will mask the excess artwork outside of the stage.
You will notice that all of the content in the stage are on separate layers. Next, it's time to set up the text mask with animation. For this, you will focus on the Main Headline layer.
Setting up Text Mask Animation
With the Selection Tool, click the Tabitha text and while holding Shift, click on on the Kelly text
Right-click and Convert to Symbol. You can also go to Modify > Convert to Symbol to achieve the same thing.
Rename the Symbol to Headline and leave the Type to Movie Clip.
Click OK.
In the Timeline, create a new Layer and name it Mask.
While still on this Layer, with the Rectangle Tool, draw a box that surrounds the entire headline text – Tabitha Kelly. (It doesn't matter what the fill color is).
Ensure that the Mask Layer is directly above the Headline Layer in the Timeline.
Right-click the Mask Layer and choose Mask. (You will notice that the Mask Layer has now become the Parent Layer to the Headline Layer and they are both locked).
Unlock Headline Layer and place your cursor on the first frame in the timeline.
Click and drag the text frame outside of the mask box.
Move the Playhead to the 15 frame mark and add another Keyframe by pressing F6 or clicking the Keyframe icon in the timeline tools.
With the Select Tool, move the Headline Text back to its original place in the Mask box.
Lock the Headline Layer.
You have created a simple text mask animation and you can test it by moving the playhead left and right to see the text move in and out of the mask that.
Finally, you will notice a grouped Listen button at the bottom of the design. Let's set that up to have a hover appearance on rollover as well as an action of Go to Website.
Setting Up Button Interactivity
With the Selection Tool, click on the Button in the canvas, right-click and choose Convert to Symbol.
Set the Type to Button.
Click OK.
Double click the Button, which will open up its own Timeline with four categories: Up, Over, Down and Hit.
Move the playhead to the Over frame and add a new Keyframe.
Double-click the Button and change the Fill color to something different than the main color. For this lesson, I used ##8087AB.
Click the Main Button tab at the top left to go back to the Main Button timeline.
With the Selection Tool, click the Button on the canvas and in the Properties Panel, in the Object Tab, give this an Instance name such as main_button.
Go to Window > Actions to open the Actions window.
Click the Code Snippet icon (< >), which is located in the upper right corner of the Actions window.
Collapse the HTML5 Canvas folder and then Collapse the Actions folder.
Double-click "Click to Go to Web Page".
As a default, the web page in the code is set to adobe.com , but you can replace with your own URL.
Test the button and see the entire web advertisement in real time by going to Control > Test or by pressing Command + Return on a Mac or Ctrl + Enter on Windows.