Tut: Animated Season’s Greeting

Finished Project

As the holidays are upon us, you may be dropping a gear or two in terms of workload, and perhaps now would be a good time to spend five minutes having a look at one of the applications that you get access to as a Creative Cloud subscriber: Edge Animate. I love this application, it’s friendly enough for the code-wary to use with point-and-click functionality but is deep enough for developers to add in libraries and as much code as they can spit out.

The end product of Edge Animate is standards-compliant HTML5, JavaScript and CSS3, so it can be deployed as web content, but can also be wrapped into an .oam file for use in Adobe Digital Publishing Suite or as a widget file for Apple iBooks Author.

In this tutorial we are going to create a holiday message that will display in your browser; it should take no more than 15 minutes to complete, and will hopefully will generate some enthusiastic curiosity for further investigation. As the application has eleven tutorials built-in (some of which take less than five minutes to complete) you should be able to feed that too!

The files I’m using here are available fro you to download and unzip: http://adobe.ly/1AWMoGh

Step 1: Open Edge Animate

Edge Icon

If you’ve already installed all of your CC applications, Edge Animate will be available, otherwise just use the CC Desktop App or the browser interface to instal it—this shouldn’t take many minutes. Once you have Animate open, click the Create New link on the left.

Create New

The workspace will open and it may look quite busy, especially as the Lessons Panel will be open. Click the x in the tab to close that panel as we won’t be needing it. What you’re seeing in the main window is an HTML element, called a Div. You don’t need to be too concerned with that at the moment however, as it is a topic we will be looking at in a future post series in 2015. For now, just think of it as your document.

On the left-hand-side you’ll find the Properties Panel and the very first field will say “Untitled”—modify that to read “Happy Holidays!” (without the quotes)—this is the text you’ll see in the browser tab.

Step 2: Change the document size.

Size

Just a quick note here: you’ll notice that most of the values you’re seeing from here on will have small diamonds next to them. Unless indicated otherwise, for this exercise avoid clicking on those as they add keyframes, which may produce unexpected results that we don’t need right now.

Moving downwards from that field, the next thing you’ll come across are the width and height options. Just to the right of the values (in amber) you’ll see a small “switch” next to “px” which we will click for the W value and this will convert it from pixels to percent; leave that at 100% then change the H value to 800, but leave that set at px.

View

You will need to change your view of the work area, so you can see the document. There is no “Fit” command in Edge Animate, and rather than messing around with zoom commands it is easier to go to the bottom of the document window, mouse-down on the magnification value and drag to the left/right until the view suits you.

Step 3: Create Background Gradient

To the right of the dimensions values, you’ll see two colour swatches, one of which will be white—ignore that one and click on the one to the right of that—it will currently have a line through it—and a gradient editor will appear.

Gradient editor

The top stop of the gradient should already be selected so all you need to do is choose a new colour using the field and the two sliders to the right as indicated in the screenshot—it’s probably best to avoid the third (alpha) slider for the time being. The gradient editor will disappear when you click away from it or hit the RETURN/ENTER key.

Step 4: Add the Files

If you’ve downloaded the files then we now need to bring them into the project, or of course your own if you’re using those. Go to File > Import… navigate to the folder containing the images, select star.png and tree.png then hit OK or RETURN. When the images come in, they’ll be dropped onto the Stage (that’s what the work area/document is actually referred to as) using their top left corner as a reference point. The tree will also most likely spill over the edges of the Stage area, and although this won’t actually happen in the browser, we can see what the Min W (minimum width) value can do for us: set change the value to 800px and you’ll see that the stage changes.

Imported files

Drag the Tree and the Star into the centre of the Stage—Smart Guides will be there to assist you—but this will only work in the document; we need to tell the browser to display these times in the centre of the browser, whatever width it may be at. Select the Tree and the Star in turn, then in the Properties Panel you’ll see a Position and Size pane; click the switches for the X and Y values to change them to percentages and then to the right of the buttons for Global and Applied (that you can ignore) there will be a button that you can click to use a preset for responsive layouts.

Responsive

From the presets on the left choose Centre Background Image and then click Apply.

Presets

Step 5: Add the text

At the top of the workspace you’ll see a small toolbar, and from there select the Text Tool—you’ll be pleased to know that if you use accelerator keys in other applications it’s exactly the same in Edge Animate and you can access the tool by tapping T on your keyboard.

07a_addText

Drag out a text frame on the stage and then type your holiday message into the box that pops up; click the x on the box to dismiss it when you’re done. If you need to edit the text simply double-click on the text and the box will re-open.

Now we can use the Text pane of the Properties Panel to set up our text—change the size to suit you and choose centre alignment. If you want to add a cool Edge Webfont from TypeKit, click the + to the right of the font drop-down, and use the dialog to search for something that you like. You won’t be installing the font on your machine—it will be served to the browser when the page loads.

Edge Webfonts

The only other thing we will need to do here is to make sure that text container is also the width of our browser and this is easily done by just switching the W value in the pane above to percent instead of pixels.

Step 6: Animate the Text!

The Pin

With the text container still selected, we’re going to use a tool called the Pin to animate the text. Tap P on your keyboard and the timeline at the bottom of the workspace will turn on a couple of options and add the blue pin to the timeline playhead. Drag the pin out to 1.5 seconds as shown below.

timeline

Now drag your text down off the stage. If you need to zoom out tap and (minus) a couple of times (Windows users substitute CTRL for ⌘ throughout). Once you’ve done that, go to the top of the Properties Panel and drag the Opacity slider to the left; that will make the text invisible. Edge animate will have added all of the necessary keyframes and transitions to the main Stage timeline for that to work—wanna see it? You can now tap your spacebar and the animation will play.

Now we’ll crank it up a notch, but first save your work, and then we can preview it in the browser. As you’d probably expect, go to File > Save… and then choose a location for the project—accept all other defaults. Once you’ve done that, hold down the key and tap RETURN—your browser will open and presto!—there’s your animation. If it doesn’t look right, check that you have followed the previous steps as directed. Return to Edge Animate.

Step 7: Animate the Star

Select the Star on the Stage and go to Modify > Convert to Symbol… then type star into the dialog that appears and click OK which will “wrap” the star in it’s own “environment” with a timeline that runs completely independently of the main Stage timeline. Think of that like your heart. Your heart just keeps beating along all the time doing what it needs to do while you get on with your own day, week, year and so on.

Create Symbol

Double-click on the Star symbol on the stage and you’ll get into that wrapper we mentioned a moment ago. You’ll see that the stage and the tree are greyed out and that also a breadcrumb trail has appeared showing you that you are now in the star timeline—we’ll use that to exit this wrapper when we’re done animating.

Symbol

If necessary, drag the playhead in the timeline back to the left, and select the Star on the stage. In the Properties Panel locate the Transform pane and the little dial for rotation.

rotation

Click the diamond to the right of the dial—this adds a keyframe—and then change the value from zero to -359. Now drag the playhead to the 0:01 (one second) mark, add another keyframe to the rotation and change the value to zero. Hit the spacebar and you should se the star spin. Click on the transition in the timeline as shown below, then copy (⌘-C or CTRL-C).

Transition

Now Move the playhead to the next “notch” on the timeline ruler 0:01.250 and then paste (⌘-V or CTRL-V)—the transition gets duplicated at the playhead position. Right-click that transition and select Invert Transition from the context menu—you should see the rotation values reverse in the transition. Hit the spacebar to see the star rotate, pause and then rotate back. If you’re feeling adventurous, you could try adding opacity keyframes at a later point so that the star fades in and out, too. For now, we’re going to perform one last step to get the animation to loop.

In the pane to the left of the main timeline you’ll find a small diamond inside some braces that we can use to add a Timeline Trigger. Click on that and a large dialog will appear, as below.

Trigger

Don’t worry bout the code area at the top, you won’t need that for this exercise—the buttons and options below will do that for us. From left to right, select Playback then Play then Star as the target. Hit RETURN and then click the x to close that window. The code that has been generated will tell the main timeline that when the star symbol timeline reaches that point, play it over again, and the end result is that it will loop (tapping the spacebar won’t reflect that).

Actions

In the breadcrumb trail, click Stage to return to the main timeline, then test the project in a browser as you did before with ⌘-RETURN.  The animations should be working, but I’m willing to bet that the star isn’t where you expected it to be at all. That’s because the symbol is there now and that isn’t the same as the image! All we’re going to do here is pretty much what we did earlier with the star and the tree. Before we do that, make sure that the playhead is all the way back to the left, so we don’t add any keyframes we don’t need and then put the symbol into place, click the use a preset for responsive layouts button. select the sole option there, Scale Position and click Apply. I’d just tweak the X position to about 45.5% in the Position and Size pane, which should get it more-or-less right in the browser. This isn’t perfect as we’d ideally wrap all of our animation into another container, but it’ll do for now. We also haven’t looked at publishing this file, but again, that isn’t too important at this stage as we’ll be doing a lot more Edge Animate in 2015.

Hopefully though, you now have an idea of how you may be able to venture out into new areas with Edge Animate along with the other tools and services you have access to as a Creative Cloud subscriber, and can start to think about how you may be able to expand your current offering in 2015!

Happy Holidays, Merry Christmas!

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑