HOW TO CREATE A SIMPLE FLASH WEB SITE (XML VERSION)

Download XML file (index.xml) for exercise.

In these lessons, you will learn how to create simple Flash Web Site based on an XML file. The advantage of using XML is that you don't have to use Flash to update your site. You only have to update the XML file.
For a more advanced Flash website, see the tutorila on How to Create Multi-purpose Application.

Open and Preview XML File

Select File > Open and then ensure that All Files are selected from the list to see the index.xml file.
Open index.xml by Double-clicking it.
Preveiw xml file to see its:
1. Top-level node (1):
2. Non-repeating nodes (metadata) (2) (Not being used in this tutorial):
3. Repeating nodes (4):
4. Children nodes of the repeateing nodes (5):
  - <link_item_name>...</link_item_name>
  - <main_body>...</main_body>
  - <url>...</url>
  - <thumbnail_img>...</thumbnail_img>
  - <video>...</video>

Create new Flash file and set dimensions, interface elements, etc.

Create a new Flash ActionScript 3 file and save it as SimpleFlashWebSite_Expert.fla.
Create four new layers from top to bottom and name them ActionScript, Border, Header, Footer and mainContent.
Set stage size to 960W x 600H in the Property Inspector by clicking on the document properties button -- the one with the current stage dimensions on it.
Create Border and Dividing line:
Draw a rectangle with no fill and a 1-pixel solid black stroke of any size with the Rectangle tool.
Set rectangle x and y both to zero and width to 960 and height to 600 in the Property Inspector.
Select View > Rulers from the menu to see rulers displayed. Using the Line tool, set the Stroke to 1 pixel and the color to black and then while holding down the SHIFT key to constrain the line, draw a line from the 150px mark on the rule at the top of the stage to the bottom of the stage.
Create Header:
With the Header layer selected, use the Rectangle tool with stroke turned off and a fill color of your choosing, draw a rectangle with a width of 960 of a height of 100 and x/y of zero. TIP: Using Property Panel to adjust dimension and position.
Use the Text Tool with a large font size and a contrasting color with the rectangle to add a header title for your web site.
Using the SHIFT key, select both the Rectangle and the Text Tool and convert them to a symbol (F8) and give it an instance name of Header.
Create Footer:
With the Header layer selected, use the Rectangle tool again with stroke turned off and a fill color that is the same as the header, draw a rectangle with a width of 960 of a height of 20 and and "x" of 0 and a "y" of 580. TIP: Using Property Panel to adjust dimension and position.
Use the Text Tool with a small font size and a same color as the text's header to add a footer to for your web site.
Using the SHIFT key, select both the Rectangle and the Text Tool and convert them to a symbol (F8) and give it an instance name of Footer.
With the mainContent layer selected, select Window > Components to open the Components Panel. Click the plus sign to open the User Interface folder in the Component Panel and drag a copy of the TextArea component anywhere on the stage.
With the TextArea component still selected, in the Property Panel, set the width to 750, the height to 425, the x to 180 and the y to 130 and then give it an instance name of "mainContent"

Generate NavBar Buttons with data from XML file

Create URLLoader (not UILoader) and XML object to hold data from an XML file:

Select the ActionScript layer and write the following code in the ActionScript panel (F9).
Why? To create URLLoader object and add URLLoader load method to it and pass it a URLRequest object that will point to the actual index.xml file.

var loader:URLLoader = new URLLoader();
loader.load(new URLRequest("index.xml"))

Caution: Note two ending parenthesis.
Write the following code below current code.
Why? To create a addEventListener for the loader object and an event Handler function (onDataLoad) to create an XML object and trace statement

loader.addEventListener (Event.COMPLETE, onDataLoad);

function onDataLoad (eventObject:Event):void
    {
      var applicationData:XML = new XML(eventObject);
      trace(applicationData)
    }

In this event handler, you created an XML object and passed it data from the URLLoader created earlier to provide data for the XML object and added a trace statement to see the result.

Save and Test

Result Checkpoint: You should be able to see some METADATA about the event that was dispatched or fired (i.e, its type, etc.) displayed in the Output panel.
Add ".type" to the end of the eventObject.

var applicationData:XML = new XML(eventObject.type);
Save and Test

Result Checkpoint: You should be able to see the type of event that was dispatched or fired displayed in the Output panel.
Replace ".type" with ".target" at the end of the eventObject.

var applicationData:XML = new XML(eventObject.target);
Save and Test

Result Checkpoint: You should be able to see the target object that made the function called displayed in the Output panel.
Add ".data" to the "eventObject.target" to "drill down" to get the the data in the loader object. (Do not delete the word target).

var applicationData:XML = new XML(eventObject.target.data);

Result Checkpoint: You should be able to see the complete XML file. Examine it to see the XML tree structure and take note of the repeating nodes (list_item).

Since the "list_item" nodes are repeating nodes, we will need to drill down deeper just like a file structure (directory/directory/file) to retrieve each node and add them to a XMLList.

Comment out trace and add the following code in bold to the onDataLoad function.
Why? To create an XMLList (similar to an Array) and to trace it.

function onDataLoad (eventObject:Event):void
    {
         var applicationData:XML = new XML(eventObject.target.data);
         //trace(applicationData)
         var MenuList:XMLList = applicationData.list_item
         trace(MenuList)
    }

Save and Test

Result Checkpoint: Only the list_item REPEATING nodes should be returned and not the complete XML file as before.

Comment out the trace and add the follow code in bold to the onDataLoad function
Why? Since MenuList is similar to an array we can use a "for" loop to iterate through it to get the data we need.

function onDataLoad (eventObject:Event):void
    {
         var applicationData:XML = new XML(eventObject.target.data);
         //trace(applicationData)
         var MenuList:XMLList = applicationData.list_item
         //trace(MenuList);

         var menu_total:Number = MenuList.length()
//trace(menu_total);

        for (var i:uint=0; i<menu_total; i++)
          {
var MenuNames:String = MenuList.link_item_name[i];
              trace(MenuNames)
           }
    }

Caution: Note parenthesis on the MenuList. An XMLList has length as a method -- length() unlike a property -- length in an Array.   Also, watch out for cases, spaces, and braces.

Result CheckPoint: You should see a list (i.e., Home, Products, Services, Contact Us) from the index.xml file in the output panel.

Comment out the two previous lines. (They were only used to show the data that will be used to generate buttons in the next step.)
Add the import statement at the top of the code:
NOTE: Some classes (i.e., Button Class) needs to be imported into the application in order for it to be used.

import fl.controls.Button;
Add the follow code in bold to the onDataLoad function
Why? Use a "for" loop to iterate through data to create generic objects with properties while at the same time adding functionality (button event) to the Button component which will act as our menu.

function onDataLoad (eventObject:Event):void
    {
         var applicationData:XML = new XML(eventObject.target.data);
         //trace(applicationData)
         var MenuList:XMLList = applicationData.list_item
         //trace(MenuList)

         var menu_total:Number = MenuList.length()

        for (var i:uint=0; i<menu_total; i++)
          {
// var MenuNames:String = MenuList.link_item_name[i];
           // trace(MenuNames)
            var btn:Button = new Button();
            btn.x = 25;
            btn.y = 110 + (i*25);
            btn.width = 100;
           btn.label = MenuList.link_item_name[i];
         btn.name = applicationData.list_item.main_body[i];
           addChild (btn);
           }
    }

Caution: Note parenthesis. An XMLList has lenght as a method -- lenght() unlike a property -- length in an Array. Also, watch out for cases, spaces, and braces.
NOTE: The "for" loop is used to: CREATE, POPULATE (Buttons labels and names properties) and AUTOMATE (Buttons action).

Modified the following code:

BEFORE:

function onDataLoad (eventObject:Event):void
    {
         var applicationData:XML = new XML(eventObject.target.data);

AFTER:

var applicationData:XML
function onDataLoad (eventObject:Event):void
    {
         applicationData = new XML(eventObject.target.data);

IMPORTANT NOTES:
-- The reason for moving the variable OUTSIDE the function is that when a variable is defined INSIDE a function, it is LOCAL to that function and its values can not be seen OUTSIDE that function. When a variable is defined OUTSIDE a function, it is GLOBAL and can be seen or recognized anywhere in the code. In this case, the applicationData can not be seen, so it was moved.

-- Since the list_items are repeating nodes and each node can be thought of as a separate object with properties, it is easy to see how you can use the object.property technique of the E4X syntax to get to a property (i.e., MenuList.link_item_name or MenuList.main_body). However, because each repeating node can be thought as a separate object you also need to have a way to specify which node (or object) you want. As a result, you use the square brackets "[ ]" syntax to get the the correct node. (i.e., MenuList.link_item[i], or MenuList.main_body[i]
-- While data can be "gleaned" from the XML object, it is easier to "store and hide" the data from the XML into another component (in this exercise, a Button component) and then reference that component instead of the XML file.

Result CheckPoint: You should get an TypeError

Open the Component Panel and then open the UI folder and drag and drop a Button component anywhere on the stage and then immediately delete it.
NOTE: The reason for this is that even though we imported the Button class using the import fl.controls.Button on line 1, because the Button uses graphics element, it has to be in the library. So draging, dropping and then deleting it places the Button symbol in the library.

Result CheckPoint: You should see four buttons that were generated with labels (i.e., Home, Products, Services, Contact Us) from the index.xml file.

Connect Buttons to TextArea component

Add following code highlighted in bold to the current code.
CAUTION: Pay attention to the curly brackets.
Why? The btn.addEventListener(MouseEvent.MOUSE_DOWN, onClick) is used to "listen" for a MOUSE_DOWN event and then execute the onClick event handler which traces what button is clicked.

        for (var i:uint=0; i<menu_total; i++)
           {
// var MenuNames:String = MenuList.link_item_name[i];
           // trace(MenuNames)
            import fl.controls.Button;
            var btn:Button = new Button();
            btn.x = 25;
            btn.y = 110 + (i*25);
            btn.width = 100;
            btn.label = MenuList.link_item_name[i];
            btn.name = applicationData.list_item.main_body[i];
            addChild (btn);
            btn.addEventListener (MouseEvent.MOUSE_DOWN, onClick);
           }
           }

        function onClick (eventObject:MouseEvent):void
        {
            trace ("You clicked on the " + eventObject.target.label + " button");
        }

IMPORTANT NOTE: Notice that we are "sneaking in" the data for the TextArea component in the btn.name = MenuList.link_item_name[i];. Normally, the .name property is used to assign a name to a button.

Save and Test.

Result Checkpoint: By clicking on each button, the Output panel will show which button was clicked.
Add the following code highlighted in bold:
Why? To Populate the TextArea component whenever a button is clicked from data from the XML file.

function onClick (eventObject:MouseEvent):void
        {
            trace ("You clicked on the " + eventObject.target.label + " button");
mainContent.htmlText = eventObject.target.name
        }

NOTE: Notice that htmlText property is used instead of the text property so that basic HTML elements can be included in the XML file.

Finishing touches

Add first page (i.e., home page) to TextArea component and make first button highlight on load:

Add following code in bold at the bottom of "for" loop.
Why? So that the first page content (i.e., home page) displays automatically on load without having to click on the first button (in this case, Home) and the first button get highlighted as well.

        for (var i:uint=0; i<menu_total; i++)
           {
// var MenuNames:String = MenuList.link_item_name[i];
           // trace(MenuNames)
            import fl.controls.Button;
            var btn:Button = new Button();
            btn.x = 25;
            btn.y = 110 + (i*25);
            btn.width = 100;
            btn.label = MenuList.link_item_name[i];
            btn.name = applicationData.list_item.main_body[i];
            addChild (btn);
            btn.addEventListener (MouseEvent.MOUSE_DOWN, onClick);
           }
        mainContent.htmlText = applicationData.list_item.main_body[0];
mainContent.editable = false;

NOTE: The "mainContent.htmlText = applicationData.list_item.main_body[0];" is the similar to the one in the "for" loop except it is hardwired with zero instead of "i" to retrieve the first node (which should always be the first page) of a web site or an application. The mainContent.editable=false; prevents the page from being editable but still selectable for copy text.

Save and Test.

Result Checkpoint: The first page should be loaded automatically and the main Body text is non-editable but selectable.

(Bonus) Converting Web Site to a Photo Gallery

Download images use for this exercise and unzip it into exercise folder.

UPDATE FLASH FILE:

Select File > Save As and save the SimpleFlashWebSite_expert.fla as SimpleFlashPhotoGallery.fla
Change the reference on line 3 to read index2.xml.
NOTE: We will update this xml so that we can maintain the original for the SimpleFlashWebSite application.
Modify the code in line 19 and 20:

// mainContent.source= applicationData.list_item.main_body[0];
// mainContent.editable = false;

NOTE: Because we will change the component next from a text component (i.e., TextArea) to a graphic component (i.e., UILoader), we need to change the property to represent a graphic instead of text object. Also, since we will not be using a text compoonent, line 20 is commented out.
Modify the code on line 45 to read:

mainContent.source = eventObject.target.name;

NOTE: See note is step 3.
Select Window > Components from the menu and then drag and drop a UILoader component anywhere on the stage and immediately delete it.
NOTE: This will add it to the library so we can use it in the next step.
Right-click on the mainContent TextArea component and select Swap Symbol... and select the UILoader from its dialog box.
NOTE: The advantage of using the Swap symbol technique is that it perserver the instance name as well as the size and position of the object being swapped.
Open the Component Inspector panel (or the Component panel in CS5 or above) and deselect the scaleContent option.
NOTE: This will allow the images to scale correctly within the UILoader component.

UPDATE XML FILE:
Open index.xml file within Flash and save it as index2.xml.
Change Home, Products, Services and Contact Us in the <link_item_name> tags to African Violet, Bird of Paradise, Iris and Roses, respectively.
Change the content in the <main_body> tags to images/African_Violet.jpg, images/Bird_Of_ Paradise.jpg, images/Iris.jpg and images/Roses.jgp, respectively (i.e., <main_body>images/African_Violet.jpg</main_body>).
NOTE: Notice the images folder is included in the string as well as the image format (.jpg).

TEST MOVIE:
Test movie (Control + Enter) and click on each button to see the image change.

(Bonus) Converting Photo Gallery to a Video Gallery

Download videos for this exercise and unzip it into exercise folder.

Since a Image and Video component uses the same "source" property to load its content (image or video, respectively), the only major change to convert from a photo gallery to a video gallery is to swap out the component and giving it the same instance name.

UPDATE FLASH FILE:

Select File > Save As and save the SimpleFlashPhotoGallery.fla as SimpleFlashVideoGallery.fla.
Change the reference on line 3 to read index3.xml.
NOTE: We will update this xml so that we can maintain the original for the SimpleFlashWebSite application.
Select Window > Components from the menu and then drag and drop a FLVPlayback component onto the center of the stage and give it the same instance name as the Video Gallery (i.e., mainContent) in the Property Inspector.
NOTE: You can not swap a video componet like you did when you swapped out a TextArea component for a UILoader component in the previous example.
Open the Component Inspector panel (or the Component panel in CS5 or above) and select the autoPlay option.
NOTE: This will allow the video to play when the movie first start. You can deselect this option if you do not want th video to play on start.

UPDATE XML FILE:
Open index.xml file within Flash and save it as index3.xml.
Change text in the <link_item_name> tags like you did for the images
Change the content in the <main_body> tags like you did for the images except point hte the video folder
NOTE: Notice the videos folder is included in the string as well as the image format (.flv).
Download Example XML file

TEST MOVIE:
Test movie (Control + Enter) and click on each button to see the video change.