Beginner's guide to Adobe Edge Preview 4

Since the first preview release of Adobe Edge on August 1, 2011, hundreds of thousands of copies of this application have been downloaded. When you consider that Edge is not even a beta product, is freely available, has undergone three major revisions since then, and has garnered so much interest, it would be safe to assume that Edge is poised to become an integral part of the web design and development toolbox.

Edge Preview 1 focused on the interface, graphics, and motion. Preview 2 incorporated feedback on Preview 1 and featured a number of interface bug fixes. Preview 3 introduced interactivity. This release, Preview 4, builds on Preview 3 with several significant new features and improvements, including the use of Symbols, web fonts, and clipping.

Because the new features in Edge Preview 4 are so interesting, it makes sense to work through a separate tutorial—this one—that will enable you to extend the skills presented in Beginner's guide to Adobe Edge Preview 3. If you have never used Edge, complete that tutorial to learn the fundamentals before continuing here.

Before diving into the project, set up your environment by:

• Downloading and installing Edge Preview 4
• Downloading and unzipping the sample files for this tutorial

The project you are going to construct was initially featured in a Sneak Peek on the Adobe Edge Team Blog. In it, team member Sarah Hunt created a banner ad for a fictional car company. Follow these steps to get started:

1. Choose File > New to create a new Edge document and set the stage size to 728 pixels wide by 80 pixels high.

   The first major change you will notice is the addition of a Library Panel (see Figure 1), which provides access to assets (graphics added to your project), as well as Symbols and fonts, both of which you will work with later.

Though you can always import files by choosing File > Import, with Edge Preview 4 you can speed things up by dragging and dropping content directly from the file system.

2. With your Edge document open, navigate to the Exercise folder of the sample files you downloaded. Open the Content folder and you will see three image files.
3. Drag the three files from the folder to the stage. You will see the files on the Edge stage, a number indicating how many files are being moved, and the x and y coordinates of the position at which the files are about to be placed (see Figure 2).

4. When you drop the files, they will appear on the stage. They will also appear under Elements and Assets in the Library panel.
5. Delete the car and the wheel image from the stage. As you can see, the Elements containing them are gone but the PNG files remain listed under Assets.

The background.png size doesn’t quite fit the stage. Prior to this release of Edge, resizing required use of the Properties panel. In Edge Preview 4, you can use the new Transform tool in the Tools panel to resize the image to fit the stage.

1. Select the Transform tool (see Figure 3) and click once on the image on the stage. The image sprouts resizing handles.

2. Drag the origin point of the selection to the left side of the background gradient.
3. Select the middle handle on the right side of the selection and drag it to the right edge of the stage.
4. Move the origin point to the top of the gradient.
5. Select the bottom middle handle of the selection and drag it to the bottom edge of the stage.
6. Lock the background element.
7. Drag the origin point of the selection to the left side of the background gradient.

The gradient is now properly sized (see Figure 4).

Note: One thing this new Transform tool cannot do is rotate the selection. That still requires a visit to the Rotate area of the Properties panel, though it has been publically stated that rotation capabilities will be added to the Transform tool in the next preview release.

If you are a Flash Professional user, you’re likely familiar with Symbols. Symbols have been introduced in Edge Preview 4. In fact, the icon for an Edge Symbol is closely related to the movieclip Symbol from Flash.

In very simple terms, a Symbol in Edge is a self-contained, reusable item. In Edge, Symbols:

• Contain timelines that are independent of the main Timeline
• Can be nested inside of each other
• Can be changed using in place editing on the Timeline

Follow these steps to see how all of this works:

1. Drag the carbody.png image from the Assets panel to the stage.
2. With the image selected, convert it to a Symbol by choosing Modify > Convert to Symbol.  Alternatively, you can press Ctrl-Y or right-click and select Convert to Symbol.
3. In the Create Symbol dialog box, type Car as the Symbol Name and select Autoplay Timeline (see Figure 5). Click OK. The Car Symbol is added to the Symbols panel.

When you select the Autoplay Timeline option for a Symbol, any animation contained within it will play when you press the space bar to play the movie on the main Timeline. If it is not selected, the Symbol will not play automatically at runtime; it will have to be controlled using a script.

When a Symbol is selected, you can add Actions to it in the Properties panel (see Figure 6). In addition, if you select the Scrub option, the animation within a Symbol will play when you scrub the playhead across the main Timeline.

You can edit Symbols in the Library in two ways. You can right-click the Symbol in the Library panel and then select Edit Symbol. Alternatively, you can edit the Symbol in place.

If you are a Flash Professional user you are likely familiar with the ability to open Symbols right on the main Timeline, make changes to the Symbol, and have those changes instantly appear on the Timeline. You can use the same technique in Edge Preview 4.

Follow these steps to give the car two spinning wheels:

1. Double-click the car on the stage.

Two things happen. Everything but the car is grayed out, and a breadcrumb trail appears at the top of the stage (see Figure 7).

2. Drag a copy of the carwheel.png image from the Assets panel to the rear wheel well of the car.
3. The image you just added is now regarded as a component of the car Symbol. To confirm this, click Stage on the breadcrumb trail to be returned to the main stage.
4. Double-click the wheel on the stage and to open the Car Symbol.
5. While in the Car Symbol, select the wheel and convert it to a Symbol named Wheel.
6. Return to the main Timeline and double-click the wheel Symbol to open it. This demonstrates another feature of Symbols: they can be nested inside of each other.
7. Pull the playhead to the 0 point of the wheel Timeline and add a Rotation keyframe.
8. Move the playhead to the one-second mark of the Timeline and change the Rotation value to 719 degrees. If you scrub the Timeline the wheel will spin (see Figure 8).

9. Return to the main Timeline and scrub the playhead. The wheel will spin and then stop at the one-second mark as you move the playhead.
10. Return to the Car Symbol and drag a copy of the Wheel Symbol to the stage. Place this new Symbol in the wheel well at the front of the car.
11. Click Car on the breadcrumb trail and, in the Elements panel, rename the two Wheel elements to Front and Rear. You will need these two names in a later section.
12. Return to the main Timeline and scrub the playhead. Not only does the car sport some nifty tires, but they spin.

You may have noticed the wheels stop spinning at the one second mark on the main Timeline. This is due to the duration of the spin animation in the wheel Symbol. There are two ways of addressing this:

• Extend the Transition strip to the two-second mark of the wheel Timeline.
• Loop the Timeline back to the 0 point programmatically.

Follow these steps to implement the second technique:

1. Open the Wheel Symbol on the Timeline.
2. Move the playhead to the end of the Transition strip and add an Actions keyframe to the Timeline to open the Script panel.

   When you do this, the script panel will open. The panel is actually named Trigger because you are using code to tell Edge to trigger an action when the playhead reaches this point. In this case you want to move the playhead back to the 0 point on the Timeline and play the animation.

3. On the right side of the panel is a list of Code Snippets. Click the Play button and a code snippet is added to the panel.

4. Click once between the parentheses after the .play method and type 0 (see Figure 9). You have just told Edge to return this Symbol’s playhead back to time 0 when this snippet is encountered.

If you prefer to write your own JavaScript, you can type your code directly into this panel and not concern yourself with the snippets. As well, the code panel in Edge Preview 4 includes some code short cuts. If you click the e in function (sym,e) at the top of the code block, a list of these shorts cuts is presented to you (see Figure 10).

If you click the Panel properties button in the Script panel (see Figure 11) you will see that you now have the ability to:

• Turn line numbering on and off
• Increase and decrease the size of the text in the Script panel
• Show or hide comments in the code

5. Close the Script panel and click the Stage breadcrumb to return to the main Timeline.

Obviously the car is larger than the stage and needs to be resized. Follow these steps to shrink it down and put the car in motion:

1. Select the Transform tool and click on the car.
2. With the Shift key held down, click on a corner handle and scale the image to fit the height of the stage. If you prefer to do it by the number you’ll want to scale the car to about 30%.
3. Move the resized car to a position outside of the left edge of the stage and add a Location key frame.
4. Move the playhead to the two-second mark and, scrubbing the Translate (x) value on the Timeline, move the car to the right edge of the stage. If you scrub the Timeline, the car moves across the stage and the wheels rotate for that 1-second duration in the Symbol.
5. Select the Transition strip on the Timeline and apply the easeOutSine ease to have the car gently come to a stop (see Figure 12).

If you test the project in a browser, you’ll see that the car scoots across the stage but when it stops the wheels keep spinning. This is due to the script added to the Wheel Symbol.  One of the neat features of Edge is the ability to control Symbol playback from the main Timeline. Here’s how:

6. Move the playhead to the end of the car animation and add an Actions keyframe to the main Timeline.
7. When the Script panel opens enter the following code:

Essentially, the first line tells Edge to find the Element named Front in the Car Symbol and  stop it from playing.

8. Save and test the movie in a browser. The car zips across the stage and the wheels stop spinning when it reaches the right edge of the stage.

No matter how you approach it, the use of fonts on the web has been problematic at best. In the past, if the user didn’t have the font your application used on his or her machine you would have had to accept the fact that your really nice Garamond was likely going to be replaced by Times. If you were still adamant about your choice of font, then you converted the text to an image file or you resorted to a font replacement technology such as sIFR. This dark age of web type may just be fading away thanks to the fact that HTML5 compliant browsers, generally, can use the @fontface tag.

This capability has been added to Edge, so you can now use web fonts from a variety of vendors and add them to the Font panel of your Edge projects. In this example, you are going to add web fonts using two sources: Typekit, which is a commercial solution, and Google Fonts, which is an open source solution.

Note: Though this is all very encouraging there are legal considerations involved. As Sarah Hunt notes on the Edge team’s blog: "Most fonts come with an EULA (End user license agreement) that specifies how the font can be used. For example, you can purchase a font to use for print, but the EULA can say you are not allowed to embed that font for web use. In the past few years a lot of font foundries and font services have been picking up on the trend of web based fonts and writing EULAs that specifically target web use (how many sites can be embedded, how many views, etc.) For the purposes of the Web Font tool in Edge, the onus of liability is left up to the user to know what their limitations of the font file are. There simply isn’t a feasible way for Edge to determine if the EULA for the font is valid or not, especially since Edge only handles the CSS stylesheet for the font and not the file itself.”

Using Typekit fonts

To start with Typekit, which just happens to be a part of Adobe, follow these steps:

1. With your CarBanner.edge file open, select the Text tool and type Edge is awesome. Keep in mind that for the time being the Text tool is not capable of creating text blocks or formatting them. Limit your text to single, short lines.
2. Launch your browser and visit www.typekit.com. If you already have an account, sign in. Otherwise, set up your free account.

Note: If you are setting up a Typekit account, you also need to create a Kit after you sign in. Make sure the Domain in your Kit Settings is 127.0.0.1. This is your localhost IP address and is how the fonts you choose will be displayed in Edge.

3. Next, click the Sans Serif classification. A list of Sans Serif fonts will appear.
4. Click once on the Gesta font (see Figure 13), and click Add to Kit to open the Kit Editor .

5. When the Kit Editor opens, deselect everything but the Bold weight in the Weights and Styles section (see Figure 14).

Note: Some fonts have extra Weights and Styles associated with them. To this point in the Edge preview release cycle you can choose only the Roman, Italic, and Bold weights of the fonts if you want them to render in Edge. Other styles such as the Semibold and Semibold Italic will not render. The Edge team is aware of this limitation and is working on a solution.

6. Click the Embed Code link at the top of the Kit Editor.
7. When the JavaScript code window opens, copy the code block to the clipboard (see Figure 15).

8. Close the JavaScript window and return to the Edge project without closing the Browser.
9. In Edge, click the + sign in the Fonts panel to open the Add Web Font dialog box.
10. Click in the Embed Code area and paste the JavaScript from your clipboard into it (see Figure 16).

The dialog box also prompts you to add a list of fallback fonts (or the font stack) that Edge will use. Although you can manually type it here, there is a good chance that you may mistype the proper names for the web font.  There is actually an easier way of accomplishing this task.

11. Don’t click Add Font just yet. Instead, return to the Kit Editor in your browser.
12. In the Selectors area, click the Using Fonts In CSS link to open the Using Font Family Names In Your CSS window. At the bottom of the window is the stack. Select the fonts named in the stack and copy them to your clipboard (see Figure 17).  Don’t copy the semicolon.

13. Close the Using Font Family Names In Your CSS window.
14. Click the Publish button and when the publish process finishes, close your browser and return to Edge.
15. Paste the contents of the clipboard into the Font Fallback List of the Add Web Font dialog box. Remove the quotes from around "gesta" and click Add Font. The font is now added to the Fonts panel.
16. Select the text on the stage. Using the Font menu in the Properties panel, apply your new font (see Figure 18). Change the text size to 48 px.

Note: To delete an item from the Fonts panel, select it and press the Delete key. The font will be removed from both the Fonts panel and the Font list in the Properties panel.

Note: When you add a font, you may notice a small icon for the font appear at the bottom of the stage. Don’t worry about; it will not appear when the movie is published. It is there to indicate that you are using a Typekit font.

Using Google Fonts

The process for using Google web fonts is quite similar to the process used for Typekit:

1. With your Edge project open, visit http://www.google.com/webfonts in your browser.
2. When the page opens click Start Choosing Fonts.
3. On the samples page opens, select Sans-Serif from the Filters dropdown.
4. Select Alphabet in the Sorting dropdown. A list of Sans Serif fonts will appear (see Figure 19).

5. Abel looks like a good choice. Click Add To Collection in the Abel font sample.
6. When the font appears in the Collection, click the Use button.
7. On the settings verification page, scroll down to the third and fourth sections. The embed code is found here. Select the embed code and copy it to your clipboard (see Figure 20).

8. Return to Edge and add a new font. In the Add Web Font dialog box, paste the contents of the clipboard into the Embed Code area.
9. Return to the Google page and copy the stack to the clipboard.
10. Return to Edge and paste the contents of the clipboard into the Font Fallback List (see Figure 21).
11. Remove the quotes from around 'Abel'.

12. Click Add Font.
13. Select the text on the stage and format the text using your new Google web font (see Figure 22).
14. Save your project.

Edge Preview 4 includes two more new features: Element Display and Clipping.

The Element Display feature gives you control of an element’s display attribute. The three settings are: Off , On , and Always On . If you select Off , the element is removed from the browser’s rendering tree, increasing efficiency. Select On and the element is displayed when you need to see it. Select Always On and, as the name implies, the element is always visible.

You can use Clipping in the Properties panel to create some rather interesting masking effects. Clipping is ideal for situations in which a CSS spritesheet is used in an Edge animation, although that topic is beyond the scope of this tutorial.

To better understand how the Clipping and Element Display features work, you can apply them to the text Element on the stage. The plan is to have the text appear as the car zips across the text block.

1. Drag the playhead to the 0 point and select the text block on the stage.
2. In the Properties panel set the Element Display property to Off and add a keyframe (see Figure 23).

3. Drag the playhead to about 00.00.350, which is just about where the back of the car is even with the left edge of the text block.
4. Making sure that Auto-Keyframe Properties are turned on (press the A key if they are not), click the Off button in the Display property on the Timeline. The button text switches to On (see Figure 24). As you can see, the Timeline also looks a little different. The crosshatching tells you the element’s Display property is off for a certain length of time. When the color becomes a solid, the element is visible.

5. With the text selected at the point where the Element Display property is set to On, add a keyframe in the Clip area of the Properties panel. The four values affect the Top, Bottom, Left, and Right edges of the selected object.
6. Scrub the Clip value for the right edge to the left until the text disappears (see Figure 25).

7. Drag the playhead to the point where the back of the car is touching the right edge of the selection.
8. Scrub the right edge clipping value to the right until the text appears (see Figure 26).

9. Rewind and play. The car moves across the stage and the letters appear as the car passes them.

In this tutorial, you’ve applied many of the major new features of Edge Preview 4. You started by dragging content from the file system into Edge and discovered that items added to your Edge document are now automatically added to the Library panel. From there you explored the new Symbols feature and learned how Symbols are created, nested, manipulated, and removed from an Edge document. You saw how to add web fonts from services such as Typekit and Google Web Fonts to your Edge projects using simple copy and paste actions. Lastly, you applied the new Display Element and Clipping features.

For a more complete list of the improvements in Edge Preview 4 see Mark Anders’ blog post on the subject.

Now that you have some experience with Edge, take some time to explore the samples page on Labs. Download a few of the samples. Open them in Edge. Dissect them and start learning how to do even more with Edge.