Cool Edge example

This post is more than 2 years old.

I'm still trying to find more time to play with Edge, but at my local user group meeting last month the co-manager, Ryan Letulle, demoed what I thought was a nice example of the tool in action. At our meeting he demonstrated using Edge to build a simple rotating banner for a web site. I've seen this done before with jQuery plugins, but he wanted to try out the tool himself. It was very direct, very simple, and very quick to set up, and best of all it wasn't difficult to tweak. You can see the site below. Be warned - the site itself is very rough and still very in progress, but watch the animation and then - like all good developers, take a look at the source.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by James Edmunds posted on 11/11/2011 at 11:13 PM

I was at that preso as well, and it was amazing how quickly and sensibly he was able to create this effect. The Edge interface uses timelines and behaviors in a spectacularly intuitive manner, and I encourage anyone who hasn't seen it yet to make the download and give it a spin.

Comment 2 by Simon Romanski posted on 11/11/2011 at 11:25 PM

Edge is a great, if anyone has done basic animation in flash then you should be able to use it without a tutorial. Speaking of flash.. what's your take on Adobe discontinuing the development of it on mobile?

Comment 3 by Phillip Senn posted on 11/11/2011 at 11:27 PM

It looks the same as the lightbox plugin for jQuery does - what am I missing?

Comment 4 by Raymond Camden posted on 11/11/2011 at 11:34 PM

@Phillip: Obviously Edge does something you can do by hand. That's not the point. The point is that Edge allows you to build it visually and opens up this type of feature to folks who may not know how to write out jQuery by hand. Shoot, even ColdFusion could be done in Assembly. ;)

@Simon: I think it makes sense for us to focus our time and energy where it best makes sense.

Comment 5 by Eric Reeves posted on 11/11/2011 at 11:48 PM

Nice! I did notice a rendering issue in FF8, though. The "Opelousas business & leisure network" text wraps the word "network" on to the next line, which doesn't quite fit in the rounded corner section.

Comment 6 by Kyle Dodge posted on 11/11/2011 at 11:58 PM

Doesn't seem to work in IE7 at all, and IE8 has issues with the background on the text. Are there any IE hacks for this kind of stuff?

Comment 7 by Simon Romanski posted on 11/11/2011 at 11:59 PM

For those who haven't read Ben Forta's take on Flash on mobile devices.

I think Ben nails it... Flash has filled a gap for browsers. As browsers become more capable the need for flash diminishes.

Comment 8 by Raymond Camden posted on 11/12/2011 at 12:00 AM

@Kyle: Remember, Edge is still in development. Bound to have a few bugs. ;)

Comment 9 by billy bob posted on 11/23/2011 at 1:21 AM

@phillip - lightbox is a specific package built around "ajax" components AND Edge is a tool to rpaidly build out those components.

@kyle - Edge is geared towards HTML5 and CSS3 so yes it will in deed break in IE7. You'd have to go back and tweak things to function and look correctly in IE7 (and maybe in IE8 as well). BUT then again if you did not use Edge and hand coded the same thing - you would still be doing extra work for IE7 and 8 as neither of them handle HTML5 or CSS3 very well or at all.