Asual

Monday,
12 May 2008

Flex on Wordpress

This is the name of probably the most interesting SWFAddress sample I showcased at 360Flex Europe. A week ago I found some time to deploy it on asual.com and now everybody can experience this linkable and indexable Wordpress powered Flex based website.

The whole idea for this thing came up when I was working on a Flash CS3 based client project that needed a CMS and potentially community features. I already had good experience with Wordpress and I have always believed that it offers the best administrative interface out there. Utilizing such a system for content management is good because it automatically offers you a clean indexable HTML that can be used as a data source for a richer Flash/Flex/Whatever interface. In this sample the Flex movie directly consumes the HTML pages generated by Wordpress and parses the parts it needs without using additional XML dialects. It doesn't use posts and comments but only pages and probably can be extended in the future if there is enough interest.

Although it looked easy at first and I had to overcome some difficulties with Flex. The E4X expressions I used with AS3 in Flash didn't worked exactly the same in Flex 3 so I dived into experiments and tweaks that finally allowed me to achieve everything I wanted. I found it strange that some normal things from the CSS land are not that easy with Flex. Thankfully there are ready to be used solutions for repeated backgrounds and hover link styles. The integration of the SWFAddress PHP code in Wordpress was relatively easy and the result works exactly the same as our SEO sample. The SWFAddress ActionScript implementation became nothing more than a single proxy that requests the corresponding HTML.

« Previous Post | Next Post »

Comments:

Left by Peter Witham at Mon, 19 Apr 4:15 PM
Nice job, I am assuming your plan is to extend the wordpress interface in some way rather than flashy effects? The wordpress interface already works so well that re-creating the same in Flash/Flex seems an exercise rather than a need? Not shooting it down, just asking the question. Being a Flash/Flex developer myself I'm all in favor of showing what it can do.

Regards,
Peter Witham
Left by freddy at Mon, 19 Apr 4:15 PM
really great job... waiting for source :-)... drupal it's another option http://groups.drupal.org/services
Left by Tony Fendall at Mon, 19 Apr 4:15 PM
This is a cool achievement, but what you end up with is an application which is bending over backwards to behave like a document.

There are no doubt many reasons for what you have built, but I believe that things are best when we let documents be documents and applications be applications
Left by Øystein Wika at Mon, 19 Apr 4:15 PM
Supercool Rostislav :)

Should be possible to make some YouTube/Flickr/GoogleMaps plugins to this too, using the AS3 APIs.

And (cough, cough) http://oysteinwika.com/swfmouseweel for mac :)
Left by Yusuf Akyol at Mon, 19 Apr 4:15 PM
Hi,
Your works are very very usefull. Thanks too much.
I developed a sample page with iframe. At that sample I change iframe's src when I press some links.I need to press twice browser's back button for backward displaying. Why? Is it possible to prevent this? How?
Thanks.
Best regards.
Left by Gilbert at Mon, 19 Apr 4:15 PM
This is great.
Since the CSS in Flex is somehow different that in Wordpress (according with your post), how difficult is to skin the Flex front end for Wordpress?

Do you plan to share the code at some point?
Left by Fatih at Mon, 19 Apr 4:15 PM
Hi,
i use SWFAddress 2.2 in my project but i have a problems. When i use the setValue property in my code SWFAddressEvent.Change is triggered but when i change the address from browser's address bar or when i use the back or forward button of browser, it is not triggered. What can be the problem? is there anyone having an opinion?
Left by Phillip Chertok at Mon, 19 Apr 4:15 PM
Brilliant Stuff! Was looking for something like this and am extremely glad someone put the work into it. Thanks a lot!
Left by Ryan Christensen at Mon, 19 Apr 4:15 PM
Check out wrapper as well: http://drawlogic.com/2008/01/11/as3-flash-to-html-conversion-library-htmlwrapper/

They have a full sample running here with the flash front end.

http://motionandcolor.com/ and http://motionandcolor.com/wrapper/
Left by Fabianv at Mon, 19 Apr 4:15 PM
AWESOME! I cant wait for the source code and howto.. merci mnogo ^_^
Left by gimmig at Mon, 19 Apr 4:15 PM
Great work...
I would also like to read the howto... if you would write how you did the connection between the xml and flex.
#i allready tried the wrapper theme but it reloads the swf. But nicely solved the css.
Left by Michael Gregor at Mon, 19 Apr 4:15 PM
Flex on Wordpresss.

http://www.theapt.com/broadcast/
Left by Stikkos at Mon, 19 Apr 4:15 PM
Nice work!!
I've done something similar on my website (http://www.zerotreize.com) using a Java / JEE back-end and an AS3 front-end. Check it out...
Left by jassa at Mon, 19 Apr 4:15 PM
This is really awesome work - i've been thinking of doing something similar in Flash. Do you have a link to the actual client project?
Left by Rostislav at Mon, 19 Apr 4:15 PM
Thanks for all the comments!

This is the initial version which mainly focuses on deep linking and search engine indexing. I tried to recreate the HTML layout in Flex mostly for the exercise and because I think that both versions should look similar to some extend. The skinning wasn't hard except for the parts I described in the post. The client project I mentioned actually used Papervision3D and I'm all for more Flash effects.

I would like to release it but I have to separate my stuff from the Wordpress files first and probably write a good howto document.
Left by felix at Mon, 19 Apr 4:15 PM
fantastic! People have been trying to integrate flash with a blog CMS for a while now. Great to see a working implementation using WordPress including search.

IMO you should jazz up the front-end a little to show some Flash only effects - how about some papervision or similar?
Left by Haemp at Sun, 13 Feb 1:39 AM
Did you experience any performance hit due to extensive E4X processing? Was rendering the content comparable to a plain HTML site?

Projects

Syndication

Blog Search

Blog Categories

Blog posts

Recommended sites