Adobe Edge Feature Tour

Explore Adobe’s Motion Graphics and Interactivity Tool

Adobe Edge is a robust motion graphics and interactivity tool designed for the web universe, and in this workshop author and expert Tom Green shows you what it can do. You’ll learn how to create animations, add moving elements to a static HTML page, and create and use symbols. You’ll also see how Edge integrates with Photoshop, Illustrator, and Fireworks and how to use to use the Edge Code panel to add interactivity, looping, and code. A tutorial on using web fonts to apply typographic techniques to your work rounds out this quick but rich course.

Trainer: Tom Green

Publication date: Jul 19, 2012

Free Course

Duration: 1 hr 5 min

Ready for iPad, Android, and HTML5

Powerful, Feature-Rich Interface

HD Video

Edge Animate

Play now Downloads

Similar Courses

Welcome to the Adobe Edge Feature Tour

In this chapter you'll learn the basics of Edge: what it is, what it does, and how you can use it to create animations and put elements on a static HTML page into motion. You'll also learn how to use symbols, which are a key feature of Edge.

The Fundamentals of Working in Edge
- 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.
  
  What Is Edge and What Can I Create With It?
  
  04:18
- 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.
  
  Creating an Animation with Edge
  
  07:36
- In this video you will discover how easy it is to open an existing static HTML page and put elements on that page into motion. You will also learn a simple copy-and-paste method of moving an entire Edge project into an empty div on a web page. You will most likely find yourself asking, "Is it really that easy?"
  
  Edge and HTML
  
  05:40
- 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.
  
  Creating and Using Symbols in Edge
  
  10:03
In this chapter you'll learn how to use Photoshop, Illustrator, and Fireworks to prepare graphics for use in Edge, how to use web fonts, and more.

Edge Integration
- 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.
  
  Preparing Edge Graphics in Photoshop
  
  05:46
- 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.
  
  Preparing Edge Graphics in Illustrator
  
  07:55
- 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.
  
  Preparing Edge Graphics in Fireworks
  
  06:49
- 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.
  
  Adding Interactivity, Looping, and Code
  
  10:50
- 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.
  
  Using Web Fonts in Edge
  
  06:45

Welcome to the Adobe Edge Feature Tour

In this workshop you’ll be introduced to the interface, tools, and features of Adobe Edge and see what it is capable of. The contents of this course include:

The Fundamentals of Working in Edge
In this chapter you’ll learn the basics of Edge: what it is, what it does, and how you can use it to create animations and put elements on a static HTML page into motion. You’ll also learn how to use symbols, which are a key feature of Edge.

Edge Integration
In this chapter you’ll learn how to use Photoshop, Illustrator, and Fireworks to prepare graphics for use in Edge, how to use web fonts, and more.

The lessons are wrapped in a feature-rich interface that lets you jump to any topic and bookmark individual sections for later review. Full-Screen mode provides a hi-def, immersive experience, and Watch-and-Work mode shrinks the video into a small window so you can play the videos alongside your application. Also included are exercise files that give you an easy way to try out the techniques you learn.

System Requirements

Broadband internet connection

Up-to-date browser with Flash plug-in

Screen resolution 1024x768 or higher

Sound card with speakers or headphones attached

Pentium 4 2.6 GHz or higher, or Apple Mac G5

512 MB RAM

Ready for iPad, Android, and HTML5

It's easy to watch this course from your Android device, iPad, or iPhone (4 or later). Access videos straight from your browser, or, for Android devices or iPads, use this course in one of our free apps.

Powerful, Feature-Rich Interface

This course features video2brain’s interactive interface. As you navigate the course, rolling over a chapter or video brings up text describing that item.

Full-Screen mode provides a hi-def, immersive experience. And Watch-and-Work mode puts the video into a resizable window that you can shrink so you can watch the lessons on one side of your screen while you’re following along and applying what you’ve learned on the other.

HD Video

This course comes in crisp 1280 x 720 high definition video.

Bookmarks (Downloadable Feature)

Available in the downloadable version of our courses, this feature makes it easy to create a custom bookmark in any lesson to mark where you left off or to make note of something you want to refer back to later. You can even add a name or short note to remind yourself what the bookmark is for.

No comments yet

Recommended Courses

Adobe Edge Feature Tour

Explore Adobe’s Motion Graphics and Interactivity Tool

About this lesson

Welcome to the Adobe Edge Feature Tour

System Requirements

Welcome to video2brain!

Other sites. Andere Seiten. Otros sitios. Autres sites.