News

Create a responsive animation with Adobe Edge Animate

Build web animations with Adobe Edge Animate to fit all screens and devices

step-1

With ever-more web content having to work across varying screens our online animations also need to be up to the task. Adobe created Edge primarily to get animated content on to mobile devices, but with it creating animations using DOM content, you might assume it would be quite tricky to make them work in a scaling, multi-screen environment.

But fear not, those clever people at Adobe have allowed all the settings for Edge Animate to work with percentage values. Not only that, but you can also define exactly what happens to each element when the content area is reduced. This covers whether something should scale, always remain centred or be clipped, so your animated designs always look their best, no matter how they’re being viewed.

DOWNLOAD TUTORIAL FILES

Download and install

If you haven’t done so already, visit http://html.adobe.com/edge/animate and click on the Get Started button. You will need to log in to Adobe’s Creative Cloud; it’s free to join and the software is completely free. Download Edge Animate and install it on your computer. Copy over the Start folder to your desktop from the cover CD and launch the software to get going.

Create a new document


Start a new Edge Animation from the splash screen. In the Properties tab change the title to ‘StateOfPlay’, amend the width to 960px, the height to 200px and the background colour to black. Now click the switch next to the width to make it 100%. Select the Max W parameter and change this to 960px too. All these tweaks will make the layout responsive.

Import the images


Save the document as ‘index.html’ in the Start folder. You will now see the images folder in the Assets part of the Library panel. Drag ‘bg.jpg’ onto the stage in the top-left corner. In Properties this has a registration point which is what we need. Now drag ‘logo.png’ onto the stage and scale down to position as shown.

Scaling the animation


To test the stage is responsive click on the marker in the top-right of the stage panel. Drag it to the left to see the stage resize. We’re not scaling any of the background images, but we will change some of the content that we animate.

Apply a preset


Next drag the image ‘headspin.png’ onto the stage and position in the top-left corner. In Properties click on Use Presets for Responsive Layout and choose the Center Background Image option, then Apply. This means the image will stay central whenever the stage morphs.

Responsive skills


Drag the bottom-right corner handle so the Headspin image fits over the entire background. Notice the image doesn’t scale or stretch but stays in the centre. In the Position and Size tab is an expand button; click this and add a Max W of 720px. Change the width to 100% and press Enter. It will jump right back to 75% but it has accepted the change.

Resize the doc


Click on the resize marker and drag to the left to see what happens when the stage is resized to a smaller layout. As you can see, the background is clipped but the Headspin image resizes to fit. We are going to allow the State of Play logo to be clipped because the games they make are the most important part of this animation.

Change the cursor


From the image assets on the cover CD, drag in ‘app-store-badge.png’. Position it at 12px for both the x and y locations within the Properties panel. Next, under the Cursor section, click the auto button and a pop-up menu will appear. Choose the pointer option so that if the user rolls their mouse over this area, they know that they can click to explore further.

Link to the store


In the Elements panel click between the ‘{ }’ brackets for the app-store-badge layer in order to
open up the Actions panel. Make Click the action,then select the Open URL button. Amend the URL
to https://itunes.apple.com/gb/app/headspin-storybook/id394160278?mt=8 so that the link takes
the user directly to the App Store.

Create the animation


In the timeline, click on the pin icon and drag the pin to one second on the timeline. Click the easing button and pick EaseOutBack. Now drag the Headspin logo to the left so the main detail is off the screen. You can also drop Opacity to 0%. Hit play to see it in action.

Animate the badge


Position the playhead at 0.75 seconds and the pin at 1.5 seconds (click the pin icon off and on if it has disappeared). Change the easing to EaseOutBounce, then select the iTunes badge and drag it off the bottom of the stage. You can click the play button to see this in action again, though you might want to rewind first.

Animate out


Place the pin at 3.5 seconds and the playhead at four seconds. Drag the iTunes badge off the top of the stage; this will animate the badge off the stage. Now move the pin to 3.75 seconds and playhead to 4.5 seconds. Change easing to EaseOutBack and drag the Headspin image off the bottom. Reduce Opacity to 0%.

Set up the Lume image


Turn the pin off and drag ‘lume1.png’ onto the stage and position at 0px on both the x and y axes. Change the Max W property to 720px and then click the switch so the width is based on percentage; amend this to 100%. From the Responsive Presets button select Clip Background Image before hitting Apply.

Resize the animation


If you resize the animation you’ll see the image is clipped; that’s because this part of the image has the most interesting content on the left-hand edge of the document, where the moustached man is. You need to decide what you most want the viewer to see before opting whether to centre or clip an image.

Animate Lume


Your playhead should be on 4.5 seconds; turn the pin on and move this to 5.5 seconds. Make sure that easing is set to EaseOutBack. Now move the Lume image over and off the left-hand side of the stage. Once again reduce the Opacity slider to 0% in the Properties panel.

Animating Lume Out


Place the pin at 8.25 seconds and then put the playhead at nine seconds. Select the Lume image and move it off the bottom of the stage. Drag the Opacity slider down to 0%. Rewind the movie and press play to see your progress so far. You can also resize the stage while this is happening in order to get a sense of the responsiveness.

Copy the badge


Turn the pin off and move the playhead to 4.5 seconds. Select the app-store-badge layer and then copy and paste it. In the Elements panel click on the copied layer and drag this to the top of the stack. This should now be positioned above the Lume layer.

Change the URL


With the copied layer of app-store-badge still active open the Actions window via the Elements panel. Change the URL address to https://itunes.apple.com/us/app/lume-hd/id502008751?mt=8 so that it links to the right content. Close the Actions pane now as we will not need it any more.

Publish so far


Go to the File menu and choose Save, then return to File but this time select Preview in Browser. You will see your animation playing. The big problem at the moment is that it plays but doesn’t repeat, so we’ll fix that in the next step. Refresh your browser and resize it to see the responsive sizing in action.

Trigger happy


Turn the pin off and place the playhead at the very end of the animation which should be nine seconds. From the Timeline menu choose Insert Trigger. The Script window will open again and a trigger icon will appear on the timeline. Choose the Play from option and, in the Script panel, change the value in brackets from 1,000 to 0. This makes the animation play in a loop.

Final publish


We publish again to finish the animation. Go to the File menu and choose Preview in Browser. This will run through the work and also publish the files you need – these will all be located in the folder that we saved our work into back in step 3. The Edge files will all need to be uploaded to your web server to make the project work.

×