In this Adobe InDesign tutorial, we'll explore how to create a Half-Letter sized interactive flyer to promote an upcoming event – in this case a fictional dance class highlighting three dance session instructors.
This entire project will be created on one page and the idea is for the three images and corresponding shapes to appear with a 3 second Fade-In transition on page load.
Follow along and learn how to:
Set up a new document with Half-Letter size meant for web
Add images inside of shape objects + and apply an Inner Shadow to get a cutout look
Using Animation panel to set animation to main artwork, titles and dates
Using Timing panel to set animations to play in the order of colour themes
Publish and view the project in a web browser
As always, you can find the InDesign files – including a template to work from – in this download folder to follow along step by step.
So let's jump into this lesson and start creating!
First thing is first, let's set up a new InDesign document to begin the project.
Create a New Document
Click on Create New or go to File > New > Document.
Choose the Web tab from the top so the Units are set to Pixels, not Inches.
To set a Half-Letter size for Web, type 396 px in the Width field, and 612 px in the Height field.
Set the Pages to 1.
Set the Margins to 36 px all the way around.
Click Create.
Now that the document has been created, it's time to start adding the main artwork – the three images of the dance instructors to go along with their corresponding shapes.
The images are all in psd format with backgrounds removed and you will find the shapes in an Illustrator document that you can open.
Placing Main Artwork into Project
Copy the shapes individually and paste them in the InDesign project so they are imported as compound path shapes and not images. This will allow you to add an image inside of the shape and not frame.
Go to File > Place or drag the main images in the layout as well. These are named dance.psd, dance-02.psd and dance-03.psd.
Next, group each dance image with the corresponding shape and go to Object > Group. Name the groups as follows: Blue Artwork, Pink Artwork and Purple Artwork.
For reference, here are the three group artwork pieces highlighted in each image:
For this next part, you will need the Animations panel which can both be found under the Window > Interactive dropdown menu.
Adding Animation to Main Artwork Groups
In the Layers Panel, click on the Blue Artwork group.
Click on the Animation panel and apply a preset animation of Fade In.
Set the Duration to 3 seconds.
Set the Opacity to None (This is optional and based on if you want a true fade in animation or a hard transition).
Click on the Hide After Animation selection. This will ensure the first Animation is hidden after playing and the next plays.
In the Layers Panel, hide the Blue Artwork group and activate the Pink Artwork group.
Click on the Animation panel and apply a preset of Fade In.
Set the Duration to 3 seconds.
Set the Opacity to None.
Check the Hide Until Animated option.
Check the Hide After Animated option.
In the Layers Panel, hide the Pink Artwork group and activate the Purple Artwork group.
Click on the Animation panel and apply a preset of Fade In.
Set the Duration to 3 seconds.
Set the Opacity to None.
Check the Hide Until Animated option.
Now that the main work groups have been placed and animated in the layout, let's turn the focus on the main titles and date in all three colours.
In the template I provided, you will notice that there is a text frame for the main title, where you will type Modern Dance in upper-case. There is also a space for the date, where you can type 09.19.22 – or any date of your liking! Lastly, there is another text frame to type in the time of 11am to 1pm.
Setting Multiple Title and Date Layers
Select the Modern Dance text and in the Paragraph Styles, set the style to "Main Title - Blue".
Select the 09.19.22 text and in the Paragraph Styles, set the style to "Date - Blue".
Click on the Modern Dance text frame and go to Edit > Copy or Command + C (Mac)/Ctrl + C (Windows).
Go to Edit > Paste in Place and repeat the same step one more time so there are three versions of the Modern Dance title stacked on one another.
In the Layers panel, rename the first to Blue Title, the second to Pink Title and the third to Purple title. Ensure they are also in that order in the Layers panel.
Click on the 09.19.22 text and go to Edit > Copy or Command + C (Mac)/Ctrl + C (Windows).
Go to Edit > Paste in Place and repeat the same step one more time so there are three versions of the 09.19.22 date stacked on one another.
In the Layers panel, rename the first to Blue Date, the second to Pink Date and the third to Purple Date. Ensure they are also in that order in the Layers panel.
Now that all the main titles and dates are placed on the page and in the order you want in the Layers panel, it's time to animate them.
Adding Animation to Main Titles and Dates
In the Layers Panel, click on the Blue Title, hold Shift and activate the Blue Date object
Click on the Animation panel and apply a preset animation of Fade In.
Set the Duration to 3 seconds.
Set the Opacity to None.
Click on the Hide After Animation selection. This will ensure the first Animation is hidden after playing before the next plays.
In the Layers Panel, hide the Blue Title and Blue Date objects and show the Pink Title and Pink Date.
In the Layers panel click on the Pink Title, hold Shift and activate the Pink Date object.
In the Animation panel, apply a preset of Fade In.
Set the Duration to 3 seconds.
Set the Opacity to None.
Check the Hide Until Animated option.
Check the Hide After Animated option.
In the Layers panel, hide the Pink Title and Pink Date objects and show the Purple Title and Purple Date.
In the Layers panel, click on the Purple Title, hold Shift and activate the Purple Date object.
Click on the Animation panel and apply a preset of Fade In.
Set the Duration to 3 seconds.
Set the Opacity to None.
Check the Hide Until Animated option.
That is it, you just applied Animation settings to the main artwork, titles and dates in the layout.
The last thing to animate will be all three names that correspond with the dancer images. The first one is Jason Cabello, Contemporary; Jenna Stone, Modern Dance; and Daunte Jones, Hip Hop.
In the Layers panel, name the Layers by Jason Cabello, Jenna Stone and Daunte Jones, respectively, and apply the exact same animation settings as the images, titles and dates using the steps above.
Finally, it's time to use the Timing panel to have each set play together one after another.
Using Timing Panel
Open the Timing panel, which can be accessed by going to Window > Interactive > Timing.
In here, you will find every animation you applied in the project. Click on the Blue Artwork, hold the Command key on Mac, Ctrl on Windows and click Blue Title, Blue Date and Jason Cabello.
In the bottom right corner of the Timing panel, click the Play Together Icon, ensure that each one of the animations will play simultaneously.
Repeat the same steps to have the Pink set and Purple set play together.
Here's a look at how the Timing panel settings will work with the Play Together action applied:
