How Create an Animated Web Banner with InDesign & in5

The banner in this example was made with Adobe InDesign.

Yes, InDesign. The page layout tool.

InDesign Hidden GemsWhile InDesign is known for print layout, it also has

extensive interactive capabilities, including:• An Easy-to-use Animation Panel

• A Timing Panel to create sequenced animation

• The ability to create different Object States that change with interaction

• Interactive actions for Buttons and Form Elements

Just because InDesign was originally conceived as a page layout tool, doesn’t mean you have to create things that

look like books.

In this presentation, I’ll show you how use InDesign’s interactive features and the in5 HTML5 export to create a

web banner.

Building the Animation in InDesign1. Creating animation with InDesign is easy.

2. Lay out the elements as you would normally.

3. Open the Animation panel (Window > Interactive > Animation).

4. Select an element and apply a preset.

In this image, the Preset is set to Fade in.

That’s all you have to do to create an animation.

Creating an animated sequence

Then I used the Timing panel (Window > Interactive > Timing) to arrange the animation in the desired order.

The two rectangles come in together (linked using the button at

the bottom of the panel), then the text builds one line at a time.

Making it ResponsiveWhile InDesign doesn’t have fully responsive capabilities

built in, it does have the Liquid Layout panel.

The Liquid Layout panel isn’t sophisticated enough to build entire, responsive web sites (at least not easily).

However, it’s powerful enough to create a responsive web banner, and it’s supported by in5!

You can find the Liquid Layout panel under Window > Interactive > Liquid Layout.

Here are the Liquid Layout settings for the same Text

Frame that we looked at above.

Note that it’s pinned to the bottom and the right.

The elements in the top left are pinned to the top and the left.

The big text (“web banner”) in the middle is set to scale with both

the height and the width.

So when this browser window is scaled down to a narrow width, the elements respond and look

like the image shown here.

Creating a Borderless ExperienceThere two steps to making a banner that blends seamlessly

with the page.• Use a transparent background for the banner.

• Ensure that no border appears around the content frame.

To create the transparent background, I selected None for both the Background and Page colors in the in5 dialog

(File > Export HTML5 with in5…).

Embedding Content in the PageIn the example above, I used the in5 Embed Plugin for WordPress to put the banner into the top of this post.

I set the width to 100% and selected Disable Scrolling

and Hide border so that no edges would appear around the frame.

This created the borderless banner that blends seamlessly into the rest of the

post design.

Looping the AnimationsYour in5 output is very flexible. You can append code to

create new functionality.

In this example, I added a JavaScript file to the output that causes the animation to loop endlessly.

Here’s the code inside that file.$(function(){ var reloadPageDelay = 3000; /*in milliseconds*/ var $replay_btn = $('[name=replay_btn]').on(clickEv, function() {

reloadPage() }); var animIDArr = $('.page').attr('data-ani-load').split('id:'); var $lastAnimElem = {}; while($lastAnimElem.length !== 1) { var lastAnimID = animIDArr.pop().match(/\d+/)[0]; var $lastAnimElem = $('[data-id='+lastAnimID+']'); } function reloadPage(){ nav.currentPage = -1; nav.to(1); } $lastAnimElem.on('webkitAnimationEnd oanimationend oAnimationEnd

msAnimationEnd animationend', function() { if(!$replay_btn.length) { setTimeout( function(){ reloadPage(); }, reloadPageDelay); } }); });

Alternative looping methods

This isn’t the only way to create looping with in5. I detailed another method in creating a looping slideshow.

You can also create user-based looping with a button and that can be done completely from InDesign (no extra code).

To do so, use the Buttons and Forms panel (Window > Interactive > Buttons and Forms) to add a Go To Page action.

Since there’s only one page in this document and the animations are

set to play On Page Load, clicking this button will cause the animations

to play again.

As you can see, the possibilities are endless and fairly easy to create!

View detailed article & get source files:

http://ajar.pro/blog/?p=2803