Content in Flash and Textpattern: Bridging the Gap with XML [AS2] · Jan 3, 05: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 Textpattern Section xml (added 9/9/08)

Create a Textpattern section named xml. Chose xml as the page and default as the style. Select No for all other options.

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, 08: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, 08: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, 09: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, 01:27 PM · #

  5. This is an awesome article. I have the XML display working correctly through TXP, and I’ve tried to follow the directions.

    I’ve downloaded the FLA’s and edited them to contain my URL in the AS layer, but I’m not sure where you’re actually putting the SWF files in TXP. Will you clarify, please? Thanks!

    — Raina Gustafson · Sep 5, 08:48 AM · #

  6. I think I figured it out. I placed the Flash-generated html from main.fla into the default page of TXP. It seems to work now.

    — Raina Gustafson · Sep 5, 09:17 AM · #

  7. I can’t figure out how the title tag and meta descriptions are being generated. I typically do this with custom fields and conditional statements inside of TXP. Any thoughts?

    — Raina Gustafson · Sep 5, 02:31 PM · #

  8. Raina, do you plan on using SWFAddress? If so, you can have a title in your TXP page, but the window title will change via SWFAddress and ActionScript. As for meta tags, just do what you were doing before within Texpattern. I would highly suggest that you take a look at one of the AFW Templates on this site (preferably the CASA version); they provide more of a complete solution.

    — Pickle · Sep 5, 03:32 PM · #

  9. Thanks! Yes, I discovered the additional Flash+TXP articles now. Tried to do them in reverse order the first time. Doh! Thanks for your help.

    — Raina Gustafson · Sep 5, 03:39 PM · #

  10. Just an additional tip – turning “Prevent widowed words in article titles” off in TXP’s advanced preferences was effective in getting my titles to display correctly. With it on, the spaces between words was getting deleted. Perhaps this could be adjusted in CSS, too – but I’m finding that Flash doesn’t handle CSS well – especially not shorthand properties.

    — Raina Gustafson · Sep 6, 10:35 AM · #

  11. Hi,

    I cant get this to work. >>error 404.
    Copied exactly the code. dubblechecked that. It fails on the first test, after having created the form. I navigated to www.‘mysite’.com/txptestsite/xml?section=about&url_title=about
    (without the ‘-me’,since i named my page different: titel=about, section=about, url_title=about)

    Since the link to ‘Download afw_getarticle here’ is broken, i found version 0.1.2 and installed that. I use version 0.1 for the mg_header. Both plug-ins are set to active.

    could this version 0.1.2 be causing any errors ?

    thanks in advance
    fred

    — fred · Sep 8, 04:08 PM · #

  12. Error 404 tells me that xml is not a section. Looks like I forgot to mention that you have to create this section. So create a new section named xml and select xml as the page, and chose No for all options.

    BTW, The mg_setheader link is not broken here is the direct download link

    — Pickle · Sep 9, 12:01 AM · #

  13. broken link:

    http://www.allflashwebsite.com/files/afw_getarticle-0.1.1.txt

    — Martin · May 1, 01:32 PM · #

  14. @Martin
    Thank you I’ve updated the link to the latest version.

    — Pickle · May 1, 10:25 PM · #

  15. hi
    This method works really fine, except I can’t manage to get articles by category, month, status…All url variables I can extract are “section” and “url_title”.
    Am I doing something wrong, or I didn’t understand how plugin works?
    When I get article list I want to be able to extract posts by date and category, just like in txp. Do you have any suggestion?

    — Guille · Jun 23, 12:17 PM · #

  16. You’re right, the get_article plugin does not fully support the functionality the way you are trying to do it. If you specify a section, it will only give you one article from that section. If you want all articles from a section, create an article that generates the list you desire, then use txt_getarticle to get that single page. I hope that makes sense, I haven’t worked on this in a while.

    — Pickle · Jun 23, 12:41 PM · #

  17. I have strange problem with htmlText when using Textpattern.
    I’m using <![CDATA[ in my XML output and when I look at source in browser, xml is as it should be.
    But flash is not converting <p>‘s, <br />‘s, etc. into html, even I have set “myTextField.htmlText = …”, “myTextField.html = true”.
    Later, I’ve found some rebuildHtml function, which goes

    function rebuildHTML(theText:String):String {
    var tempText:String = theText;
    var chunks:Array = new Array();

    chunks = tempText.split(”<”);
    tempText = chunks.join(”<”);
    chunks = tempText.split(”>”);
    tempText = chunks.join(”>”);
    chunks = tempText.split(”&amp;”);
    tempText = chunks.join(”&”);
    return tempText;
    etc…
    }
    myTextField.htmlText = rebuildHTML(myXmlOutput.toString());

    Then I get some of html in textField, but not all. For example, I can’t get images with <img src=”….” />
    I’ve notice in your example that you’re not using htmlText on textFields. How’s that?

    btw. I’m parsing with firstChild.blah_blah_Child…

    — Guille · Jun 29, 12:17 PM · #

Textile Help