XML Paged Portfolio

XML Paged Portfolio folders

/published
Default folder for publishing, the only folder you need for easy setup: /source
FLA and Actionscript 3 files, for advanced customization: /images
Default folder for all images used in the portfolio, changeable through XML: /documentation
Where this document lives

In the /source folder, open the 'portfolio.xml' file in a text editor, or html tool like Dreamweaver.
Customize the options:
(these are also printed in the XML file for reference)

speed
(0-5...) multipler, where 1 is normal, .5 is half speed, 2 is double, etc.

margin
(px) space on either side of items, separation from arrows

textColor
(hex color 0xRRGGBB) color for loading number and item captions

buttonColor
base color for top links, bottom navigation buttons, and side arrows

hoverColor
mouse-over color for top links, bottom nav, and arrows

shadowColor
color for shadow under items

shadowAlpha
(0-1) transparency for shadow

captionSize
(fontsize) font size for caption text under each item

hoverScale
(0-2...) mouse-over scale for items, 1 is no scale

hoverHighlight
(0-10) mouse-over highlight strength

disableMouseOver
(true-false) removes roll-over behavior for items; browsing mode

hideCategoryList
(true-false) if you only have one category, make this true to hide the selector at the top
Next, set up the categories and items you want displayed. Follow the format of the existing categories in making new ones. Each <image> node must have a 'src' attribute, a 'caption', and 'href' (for linking). The last two can be empty however.
Save this xml file, and refresh the index.html to see the changes. Thats it, really!
Read on for more advanced customization, which would require the Adobe Flash program.

Changing the font
1. Open the FLA in the /source folder. Right-click on 'main font' in the library, and choose Properties (or double-click it). Change the font!
2. Publish the file (Shift-F12 by default). This new SWF will be placed in the /published folder. You can change the publishing directory and filename under File>Publish Settings.
Changing the movie width and height
1. Open the FLA in the /source folder. Go to Modify > Document OR in the Properties bar on the bottom, click next to Size to see the document properties.
2. Change the width and height-- the elements will adjust to the new size upon publishing.
3. In the /published folder, open index.html in a text editor. Find the line that beginsswfobject.embedSWF('XML_portfolio.swf', 'flash', '980', '350', '9.0.45'...and update the width and height values there (in this case 980 and 350).
Changing the graphics
1. Within the source FLA, double click in the library on the graphic you want to modify: 'arrow', 'categoryChooser', 'pager icon', or 'preloader'.
2. Delete the graphic and add your own! You can set the active area of the button by changing the 'hit' layer, or adding a similar transparent shape at the bottom layer.
Changing the preloader

Follow the steps above to find and double-click the 'preloader' movie clip.
Within the 'preloader', locate the 'loadCircle' movieclip. It is masked dynamically and becomes the revealing ring. You can modify this graphic, keeping in mind that the mask will be a pie shape with a diameter of approx. 60px. (Of course more advanced coders can go right into the script and change anything.)
The 'points' movie clip is played according to the loading progress. You can change the individual animations, or remove them. You can change the number of frames, or even add a long animation in its place.
The text field in the 'preloader' movie clip shows the number of images loaded. The color and size are overridden by the options in the code.