Tuesday, 11 January 2011

AS3 Quotes rotator with XML

In this tutorial you will learn how to create a quotes rotator with XML using Actionscript 3. I have used quotes from famous movies in this rotator. You will need some working knowledge of XML in this tutorial. I have used the TweenNano plugin for the tweening which can be downloaded at greensock.com 


AS3 Quotes rotator with XML

Step 1


Open up your favourite text editor and add the following XML. I have used eleven quotes, but you can add in more quotes if you wish. Save the file name as: quotes.xml.

<quotes>
<quote>
<item txt="I'll be back" name="The Terminator"/>
<item txt="Goodbye, Mr. Bond" name="Goldfinger"/>
<item txt="I'll be back" name="The Terminator"/>
<item txt="Get busy livin' or get busy dyin" name="The Shawshank Redemption"/>
<item txt="Fuh-get about it!" name="Donnie Brasco"/>
<item txt="Show me the money" name="Jerry Maguire"/>
<item txt="You're gonna need a bigger boat" name="Jaws"/>
<item txt="May the force be with you" name="Star Wars"/>
<item txt="There's no place like home" name="The Wizard of Oz"/>
<item txt="Say hello to my Little Friend" name="Scarface"/>
<item txt="Houston, we have a problem" name="Apollo 13"/>
</quote>
</quotes>


Step 2

Open a new AS3 flash file and save it in the same directory as your quotes.xml file. Change the stage dimensions to 400 x 200 and choose whatever stage colour you wish. I have used #2E82FF colour for my stage colour.


Step 3


Firstly, you need to create a dynamic text field to hold the quote text. Select the text tool with dynamic text and drag out a one line text field the same width as the stage area. Change the paragraph behaviour to multiline and select the align center button. Give this text field the instance name: quote_txt. The dynamic text field will need to be converted into a movie clip so it can be animated later on. Convert the text field into a movie clip (F8) and give it the instance name: quote_mc.


Step 4

You also need a dynamic text field to hold the authors name, so repeat the same as above. Give the text field the instance name: name_txt. And the instance name: name_mc for the movie clip.

On the stage you should now have two movie clips. Inside these movie clips are two dynamic text fields.


Step 5

In the document class add the class name: RandomQuotes and then open up a new Actionscript file and enter the following code.

package {
    
    import flash.display.Loader;
    import flash.display.MovieClip;
    import flash.events.Event;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.utils.setInterval;
    
    import com.greensock.*;
        
    public class RandomQuotes extends MovieClip {
        
        private var loader:URLLoader;
        private var xml:XML;
        private var quotesArray:Array = new Array();
        private var quotesTotal:int;
        private var count:int = -1;
        
        public function RandomQuotes() {
            //Creates a new instance of the loader class to load the quotes data.
            loader = new URLLoader();
            loader.addEventListener(Event.COMPLETE, xmlLoaded);
            loader.load(new URLRequest("quotes.xml"));
        }
            
        private function xmlLoaded(e:Event):void {
                xml=new XML(e.target.data);
                addQuotes();
                setInterval(randomQuotes,6000);        
        }
        
        //Adds the quotes and authors names into the quotesArray.
        private function addQuotes():void{
            quotesTotal = xml.quote.children().length();
            
            for(var i:int = 0; i < quotesTotal; i++){
                quotesArray.push({quotes:xml.quote.children().attribute("txt")[i], 
                                  name: xml.quote.children().attribute("name")[i]})
                } 
                
            randomQuotes();    
        }
        
        
        //Displays the quotes from the xml and fades the movie clip in.
        private function randomQuotes():void{
            
            count == quotesTotal-1 ? count = 0 : count++;
            
            quote_mc.quote_txt.text =   "\"" + quotesArray[count].quotes + "\"" ; 
            name_mc.name_txt.text = quotesArray[count].name; 
            
            TweenNano.from(quote_mc, 2, { alpha:0} );
            TweenNano.from(name_mc, 2, { alpha:0} );
        }
    }
} 

Step 6

Test the movie Ctrl + Enter.



You can download the source files here.

2 comments:

waitingfordoom 27 March 2011 at 09:55  

I'm new to actionscript.
I get this error:
Error: Access of undefined property quote_mc
And the same with name_mc, TweenNano

iliketo 28 March 2011 at 11:21  

@Waitingfordoom

It looks like you have not give instance names to your movie clips. You also need to download the TweenNano plugin. The link is at the top of the post.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP