flash gallery = flash+ php

Step 1

First, download movie photos that we will use for this lesson and place it at the same folder as flash and xml file.


//
Step 2

Go to the XML editor. I'm using Notepad. Then, enter this XML code inside the XML editor.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<slideshow>
<photo url="img/movie1.jpg" caption="This is Watchmen!" />
<photo url="img/movie2.jpg" caption="This is Lost!" />
<photo url="img/movie3.jpg" caption="This is Superman!" />
<photo url="img/movie4.jpg" caption="This is 300!" />
<photo url="img/movie5.jpg" caption="This is Quantum Of Solace!" />
</slideshow>


After that, save this XML file as movie.xml

Step 3

Create a new flash document.

Step 4

Call the current layer actions. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 5

Create a new layer above the layer actions and name it visual.

Step 6

Select visual layer, take the Rectangle Tool (R) and draw a rectangle shape about 400x300 px (as the dimensions of movie photos) with no stroke. On the rectangle, we will load our photos.

Step 7

While the rectangle shape is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.

Step 8

While the rectangle shape is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 9

Select the new made movie clip and  go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip holder. See the picture below!



Step 10

It's time for previouse and next buttons. Using the flash tools for drawing, draw simple previouse and next buttons like it is shown on the picture below.



Step 11

Select the Selection Tool (V) and click once on the previouse button. Then, go again to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip previous. See the picture below!



Step 12

Click now on the next button and for instance name type next. See the picture below!



Step 13

It's time for dynamic text field. Seelct the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Make the adjustments as follows:



Then drag out a text field and place it on the position like it is shown on the picture below!



Step 14

Type one letter on the dynamic text field and align it with the center. See the picture below!



Step 15

After that, for instance name type caption. See the picture below!



Step 16

It's time for action script. Select the first frame of layer action script and go to the AS panel (F9). Then, enter this code inside the actions panel:

var x:XML = new XML();
x.ignoreWhite = true;

var urls:Array = new Array();
var captions:Array = new Array();
var whoIsOn:Number;

x.onLoad = function(success) {
var photos:Array = this.firstChild.childNodes;
for(i=0;i
urls.push(photos[i].attributes.url);
captions.push(photos[i].attributes.caption);
}
holder.loadMovie(urls[0]);
caption.text = captions[0];
whoIsOn = 0;
}

x.load("movie.xml");

previous.onRelease = function() {
if(whoIsOn > 0) {
whoIsOn--;
holder.loadMovie(urls[whoIsOn]);
caption.text = captions[whoIsOn];
}
}

next.onRelease = function() {
if(whoIsOn < urls.length-1) {
whoIsOn++;
holder.loadMovie(urls[whoIsOn]);
caption.text = captions[whoIsOn];
}
}


We're done!

Test your xml gallery and enjoy!

Download example