Playing with Adobe Edge and getting the Output into a Joomla site

Last night I had my first play with the new Adobe Edge prieview (available free to download and works for just over 100 days). It creates flash style objects using only html, css and javascript.

Having never really used flash before I was unfamilliar with the layout of the program (it's a kind of cut down flash ui) but with the help of youtube I managed to knock something out in about an hour, including the time taken to prepare some images to use.

Firstly, I'll point out the youtube video which basically explained the whole process in a couple of minutes, including the time it takes for the maker of the video to mess up and retrace his steps!

Love or hate his style, he gives a good example of what is possible and some important things that aren't yet implemented (such as dragging your images onto the stage, I nearly gave up straight away when I couldn't get a picture on there).

He's just started an Adobe Edge  dedicated blog at nolongerthere.com which looks like it's going to have some pretty interesting stuff on there (he also worked for Apple for a number of years)

Adobe edge screenshot

There's a lot of talk in the design industry about wether the output from edge is good or bad in terms of new web standards, using lots of divs rather than the canvas for example. With that 'out of mind' the point I like to think about is that the output is usable in lots of places where flash isn't such as mobile phones. As this is also the preview version and the canvas element is not completley integrated into all browsers, I'm pretty sure that Adobe will keep on top of new techniques and adapt the program rather than go against the grain and create their own web standards.

Whilst begining to program I always saw flash as a little bit scary and focused more on designers than developers. I have no artistic bones in my body, so the thought of putting together a mini movie whilst having to learn new complicated techniques put me off. I settled for pre-made actionscript templates where I could adjust the size and just add my images through an xml file.

After playing around with edge, I'm almost tempted to go back and give it a try with the help of a good thick book and some interesting online tutorials.

I won't go into any in's and out's of how the program is used as the above video explains better than I can and, as the program is currently free, the best way is to just download it and have a play around.

Getting your Adobe Edge output into a joomla site

I thought making the project was going to be the hard part. It turned out getting the output onto a joomla site was the biggest headache!.

To get the animations moving on-screen, Edge uses jQuery with it's own plugin aswell as the easing plugin. As joomla uses mootools, jQuery has to be called in no conflict mode. This in it's self really isn't a problem, but I was still getting a blank output.

I tried adding absolute urls to the images in the css file but to no avail and as it was nearly 3 in the morning I opted for an iframe just to get it on there.

I found one blog post that talked about the output being incompatible with no conflict mode but this talked about an even earlier release and after experimenting for 20 mins I found it not to be true. The latest version is fully compatible with no conflict mode. To switch to no-conflict, open your project folder and open up the javascript file (YOURPROJECT_edge.js).  Scroll right down to the bottom to the event handler section, add the noconflict line  and replace the $'s with jQuery:

 /**
* Adobe Edge DOM Ready Event Handler
*/
//invoke the no conflict mode
jQuery.noConflict();

jQuery(window).ready(function() {
jQuery.Edge.initialize(symbols);
});
/**
* Adobe Edge Timeline Launch
*/
jQuery.Edge.ready(function() {
jQuery.Edge.play();
});

After doing this the html file still plays fine but for the life of me I couldn't get it going on the site. It must just be a url issue somewhere but it was too late to search any longer for an answer.

For anyone who wants to try, I would suggest using the custom plus module from the downloads section. The included files need to added to the head section of the page. With that module you can add the html to the module and the includes to the head at the same time.

Anyway, to cut a long story short(ish), I used a wrapper module which shows the output in an iframe, which kind of defeats the point of the whole html/css on your page thing, but at the same time, it stops you having to load a copy of mootools and jQuery in the main page and eliminates any other conflicts that may arise with other 3rd party modules and plugins. One day I may get around to making a component/module to upload your projects and display them through a module, but that day may be far away.

So...Below is my mini banner created with edge, and over at the Adobe site you can see what it is really capable of! (you can download the sample files and play with them in Edge as well as just click on the view button!)

See it on an actual site over here www.alpine-transfer-company.com