Rain is an agency that has been doing the some of the most advanced creative work with Adobe Edge since even before the first preview was made public.  They were added to our Customer Advisory Board just a month or so before Preview 1 was released, but when Dave Nibley showed us the first animation he did with Edge, which you can see here, we were blown away.  It was beautiful, had a naturalness to the motion, and just seemed so smooth and refined that for us it set a new bar as to what our baby could do.  A few days later, during a visit to our offices he built another one right in front of us that was even better!

Recently, Dave and others at Rain were working on a game for the iPhone, iPod Touch and iPad called “The Adventures of Timmy: Run Kitty Run” and decided to use Edge for the “cut” scenes that take place between the levels of play.  The results are phenomenal.  The game is only $.99 on the iTunes App Store, so I would definitely recommend picking it up.

However, no purchase is required to learn more about what they did and how they did it.  Rain has kindly put up a site, also built with Edge, that shows you the production process, how they used Edge and other Adobe tools, and the finished results.  I would definitely recommend checking it out here.  If you’re coming to MAX, please consider attending one of Dave Nibley’s sessions.  It’s guaranteed to be a great source of inspiration and knowledge from someone who really knows how to do incredible stuff with Edge!

It’s been a busy couple of weeks on the Edge Team as we get ready for our Adobe MAX conference that takes place Oct 3-5.  We have been hard at work on what I think is going to be a killer set of features for Edge and have also preparing for sessions, labs and other stuff that I can’t talk about.

I arrived in LA this afternoon and it should be a great show.  I will be doing two presentations of “Everything You Wanted to Know About Edge” and I think it should be really good.  Though I’ve been presenting Edge a lot lately, whether that HTML5 Camps in San Francisco, New York and London or at Flash on the Beach in Brighton, this will be different.  I’ll be going over all of the different areas of the tool, including things you haven’t seen before and explaining how they work and the details behind them.  I will also be demonstrating how to use them effectively for common use cases.  Given all of the new stuff I’ll be showing, if you’re interested in Edge, I would definitely recommend attending.

Josh Hatwich, who is one of the lead Architects on Edge and also one of the co-founders of the team is also doing a session that I think is going to be killer! Josh and I have been working closely on Edge since the original prototype last year – a prototype that Josh built, for the most part.  His session picks up where mine leaves off and he shows what you can do with what comes out of Edge.  He will cover how to handle downlevel browsers, how to host multiple Edge compositions on the page and how to bind to dynamic data and a ton of other great stuff.  DEFINITELY check out Josh’s session if you’re at MAX!

Devin Fernandez, who is the Edge Product Manager will be presenting a hands on Lab that should also be really great.  He’ll bring you through all of the latest features of Edge and lead you through building cool, interactive content.  He’ll be joined by a bunch of other Edge Team members so if you can make it, it should be a lot of fun.

This should be a great MAX overall and a really exciting one for Edge!  You might be wondering, when can you get your hands on all of this exciting stuff I’m alluding to?  Unfortunately, I’m not allowed to say.  What I can say though, and I really mean this, is – your guess is as good as mine!

If you’re at MAX, please say “Hello!”

I’m really happy to announce that the Edge team at Adobe has delivered Preview 2 of Adobe Edge. You can download it from Adobe Labs.

Preview 2 was for us a fit and finish release and comes basically 1 month after the release of Preview 1. Some of what we added  were things that we had wanted to have in the first preview but didn’t get in, but a lot was based on feedback we got from users of the first release.  There are also lots of bug fixes, including a fix for the infamous bug that forced some Windows users with certain graphics cards to have to run in 16bit color mode.

One thing that is not in Preview 2 is interactivity.  That’s a major feature and something we’re working on for a future preview, though people have been adding in JavaScript code outside of Edge and doing some really cool things with it.

There are 9 major features that we’ve added, in addition to bug fixes and upgrading to jQuery 1.6.2, and I think you’ll like them. Some have lots of sub-features, so there’s a lot there.  Here’s a rundown of what we added.

Elements

• Specify semantic tags on managed elements: Change the tag type of each shape, image and text you create in Edge to reflect how they appear in the HTML DOM.  This was a feature that was requested by some of the more passionate members of the HTML community.
• Copy and paste elements: You can now copy and paste elements in Edge, to easily duplicate shapes, images or text. While we are working on a Library panel for an upcoming release, duplicating an image (PNG, SVG, JPG, etc) will create a new element that refers to the same underlying asset, so this is a work around for the issue of importing multiple copies of the same image resulting in duplication of assets.
• Drag and drop z-index manipulation: In the elements panel, you can now control the z-order of shapes, text and images created in Edge.
• Element IDs based on file names: Elements created when importing image assets now retain their original file names, so you don’t need to rename their IDs.  This is a big time saver, IMO.

Stage

• Smart guides: Guides and dimension markers are displayed when an object on the stage is moved or resized. This helps you align with precision and resize objects in relation to others on the stage.  While there are also commands to align objects after the face, this makes it really easy to position and size elements on stage. You can disable snapping by holding down the Cmd/Ctrl key while moving the object, or toggle via the Modify menu.
• Centered stage: The stage is now centered by default, to easily move items off the stage and animate them in from any direction.  This was a feature requested by a lot of users.
• Redesigned coordinates system: Elements are now positioned and sized in consistent coordinates, making positioning of objects easier.
• Align and distribute elements: Select multiple elements, and align and distribute them via new options in the Modify menu.
• Direct on-stage manipulation of element origin: The transform origin can now be altered directly on the stage, in addition to the properties panel.

Timeline

• Enhanced copy and paste of transitions: You can now copy and paste a transition from a single element to multiple elements, or vice-versa.  While it was sometimes possible to paste a set of transitions onto multiple elements, it didn’t always work the way you wanted it to.  There are also a number of paste options for transitions under the new “Paste Special” menu, which are involved enough that I think should be the subject of another post, so watch for that!
• Dragging of playhead away from the mark: You can now leave the Mark at the current playhead location, and move the playhead to a new position in one gesture. Just hold down the Alt/Option key while dragging the playhead.  This was a feature that I really wanted – and asked for – and personally put on the feature list – and badgered someone into to doing – and now you can enjoy it too!  It completes the basic set of features for interacting with the Mark.
• Smooth scrubbing of timeline: Scrubbing the playhead without snapping can now be done by holding down the Command/Ctrl key while dragging the playhead. This brings consistency with moving elements on the stage without snapping.
• Playhead time editing: You can now type into the timeline’s counter to move the playhead to a specific location, or by dragging the numeric value up or down with your mouse.  This was requested by a number of users.

Under the hood

• Windows 7 update: An error on the Windows version that caused Edge to crash on startup has been resolved, no longer requiring users to change the display bit depth from 32-bit to 16-bit. This turned out to be a simple fix, though hard to track down.  Basically, on Windows we use the Chromium Embedding Framework for our stage and welcome screen panels and it turned out that we had set a flag to enable hardware acceleration for our embedded WebKit views.  Turning this flag off not only fixed the crash, but it also… are you ready?… made the Windows version faster! You might have thought that hardware acceleration would always speed things up, but not in this case.  We are working on changing how we embed WebKit for a future release to improve things even more.
• jQuery update: Edge’s animation framework now works with the latest version of jQuery, 1.6.2.

I just arrived in London today for 2 talks I’m giving on Edge in the UK.  The first is tomorrow afternoon at the HTML5 Camp in London which is sold out, and next week I’ll be back at Flash on the Beach in Brighton where I’ll be part of the keynote as well as doing a full session on Edge.

In each of these, I’ll be showing off some of the latest features, so it should be fun.  Hope to see you there!

It’s been almost a week since we released Edge Preview 1 and the response has been incredible. Edge went live for us on the West Coast at 9:01 PM on Sunday, July 31. By the time Monday was over – just 27 hours later, over 70,000 copies of Edge were downloaded!

Of course, it’s not really the numbers that matter. What has impressed me most is the great feedback we’ve been getting over on the Edge forum at Adobe Labs and the things people have been creating with it.

Overall, the feedback has been amazingly positive. One of the thing I’ve found amazing is that a number of people have said that Edge reminds them of After Effects and also that it is easy to use. To me, “After Effects” means “powerful” and “easy to use” means… “easy to use”! And that’s really what we were trying to create with Edge – something that provided great precision and control while animating, but that was easy to get started with and that streamlined the creative process.

Here are some quotes from the forum:

“Just tried Adobe Edge – it’s amazing piece of software. Really reminds me Adobe After Effects” – sergei.k

“Pleasantly easy to use – I made an animated letter and rectangle in less than five minutes, no tutorial needed. UI is clear and uncluttered. Properties and timeline are intuitive.” – maybeLater

“the created code is clean and easy to understand” – design923

“One of the things I like the most about this product is the timeline. Whoever did this, you are amazing.” – yhayward

“I’ve been waiting for this product for a long time and was wondering when Adobe was finally going to blend AE into FL and vice versa. It only makes sense and is a very smart move by Adobe” – The ThirdWave

Here are some cool things that people have done with Edge after using it for just a few days.

http://g-plus-follow-me-animated-button.tumblr.com/

http://www.autodirects.co.uk/windmills/

http://www.globalremix.com/edgebanner.html

http://ilovebakedbeans.com/edge/salamander.html

http://shutao.info/html5/edgeMotion.html

In addition to trying it out, Edge has already been put into production! Here’s a site done by a Photographer in Berlin who used Edge to create the animated photos on the home page.

http://www.hochzeitsbilder-deluxe.de/

I’m sure in the days and weeks to come, we’ll see lots of other great examples of what people do with Edge, and the team has already taking the first round of feedback from the community and is hard at work on the next preview of Edge!

Stay tuned!

Over on Edge Forums on Adobe Labs, there have been a handful of people who have reported issues running Edge Preview 1 on Windows 7.  Most of the time the app crashes on startup, though there have been a few instances where Windows says that “Something is wrong” and it has to shut Edge down.

From the crash reports it looks like the problem is with certain display device drivers.  While we are working on a fix, an enterprising user, “Bolonha” found that by switching the system to 16bit graphics mode from the normal 32, Edge worked.  Others have tried it and reported success as well.

So if you are experiencing problems, try switching the display settings to use 16 bit graphics.  While not ideal, it will allow you to try Edge out now, while we work on actually fixing the problem for good.

Here’s how to do it (thanks for Karl Park from Adobe for the instructions!)

1. Right click on windows desktop
2. Go to Screen resolution
3. Clickn on ‘Advanced Settings’ link
4. Click on Monitor tab
5. Change 32bit to 16bit.

Preview 1 of Adobe Edge is now available for download at Adobe Labs.  Edge – it’s actual name, not a code-name - is a new Motion and Interaction tool that I’m working on at Adobe that targets HTML5, CSS3 and JavaScript.

Edge is being released as a preview which means that it’s not feature complete.  It’s a very early release.  The goal of doing this is to allow you in the community to try it out and let us know what you think, so that you can play an active role in its development.

To get you started, I recorded a video that goes over how to draw and animate in Edge.  Check it out on Adobe TV.

Finally, we’ve posted some resources that you can find here, including sample files.  This page also includes a few of the things created by members of our Customer Advisory Board, which is a group that got very early access to Edge builds, gave us feedback and used the product to create some cool stuff. Here is a list of the first 4 examples we posted.

The first one was done by Dave Nibley at Rain and when he showed it to us and told us that it was his first animation with Edge, we were blown away! Check it out here.  I love the use of shadows.  Be sure to check it out on your iPhone. It looks great!

Dave did a second one that we all liked even better that reminds me of Pixar.  Check it out here.  At the HTML5 Camp that we did in San Francisco last Friday, Dave was there and came up during my Edge session to show some of the techniques he used to build it.

Here’s a fun one by Sarah Hunt.  Sarah has done lots of great stuff with Edge and has given us lots of very valuable feedback.

One of the questions that CAB members had was can you do things like loop or otherwise access the JavaScript API of our animation framework.  The answer is yes, though we have not yet documented it.  This will happen in future previews. However, we did give them a few sample calls and Sara did another one that uses the JavaScript API to loop.

Check out Sarah’s roller coaster here.  One of the things that is interesting that you should check out when you load this file in Edge is how Sarah made the roller coaster cars look like they were going around the turns.  Very clever and it looks great!

You can download these and other project files in source form from the Adobe Edge resource page on Labs.

So please, download Edge and the sample, check out the getting started videos and have fun.  If do something cool, let me know!  I’m definitely looking forward to seeing what you create with Edge!