Content in Flash and Textpattern: Bridging the Gap with XML [AS2] · Jan 3, 03:15 PM

You could probably dream up numerous ways to use an RSS feed in your Flash Movie. However, there might come a time when you want more control over the generated content. This is where the ability to generate custom XML will come in handy.

Download the source-code files for this article

See the demo here

Overview

We will be adding to the sample code from the previous article. Because RSS is in fact XML, the code used to read XML will be similar to the RSS code. However, before making any changes to our flash movie, we must setup TextPattern to generate XML. This sort of functionality is relatively specific. Because TextPattern was designed to be light-weight out-the-box, it does not include this feature. We need to install some plugins to output valid XML the way Flash wants. Luckily, plugins are super-easy to install in TextPattern. After we do that, we will create a page xml, and a form xml-item. What we end up with is a URL that our Flash movie will pull XML content from.

Install TextPattern Plugin mg_header

Download mg_header here and install in TextPattern (Admin / Plugins). Be sure to set the plugin to active because all plugins are inactive by default when you install them.

The mg_setheader plugin will allow us to change the header of a page so that we can output valid XML (application/xml).

Install TextPattern Plugin afw_getarticle

Download afw_getarticle here and install in TextPattern (Admin / Plugins). Be sure to set the plugin to active because all plugins are inactive by default when you install them.

The afw_getarticle plugin will allow us to access the article at 

www.allflashwebsite.com/demo2/my_section/my_url_title

using this URL instead:

www.allflashwebsite.com/demo2/xml?section=my_section&url_title=my_url_title

Where xml is a section we will create that will use a custom page and form that outputs the article in valid XML.

Create Page xml

  1. <txp:mg_setheader value="application/xml" /><?xml version="1.0" encoding="utf-8"?>
  2. <items>
  3. <txp:afw_getarticle form="xml-item" /></items>
  4. Download this code: /files/code3.1.txt

The first line sets the header to application/xml and outputs an xml tag. The second line uses our custom tag to output an article based on the GET parameters of the URL. We also specify that afw_getarticle use the xml-item form to format the content.

Create Form xml-item

  1. <item>
  2. <title><txp:title /></title>
  3. <image><txp:article_image /></image>
  4. <description>
  5. <![CDATA[
  6. <txp:body />
  7. ]]>
  8. </description>
  9. </item>
  10. Download this code: /files/code3.2.txt

Test the result

I tested my result by pointing my browser to

http://www.allflashwebsite.com/demo3/xml?section=about&url_title=about-me

Some browsers will display just the XML, with some code formatting.

Using XML in flash with SWFAddress and setPath()

Our SWFAddress-enabled flash movie already has an event handler called setPath which accepts one array variable, path. To construct the url above, use the path variable.

Reading XML in Flash the Easy Way

Like RSS, someone has written a convenient XML library for Flash. Sure, Flash has some built-in capability to read XML, but using this library will save you a lot of time.

Download GreenSock XMLParser – Painless XML Translation

To use the library, copy the gs folder to the folder containing your .fla files.

Creating the article.swf Movie

For this demo, we create an additional movie, article.swf. This movie will read (via GreenSock XMLParser) and display the xml feed generated by textpattern. Here is a look at the timeline and stage for article.swf:

Stage left, is an instance of AFWLoader (loader_mc) for displaying the article’s image; On the right are two AFWTextSlider instances (ts_title_mc and ts_desc_mc) which will be used for the article title, and content (description). What follows in the code for frame 2:

  1. import gs.dataTransfer.XMLParser;
  2. stop();
  3.  
  4. var url = "http://www.allflashwebsite.com/demo3/xml?limit=1&section=";
  5.  
  6. // setup the title and desc movies
  7. ts_title_mc.setBackgroundAlpha(0);
  8. ts_title_mc.setSelectable(false);
  9. ts_title_mc.setControlsEnabled(false);
  10. ts_title_mc.loadStyle("afw.css");
  11. ts_desc_mc.setBackgroundAlpha(0);
  12. ts_desc_mc.loadStyle("afw.css");
  13.  
  14. // frame1 should have initialized pathInit
  15. if (pathInit != undefined) setPath(pathInit);
  16.  
  17. function loadArticle(section, url_title) {
  18. var parsed_obj = {};
  19. XMLParser.load(url+section+"&url_title="+url_title, onArticleLoaded, parsed_obj);
  20. }
  21.  
  22. //This function gets called as soon as the XML loads and gets parsed.
  23. function onArticleLoaded(success_boolean, results_obj, xml) {
  24. if (success_boolean) {
  25. var item = results_obj.item[0];
  26. var title = "<h2>"+item.title[0].value+"</h2>";
  27. var desc = item.description[0].value;
  28. var img_url = item.image[0].img[0].src;
  29. loader_mc.image.removeMovieClip();
  30. loader_mc.loadMovie(img_url, "image");
  31. ts_title_mc.fadeText(title);
  32. ts_desc_mc.fadeText(desc);
  33. results_obj = {};
  34. } else {
  35. trace("article.swf unable to load XML!!");
  36. }
  37. }
  38.  
  39. function setPath(path) {
  40. loadArticle(path[0], path[1]);
  41. }
  42. Download this code: /files/code3.3.txt

Some initialization is performed in the previous frame, frame 1:

  1. var pathInit = undefined;
  2. font1._visible = false;
  3.  
  4. function setPath(path) {
  5. pathInit = path;
  6. }
  7. Download this code: /files/code3.4.txt

Linking to article.swf from AFWRssViewer.swf

In the previous article, the button click handler in the RSS viewer movie (feedButton.onRelease()) was purposely left empty. This is where we will link to article.swf:

  1. feedButton.onRelease = function () {
  2. if (arr_XMLHash[index] == undefined) return;
  3.  
  4. // we assume that the feed's link will have the format:
  5. // http://..../section/url_title/
  6. // extract the last two parts of the current link (section and url_title)
  7. var path = arr_XMLHash[index].link.split("/").splice(-2);
  8.  
  9. SWFAddress.setValue(path.join("/"));
  10. }
  11. Download this code: /files/code3.5.txt

Things Left Undone

Notice that the about and contact sections have been left unchanged. As an exercise, you can copy article.fla as contact.fla and about.fla. Only a few minor changes should be necessary in each movie. While you’re at it, also create a copy of article.fla named index.fla to load in the homepage content. Then you can change the setPath() function in home.fla to something much more elegant:

  1. function setPath(path_arr) {
  2. section = path_arr[0] eq "" ? "index" : path_arr[0];
  3. loader_mc.loadMovie(section+".swf", section, path_arr);
  4. }
  5. Download this code: /files/code3.6.txt

If you’re thinking, “wow, that makes a lot of sense”, then you’re on the right track. The main thing here is to keep the overall structure as simple as possible so that maintenance of your site is easier and faster.

Conclusion

The article.swf movie is pretty dull, but should offer a good starting point for something more interesting. It also illustrates how only a little code is necessary to make your flash content easier to maintain, search engine optimized, deep-linkable, cross-browser compatible, and so-on.

— Pickle

---

Comment

  1. hi are you going to finish this article?
    I’m interested in how to make textpattern show xml for flash and html for everyone else.
    thx, great couple of articles

    — kevin · Jan 7, 06:03 AM · #

  2. The article is finished… please re-download any code you’ve already downloaded from this page.

    Any questions? Please don’t hesitate to ask.

    — Pickle · Jan 9, 06:15 PM · #

  3. after following the steps and instructions and installing everything I cannot get any of the articles to load through the rss viewer. Also when i go to “www.mysite.com/rss” for example I get an error saying it does not exist. In other words I don’t get the page I do when I go to “www.allflashwebsite.com/demo2/rss. I’m assuming this is the problem and I’m missing something big here. Please,any help or instruction would be greatly appreciated.

    — Tyler · Jun 3, 07:35 AM · #

  4. you said “www.mysite.com/rss” doesn’t work: this is a Textpattern problem:

    * do you have articles, set to Live, in the article section?

    * check your Feed settings in Admin->Preferences->Advanced

    * in Presentation->Sections make sure the article section has syndicate enabled

    — Pickle · Jun 3, 11:27 AM · #

Textile Help