So Flash can finally be indexed. Now what?
MODx: The Perfect CMS Backend for Flash Sites
MODx: The Perfect CMS Backend for Flash Sites
Flash can finally be indexed which is a huge boon for Flash-driven sites. What's not so cool is having to manually edit a bunch of XML files. MODx offers a great solution: just let it output the XML for you, and get back to making great interactive designs.
by Mike Coetzee and Brett Florio
The Problem:
Building a Flash site that was easy for the client to modify.
The Idea:
Build the Flash to pull all content from XML. This, in and of itself, is fairly common. Where MODx comes in is in its ability to quickly and easily generate XML to power the site.
The Story:
As the days went by, and as we progressed through the design stages of SUPERbranded.com, I had to keep reemphasizing to Brett that we were serious about doing the entire site in Flash.
He would reply, "Seriously, we can no longer be friends if you're going to go building an entire site in Flash."
When the designs were done, it was time to face the consequences of our actions. That being said, what would ordinarily be a recipe for a month long migraine, turned out to be a rather smooth build, and with surprisingly minimal difficulty or post-launch hiccups.
We were able to pull off with relative ease, an all Flash site with dynamic components virtually around every corner. Also, integration with the multiple Flickr and Twitter accounts rolled out painlessly. Best of all, our client’s team was able to understand the CMS without the usual eye-glazing effect—which is big on my list of "plusses" for MODx.
The Solution:
Luckily for us, it's a fairly trivial task for MODx to generate XML using Ditto. The main Flash site was configured to import _all_ its content from XML, so it was really just a matter of making sure Ditto output the XML as required by the Flash. The first thing to do was to create a quick template for the XML:
<?xml version="1.0" encoding="UTF-8" ?>
[*content*]
That's it. Very simple, and it could be done on the document level, but it's obviously better to reduce duplication in your code, and using a template for the XML makes it easy to change things sitewide should you need to later.
Once we had the XML template set up we could begin some Ditto:
<rss>
<channel>
[!Ditto? &parents=`[*id*]` &tpl=`xml_rider_images` &sortBy=`createdon` &sortDir=`ASC` !]
</channel>
</rss>
Which uses this for the xml_rider_images chunk:
<item id="[+ditto_iteration:math=`?+1`+]">
<title>[[GetField? &parentLevel=`0` &field=`pagetitle` &parent=`1` &topid=`103` ]]</title>
<shortDes>[+pagetitle+]</shortDes>
<image>[+image_1+]</image>
<image2>[+image_2+]</image2>
<image3>[+image_3+]</image3>
<description>
<![CDATA[ [+content+] ]]>
</description>
</item>
You can see some [+ditto_iteration+] and a [[GetField]] call, which help create XML exactly as the Flash sections required.
The MODx template for content elements was configured to have a number (up to 10) image TVs:
If the client ever wants to enter additional boards or change images, they can do it quite easily from the MODx backend. (Similarly, if the client just wants us to do it, we have a _very_ easy way to make it happen without needing to do things manually, which might not be difficult but is more prone to errors.)
We repeated this approach site-wide. Here's a quick example of how the riders' videos are set up in MODx, and how they display in the Flash:
Sometimes you may not even need to use Ditto to generate your XML, which we did with the top nav:
<MENU>
<FOLDER NAME="CLAY MARZO">
<FILE NAME="BOARD" LINK="riders/clay/boards/boards.swf" />
<FILE NAME="PHOTOS" LINK="riders/clay/media/media.swf" />
<FILE NAME="VIDEO" LINK="riders/clay/video/video.swf" />
<FILE NAME="BIO" LINK="riders/clay/bio/bio.swf" />
</FOLDER>
<FOLDER NAME="DION AGIUS">
<FILE NAME="BOARD" LINK="riders/dion/boards/boards.swf" />
<FILE NAME="PHOTOS" LINK="riders/dion/media/media.swf" />
<FILE NAME="VIDEO" LINK="riders/dion/video/video.swf" />
<FILE NAME="BIO" LINK="riders/dion/bio/bio.swf" />
</FOLDER>
<FOLDER NAME="KOLOHE ANDINO">
<FILE NAME="BOARD" LINK="riders/kolohe/boards/boards.swf" />
<FILE NAME="PHOTOS" LINK="riders/kolohe/media/media.swf" />
<FILE NAME="VIDEO" LINK="riders/kolohe/video/video.swf" />
<FILE NAME="BIO" LINK="riders/kolohe/bio/bio.swf" />
</FOLDER>
<FOLDER NAME="TOSH TOWNEND">
<FILE NAME="BOARD" LINK="riders/tosh/boards/boards.swf" />
<FILE NAME="PHOTOS" LINK="riders/tosh/media/media.swf" />
<FILE NAME="VIDEO" LINK="riders/tosh/video/video.swf" />
<FILE NAME="BIO" LINK="riders/tosh/bio/bio.swf" />
</FOLDER>
<FOLDER NAME="RY CRAIKE">
<FILE NAME="BOARD" LINK="riders/ry/boards/boards.swf" />
<FILE NAME="PHOTOS" LINK="riders/ry/media/media.swf" />
<FILE NAME="VIDEO" LINK="riders/ry/video/video.swf" />
<FILE NAME="BIO" LINK="riders/ry/bio/bio.swf" />
</FOLDER>
</MENU>
While we could have easily done this with Ditto, sometimes you just need to get a site launched and out the door, and since the top nav won't be changing frequently it was a compromise we were willing to make.
The icing on the cake was installing Customize Manager Fields(though you could use ManagerManager to hide the MODx manager fields that the client just doesn't need to see (like longtitle, link attributes, and etc.). This is always a good step to help "idiot-proof" sites. The less your clients have access to, the less likely they'll screw things up. And if you hide the stuff you're not using in your templates it will just help to avoid confusion.
In addition to the Flash site, there's also a blog that is not done in Flash:
This is a more standard usage of MODx, though many tweaks were made to allow the surfers to quickly and easily post their own blog entries with videos (from Vimeo) and photos (both as MODx TVs and from Flickr). The nice thing is that we now have a complete Flash site and a complete blog site being managed from the same interface. Should the client ever want to add some ecommerce, we could easily add a store using FoxyCart and nearly all site management would still be handled through the MODx manager interface.
Other External Resources & Articles
- AMF PHP an open source Flash framework that implements the entire AMF protocol to be an alternative to Flex Data Services (AMF3) and Flash Remoting (AMF0)
- MODx, a CMS for Flash? blog article on a similar topic to the above
- SWFObject Snippet to include simple Flash movies in a page
- JWPlayer Snippet a Flash media player
Wikipedia defines