jump to navigation

Using Flash CS3 List components September 6, 2010

Posted by Tournas Dimitrios in Flash.
trackback

In this article I will show you the power of the Flash CS3 components and how to use them in the best way.I am going to start with the List component. I will show you how to easily populate XML data into the List.

The Flash components are very useful, powerful and easy to customize. Some of them are ComboBox, CheckBox, DataGrid and so on. You can see them in the Components panel by clicking Window -> Components. Now I will show you the best and the fastest way, in my opinion, to populate data from an XML file. We’ll be using the List component. The List component is a scrollable single- or multiple-selection list box. To add an item to the List you can use addItem() and addItemAt() methods. A List item has two properties: label and data.
Let’s get started with the example.

  • Open a new Flash CS3 document and save it under “listXML.fla”. Set the size to 250 x 350 and for background color choose #CCCCCC. On the top of the document create a static text field and write “My favourite movies list”.
  • Go to the Components panel by clicking Window -> Components and drag a List component on the stage. Make it 250px wide by 300px high. Give it an instance name “xmlList”.
  • Now let’s create a new XML file. I made an XML with my favourite movies. You can copy it or you can list your favourite movies.
<data>
  <movies>
    <movie>
      The <span class="hiddenSpellError" pre="The ">Shawshank</span> Redemption
      <link>http://www.imdb.com/title/tt0111161/</link>
   </movie>
   <movie>
     <title>The Godfather</title>
     <link>http://www.imdb.com/title/tt0068646/</link>
  </movie>
  <movie>
    <title>Lock, stock and two smoking barrels</title>
    <link>http://www.imdb.com/title/tt0120735/</link>
  </movie>
  <movie>
    <title>I am Sam</title>
    <link>http://www.imdb.com/title/tt0277027/</link>
  </movie>
  <movie>
    <title>Oldboy</title>
    <link>http://www.imdb.com/title/tt0364569/</link>
  </movie>
  <movie>
    <title>Training day</title>
    <link>http://www.imdb.com/title/tt0139654/</link>
  </movie>
  <movie>
    <title>Live flesh</title>
    <link>http://www.imdb.com/title/tt0118819/</link>
  </movie>
  <movie>
    <title>Liar Liar</title>
    <link>http://www.imdb.com/title/tt0119528/</link>
  </movie>
  <movie>
    <span class="hiddenSpellError" pre="">Carlito's</span> way
    <link>http://www.imdb.com/title/tt0106519/</link>
  </movie>
  <movie>
    <title>Blow</title>
    <link>http://www.imdb.com/title/tt0221027/</link>
  </movie>
  <movie>
    <title>The bank job</title>
    <link>http://www.imdb.com/title/tt0200465/</link>
  </movie>
  <movie>
    <title>Big fish</title>
    <link>http://www.imdb.com/title/tt0319061/</link>
  </movie>
  <movie>
    <title>25th hour</title>
    <link>http://www.imdb.com/title/tt0307901/</link>
  </movie>
  <movie>
    <title>Scarface</title>
    <link>http://www.imdb.com/title/tt0086250/</link>
  </movie>
  <movie>
    <title>Alfie</title>
    <link>http://www.imdb.com/title/tt0375173/</link>
  </movie>
  </movies>
</data>

Save the file under “list.xml”. It should be in the same directory as the .fla file.

The main idea is to populate the XML data into a List component and then set a List event. On double click we will navigate to the movie presentation on IMDB (Internet Movie DataBase) site.

  • Go back to Flash and create a new layer called “actions”. Open the Actions Panel.
//we need a ListEvent for our List
import fl.events.ListEvent;

//we create a variable to store the loaded XML
var xml:XML;
//the path to the xml file
var xmlPath:String = "list.xml";
//we create a loader and when the loading is over we call the xmlLoaded function
var loader:URLLoader = new URLLoader();
//a url request for our loader
var req:URLRequest = new URLRequest(xmlPath);
loader.addEventListener(Event.COMPLETE, xmlLoaded);
loader.load(req);

//adding a double click event handler to the list
xmlList.addEventListener(ListEvent.ITEM_DOUBLE_CLICK, itemDoubleClicked)

function xmlLoaded(event:Event):void{
	//this will be the List item object
	var item:Object;
	xml = new XML(event.target.data);

	//looping through the XML nodes
	for each(var movieItem:XML in xml.movies.movie){
		//creating a new item object
		item = new Object();
		//the part that the user sees
		item.label = movieItem.title.toString();
		//we store the URL for every movie presentation
		item.data = movieItem.link.toString();
		//we add the items to the List
		xmlList.addItem(item);
	}
}

function itemDoubleClicked(event:ListEvent):void{
	//here we store the selected item's link
	var linkTo:String = xmlList.selectedItem.data.toString();
	//on double click we navigate to the movie presentation
	navigateToURL(new URLRequest(linkTo));
}

That was all!

Advertisements

Comments»

1. Ana - April 30, 2012

Hi! Thanks for the tutorial, I was wondering iphow you would also add a place for say a description to be added in also. For example, when the user selects the movie, a description will then show up, along with the URL….

Could you guide me on how to do this?…I’m very new to flash and ur help will be greatly appreciated!

Thanks so much!

Ana

tournasdimitrios1 - April 30, 2012

@Ana
A good starting point could be (trace comment-string to IDE’s console):

<data>
  <movies>
    <movie>
      The <span class="hiddenSpellError" pre="The ">Shawshank</span> Redemption
      <link>http://www.imdb.com/title/tt0111161/</link>
	  <comment> Lorem Ipsum lores domer epses , flash CS3 </comment>
   </movie>   
  </movies>
</data>


function xmlLoaded(event:Event):void{
    //this will be the List item object
    var item:Object;
    xml = new XML(event.target.data);
    //looping through the XML nodes
    for each(var movieItem:XML in xml.movies.movie){
        //creating a new item object
        item = new Object();
        //the part that the user sees
        item.label = movieItem.title.toString();
        //we store the URL for every movie presentation
        item.data = movieItem.link.toString();
		item.comment = movieItem.comment.toString() ;
        //we add the items to the List
        xmlList.addItem(item);

    }

}


function itemDoubleClicked(event:ListEvent):void{
    //here we store the selected item's link
    var linkTo:String = xmlList.selectedItem.data.toString();
    //on double click we navigate to the movie presentation
    navigateToURL(new URLRequest(linkTo));
	// trace out the comment  section 
	var xmlComment:String = xmlList.selectedItem.comment.toString() ;
	trace("The comment variable is: " + xmlComment) ; 

}
2. Ana - May 1, 2012

Hi Tournas

Firstly, thank you so much for answering my question and for your quick reply.

Your tutorial is the only one that has been able to help me for an assignment that I have to do, and you are very good at explaining things 🙂

I have followed all of your steps, and completed both parts successfully (the original post, and then your reply to me)

My next step is to now get this comment to show up in the fla instead of just the trace (like say in a dynamic text field?) ….but i really am lost from this point on as to how to do that….I was wondering if I could kindly ask you to guide me on this last step to help me out further?

I am so appreciative of your help as I am going through this process of learning flash.

Thank you so much again.
Ana

tournasdimitrios1 - May 1, 2012

@Ana

  • Create a Dynamic Text-field on your Stage .
  • Give the text-field an instance name of “dynamicText” (the name is up to you ) and select “Multiline” from the drop-down menu that is set to “Single Line” by default. Set the field to “Anti-alias for readability” from the drop-down menu choices as well.
  • Choose any additional characteristics desired such as font, size, selectable, and bold.
  • The code for setting our text into the dynamic textfield is :

    function itemDoubleClicked(event:ListEvent):void{
        //here we store the selected item's link
        var linkTo:String = xmlList.selectedItem.data.toString();
        //on double click we navigate to the movie presentation
        navigateToURL(new URLRequest(linkTo));
        // trace out the comment  section
        var xmlComment:String = xmlList.selectedItem.comment.toString() ;
        dynamicText.text =  xmlComment ; 
    //or   dynamicText.text = xmlList.selectedItem.comment.toString() ;
    
    }
    3. Ana - May 2, 2012

    Thank you so, so very much Tournas!

    I can’t even begin to tell you how much you have helped me! I am slowly learning flash ans ActionScript now, and I would have never been able to get this far without your help!

    Your instructions worked perfectly and I am now able to populate a description into my swf! I’m so happy!

    I am now trying to get all the other elements of my XML into the swf also

    …I am struggling a bit though… :/ ….there is a part of my XML where we have to list all the ‘gigs’ that the certain bands are playing at (the XML is all about bands and we have to make a list of the band names and when the user clicks the band name all the information of their gigs are displayed (the venue, date, time, etc…)

    with all your guidance, so far I am able to populate the description of the bands, but I am struggling a bit to correctly populate the venue, time, date, information. I was wondering if you had any idea on this part. Here is a small part from my xml as an example:

    Revlona

    description of Revlona Band here…etc…..

    revlona.jpg

    16/07/2011
    1900

    Railway Hotel, Boga
    Station Street, Bogan Gate
    NSW
    http://www.gdaypubs.com.auNSWbogan+gate.html

    30/07/2011
    2000

    Docks Hotel, Sydney
    Shop 255 Harbourside, Darling Harbour
    NSW
    http://www.dockshotel.com.au/

    …..as you can see there are several gigs for each band, and this is where I am very confused as to how I would cycle through all of it to display…….you’ve been a huge help to me and I really really appreciate it all, I will be forever grateful to you if you can guide mo with this part also…

    Thank you so much Tournas, this is a wonderful website and a great help for learners like me 🙂

    Ana

    tournasdimitrios1 - May 2, 2012

    @Ana
    The concepts remain the same no matter the size of the xml-file . I know , it’s a hard job to develop the structure of the xml-file , though , the benefits are obvious ( portable applications , no need to re-combile the flash file ) .
    For large projects , a technique named e4x-parsing has to implemented to accomplish an efficient functionality . E4x , as a native extension into Actionscript , is a valuable tool to parse specific sections from a xml-file . Combining e4x with native Actionscript loop-statements can help you achive the goal . This link or this link is a good starting point for learning these concepts .

    4. Ana - May 3, 2012

    Oh I see, thanks for the advice once again Tournas 🙂

    ….I am going to go and try the tutorial from the links u provided to me, I have to admit I feel a bit overwhelmed when I read through it, it seems very confusing to me. :(. But I am going to give it my best shot. I will come back here to let u know how I go, and to say thanks again! 😀

    Take care
    Ana

    5. Demon - September 7, 2012

    Nice tutorial and for the most part it did help me with the adding items to a actual list box component but there is one issue I am having. When i try to obtain the item that was selected by using the method that you have I get a null reference error on lstmenu.selectedItem.data.toString();

    where the lstmenu is is the name of my list box on the actual page that users will see and its where the items are being added to.
    is there a issue that I may have over looked?

    tournasdimitrios1 - September 7, 2012

    @Demon
    Could you copy/paste the Actionscript-code into the comment section below ? I’ll try to emulate the error .
    ps what is the version of your Flash IDE (CS3 , CS4)


    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s