Edge and HTML

This video will answer one of the most common questions asked about Edge: What is it, exactly? What you will discover is that it is a robust motion graphics and interactivity tool designed for the web universe. We will look at some examples of work done by Edge artists and explore some features of the interface.

When Preview Release 1 arrived in mid-2011, Edge was able to move pixels from "here" to "there." This video not only shows you how to move pixels, but also demonstrates how Edge vastly expands the creative possibilities for web-delivered motion graphics through the use of the timeline, keyframes, easing, and property manipulation.

Symbols are a major feature of Edge, and in this lesson you will learn how to create them, nest them within each other, put them in motion, reuse them in the current Edge movie, and export them for use in other Edge movies. By the end of this lesson you will have learned the first rule of symbols: Create once, use often.

In this video you will learn how to prepare a multilayer Photoshop document for import into Edge using Photoshop's Save For Web and Devices menu. You will see how layers, transparency, text, and Photoshop effects can move from static Photoshop images to full-motion graphics in Edge in less than five minutes.

Like its cousin Flash, Edge is vector-based, and as such Illustrator will likely play an important role in your Edge graphics production. In this video you will learn how to convert a multilayer Illustrator document to the SVG format used by Edge and within five minutes have that same document in motion in a web browser.

Fireworks is designed for the preparation of screen-based graphics. In this video you will learn how to prepare an Edge project in Fireworks and, using the Export Layers to Files feature, export a multilayer Fireworks project for immediate use in Edge. Along the way you will learn how to prepare the GIF, PNG, and JPG image formats used by Edge.

There's no avoiding the fact that interactivity, regardless of application, is code-driven. In this lesson you will learn just how easy it is to use the Edge Code panel to create navigation, launch events on the screen, and even go to other websites. You'll also see how the Script panel and its snippets make coding a breeze for people who are new to JavaScript and provide a familiar place for web developers.

As HTML 5 and CSS3 rise to prominence, web font technologies are quietly sorting themselves out and allowing designers to apply typographic techniques to their work. In this video, you will learn how to use the Fonts panel in Edge to add a Google font to a project, how to specify a fallback for a font, and how to apply a web font to text in Edge.