Adobe Edge Team Blog

New in Preview 6…

We added a small feature with Preview 6 that makes a big difference if you are trying to make multiple Edge compositions work together or if you are integrating an Edge composition into a larger website framework. The Edge preloader now defines AdobeEdge.bootstrapCallback that allows you to register a callback function from the context of your HTML page that will be called when your Edge composition is loaded and ready to play. This provides a hook to register event listeners for Symbol and Timeline events, something that was previously only possible from within an Edge composition’s xyz_edgeActions.js file.

An Example: Play 3 Compositions in Sequence

Lets look at an example that plays a series of compositions in sequence.  In this example we will avoid editing the Edge compositions themselves; instead we will be focused on editing the wrapper.html that combines them.  The compositions we’ll use are very simple:

page_a.html

page_b.html

page_c.html

You can download a .zip of the example here.

Project Setup

Edge does not support editing multiple compositions in the same file, but you still might want to make edits to a composition after integrating it into a larger site. An emerging practice is to edit the compositions separately via composition-specific .html files and then combine then in a single “wrapper.html” file that is just used to preview the combined work.

The wrapper and each of the pages can be placed in the same directory so they can share resources.

Include 3 compositions

First the wrapper.html needs to include each of the compositions:

Add HTML markup for each stage

Each Edge composition is associated with a “stage” DIV that has a class name identical to the Edge composition’s ID.

Add CSS to position 3 stages

Each Edge Composition lives inside a “stage” DIV element. Without a little help from CSS the 3 stages would flow and appear one after another. They would also all appear when the page loads. In this case we want to hide the 2nd and 3rd stage until the right time in the sequence.

Bootstrapping with JavaScript

Since Edge is loaded using a preloader script, very few JS APIs are reliably available from the wrapper HTML page. The preloader downloads Edge and jQuery libraries dynamically, so the page needs a hard signal when it is safe to call into them. The following code can be added to establish callback when it is safe to call jQuery and Edge APIs:

AdobeEdge.bootstrapCallback(function (compId) {
//your function will be called when the composition is ready to play

});

Coordinating multiple compositions

Our bootstrap function is going to coordinate 3 compositions. It will be called 3 times as each composition loads and is ready.  Since we want to coordinate the compositions we are going to keep track of loading using the loadedComps variable.

Registering Edge-specific callbacks

Since the Edge composition is ready when the bootstrap callback is issued, we can safely bind to Edge callback APIs.  The same syntax that is used in the xyz_edgeActions.js can be used here.  The following code listens for the timeline to complete.  When one timeline completes, it hides the related composition and then shows and plays the next one in the sequence.

It is pretty simple!  Here is the finished result (more for you to inspect than for your viewing pleasure).

We’ve just released Edge preview 6, which has many significant updates:

• Built-in lessons: First-timers and newbies, rejoice! We have six new tutorials built right into Edge, to help new users get familiar with the basics.
• Coding: A new code panel gives you a complete view of the actions code in your project, and the code editor has a new full code mode.
• Publishing: Easily import your projects into Adobe’s Digital Publishing Suite with InDesign CS6, or Apple iBooks author. We also have a new Static HTML Markup feature for SEO benefits, and Google Chrome Frame support for better fidelity on older browsers.
• Symbols: You can now copy/paste and import/export symbols from one project to another.
• Languages: Edge is now available in French, German, Japanese, Italian, and Spanish. Just go to the ‘Help’ menu to change it.
• Other cool stuff: The Preview in Browser function is now compatible with Adobe Shadow, auto-keyframe mode has been improved, editable time codes are back, and so much more to make Edge more efficient.

Check out this video with Mark Anders, who covers the new features in preview 6.

Get the complimentary download here (you can also get Edge preview 6 as part of the Adobe Creative Cloud).

Also, our new microsite at edge.adobe.com is live!  This is our new “home” where people can learn about Edge, get helpful resources, download samples, and more. Please let us know what you think.

Cheers,
Rich

Today we released a minor but important update – Adobe Edge preview 5.1. Preview 5.1 fixes 2 bugs that were reported by users that we felt were important to fix.

The first concerns a “blank” error dialog that is displayed when deleting an image from the images folder while still referencing the image from the composition.

The second is an issue where existing HTML files that contained unclosed <li> tags would not be displayed correctly.

Both are now fixed, and you can download the update from the Edge page on Adobe Labs.

Since Preview 4 in January, we’ve made a lot of tweaks and improvements to Edge’s timeline.

Here’s the Preview 5 timeline. Click to cycle between Preview 5 and Preview 4.

Preview 5 (click image to cycle between Previews 4 & 5)

We refined and tighted up the visuals quite a bit. Some of these changes are cosmetic, and some have functional motivations. For example, the ruler is 10px shorter, which frees up room for (most of) another lane in the timeline proper. We’ve added some color: the Pin (more on that shortly) is blue and the Playhead is gold. The layout of the eyeball and lock buttons now matches the layout of the Elements Panel.

New and Changed Controls

With the Edge UI, we try to walk the line between simplicity and control, so there’s a lot of debate before we add new timeline controls. Preview 5 adds a few controls: Easing (with no selection, this button sets the default easing for new transitions; with transitions selected, it edits their easing); Toggle Pin; Expand/Collapse Lanes; Insert Label; and Snap On/Off.

Snap On/Off is tucked at the bottom left of the timeline, along with Only Show Animated Elements.

We sort of inverted the Generate Smooth Transitions mode and button: We replaced Generate Smooth Transitions with an Instant Transitions mode and button (the button with the hollow diamond; a hollow diamond represents an instant transition). This command’s hotkey is I.

The Pin

We renamed “the Mark” to “the Pin” this release, and improved it in a number of ways. This feature is the fastest way to create animations in Edge — you get two keyframes with a single edit, and spend less time moving the Playhead around and dropping keyframes. But the Pin is unique to Edge, and surfacing it has been tricky. These latest changes help, but you may need to play with the feature for a few minutes to get a feel for it. Mark Anders’s Introducing Adobe Edge Preview 5 video includes a good introduction to the Pin.

Visually, the Pin is more important now — it’s positioned above the Playhead, and when active, it’s blue. The Region between the Playhead and Pin is rendered in one of two colors: gold for a “forward” animation, blue for a “backward” animation, along with subtle arrows that indicate direction.

Pin interactions are improved too. In Preview 4, clicking and dragging the Mark would activate it and drag it away from the Playhead. We saw new users do this unknowingly, when they intended to move the Playhead. So now the Pin is attached to the Playhead until you explicitly activate it. There are a number of ways to toggle the Pin: double-click the Pin or Playhead; the Pin button on the timeline; menu — Timeline/Toggle Pin; hotkey — P.

We also added Flip Playhead and Pin (hotkey Shift-P), which exchanges the location of the Playhead and Pin.

Ghost Pin + Playhead, and the Return Command

After creating transitions — with or without the Pin — most of us press Play to see the animation. The newly added Return command (the arrow next to the playback buttons; hotkey — Return; menu — Timeline/Return) brings the Playhead back to its original position. If the Pin was active, the Return command also reactivates the Pin and Region. You can see this original position as a “ghosted” version of the Pin, Playhead, and Region.

Timecode

A big change in Preview 5 is the absence of the large, editable timecode display. We added timecode displays right next to the Playhead and Pin, which makes it easier to see their exact positions as you move them with the mouse. The Playhead time indicator shows the absolute position of the Playhead; the Pin’s shows the relative length of the Region between the Pin and Playhead.

For those of you who love and need editable timecode, remain calm — we’re planning to bring it back in a future release.

Missing Controls

In addition to timecode, another control is missing, at least for now: the Filter Text box. We expect to bring this back in the future as well.

Symbol Lanes

Symbol playback lanes now show subtle forward/backward arrows that indicate when the symbol’s timeline is playing.

When a symbol is selected, any Symbol Playback Commands (Play, Play Reverse From, etc.) now show the command’s target time or Label.

You can now double-click a Symbol Playback Command to modify it.

Zoom Hotkeys

In Preview 4 the zoom hotkeys had the Alt/Option modifier; we removed that in Preview 5. Zoom the timeline with = and -, and zoom to fit with \.

That’s It For Now

Again, it’s worth checking out Mark’s Preview 5 video and blog post for more on this release.

The timeline is central to Edge’s UI, and we spend a lot of time talking about it and trying ideas. Look for more evolution in the future. And of course, we welcome your feedback!

Hello!

Edge preview 5 is now available on Adobe Labs! We’re VERY excited about this release, which has a lot of big updates – many of which were requested by the community. Here’s a quick overview:

New Publishing and Optimization Features:

• Publish to web: Preview 5 has an option to specify if jQuery should be packaged with the composition, or downloaded from a CDN to produce lighter code and improve caching.
• Down-level browser support: Define a fallback state of a composition for non-HTML5 browsers like IE8 and below.
• Preloader improvements: Choose what gets shown during the preloader, before the framework, jQuery, or composition is loaded.

Emphasis on animation:

• Timeline: We made several significant improvements to the timeline that make composing animations much easier and faster, such as an easier to use Pin (formerly the Mark) and smarter playback behavior.
• On-stage tools: New clip and transform tools make it easier to manipulate objects and create animation effects.

Many other enhancements:

• Improved symbol functionality, stage editing options, the ability to swap images, more intuitive contextual menus, many bug fixes, and much more have been added to preview 5.

See the full list of updates here.

And here’s the latest video from Adobe Fellow Mark Anders, who covers the latest goodies in preview 5.

Please download preview 5, give it a spin, and let us know what you think!

Thanks,
Rich

Edge Preview 4 is now available for download on Adobe Labs! Preview 4 adds major new capabilities like Symbols and Web Fonts, but also has a number of refinements including tweaks to the JavaScript API. The following interactivity changes are in Preview 4.

Resolving Selectors

In Preview 3 we introduced an API that allows you to lookup a selector within a Symbol:

sym.lookupSelector("XYZ");


In almost every instance the reason you lookup a selector is to pass its result into jQuery like this:

$(sym.lookupSelector("XYZ"));

We’ve streamlined this call in Preview 4, so now you can get the same result by doing this:


sym.$("XYZ");


vMouse is being Depreciated

We decided to remove the vMouse options from the Edge UI in Preview 4. The idea behind vMouse is that you can write code that depends on mouseover / mouseout logic and still have it work on touch devices. We came to understand a few problems with the practice of using vMouse and decided the additional complexity was worth avoiding. In case you are wondering the problems come about when the Element changes on mouseover. Imagine a mouseover script that hides the Element. On the desktop you never get a chance to issue a click to the object, but on a touch device vMouse would synthesize vMouseover on the way to handling a click. These kinds of things can be tricky to find and resolve, so we decided to keep it simple and recommend using the raw browser events.

If you used vMouse in Preview 3, Edge will still recognize it and vMouse events will still work in Preview 4, you just won’t be able to add them via the UI. The related JS file is still bundled with Edge, so your content should keep working.

Working with Multiple Compositions

Preview 3 added the ability to place multiple compositions on a single web page and in Preview 4 we’ve made that a little easier. Preview 4 has a single-line JavaScript include for each of your compositions, so you don’t need to coordinate the shared libraries and such. You still need to specify stage elements for each composition using the Composition ID as the class name for the stage.

Showing / Hiding Elements

In conjunction with the Element Display feature that we added in Preview 4 there is a slight change to the behavior of Managed Elements around creation time. Managed Elements are the graphical components and text you create in Edge (vs. Static Elements that you define in your HTML markup directly). The change is that Edge now hides all Managed Elements at creation time and then sets their initial display state when all resources are downloaded and the composition is ready to play. This is done to avoid showing the content pop in as it arrives on the network.

Symbols & Playback Commands

In Preview 3 playback control was only available via triggers. Since Edge doesn’t execute triggers on its stage, the effect they have on the animation is only apparent when you are running in the browser. Playback commands allow you to scrub into Symbol timelines and can be a more effective means to control the timeline than one-line triggers.

Pardon the dust!

The Edge APIs will be evolving as we iterate and incorporate your feedback. We appreciate your patience as we tweak the runtime. As you try things, please bring your questions and engage the Edge team on our forums.

With the launch of Adobe Edge Preview 4 we are excited to bring you the new web fonts feature! The web fonts tool in Edge is extremely versatile by letting you use your font service of choice to display web fonts and custom font stacks in your composition. We’ll go over some how-to steps to get you started with some popular web font services.

Some history

It’s a myth that @font-face has only been in use since the introduction of CSS3. @font-face support has been around since IE4! Currently web fonts are supported by the following browsers:
IE4+
Safari 3.1+
Opera 10+
Chrome 4+
Firefox 3.5+

Modern browsers have gone their separate way as far as font support goes. For this reason it’s good for your @font-face declaration to contain several fallback font files.

Internet Explorer only supports EOT
Mozilla browsers support OTF and TTF
Safari and Opera support OTF, TTF and SVG
Chrome supports TTF and SVG.
Mobile browsers like Safari on the iPad and iPhone require SVG.

A typical CSS file with an @font-face declaration will have something similar to the following:

@font-face {
font-family: ‘FertigoProRegular’;
src: url(‘fertigopro-regular-webfont.eot’);
src: url(‘fertigopro-regular-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘fertigopro-regular-webfont.woff’) format(‘woff’),
url(‘fertigopro-regular-webfont.ttf’) format(‘truetype’),
url(‘fertigopro-regular-webfont.svg#FertigoProRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

.classname {
font-family: ‘FertigoProRegular’, Helvetica, Arial;
font-size:12px;
color:#3AAA35;
}

If you’re having problems with displaying web fonts, check first to make sure you have all available font types. For example if your web font only has an EOT and TTF file, your font won’t display on an iDevice.

How to Embed Web Fonts Using Local CSS

In this example, you will be using a local CSS file containing the @font-face declaration. In this instance you will need the CSS file and your web font files (preferrably in the same directory.)

Step 1:
If you do not already have a CSS file with an @font-face declaration or your web font files, go to fontsquirrel.com to generate a font kit using an existing font.

Step 2:
Move the font and the generated CSS file to the directory of your Edge composition. Your files should look similar to this.

Step 3:
Click on the “+” icon under “Fonts” in the Library.

Step 4:
Enter your embed code, font name and any fallback fonts and click “Add Font”.

Step 5:
Create a text box and apply your new font.

How to Embed Web Fonts Using Google Fonts

In this example, you will be using a hosted CSS file containing the @font-face declaration. In this instance we will be using Google Fonts.

Step 1:
Visit Google Fonts and select a font from their library. Chose “Add to Collection”.

Step 2:
Select the “Use” button at the bottom of the screen.

Step 3:
Scroll to the bottom of the page and grab the embed code. Here you will also find your font name.

Step 4:
Click on the “+” icon under “Fonts” in the Library.

Step 5:
Enter your embed code, font name and any fallback fonts and click “Add Font”.

Step 6:
Create a text box and apply your new font.

How to Embed Web Fonts Using Typekit

In this example, you will be using a hosted JS file containing the @font-face declaration in conjunction with an online font service. In this instance we will be using Typekit.

Step 1:
Visit Typekit and create an account.

Step 2:
Select a font to add to your kit and launch the Kit Editor.

Step 3:
Click on “Kit Settings” and enter the ip “127.0.0.1”. This will allow you to view the fonts locally, You can also add a site for publishing seperated by a comma.

Step 4:
Select “Embed Code” and copy the two lines of Javascript in the window.

Step 5:
Click on “Using fonts in CSS”.

Step 6:
Copy the font name.

Step 7:
Publish your fonts. If you don’t publish, you won’t see your font rendered.

Step 8:
Enter your embed code, font name and any fallback fonts and click “Add Font”.

Step 9:
Create a text box and apply your new font.

Legal Considerations

Added January 30, 2012
Most fonts come with an EULA 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.
 

These are just some of the options you have for using web fonts in Edge, and by following the steps you can apply the same method to use other font services. Happy typesetting!

Hi everyone,

It gives us great pleasure to introduce Edge Preview 4 today, available on Adobe Labs. As you know, it’s been a while since we launched Preview 3 at MAX last October, and we think Preview 4 is worth the wait. Major new features have been added, as well as usability improvements and fit and finish details that you’ve been asking for. Here’s a quick summary:

Symbols:

• Create nested animations with independent timelines and interactive capabilities.
• Programmatically control symbols via exposed APIs  and pre-built code snippets.
• Edit symbol definitions in the same manner as working with other objects.
• Specify whether or not a symbol should autoplay or not.
• Control playback functionality at the playhead location, such as play or stop commands.
• Scrub or play the timeline to scrub symbols, which will follow symbol commands and autoplay definitions.
• Easily access symbol definitions and instances in the new Library Panel.

Web Fonts:

• Add richer typography to your compositions by integrating a web font service. Edge supports the following types:
  • Downloadable font packages (ex: FontSquirrel)
  • Linkable font services (ex: Google Web Fonts)
  • Token font services (ex: Typekit, fonts.com)
  • Access newly added fonts from the list of available fonts.
  • Define a font fallback list for users who don’t have the font in your composition.

Element Display:
Control how long an element is displayed, so they only appear when needed. By default, elements are always on, even if they’re off the stage. They can be configured to be “off” (equivalent to display=”none”), removing them from the HTML rendering tree and reducing resources. Check out the complete list of updates here.

Also check out this new video with Adobe Fellow Mark Anders, who’ll show you how to use the new features in Preview 4.

Please download Edge Preview 4 from Adobe Labs, have fun with it, and let us know what you think!

Thanks,
Rich

Working with HTML, CSS and JavaScript and getting it successfully deployed on the web can be a daunting task. For those new to the technology, it can be extremely frustrating and in some cases it can be a show-stopper. We’ve had a lot of folks try Edge Preview 3 and some of them have run into issues getting their content running and deployed to the web. On the Edge team we do a lot of debugging as we resolve various defects in the product. The following are a few useful techniques you can use to figure out why an Edge composition is not running or deploying as expected.

Browser Compatibility

One thing to understand up front is that Edge content only works on modern browsers. In Preview 3 that means IE9+, Firefox 4+, the latest Safari and Chrome on the desktop – the latest iOS and Android Webkit browsers on mobile. We are working on better down-level browser support, but until that is added you would have to do extra work outside Edge to provide an alternate down-level experience.

Recovering Your Work from JavaScript Errors

There have been a handful folks reporting that their composition fails to open after a save. It is a scary thing to see the blank page come up after spending hours creating a composition. Folks will be running into fewer of these kinds of issues as the product matures, but in the meanwhile a little debugging goes a long way; it is generally pretty easy to recover your work.

First, a little context. Edge runs your composition in a Webkit-based stage. The data that makes up your composition is stored in a JavaScript structure that is interpreted within the stage and subsequently understood by Edge. If there is a syntax error in that JavaScript structure then Edge sees nothing and opens a blank page. In Preview 4 Edge will alert you of this condition and will not open the file. These types of errors not only prevent Edge from opening the composition, they prevent it from playing properly in the browser.

JavaScript syntax errors are pretty easy to fix. The first step is to figure out where it is broken. There are a number of ways to find JavaScript errors, the following should get you started with Dreamweaver or a WebKit browser (Chrome or Safari).

Dreamweaver

If you have Dreamweaver it will flag the error when you open the offending JavaScript file (xyz_edge.js is a good one to start with).

1. Open the HTML file in Dreamweaver.

2. Select the xyz_edge.js file in the related file list. If you don’t see xyz_edge.js in the related files list, select "Live View" which causes Dreamweaver to rescan the related files.

3. Observe the error on Line 18. The quote is double-escaped and makes it impossible for Edge to read the file.

4. Fix the error and the warning goes away. In the example above the string is “double-escaped” which means there is an extra ‘\’.

Browser-Based Tools

You can also view errors in your browser by opening the JavaScript console. The following screenshots were taken using Google Chrome, but the same or similar steps can be taken to see errors in Safari or Firefox w/Firebug.

1. Open your page in the browser.

2. Right-click and choose “Inspect Element”

2.5 Or…

Note: On Safari you have to enable Developer tools before you will see the option to Inspect Element

Note: On Firefox, you have to install Firebug http://getfirebug.com/

3. Refresh the page. This is not strictly necessary, but in some cases the Developer Tools don’t see all the JavaScript files that were loaded.

4. Make sure the Console tab is selected, you should see any errors displayed.

5. Click the file + line number (to the right of the error)

Hosting, Deployment and Related Problems

There are many options for hosting HTML content. Depending on how your host is set up, you have been given a way to upload content to the server. To get an Edge composition to work you have to deploy the HTML source as well as the JavaScript, CSS and related image files.

Not only do the files need to be deployed, they also need to end up where the composition expects them. You must copy the /images folder and the /edge_includes folders to your web server. Note: the site management in Dreamweaver and other site management tools may not "see" the images and scripts that an Edge composition requires, so be sure you select and transfer all of the required resources (upload/put the folders and their contents in addition to the HTML file).

The easiest way to determine whether you are having a problem with resource deployment is to use the inspector in Chrome or Safari or Firebug in Firefox to see what files are being requested and whether they are found or not.

The Network tab is most useful for this type of investigation. You should see requests for several edge_includes/XXX.js files, the request for your composition’s xyz_edge.js file followed by requests for any images used by your composition.

The above screenshot shows a 404 (not found) error. That means the file “Adobe_logo.svg” was not found.

In the xyz_edge.js file that file is referenced via a relative path.

In order for the Adobe_logo.svg file to be found, there must be a folder named “images” that is a peer of the xyz.html file and the images folder must contain Adobe_logo.svg.

Hosting SVG

In order for some web browsers to understand SVG images properly, they need to be served in a particular manner by your web server. If this is not setup properly then the SVG will not display.

Hey Everyone!

Before we take off for the winter break, we’d like to show you a glimpse of what’s new in Adobe Edge Preview 4. Edge team member Sarah Hunt will show you some of the new features like Symbols, clipping, support for web fonts, and more.

(if the video doesn’t appear above, click here.)

Edge Preview 4 will be available on Adobe Labs in January 2012. Stay tuned for more info!

Happy Holidays!
Rich