XML random quotes rotator
Today I will show you how to use XML and ActionScript 3 to create a small application that changes your favourite quotes after some time interval. We will be using also the AS3 Tween Class to animate the quotes’ appearance.
At first this was just an experiment but i thought it might be useful for some of you. What the rotator does is to choose a random quote from an XML file and then shows it for several seconds. Then it chooses another random quote and so on. You can use it for header of your blog or whatever you want. So, let’s get started.
1. Create a new Flash CS3 document with size 600 x 100 and background color #000000.
2. Create two dynamic text fields. The first one should be about 580px wide and the second one – about 200px. For the long text field choose #ffffff for color, size 14, bold. I have used “Verdana” for font. If you don’t like it choose another font. Align the text inside the text field to center. Give it an instance name “quoteTxt”. Embed the font like this:
Now repeat this step for the other text field but only change the color to #00CCFF and give it an instance name “authorTxt”.
3. Convert the text fields to movie clips. Select the long text field and convert it to movie clip with instance name “quoteMC”. Repeat the same for the other text field and put “authorMC” for instance name.
4. Now let’s create the XML file we will be using. You can simply download it from here. So after downloading put the file into directory named “data”.
5. Create a new layer called “actions”, open the actions panel and paste this code:
//importing tween classes
import fl.transitions.Tween;
import fl.transitions.easing.*;
//we create a variable to store the loaded XML
var xml:XML;
//the path to the xml file
var xmlPath:String = "http://www.flashadvanced.com/wp-content/upload/quotes/quotes.xml";
//we create a loader and when the loading is over we call the xmlComplete function
var loader:URLLoader = new URLLoader();
//a url request for our loader
var req:URLRequest = new URLRequest(xmlPath);
loader.addEventListener(Event.COMPLETE, xmlComplete);
loader.load(req);
//a variable for our tween
var myTween:Tween;
//we need to set a timer
var timer:Timer = new Timer(5000);
timer.addEventListener(TimerEvent.TIMER, changeQuotes);
timer.start();
function xmlComplete(e:Event):void{
xml = new XML(e.target.data);
addQuotes();
randomQuoteTween();
}
//we create arrays to store the quotes and the authors
var quotesArray:Array = new Array();
var authorsArray:Array = new Array();
//we need a random quote number
var randomNumber:Number;
function addQuotes(){
//we loop through the "quote" element of our XML
for each(var item:XML in xml.quotes.quote){
//we fill the arrays with quotes and authors
quotesArray.push(item.content);
authorsArray.push(item.author);
}
}
function randomQuoteTween():void{
//calculating the random number
randomNumber = Math.round(Math.random() * (quotesArray.length - 1));
//filling the text fields
quoteMC.quoteTxt.text = quotesArray[randomNumber];
authorMC.authorTxt.text = authorsArray[randomNumber];
//creating tween effects
myTween = new Tween(quoteMC, "alpha", Strong.easeOut, 0, 1, 3, true);
myTween = new Tween(authorMC, "x", Strong.easeOut, 550, 500, 3, true);
}
function changeQuotes(e:TimerEvent){
randomQuoteTween();
}
Here is the final result:
Thanks for sharing this. It is by far the best flash XML quote rotator that I’ve found. One thing though that might be helpful (certainly would be to me) is if you could show how to make the timer start immediately. You have it set at 5000 (5 seconds), which is good for the transition between quotes, but it also makes it take 5 seconds before the quotes begin to show up. I will be using this for longer quotes, so would need to set it to 10000 (10 seconds) but how do we make this show the quote immediately upon page load? Thanks again!
)
Well, I expected this kind of question.
The fastest way to improve the application is to set a default text to the text fields. For example: go inside “quoteMC”, double click the text field and write a default quote. Do the same for “authorMC”.
But I wouldn’t do it this way because the default quote won’t have a tween effect. I will update the code and you will see how to do it. I will share the source too.
@admin
Sorry if I offended by the question. I’m trying to learn AS3, but limited free time has slowed me down. Setting a default quote was the perfect solution since it doesn’t require any alterations to the scripting. Because it appears upon page load it doesn’t need to have a tween effect, at least for me anyhow. I’m very pleased with the solution you suggested. Thanks for the work you put into this!
Of course I am not offended. By asking you help me improve my work
Feel free to post your quostions.
if it were AS2 it would be as simple as calling
changeQuotes();
within the
xmlComplete();
but it’s not so you would have to first:
change this:
function changeQuotes(e:TimerEvent){
randomQuoteTween();
}
to this:
function changeQuotes():void{
randomQuoteTween();
}
function callChange(e:TimerEvent){
changeQuotes();
}
and then change this:
timer.addEventListener(TimerEvent.TIMER, changeQuotes);
to this:
timer.addEventListener(TimerEvent.TIMER, callChange);
and lastly change this:
function xmlComplete(e:Event):void{
xml = new XML(e.target.data);
addQuotes();
randomQuoteTween();
}
to this:
function xmlComplete(e:Event):void{
xml = new XML(e.target.data);
addQuotes();
randomQuoteTween();
changeQuotes();
}
that should work, but what I don’t understand is its already calling randomQuoteTween() from xmlComplete() so it should be populating the box with the text unless the xml hasn’t been pushed into the arrays all the way yet, which is more than likely the problem.
I recommend stringing functions better so that you don’t try to call a function utilizing an array that hasn’t been populated yet:
i.e.
loadXML(){
xml.load();
}
loadXML();
xml.onComplete = parseXML;
parseXML(){
for(){
array.push(data);
}
showQuotes()
}
showQuotes();
timer(event);
event(){
changeQuotes();
}
changeQuotes();
but that of course is shorthand and is AS3 which is more bloated than AS2
I’m having some trouble here, and my hair and scalp would greatly appreciate some help!
I love the file, it works great, I dropped in my own quotes, changed my fonts, embedded them, and placed it into my dreamweaver html file. For some reason, it will not show the file whether I upload it to the server or just preview it from dreamweaver. The swf plays fine in Flash Player, but not in DW. I already have some flash elements on the page, those load fine and work perfectly, but just this quote swf will not.
I have the xml file in the same folder as my swf, and I’m going crazy here. PLEASE HELP ME!!!
@Gianni
I figured it out!!!
In my flash file, I have it linked to quotes.xml, but in dreamweaver i had the swf in my images folder, so I just dropped the xml file in the main folder, with the swf in the images and it works!!! AHHHHH that feels good
it’s me again…
the quotes coming up are not really doing a great job of randomizing… many times the same quote repeats up to 4-5 times (8 quotes total in my xml) …. is there a way to have it not repeat the same quote until all have been viewed??
Any help would be truly appreciated!!
@admin
Hello there, I left a comment on the bottom here, I really could use some help, so I’m trying to reply to a comment of yours, I think that will notify you directly… I’m trying to make the randomizer not repeat the same quote until it’s gone through all of the quotes once… can you help me do this? PLEASE help me! I have been trying to find out how to do this but my limited Flash ability has left me pretty stranded… Thank you very much for your time.
Well, what we can do if we want to give a next button to change the quote instead of having it changed automatically?
This is by far the easiest and best working rotator i have found! One question though: How can I make this work over mutiple lines rather than all in one line?
Yeah I am also trying to enable multiline quotes, but having trouble with spacings between the last line and author text box.
I have everything working with the sample code when running the Test Movie function, but when I publish this and then it from the file system, nothing happens. I think its having a problem pulling in the data. Any thoughts?
Nevermind, guys. I had a problem with the xmlpath.
I’ve been looking for an easy tutorial like this, great stuff!
How would parse a URL?
I’ve added http://www.myUrl.com to the XML
I now want to apply that URL to a ‘read more’ MC or button
Thanks for sharing! Works great.
Is there a way to get this to not show the same quote twice? Like on this site I tried to implement this on, but is shows the same quote twice in a row.: http://www.bajains.com. Thanks for any help!!
Please if you are not too complicated! Lay out a workable code for AS2 or FLA source! I tried to change that you recommend but I did not succeed (((( Thank you!