XML in Flash is Easy because RSS Feeds are Free [AS2] · Dec 31, 01: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.

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

Textile Help