Build your own Flash RSS Reader [Tutorial: Flash ActionScript 3.0]
You’re building a website, and at some point, you decided that you want to show some RSS feeds to a couple of blogs or other websites. The options are limited between buying a good looking solution, or getting a free, ugly one, that usually bares the name of it’s creator website – which doesn’t seem appealing at all, especially that 90% of the time the reader doesn’t match your design!
So, here’s a quick tutorial that shows you how you could build your own RSS reader in Flash ..
- Open Adobe Flash CS3 and create a new Flash File (ActionScript 3.0).
- Create two layers in your time line: AS, that will hold our ActionScript, and Components, where we’ll be placing our visual components and displays.
- Select the first frame in the AS layer, and hit F9 to bring up the Actions panel.
- Start by creating a new URLLoader object. Next, create a URLRequest object and pass the link to your target RSS Feed in the constructor – I’ll be using my blog’s RSS Feed in this tutorial, so I’ll pass http://alaashaker.wordpress.com/feed/. If you click this link, you should see what data you’ll be receiving in a readable format (not in XML, as we’ll see in a moment). This what appears in any RSS Reader you use.
- Add an event listener to our URLLoader that listens to the Complete event. Then, simply load the URLRequest object using the load function.
- Create an XML object and set it ignoreWhitespace property to true.
- Create a event handling function for the Complete event we’ve just created. Inside, assign the data we’ll be receiving from our URLLoader to our XML object, and trace that to make sure things are coming in OK.
- Hit Ctrl+Enter to test the movie. You should be getting this:
Notice that RSS contains mainly a channel tag, which in turn contains a few item tags. Each item contains a title, link, comments-link, description and content. - Time to set some places to show the data. Select the first frame in the components layer. Open the Components panel (Ctrl+F7) and drag a List and TextArea from under the User Interface node to the stage. Using the Properties panel below give each Instance Names of liLog and taLog respectively.
- Back to the Actions panel and the AS layer, frame 1. Let’s fill the List component, lilog, with the titles off the XML we’ve just received. Put in a for-loop that pulls the item from the channel tag inside our XML. Add that to the List component as labels using the addItem function and the curly braces.
Dive into the XML to the channel tag, then index the items with the iterator, item, we’ve just created, and pull the title out into your List component. - Test the movie (Ctrl+Enter). You should see this ..
- Similarly, you can access any other member tag inside the item tag. For instance, we can modify our addItem function to the following:
Here, I’m accessing the pubDate tag, and using the function substr to bring me only the first sixteen characters – the publishing date. - Now, it’s time to write an event handler that handles the change event for our List component. Create a function, selectLog, to handle that change event and add it as an event listener to the List component. Inside the function, just set the text property of our TextArea component to the description tag of our RSS item.
- Test the movie and you should see the taLog TextArea component filled with the descriptions of the selected blog items in the List component.
- One more thing to do, setting a TextFormat object for the styling. Simply, import the StyleManager, create a TextFormat object, fill its properties and call the setStyle method to set it up.
- You’re done!
Now that you’re here, all what’s left is to integrate that into some design scheme that suits your website or perhaps a little skinning to the components …
Here’s the whole code, so you could easily paste in the Actions panel:
var rssLoader:URLLoader = new URLLoader();
var rssURL:URLRequest =
new URLRequest("http://alaashaker.wordpress.com/feed/");
rssLoader.addEventListener(Event.COMPLETE, rssLoaded);
rssLoader.load(rssURL);
var rssXML:XML = new XML();
rssXML.ignoreWhitespace = true;
function rssLoaded(evt:Event):void {
rssXML = XML(rssLoader.data);
for(var item:String in rssXML.channel.item) {
liLog.addItem(
{label: rssXML.channel.item[item].pubDate.substr(0, 16) +
": " + rssXML.channel.item[item].title } );
}
}
function selectLog(evt:Event):void {
var list:XMLList =
rssXML.channel.item[evt.target.selectedIndex ].children();
var item:XML;
for(var i = 0; i<list.length(); i++)
if(list[i].name() == "description")
{ i++; break; }
item = list[i].children()[0];
// This will display the short description ..
// The second uncommented line displays the whole post ..
// taLog.htmlText = rssXML.channel.item[evt.target.selectedIndex].description;
taLog.htmlText = item.toString();
}
liLog.addEventListener(Event.CHANGE, selectLog);
A note, a dynamic text object could be used similarly (instead of the TextArea component, but then you’ll have to add scroll bars yourself ..
Another thing, sometimes the text has some “garbage” in it. That’s due to the blog-host’s encoding scheme. A few replace calls would fix that easily ..
AlaaShaker
September 9, 2008 at 3:21 pm
nothing useful in this comment
… just liked the tutorial
Haytham
September 9, 2008 at 6:48 pm
Thanks, Haytham.
Glad you did
AlaaShaker
September 9, 2008 at 10:38 pm
Thanks a lot !
It was the best tutorial I found.
Daniel
September 10, 2008 at 3:58 pm
Hi,
thanks for the rally clear tutorial: I have followed your indication and have published the file on html page.
Ths swf is working properly but the hatml page on my web server does not work (the status bar indicates “waiting for http://www.alashaker.com...”
where I am wrong: in puplishing properties I have set “always” into script access field.
Ugo
September 17, 2008 at 1:18 pm
It’s a security issue. The server you’re running your .swf on should allow pulling the XML data from the blog (or any other source). I’m not sure if what you did is enough.
Just a few settings, but unfortunately, I don’t know how .. so I won’t be of any help ..
Sorry ..
If I found anything online, make sure I’ll send it over ..
AlaaShaker
September 17, 2008 at 2:41 pm
How would I go about using the ‘content:encoded’ item rather than the ‘description’.
Also any chance of getting more details on how to go about replacing the ‘garbage’?
Thanks,
Jeremy
Jeremy Bible
September 23, 2008 at 5:24 pm
To Jeremy:
1) I don’t know a definite way to get the ‘content:encoded’ item, but you can get it easily by traversing the XML tree. This code snippet is a replacement to the selectLog function. All I did was looped through the child items to search for the “description” tag and keep it’s index, for the ‘content:encoded’ is the next one. Then, your ‘data’ is the first item inside the latter ..
function selectLog(evt:Event):void {var list:XMLList = rssXML.channel.item[evt.target.selectedIndex ].children();
var item:XML;
for(var i = 0; i<list.length(); i++)
if(list[i].name() == "description")
{ i++; break; }
item = list[i].children()[0];
taLog.htmlText = item.toString();
}
2) Regarding the ‘garbage’, there’s a function in strings with the signature .replace(regexpPattern, replacementString) ..
Or .. simply use a dynamic TextField object instead of TextArea and set the HTML property to true, this should do the job for you!
AlaaShaker
September 24, 2008 at 11:11 am
Great tutorial Alaa
I think Ugo’s problem is related to sandbox security.
Well macromedia introduced a new security concept called sandbox security with the release of flash player 8; flash apps aren’t permitted to access both local files and network for security reasons. You have to choose which one you need more because if you choose local files access (default option) you will prevent your app from accessing network files or remote servers.
The solution is to select network access when publishing.
For more information search flash documentation for SandBox.
Ahmed Fouad
September 28, 2008 at 8:47 am
Yep. It’s that SandBox thing.
Thanks, man .. will check it out
AlaaShaker
September 28, 2008 at 3:02 pm
Hello,
I’m getting an error with this:
1061: Call to a possibly undefined method addItem through a reference with a static type flash.text:TextField.
source: liLog.addItem( {label.rssXML.channel.item[item].title} );
I’v checked the code and rewritten everything a couple of times. But still getting the same error.
Jon B
September 30, 2008 at 11:30 pm
Jon, are you sure liLog is the List Component???
Seems from the error that you’re calling a function “addItem” through a TextField object > liLog ..
Double check the namings and let me know ..
AlaaShaker
October 1, 2008 at 5:13 am
Hello,
This is a really great tutorial but is there any way that it can display the images from a feed? I’m trying to set it up so it’ll display my Flickr stream. It just displays the text and html rather than the image.
Thomas
October 4, 2008 at 3:16 am
Thomas-
Definitely there’s a way to do so; you just need to inspect the received XML and search for the tag that holds the URL (or path) of your image. Most probably it will be in the link tag.
Remember where we loaded the description into taLog.text??? Copy’n'paste that, change “description” to “link” .. and load that into a UILoader Component.
If it’s not the link tag, then you could simply do a little inspection to find the correct tag ..
AlaaShaker
October 4, 2008 at 11:22 am
Hello,
I tried your script but it pulls up blank page… when I added few check points I see that rssLoaded event is never triggered
var rssLoader:URLLoader=new URLLoader();
var rssURL:URLRequest=new URLRequest(”http://alaashaker.wordpress.com/feed/”);
rssLoader:addEventListener(Event.COMPLETE,rssLoaded);
rssLoader.load(rssURL);
trace(rssURL.url);
var rssXML:XML=new XML();
rssXML.ignoreWhitespace=true;
trace(”outside rss loaded”);
function rssLoaded(evt:Event):void{
trace(”inside rss Loaded”);
rssXML=XML(rssLoader.data);
trace(rssXML);
}
Rishi
October 8, 2008 at 11:15 pm
Oops. I should say without tags:
I wanted to add link instead of pubDate, is there a way to format link so that when it populates taLog the link is active?
Sean
October 9, 2008 at 1:52 am
To Sean: The pubDate part was in the liLog not the taLog, so which did you mean?
Anyway, if you mean the List, you can easily add a “data” part to the addItem method (as in {label:”myLabel”, data:”myData”} format). Just add your link to the data part, and navigate to that link when whatever behavior you want is triggered.
If you meant the TextArea, just append the <a> tag to your link.
AlaaShaker
October 9, 2008 at 5:07 am
To Rishi: I’ve replied to your email
AlaaShaker
October 9, 2008 at 12:02 pm
I should clarify. Forgive me as I am new to this level of Actionscript and XML. In the function selectLog I want to set the text property of the TextArea component to link (instead of description) – which I have done. But when link is displayed in the taLog Text Area I want that to be an active
. I am basically unsure of the syntax.Sean
October 9, 2008 at 8:20 pm
I need the XML link tag to be a functioning href when displayed in the Flash.
Sean
October 9, 2008 at 8:26 pm
To Sean: OK, try this …
taLog.htmlText = "<a href='www.google.com'>testGoogleLink</a>";
function linkHandler(evt:TextEvent) {
navigateToURL(new URLRequest(evt.text));
}
taLog.addEventListener(TextEvent.LINK, linkHandler);
AlaaShaker
October 9, 2008 at 8:40 pm
Hi Alaa,
Great way of importing an rss feed into flash!
I looked at doing it for a blogspot feed but they use an individual tag for each new entry.
eg.
Which is a pain! Lol. Since yours is wordpress i’ve set up a feed from that and it’s now working like a dream.
One issue i’m encountering is that certain characters are being displayed as html code eg. apostrophe being ’. I’ve tried using a dynamic text area instead set to display in html but it still occured.
Any ideas?
Thanks, Kev
An9eluS
October 10, 2008 at 5:13 pm
The script works great, but I use blogspot and feedburner and there is a heap of HTML code tangled up in the description. Any idea how to feed come up so that the HTML code does not show up ?
X. Suaiden
October 10, 2008 at 11:27 pm
Hi Alaa,
Is there any way to prevent HTML code being displayed for special characters? I’m seeing a lot of it from my wordpress feed, even having removed all html from my posts.
Also, how can i stop it abbreviating my posts with ellipses,
eg. a few lines and then [...]
they appear fully in the wordpress rss feed but not in flash, i notice they do from your feed though.
How did you achieve this?
Thanks
KevDan
October 10, 2008 at 11:48 pm
This definitely places an active link in the taLog, which is great, but how would I pass the XML link value from the XML channel item to the taLog.htmlText? – thus making the XML link active rather than the google link string that is there now. Hopefully I am explaining things correctly.
Thanks very much for your help and patience!
Sean
October 11, 2008 at 1:17 am
Hi Alaa,
I’m trying to view a wordpress blog with this and it keeps abbreviating it half way. Any ideas?
elarter
October 11, 2008 at 1:46 am
Hi AlaaShaker,
I get the following error when I trace the RSS..
Error opening URL ‘http://alaashaker.wordpress.com/feed/’
Error #2044: Unhandled ioError:. text=Error #2032: Stream Error. URL: http://alaashaker.wordpress.com/feed/
at Untitled_fla::MainTimeline/Untitled_fla::frame1()
Why is this? Some security reasons?
roshan
October 13, 2008 at 1:19 pm
The tutorial is great, but i could not solve these questions:
how do i change colors – instead of the default blue?
how do i manange to load the feed via params in the html?
thank you in advance
Andi
October 16, 2008 at 11:42 am
To An9eluS, X. Suaiden, KevDan: About blogspot or feedBurner, they just use a different XML structure for their RSS XML. You just need to examine it (perhaps trace it and have a thorough look), then a little coding would do the job …
To KevDan, elarter: Concerning the trimming (abbreviation) part, it’s just that the description generally holds a few characters of the whole post. The original full post is in the <content:encoded> tag – obviously, you can’t access that similarly as in item.description. So, here’s a code snippet I wrote that would work around that for WordPress …
function selectLog(evt:Event):void {
var list:XMLList = rssXML.channel.item[evt.target.selectedIndex].children();
var item:XML;
for(var i = 0; i<list.length(); i++)
if(list[i].name() == "description")
{ i++; break; }
item = list[i].children()[0];
// taLog.htmlText = rssXML.channel.item[ evt.target.selectedIndex ].description;
taLog.htmlText = item.toString();
}
To An9eluS, X. Suaiden, KevDan: Regarding the messed up characters, if the dynamic text didn’t work, you’ll have to replace them before setting the .text property to display the results. They are a few finite characters, so let’s say u’ll have to do about 5 replace calls as in:
str = str.replace(/\&\#8217/g, "'");I’m using RegExp global search’n'replace to do so .. I guess you could do the rest.
AlaaShaker
October 18, 2008 at 6:40 am
To Sean: You just need to grab the link from the XML as in item.link or so (you’ll have to take a look at the Feed XML), and place that instead of the google part as you wish .. just concatenate the <a> starting and ending tags before and after it.
To Roshan: Yes, most probably a SandBox Security problem. Please review a previous comment in this post for Ahmed Fouad with the date 9.28.08 / 8am for more info.
To Andi: What default blue? You mean in the ListBox? Search for styling components, or skinning them. Or, you know what? Go to the library, double-click the List and edit how you want to display it by messing with the movie clips there ..
Regarding your second question, you’ll have to pass the param from the html page to the embedded Flash swf object. I’m not sure I can tell you how write now, but it’s doable .. Sorry
AlaaShaker
October 18, 2008 at 7:07 am
Hey man. Nice tutorial. Even so, I have one question. There’s a way to do that RSS Reader with AS 2.0? Thanks already!
Pheckibarr
October 20, 2008 at 6:38 pm
Hi there AlaaShaker.
First. Thank you for an inspireing tutorial. I found this very helpful due to the fact I am new to most scripting. I’ve more or less been into design but time makes me in need to explore other parts of creating websites. I have been searching for this feed in flash for a while. Finally I found a decent one to use. And its easy explained.
I have just one question though. The thing is that I have a button on a webpage (big one). I want it to list just the 2 first lines in the latest blogarticle. Then I dont need all the list items. Instead of a plain picture-button i get some info on it that its actually happening something in the blog and it wont be so static.
Sorry if bad language. Like the viking i am
Sharque
October 21, 2008 at 12:01 pm
To Pheckibarr: I’m not sure exactly how that’s possible, but there’s a page in Flash Help that explains “Migration from AS 2.0″ .. Why don’t you check it the other way around? See how classes used her, what did they replace in AS 2.0? Sorry for that ..
To Sharque: I’m not sure if I got what you want to do correctly, but I guess all you need is to read the first item’s description, then use break it into lines, display the first two and that’s it .. am I missing anything?
AlaaShaker
October 21, 2008 at 12:59 pm
I was able to build a RSS reader within my FLA, the output warnings I get say:
WARNING: The component ‘TextArea’ requires ActionScript 2.0.
WARNING: The component ‘List’ requires ActionScript 2.0.
Also, since I’m the master at copy+paste, could you tell me how to change the styling of the text and is it possible to include images in the feeds?
tiavamp
October 21, 2008 at 10:53 pm
never mind. the dude from Grow showed me
Tiavamp
October 24, 2008 at 9:26 pm
Was there any other solutions to sandbox error? I’ve only read about passing infromation through proxy.
Check out: Server-side proxy method
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_16520&sliceId=2
George
October 26, 2008 at 8:08 am
Some good info about both a php based and asp based proxy @ http://www.abdulqabiz.com/blog/archives/general/php_proxy_script_for.php
Thanks for the example. Went from knowing no flash/actionscrip to understanding the basics pretty fast with you code as a base and tinkering with it to do what I want.
Cheers
George
October 26, 2008 at 8:39 am
Greetings AlaaShaker.
I used this tutorial to get me going on the first RSS news ad project I did. It is a very good tutorial and works fantastic. I have since gone beyond these parameters and I wnat to stay with AS3. What I would like to do, is exactly what you have done above only with an RSS feed parsed to XML. The instead of Populating the bottom of the stage with a text area, I want to populate it with two dynamic text fields (title and description nodes from the RSS), a UILoader (enclosure.@url node from the RSS) and a button (link node from the RSS). I used the List Component as you have for the top and populated the “label” with the RSS “title” node. I used the “data” to load the “description” node. To get this to work I also need to populate this LictComponent with the “enclosure” and “link” nodes so I can use the change event to populate the dynamic text fields, UILoader and button. Is there a way to add two more items to a List Component? Or should I use a different component?
Forrest
Forrest
November 8, 2008 at 12:00 am
Forrest: To be honest with you, I didn’t really get your problem
You can fill the list with whatever you want at anytime. I’m also using the Change Event which doesn’t use any argument except the selectedIndex .. so?
AlaaShaker
November 8, 2008 at 12:22 am
Well as far as I know, you can only enter “label” and “data” information into a list component.
[a]
listBox.addItem({label:il.title.text()[i], data:il.description.text()[i]});
[/a]
I need to enter 4 items.
Forrest
November 8, 2008 at 2:54 am
Here is my question.
Most ‘flex’ rss readers are nice, but yours is so much better simply because I know nothing about flex and making flex work with in my flash site.
Now all I have to do is learn how to make my flash cs2 site work with this flash cs3 app. Basically I will have to just rebuild the site around this cs3 app.
1— is there a way to convert all cs2 code and make it into cs3?
2— for the rss reader, can you add a ‘read more’ button and have it actually open up that selected blog entry in a small window or even another movieclip / new window and show the entire blog entry?
Thanks so much
email me if its easier – jasen.yhwhdesign@yhwhdesign.com
yhwhdesign
November 9, 2008 at 1:48 am
how do you use this with flash cs3 but actionscript 2.0 not 3.0
yhwhdesign
November 9, 2008 at 2:49 am
I have a simple question… The tutorial works beautifully. I want to add a very simple function to the taLog.
I would like to allow the viewed blog entry that was selected from the liLog (which is showed in the taLog) to allow the viewers to see the full entry or basically allow them to ‘read more’
is it possible to place something where it would say ‘read more’ to allow for the rest of the blog entry to be read or even add scroll bars to the text area so the entire blog can be read in the taLog? With out using a dynamic text field… if no other way but by using a dynamic text field, then how would you code it?
Thanks
Jasen Burkett
Yhwh Design
Jasen Burkett
November 16, 2008 at 5:43 am
Hey Alaa,
Love the simplicity in which you show all this. It is really great and I enjoyed building the project.
I am pretty much coding dumb however, and while I was able to get it to work, I have been having trouble trying to get images to load into this thing.
I tried to do what you referenced above, but I can’t seem to get my head wrapped around it.
Rob
November 17, 2008 at 8:26 pm
by the way. I looked over my XML file for the correct tag, but this is where I am finding the images.
<![CDATA[Testing Images
]]>
Rob
November 17, 2008 at 8:46 pm
Sorry,
<![CDATA[
Testing Images
]]>
Rob
November 17, 2008 at 8:47 pm
Alaa,
Ok, I am an idiot. Your code parses images just fine. Maybe I should have checked to be sure I had not set the Alpha of the taLog area to 0%, I would have realized the code is fine.
The text shows up fine when the area is set to 0% alpha, but the images are invisible when they load. Once I set the alpha to 100 everything was peachy.
I thought you would want to know that I found out what the problem was, and that it was a newb error. Thanks again for a cool tut!
Rob
November 17, 2008 at 11:34 pm
Hi Alaa,
Thanks for the code snippet for the workaround however when I test the movie it just goes in a berserk loop I get an syntax error with this line….
if(list[i].name() == “description”)
Jeremy
November 21, 2008 at 3:35 pm
nevermind…the quotes were bad…had to replace them
Thanks Alaa…works great and seems to have taken away the garbage characters at the same time.
Now I just need to figure out how to format the text so that link text is formatted differently.
Jeremy
November 21, 2008 at 3:40 pm
So I am trying this out and it works great except the feed I have shows all the html mark up as if it were text rather than hiding it with cmdata. Is there a way to make it ignore anything in the ?
Rachel
December 22, 2008 at 2:40 am
Rachel: Are you sure you’re using the .htmlText property not the .text ???
AlaaShaker
December 22, 2008 at 1:02 pm
i’m just learning actionscript and I just used your tutorial and it’s so awesome ! i works perfectly .. the only thing is that … is there any way to show more than 10 rss titles when i’m showing those titles ? how can i set the number ?
thanks a lot ..
ghooti
December 23, 2008 at 1:45 pm
Ghooti: Nah, it’s not a Flash thing. You need to set that from the blog itself. Usually blogs send 10 or 15 posts in their RSS (default is 10).
AlaaShaker
December 23, 2008 at 2:36 pm
thanx man .. you rock !
ghooti
December 28, 2008 at 6:36 pm
[...] Alaashaker Tutorial BezzMedia Flashloaded Sunouchi [...]
Reference Source: RSS Feed with Flash | gclubstudio
January 5, 2009 at 9:34 am
Great tutorial, helped me immensely.
I’ve noticed that on some feeds, the tag is actually before the description, but I overcame that hurdle.
I have a question, though: I want to force the images from a feed to shrink to the width of my TextField (or TextArea, or Dynamic Text box, whichever makes this easier.)
How can I force images to adhere to a certain width?
I tried applying an external stylesheet to a TextField but without success.
Any hints would be appreciated. Thanks again for a helpful tutorial.
-WIll
Will
January 14, 2009 at 9:41 pm
that should’ve said
tag, sorry.Will
January 14, 2009 at 9:41 pm
“content:encoded”! jeez, i need to stop putting < in my comment.
Will
January 14, 2009 at 9:42 pm
hi alaa
thanks very much for the excellent tutorial, however, i can’t seem to get my font to embed
i have tried giving it a linkage name in the library, etc, but must be missing something – could you please clarify
thanks so much! jodi
jodi
January 22, 2009 at 1:59 am
How would I go about coding the AS so that it displays both the description and an image if it was available in the feed?
The problem I am running into is that most of the feeds I would like to parse use the element, with URL, length and type parameters. How to I make it so it will display the image contained within the enclosure element?
I used a Dynamic Text field instead of the textarea for taLog. I also made a second dynamic text called imgLog that I would like the RSS feed’s images fed into if possible.
Please help, I really appreciate it.
Velocita
February 4, 2009 at 11:06 pm
Hi, Alaa i was just wondering if it is possible to only have the “list” without the text area.
and link the (list text to the blog page it self ?
hope this makes sence
thanks
ali
February 9, 2009 at 5:34 pm
Hi Alaa, Great code. I have it working here, I just wanted to ask how one would get around the sandbox violation of pulling info from wordpress to a personal website? I’ve looked into crosspolicy files but i’m not having much luck. Thanks in advance for your help!
R
Ricky
February 9, 2009 at 7:20 pm
Howdy! I am re-doing our website and I am trying to incorporate some flash into it, I am using an existing template (not a brand new one like you have in the example, which by the way was great and worked perfectly for me!). When I use a blank template everything works great but when I try to create those same layers into my existing template (for the rest of the site) it throws back these 4 compiling errors.
(Line 10) The class or interface ‘URLLoader’ could not be loaded
(line 11) The class or interface ‘URLRequest’ could not be loaded
(line 18) The class or interface ‘Event” could not be loaded
(line 28) The class or interface ‘Event’ could not be loaded.
Any help would be greatly appreciated. Thanks!
Greg Williams
February 10, 2009 at 6:18 pm
Folks, sorry for not replying earlier. However, for people having problems with the <content:encoded> similar tags, please check out this video (or go to http://gotoandlearn.com/ and scroll down to “ActionScript 3 Advanced XML”). This website is a great reference BTW …
AlaaShaker
February 11, 2009 at 1:20 am
Will: I’m not exactly how this is done, but it’s either you load the image in a UILoader (by somehow figuring out the link to the image, and loading it there using that location path), or parsing the HTML and doing that manually … provided the CSS solution didn’t work out. Sorry!
AlaaShaker
February 11, 2009 at 1:23 am
Jodi: Check this out, let me know if it doesn’t work …
AlaaShaker
February 11, 2009 at 1:29 am
Velocita: Try inspecting the <media:content> element, I guess it has what you need!
Will: This might help you too ..
AlaaShaker
February 11, 2009 at 1:37 am
Ali: Yeah, it’s possible. Just use ‘link’ tag nested in each ‘item’ to navigate to that url. Then do this:
var url:URLRequest = new URLRequest("http://www.google.com/");navigateToURL(url, "_blank");
I’m not sure of the exact coding here, coz I just typed it into the comment box without checking, but I’m sure u’ll get around fixing it with Flash help, or online.
AlaaShaker
February 11, 2009 at 1:42 am
Ricky: Please check this earlier comment …
Greg Williams: Perhaps you’re just missing a few imports. Try “import flash.events.*;” and “import flash.net.UrlRequest” for instance.
AlaaShaker
February 11, 2009 at 1:45 am
I’m not sure if anyone still needs this (Sean had requested ita ges ago) but heres the code to grab the link from the XML, embed that into a htmlTEXT field and concatenate the <a> tags to make it a functioning link:
function selectLink(evt:Event):void {
var list:XMLList =
rssXML.channel.item[evt.target.selectedIndex ].children();
var item:XML;
for(var i = 0; i<list.length(); i++)
if(list[i].name() == “link”)
{ i++; break; }
item = list[i].children()[0];
linkLog.htmlText = ““+item.toString()+”“;
}
liLog.addEventListener(Event.CHANGE, selectLink);
Thanks heaps to Alaa for an awesome product,
Cheers
Mark
Mark McGeady
February 18, 2009 at 2:56 am
sorry, the full concatenate string is:
linkLog.htmlText = ““+item.toString()+”“;
Mark McGeady
February 18, 2009 at 2:59 am
Is there a way to do this same thing with actionscript 2.0 ?
djstory108
February 20, 2009 at 8:49 am
first time getting this involved with AS3. I am trying to get it so when someone clicks a news title, they see the description below in the taLog box and then after the description, an active link to take them to the item.link to read the entire news item. When I try to do this, I either get the description or the link, not both together.
jason
February 21, 2009 at 3:05 am
I am new to Flash and wondering I am trying to grab RSS feeds to make them appear on the stage when a object is rolled over. When can I add this feature in the code?
Thanks
plantaseed
February 23, 2009 at 6:45 pm
I’m struggling with adding links to the rss titles.
i dont want to display a textbox description at all.
i want just the list box with the titles and when you click them it takes you to the url listed as the link in the specific item
how do i accomplish this?
Andrew Chobaniuk
March 3, 2009 at 1:42 am
To djstory108: I’m not sure how honestly, sorry!
To jason and Andrew Chobaniuk: Plz check this old comment …
To plantseed: Put the code in the ’selectLog’ function wherever you want (usually in your onRollover). You’ll have to take in consideration that loading the data over the internet takes some time, so either load and cache the data first, or show a progress bar (esp. when the user’s connection is slow, you can’t let’em wait for the rollover to respond, or move on to another object without realizing that it’s loading anything).
AlaaShaker
March 4, 2009 at 1:58 am
hey, great tutorial, but when i click on title in the List i get this error in the TextArea
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at vecernji_rss_300×300_fla::MainTimeline/selectLog()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at fl.controls::SelectableList/handleCellRendererClick()
Do you know what’s the problem, tnx in advance
karlito
March 4, 2009 at 5:49 pm
karlito: Check naming the objects on stage or so. This means you’re trying to access a null object (coz it doesn’t exist). You can use the trace(…); method to know if you’re script is working according to your expectations – just fill it up with traces and see!
AlaaShaker
March 5, 2009 at 12:59 pm
Hi Mate, thanks for tutorial!!
Was just wondering if its possible to have the description display automatically without the user clicking on the list title….???
Cheers
rhys
March 7, 2009 at 5:06 pm
rhys: I’m not sure I totally imagine how u want that, but if you mean automatically displaying the first item, you just need to copy-paste the code in selectLog to the end of rssLoaded and replace ‘item’ with an index of 0 .. or close to that
AlaaShaker
March 7, 2009 at 10:39 pm
Just wanted to say that I am using your tutorial again and i guess the first time through I missed a ton or just didnt read it correctly.
your a genius, and great work! If the tut. is followed step by step there should be no issues.
Keep it up man, great work.
Jasen
Jasen Burkett
March 10, 2009 at 4:21 am
Jasen: Thanks, man
AlaaShaker
March 10, 2009 at 5:54 pm
Hey AllaShaker – excellent tutorial!
I do have two questions though: When I click an item in the top list….I only get the publish date in the bottom box. I don’t see any of the actual feed content, only the date. What do I need to change to see all the content?
Also, how do I get the first item in the list to automatically load in the bottom box? Right now, when i publish my swf, the bottom box is empty until I click an item.
Thanks!
Thomas
March 10, 2009 at 11:33 pm
Thomas: Thanks. Regarding your first question, I believe you need to check the xml you receive and make sure you’re addressing the correct tags (follow the tutorial and trace the received RSS xml). Perhaps you need to have another look at the comments as well …
Moving on to the second question, I just replied to that two comments ago
AlaaShaker
March 11, 2009 at 2:48 am
Thanks AllaShaker, sorry i didn’t read the comments well enough!
I was able to succesfully load the content into taLog upon list item click, but I still can’t get the descritption from the first list item to automatically load WITHOUT click. I’m new to AS3, and also to RSS technology….so all your help is much appreciated.
also, Mark McGeady had posted the following code previously to load the item link into an html text feild:
function selectLink(evt:Event):void {
var list:XMLList =
rssXML.channel.item[evt.target.selectedIndex ].children();
var item:XML;
for(var i = 0; i<list.length(); i++)
if(list[i].name() == “link”)
{ i++; break; }
item = list[i].children()[0];
linkLog.htmlText = ““+item.toString()+”“;
}
liLog.addEventListener(Event.CHANGE, selectLink);
I get syntax errors when i try this code. Has anyone else tried to use this code? or do you know of some other code that will provide a “click here for more info” type link?
Thomas
March 12, 2009 at 5:11 pm
Hi,
I get to the first trace statement and when i hit control+enter I get this error in my output:
**Error** Scene 1, Layer ‘actions’, Frame 1, Line 8: 1023: Incompatible override.
function rssLoader(e:Event):void
**Error** Scene 1, Layer ‘actions’, Frame 1, Line 8: 1021: Duplicate function definition.
function rssLoader(e:Event):void
Total ActionScript Errors: 8, Reported Errors: 8
Any Ideas?
Many Thanks,
LM
LM
March 13, 2009 at 1:40 am
NM- found my error.
THanx
LM
March 13, 2009 at 1:46 am
I still don’t know how to make the first item auto-selected… Can you please help? ~_~
rats
March 28, 2009 at 2:42 pm
Hi Alaa,
Thanks for the great tutorial.
I already try and there is no problem until Line 11
And then I’m facing error while type next script.
This is what I found :
Location : Scene1, Layer ‘AS’, Frame 1,Line 14
Description : 1120: Access of undefined property liLog.
Source : liLog.addItem( {label: rssXML.channel.item[item].title } );
Could you please help me to solve the problem.
bermandt
March 30, 2009 at 12:12 pm
rats: Please check this first, let me know if doesn’t work after that …
bermandt: Did you name the List control liLog? Also, make sure that the control is in the scope of your script (you can’t be writing the code inside some object and the control is at the root level for instance, they won’t be able to “see” each other.)
AlaaShaker
March 30, 2009 at 1:36 pm
I made movieclip contain list control and name it “liLog”.Is it correct ? I sent the FLA to you also
bermandt
March 30, 2009 at 2:36 pm
@Alaa, I am confusing at what should I copy/paste… Thanks for the reply
rats
April 1, 2009 at 6:34 pm
Greetings to all! I successfully used your tutorial but I was trying to customize the RSS Reader a bit; however, I’m having trouble. Is there a way to make it so that when the post is clicked it goes to a website instead of displaying parts of it in the description. My feed contains audio / video files. I’m trying to get the reader to forward to websites where the audio/video files are. How would I go about doing that?
John
April 6, 2009 at 9:36 pm
bermandt: I replied to your email
rats: Try lines 23 till 32, and replace the for-loop with “var i = 0″ …
John: Yep, u just need to link the listItem to the URL. You’ll find how to do that in the comments above
AlaaShaker
April 7, 2009 at 2:59 am
hi!
i can’t get it to working when you put in on a server… it works when you compile it locally thou! Can you help? Thanks!
Haej
Hae-Jean
April 10, 2009 at 10:31 pm
Hae-Jean: Sorry, this is some sort of security issue (sandbox). I’m not quite sure how this could be solved. Please check this comment posted earlier.
AlaaShaker
April 11, 2009 at 1:50 pm
Hi Alaa. This was an amazing tutorial. Not to be redundant but I’m very new to actionscript and have the same question a few people above had.
Can you show me the exact code to make the titles into their respective links? I’ve completely gotten rid of taLog b/c I have no need for it. I’ve tried several of your suggestions above but to no avail. Thank you again.
Nina
April 16, 2009 at 9:11 am
Hi again. I figured it out:
liLog.addItem(
{label: rssXML.channel.item[item].title,
data: link
} );
Thank you for your post! You are so kind.
Nina
April 17, 2009 at 5:37 am
Nina: Sorry for the late reply. Thanks for your words. I’m glad you figured it out eventually .. and thanks for posting the solution
AlaaShaker
April 18, 2009 at 7:45 pm
I found this tutorial very useful in getting an RSS feed into flash.
Now i’m trying to swap out rssXML for xmlData to read this feed http://www.imeem.com/localevents.ashx
I can get it to trace but not display anything.
Thoughts?
Thanks,
Shawn
Shawn
April 23, 2009 at 12:34 am
Finally figured it out, again thanks for such a useful tutorial.
var xmlLoader:URLLoader = new URLLoader();
var xmlURL:URLRequest = new URLRequest(”http://www.imeem.com/localevents.ashx”);
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
xmlLoader.load(xmlURL);
var xmlData:XML = new XML();
xmlData.ignoreWhitespace = true;
function xmlLoaded(evt:Event):void {
xmlData = XML(xmlLoader.data);
trace(xmlData.event[0]);
for(var i in xmlData.event) {
trace(xmlData.event[i]);
liLog.addItem( { label: xmlData.event[i].description } );
xmlData.channel.item[item].description} );
}
}
function selectLog(evt:Event):void {
taLog.text = xmlData.event[evt.target.selectedIndex].description;
taLog.htmlText = xmlData.event[evt.target.selectedIndex].description;
}
liLog.addEventListener(Event.CHANGE, selectLog);
Shawn
April 24, 2009 at 2:50 am
Hi,
I’ve done the tutorial (great, by the way) and I’ve overcome all of the security issues. However, my chosen rss won’t display properly. The liLog displays fine, but the taLog does not. The RSS feed I’m looking at is http://rss.groups.yahoo.com/group/fulldome/rss/
Does anyone have any ideas?
Mike Narlock
April 25, 2009 at 11:17 pm
Shawn: Glad you worked it out, sorry for not replying earlier, and thanks for posting the script
Mike: Try injecting a few ‘trace’ statements here n there & make sure the dataflow is correct .. Coz if the liLog’s fine, then the taLog should be fine too ..
Most probably u just skipped/missed smthing
AlaaShaker
April 26, 2009 at 3:23 am
[...] out what the “official” RSS 2.0 format was, and I stumbled on a pretty cool tutorial by AlaaShaker that loads your RSS feed into your swf file. It answered my question which was RSS is just XML. No [...]
JWorks News » Blog Archive » How to load external XML (RSS Feed) into Flash via PHP (very, very easy)
May 4, 2009 at 11:46 pm
[...] پدر و مادر این آموزش را [...]
پـیــرو ; Follower » Blog Archive » نمایش آر.اس.اس وبلاگ در قالب فلش
May 11, 2009 at 4:32 am
I have a problem, I made som changes to this nice code. In my text field I show the user the post insted of a link, but it allways shows the first post. And not the latest. Anyone who knows why?
And a second thing, if I look at the post, in text mode it shows the adress to images and the html markup. And If a switch to textHtml it shows the pictures. Are there any nice way to only show the text??
The Code:
import fl.managers.StyleManager;
var logFormat:TextFormat = new TextFormat();
logFormat.font = “Verdana”;
logFormat.size = 10;
logFormat.bold = false;
StyleManager.setStyle(”TextFormat”, logFormat);
var rssLoader:URLLoader = new URLLoader();
var rssURL:URLRequest = new URLRequest(”http://letsbebest.blogspot.com/feeds/posts/default?alt=rss”);
rssLoader.addEventListener(Event.COMPLETE, rssLoaded);
rssLoader.load(rssURL);
var rssXML:XML = new XML();
rssXML.ignoreWhitespace = true;
function rssLoaded(evt:Event):void {
rssXML = XML(rssLoader.data);
//trace(rssXML);
for(var item:String in rssXML.channel.item){
taLog.htmlText = rssXML.channel.item[item].description;
daLog.text = rssXML.channel.item[item].pubDate.substr(4 ,13) + ” ” + ;
}
Mattias
May 19, 2009 at 12:09 pm
Hi,
First off this was a very helpful tutorial.
I changed the code and am loading the title, description and pub date into the select log. I was wondering if there’s a way to make the title bold. here is my code:
function rssLoaded(evt:Event):void {
rssXML = XML(rssLoader.data);
for (var item:String in rssXML.channel.item) {
liLog.addItem(
{label: rssXML.channel.item[item].title +
‘\n’ + rssXML.channel.item[item].description +
‘\n’ + rssXML.channel.item[item].pubDate.substr(0, 16) } );
}
}
I want the title ( rssXML.channel.item[item].title ) to output in bold. Is this possible?
Thanks for any help.
Adam
May 20, 2009 at 5:46 pm
I want my feed to be live and the list to display all the
Christian
May 21, 2009 at 4:49 am
[...] Build Your Own Flash RSS Reader [...]
Actionscript 3.0 And RSS Reader
May 28, 2009 at 9:31 am
Thanks for the tutorial. A couple of questions
1. How would I go about adding sound controls as I am using this as a podcast player.
2. It seems to work properly as a podcast player but the items show up twice for each ??? Any advice would greatly be appreciated.
Thanks
Jon
May 29, 2009 at 9:31 pm
Alaa,
Like everyone else, I really appreciated this tutorial it was a big help. I am just having some issues with the html special characters displaying, and I have tried to figure out what to do using your regEx search and replace, (forgive me I’m definitely a newbie) But i just can’t figure out exactly how to use it. I just can’t seem to figure out how to designate the text in the rss feed to be searched and replaced. I’m sure it is pretty simple as you stated, just whatever i am coming up with isn’t working. I was just hoping maybe you could post the code for that or explain it a little more specifically? that would be a huge help. thanks so much.
Peter J
June 14, 2009 at 4:29 am
Thank You Alaa
I’ve made my first ever RSS reader using this tutorial. I hope u can make more tuts like this.
xull
June 18, 2009 at 11:58 am
Turned twitter data into rss feed using Yahoo Pipes, fed through this script and I have my own custom twitter widget! Thanks!
J. Neelands
June 19, 2009 at 9:54 am
Alaa Shaker,
You are awesome. I was thinking it would be cool if… I went online and there you have it! Nice job.
Two questions, for people looking to design a flash interface:
1) Is there a way to do this for WordPress “pages” content? So a button can be made for each WordPress page, to load the content into the flash textbox.
2) How can we limit the list to the top five most recent posts?
Thanks again!
Media Michael
June 19, 2009 at 10:54 am
Is there any good tutorial on the “RegExp global search’n’replace” that was mentioned? I am having trouble with this – as I am trying to basically add a few lines after every image in the XML.
I am only concerned with adding ’s because the text immediately following an image seems to go “under” the image, hiding the first few lines.
Timothy Britton
June 22, 2009 at 5:59 pm
Is there any idea how to make flash rss like on my myspace page..
I didn’t make it by myself…that’s why i’m asking…
Thank you…
Mandarine
June 24, 2009 at 6:02 pm
I mean style of client…
Mandarine
June 24, 2009 at 6:04 pm
Does anybody now where one can buy very nice list components that will replace the factory list component?
Media Michael
July 3, 2009 at 9:00 pm
Hey:
Great tutorial. I’m trying to get this to work with a Blogger RSS though and am having troubles. I can trace the RSS file, so the problem isnt there. It just won’t display anything in the list and area boxes! Any help would be greatly appreciated!
var rssLoader:URLLoader = new URLLoader();
var rssURL:URLRequest =
new URLRequest(”http://justinlenssen.blogspot.com/rss.xml”);
rssLoader.addEventListener(Event.COMPLETE, rssLoaded);
rssLoader.load(rssURL);
var rssXML:XML = new XML();
rssXML.ignoreWhitespace = true;
function rssLoaded(evt:Event):void {
rssXML = XML(rssLoader.data);
for(var entry:String in rssXML.feed.entry) {
liLog.addItem(
{label: rssXML.feed.entry[entry].published.substr(0, 16) +
“: ” + rssXML.feed.entry[entry].title } );
}
}
function selectLog(evt:Event):void {
var list:XMLList =
rssXML.feed.entry[evt.target.selectedIndex ].children();
var entry:XML;
for(var i = 0; i<list.length(); i++)
if(list[i].name() == "content")
{ i++; break; }
entry = list[i].children()[0];
rssXML.feed.entry[evt.target.selectedIndex].content;
taLog.htmlText = entry.toString();
}
liLog.addEventListener(Event.CHANGE, selectLog);
Rich
July 9, 2009 at 9:55 pm