News

Create responsive animation with Adobe Edge Animate

Adobe Edge Animate takes responsive animation further, making it easier to add to your responsive projects

edgemain608

Edge Animate has been simmering away for a few years now and is finally becoming something that is feature rich. Animate first burst onto the scene as the responsive web design movement was in full ascendancy.

As such, many designers were left wondering exactly where animation could fit into their responsive layouts.

This new version of Animate has responded further to existing methods within the software that allowed the user to work in percentages. One of the benefits of working with Flash was that the whole SWF could just be scaled to fit any device, now with this version of Edge we have that same full content scaling technique again.

In this tutorial we are also going to work with SVG images, allowing you to be reassured that your work looks sharp on whatever display is viewing your content.

Get the latest Edge Animate

There has been a recent update to Edge Animate, so make sure your version of the software is up to date through the Creative Cloud app. Start Edge Animate and create a new document. Set the document size to 360 x 400px, then click on the icon to the far-right of the width to set a gradient background.

Import the ship

From the tutorial files, import the image ‘ship.svg’ from the Start Folder. Locate the width of the ship in the properties found to the left of the screen and click the switch to make the width a percentage. This will automatically be 100 per cent. For now, just move the ship down slightly so that it sits a little below halfway down the document.

Import the title

Import the file ‘astro.svg’ and in the elements panel drag this below the ship. Change the width to 100 per cent as in Step 2 and move the text down slightly. Now we are going to resize the stage. Click off everything and you will see the stage in the properties, make the width 640px. Notice how both images remained centred on the stage.

Refine the ship position

To make the scene responsive it can be as simple as changing the width of the stage to 100 per cent, so go ahead and do that. If you press Cmd/Ctrl+Enter you can preview the result. We are going to position the ship slightly further to the right, so click on it to select it. In the ‘Background Image’ settings change the W property to 140.00.

Add the planet

Import the file ‘pt.svg’ and in the Elements panel drag this below the other elements. Change the width of this to a percentage by clicking the switch next to the width. Change the width value to 100 per cent as this will centre it. Now drag the planet down to the bottom half of the screen.

Shine like stars

Now import ‘stars.svg’ and position on the stage halfway down but aligned to the left. In the Properties, switch the left position to a percentage, which will be 0. Now copy and paste the stars. Switch its position to be relative to the right side of the screen and move it to the right of the stage so that, again, its right positioning is 0.

Create a symbol

Change the opacity of both star’s elements to 60 per cent. Import the ‘alien.svg’ file and go to Modify> Convert to Symbol. Name the symbol ‘alien’ and click OK. Double-click the ‘alien’ to edit – you now have a new stage. Uncheck the link for width and height and set both to 100px.

Animate the rotation

Move the alien to the centre of the document, and it should snap into position. Click the Toggle Pin icon in the timeline and move the playhead forward to 4 seconds. Click on Rotation in the Transform panel and make this 360 degrees. Hit the Play button to see the alien spin. You can click the Toggle Pin button again, as we are finished with this for now.

Loop the rotation

With the playhead at 4 seconds, go to Timeline>Insert Trigger, this will bring open a small code panel. On the left-hand side is a set of behaviours that we can choose from. Hit the Play From button and change the value in the code that appears to 0. This will loop the playhead back to the start so that it keeps on moving in a circular motion.

Position the aliens

Return to the main stage by clicking the stage button in the top-left of the stage window. Change the left position to a percentage and give this a value of five per cent. Move the alien to just off the bottom of the screen. Copy and paste this alien, scale it down to 80 per cent, rotate it slightly and position just to the side of this at 15 per cent.

Aliens above

Copy and paste the last alien and position it above the top-right corner. Adjust its relative positioning to the right and set the right value at five per cent. Copy and paste again, scale down to 65 per cent and rotate slightly. Set the right position to 0 per cent. You now have four aliens positioned around the stage. Move the ship in the elements panel above these.

Animate the ship

Select the ship layer and turn on the Toggle Pin icon. Move the pin to 3 seconds, leaving the playhead on frame one. Change the position relativity to the right and scale the image down to 30 per cent. Add an eight-pixel blur and move the image over to the right side, which will give a value of -35 per cent. Press Cmd/Ctrl+Enter to see the ship animate into position.

Move the planet

With the ship animation selected, click on the easing button and add an ease out effect of ‘circ’. Now select the planet and move the pin onto 3.5 seconds, dragging the planet off the bottom of the screen. Press Cmd/Ctrl+Enter to test the planet and ship animating into place. Now would be a good time to save your work.

Bring in the title

Select the ‘Astro’ layer and move the playhead to 2.5 seconds and the pin to 4 seconds. Change the easing to ease out with the ‘bounce’ preset. Move the playhead to just out of the top of the screen. Press Cmd/Ctrl+Enter to test the title bouncing into place. Now select the first alien and change the easing to ‘circ’ for ease out.

Animate the aliens

Now move the playhead to 3.75 seconds and the pin to 3 seconds. Move the alien up onto the screen. Select the next alien and move the playhead to 4 seconds and the pin to 3.25 seconds, again move this alien up onto the screen slightly higher than the first as shown.

Last aliens

Select the next alien and place the playhead at 4.25 seconds with the pin at 3.5 seconds. Move this alien down onto the screen. Select the last alien and move the pin onto 3.75 seconds and the playhead to 4.5 seconds. Move this alien down onto the screen slightly higher than the first.

Make the ship hover

Select the ship, move the pin to 3 seconds and the playhead to 5 seconds. Select ‘quad’ for easing out and move the ship up slightly. Move the pin to 5 seconds and the playhead to 5 seconds and move the ship back to its original position. Now select the animation for the ship between 3 and 5 seconds. Copy this and paste it, and it will paste onto the end.

Repeat the hover

Turn the Toggle pin off. Put the playhead at frame 5 and choose Timeline>Insert Marker. Name this ‘loop’. Place the playhead at the last frame and choose Timeline>Insert Trigger. Press the Play From button and insert ‘loop’ instead of the number.

First responsive publish

The first responsive publishing style we will explore is the one we have been doing all along. Click off the stage and you will see that we set the width of our stage to 100 per cent. This will give us a static height of 400px for the animation and a full browser width. Press Cmd/Ctrl+Enter to test in the browser and view this in action at different widths.

Second responsive publish

Now click on ‘MaxW’ and set it to 960px so that it would fit into a 960 grid. Click Center Stage and leave at the default of Horizontal. Now publish again; this time we have a responsive small animation that never increases in size beyond 960px – this is very useful for working with grids such as Bootstrap or Foundation.

Final responsive publish

This time turn off Center Stage and set ‘MaxW’ back to None. Turn on Responsive Scaling and leave on the default setting. As you will see, this scales proportionally down and up the entire stage so that it fits your animation into the container or browser. As we are using SVG, we get beautiful, crisp graphics when scaled up on desktop.

×