XML Tutorial

Using an external XML file with the pageFlipper component allows you to quickly and easily update your pages and settings without having to edit the .fla file.

1. Open Flash and start a new file.

2. Press Ctrl+F7 (Windows) or Cmnd+F7 (Mac) to open the components panel, locate the pageFlipper component and drag a copy of it onto your stage. With the component still selected press 'Q' to highlight the free transform tool and resize the component to your desired size.

3. With the component still selected press Ctrl+F3 (Windows) or Cmnd+F3 (Mac) to open the properties panel and select the parameters tab.

4. Double-click the XML File parameter and enter a name for your xml file. For the purposes of this tutorial enter 'myxml.xml' (without the quotes).

5. Open your favourite text editor (for example Notepad on Windows or TextEdit on Mac) and type the following code:

<?xml version="1.0" encoding="utf-8"?>
	
<pageFlipper>

	<settings startPage="1" followSpeed="7" flipSpeed="5" pageFolder="pages/" overCornerSize="50" clickCornerSize="50" flipSound="mysound" scaleToFit="true" loadOnDemand="false" shadowDepth="50" backColor="0x234567" displayOnLoad="false" numbering="none" pageOrder="first to last"/>

	<page>page1.jpg</page>

	<page>page2.swf</page>

	<page>page3.png</page>

	<page>page4.gif</page>

</pageFlipper>

Save this XML file as 'myxml.xml' (without the quotes) in the same folder as your .fla file.

6. Prepare your images, for the purposes of this tutorial they should be named 'page1.jpg', 'page2.swf', 'page3.png' and 'page4.gif' (if you want to use different file names you should modify the xml file accordingly). Save them in a folder named 'pages' as specified in the settings tag.

7. Return to your .fla file and press Ctrl+s (Windows) or Cmnd+s (Mac) to save your file and then press Ctrl+enter (Windows) or Cmnd+enter (Mac) to test it.

Understanding the XML

The XML Declaration

The first line of the XML file above is a typical XML declaration. It declares the version of the XML file and the encoding that will be used.

The Settings tag

In this XML element you can set all of the parameters that you can set in the parameters panel. Any value that you set here will overwrite any values entered in the parameters inside Flash.

The Page tag

The page element is used to define each page that the pageFlipper component should either load from the folder specified in the settings element or import from the flash file's library.