XML in Flash is Easy because RSS Feeds are Free [AS2] · Dec 31, 03:34 AM

The previous article explained how to insert flash into a Textpattern-powered site, but failed to integrate the content so that there would be no duplication. Instead, the CMS was used to re-publish content from our flash movie for search-bot and non-flash-browser compatibility. Doing it this way doesn’t really make sense. In fact, a compelling reason to use a CMS is to eliminate the need to duplicate content. Our new approach should be simple: put all content in the CMS, and have the CMS automatically output two versions: XML for Flash, HTML for everyone else.

Download the source-code files for this article

See the demo here

There are two ways to use XML content from Textpattern

  • Create a custom section, page, and form that ouputs XML.
  • Use Textpattern’s automatically generated RSS feed (RSS feeds are valid XML)

This article will focus on the second method because it requires far less work. In fact, because RSS feeds are automatically generated with Textpattern’s default installation, there won’t be any setup in Textpattern. When you install Textpattern, a section named article is automatically created. By default, all articles in this section will be included in the RSS feed located at http://www.example.com/rss (assuming you installed TextPattern in the root web directory of the example.com domain). You can also set any section of your site to be included in the feed: goto the sections tab and set the Syndicate option to yes.

Reading an RSS Feed in Flash

Luckily, someone has made this easy for us: An ActionScript code package that downloads and parses an RSS feed and sticks the information inside of an ActionScript object.

Download the ActionScript RSS Parser Package released by Cybozu Labs, Inc.
Now available here: CybozuRssParser.zip

After you unzip the Cybozu file, copy the com folder to the folder with your flash file. Then you can use the following line of code to import the package into your Flash file:

import com.cybozuLab.rssParser.*;

This is the basic code structure for using the parser, follow the comments for explanation:

  1. import com.cybozuLab.rssParser.*;
  2.  
  3. // Create a new rssObj and initialize with the URL to the feed
  4. var rssObj = new FetchingRss( "http://www.allflashwebsite.com/demo2/rss" );
  5.  
  6. // define the function when loading is completed
  7. rssObj.onLoad = function( successFL, errMsg ) {
  8. if( successFL ) {
  9. // Do something with rssObj.getRssObject()
  10. } else {
  11. trace( errMsg );
  12. }
  13. }
  14.  
  15. // start loading
  16. rssObj.load();
  17. Download this code: /files/code2.1.txt

Adding new Functionality to the Sample Code

The sample code for this article works off of the previous one. To add additional functionality, we will create a new movie called AFWRssViewer.swf and simply load this movie into home.swf using another instance of AFWLoader.

The screen-capture above shows home.fla with the changes applied. The selected movie is the new AFWLoader, called feedloader_mc, and it lives on the feedloader layer.

We also need to change a few lines of code inside the setPath() function of home.fla that will tell feedloader_mc to load the correct movie, or hide it when we navigate to a different link:

  1. function setPath(path_arr) {
  2. link = path_arr[0] eq "" ? "home" : path_arr[0] ;
  3. url = "images/"+link+".jpg";
  4. loader_mc.loadMovie(url, link);
  5.  
  6. // Load or Hide AFWRssViewer.swf
  7. if (link eq "home") {
  8. feedLoader_mc.loadMovie("AFWRssViewer.swf", "rss");
  9. feedLoader_mc._visible = true;
  10. } else {
  11. feedLoader_mc._visible = false;
  12. }
  13. }
  14. Download this code: /files/code2.2.txt

Creating the AFWRssViewer.fla Movie

This movie is an RSS reader that displays one feed item at a time. The title and date of each item is displayed using some trippy text animation, and the body text fades in and out. There is also a non-functional button that would presumably take you to the link associated with the feed item.

Because the topic at hand is RSS, I won’t delve into a detailed explanation of the sample code. However, if you need clarification or additional detail, please post a comment. The following screenshot shows the timeline and stage of the completed AFWRssViewer.fla:

In the library, there are some components that I’ve thrown in to make the task simpler. First, AFWfx generates animated text: after it is instantiated, one call to setText(“my text”) starts the text animation. When placed on the stage, an instance of AFWfx looks like the letter W (see above image). Second, AFWTextSlider is used to display some text and also performs a fade-transition effect.

The code that follows ties together the aforementioned components. This code lives in frame 2 of AFWRssViewer.fla‘s main timeline:

  1. import com.cybozuLab.rssParser.*;
  2. stop();
  3.  
  4. var rssIntervalId = 0;
  5. var index = 0;
  6. var thisObj = this;
  7.  
  8. // We'll populate this array with information from the feed
  9. var arr_XMLHash:Array = new Array();
  10.  
  11. // initialize feed
  12. var rssObj = new FetchingRss( "http://www.allflashwebsite.com/demo2/rss" );
  13.  
  14. // Initialize the AFWTextSlider on the stage
  15. // displays feed content
  16. ts_mc.setBackgroundAlpha(0);
  17. ts_mc.setSelectable(false);
  18. ts_mc.setControlsEnabled(false);
  19. ts_mc.loadStyle("afw.css");
  20. ts_mc.startTimerScroll();
  21.  
  22. // define the function when loading is completed
  23. rssObj.onLoad = function( successFL, errMsg ) {
  24. if( successFL ) {
  25. thisObj.readRss();
  26. } else {
  27. trace( errMsg );
  28. }
  29. }
  30. // start loading
  31. rssObj.load();
  32.  
  33. // onLoad calls this function to process the feed
  34. function readRss() {
  35. var rssData:Object = rssObj.getRssObject();
  36.  
  37. // process the rss data into arr_XMLHash
  38. for( var i=0; i<rssData.channel.item.length; i++ ) {
  39. var post:Object = rssData.channel.item[i];
  40. var XMLHash:Object = {};
  41.  
  42. XMLHash.date = post.pubdate.value;
  43. XMLHash.title = post.title.value;
  44. XMLHash.link = post.link.value;
  45. XMLHash.desc = post.description.value;
  46. trace("XMLHash:"); for (var a in XMLHash) { trace(" "+a+": "+XMLHash[a]); }
  47.  
  48. arr_XMLHash.push(XMLHash);
  49. }
  50.  
  51. // Display the first item in the feed
  52. if (arr_XMLHash.length>0) {
  53. fx2.setText(arr_XMLHash[0].title);
  54. fx1.setText(arr_XMLHash[index].date);
  55. ts_mc.fadeText(arr_XMLHash[0].desc);
  56. rssIntervalId = setInterval(this, "rssIntervalCallback", 13000);
  57. }
  58. }
  59.  
  60. // This function displays the next feed
  61. function rssIntervalCallback() {
  62. if (arr_XMLHash.length == 0) return;
  63. index++;
  64. if (index >= arr_XMLHash.length) index = 0;
  65. fx2.setText(arr_XMLHash[index].title);
  66. fx1.setText(arr_XMLHash[index].date);
  67. ts_mc.fadeText(arr_XMLHash[index].desc);
  68. }
  69.  
  70. // this function should theoretically display the link somehow
  71. feedButton.onRelease = function () {
  72. trace("clicked");
  73. }
  74. Download this code: /files/code2.3.txt

— Pickle

---

Comment

  1. How would you parse special characters from the RSS feed?

    — Jesper Johansen · Jul 8, 01:42 AM · #

  2. The RSS feed generated by Textpattern is valid XML. An ampersand, for example is converted to &#38

    Parsing the feed is not necessary: You’ll probably want to display the feed inside of a container that supports HTML rendering. Luckily, such a text area is included in Flash 8. I’ve added some entities to the demo (click the link at the beginning of the article to see it in action)

    — Pickle · Jul 8, 06:27 PM · #

  3. Hi,

    thanx for the great code! Just one problem here: i can’t get the full text of the description item by any means. I always get truncated at some point with a […]. Any idea? about

    — andrea · Nov 4, 05:01 AM · #

  4. andrea, do you understand that the description will actually correspond to the article’s excerpt, and not the full body? If you need the full body I would recommend creating a custom section/page/form for this purpose (see Content in Flash and Textpattern: Bridging the Gap with XML [AS2])

    — Pickle · Nov 4, 01:46 PM · #

  5. Was really excited to read this post, until I realized that the RSS package referenced is no longer a working link. I don’t suppose you have a copy of that file?

    — Raymond Brigleb · Mar 16, 11:13 AM · #

  6. I’ve added a link under the original one :)

    — Pickle · Mar 16, 07:07 PM · #

  7. I am trying to trace the feed into a dynamic txt box i feel like i have the code all set up fine but for some reason all it traces is [object Object]

    here is my code

    import com.cybozuLab.rssParser.*;

    // Create a new rssObj and initialize with the URL to the feed
    var rssObj = new FetchingRss( “http://twitter.com/statuses/user_timeline/34820818.rss” );

    // define the function when loading is completed
    rssObj.onLoad = function( successFL, errMsg ) {
    if( successFL ) { txt_feed = rssObj; trace(rssObj) } else { trace( errMsg ); } }

    // start loading
    rssObj.load();

    — Chris · Apr 28, 12:36 PM · #

  8. Chris, you are trying to print the object that holds the result, not the result itself. Please take another look at the example code, specifically the readRss() function.

    — Pickle · Apr 28, 01:49 PM · #

  9. All is well, except for the misfortune that my RSS reader does fine in testing mode, but doesnt when published, or run as stand-alone SWF. No, System.security.allowDomain doesnt work. It simply gives a load error. Why?

    — PJ · May 19, 09:50 AM · #

  10. PJ — Via Email:
    I asked:

    Is the RSS Feed on the same domain?

    Answer:

    No

    Solution:

    This sounds like a cross-domain issue. In the dev env you can connect to remote servers, but in the web browser the flash security restrictions will not allow you to access resources on another server unless that server has a crossdomain.xml file that says it’s ok. If you don’t know what I’m talking about search google for crossdomain.xml. One common workaround is to have a php script on your server that acts as a proxy by downloading the resource first and then your flash app just talks directly to the php script.

    — Pickle · May 23, 11:40 AM · #

  11. Hi! Thanks for the code! xml is a new thing for me. just wondering if you could help:

    The picasa rss feed is coming through on the flash output like this:

    no rss value : 2009-10-02T16:04:49.000Z
    no rss value : 2009-10-02T16:04:49.452Z
    no rss value : Bartle Bull JDean NYC.jpg
    no rss value : 5388034280627701954
    no rss value : 1
    no rss value : 1.0
    no rss value : 5388034277538056401
    no rss value : public

    ………etc..etc

    I’m having problems finding the rss element names in the array do I need to alter the ParsingRss.as?

    — Henny · Nov 1, 01:41 AM · #

  12. Henny, Look at the raw feed and then dig deep. So yes, you might have to modify ParsingRss… which is where the “no rss value” error is generated. Obviously, ParsingRss is having trouble parsing the feed. Either the feed isn’t perfectly formatted, or the parser isn’t perfect (neither case would surprise me).

    — Pickle · Nov 1, 04:57 AM · #

  13. I’m really sorry to pick your brains on this but I’m having real trouble here – going round and round in circles and not coming up with anything.
    have tried going back to the raw feed too but my coding skills are not up to this!!!!!!

    this is the feed I’m using http://picasaweb.google.com/data/feed/base/user/JessicaFDPhotography/albumid/5388034277538056401?alt=rss&kind=photo&hl=en_GB

    and I’m trying to get an array of the the img urls from <item><enclosure url=”…..img.jpg….” />

    is this because enclosure is a leafNode?

    for example I can get the Item.Title Tag out ok

    — Henny · Nov 5, 02:29 PM · #

  14. Unfortunately, this is a pretty common problem with feeds (it works in one reader, but not another). See how your feed fails when validated with feedvalidator.org (many do). You might try generating the same feed with one of the feed generators available on the web … they scrape a web page and generate a feed from it.

    — Pickle · Nov 5, 04:46 PM · #

Textile Help