Constructing the PictureViewer: Building the Interface

 

Flash 1: The XML player.

Having examined the XML code you will be using and been given a very quick over view of how Flash accesses and sends XML data, we can now start to construct the Picture Viewer shown above.

How it works is relatively uncomplicated:

• Click a button

• Flash goes to the next or previous node in the XML document and grabs the image information and the text associated with the image.

• The image is placed into an EmptyMovieClip and the text is tossed into a preformatted dynamic text box.

• If you are viewing the last image- pic6.JPG- and click the forward button, nothing will happen. The same thing occurs if you are looking at the first image- pic1.JPG- and click the back button.

Let's go to work!

Before you start, download the exercise files to your hard drive.

Building the interface:

1. Open a new Flash document that is 340 pixels wide by 320 pixels high.
2. Set the background colour to #333333
3. Add a layer
4. Name the top layer "Actions"
5. Name the bottom layer "Interface"
6. Select the interface layer.
7. Select the text tool, click once on the stage and enter "Vancouver Island".
8. Set the text as 16 point Arial, Bold.
9. Set the text colour to white.
10. Select the text and drag it to the upper left corner of the stage. With text selected, set the Text property in the Property inspector to "Static text".
11. Select Insert>New Symbol (F8) and create a new button symbol named "Button_btn".
12. When the Button Symbol Editor opens create a small 15 x 17 pixel triangle in the Up keyframe.

Image 1: The navigation button is created.

13. Click the "Scene 1" button to return to the main timeline.
14. Select the Interface layer ,select the Text Tool and draw a text box at the botton of the stage. Enter "Sample text" into the text box.
15. With the text selected set the text as 16 point Palatino Linotype and set the colour to white.
16. With the text selected set the Text type property to "Dynamic text" in the Property inspector.
17. Drag a copy of the button symbol to the bottom right corner of the stage. Give it an instance name of "btnForward" in the Property inspector.
18. Copy and paste the button into the Interface layer. Drag the copy to the bottom left corner of the stage.
19. Select the Transform tool and flip it so it is pointing in the opposite direction.
20. With this button selected, give it the instance name of "btnBack" in the Property inspector.
21. Save the file to the Exercise folder.

Now we have to write the Actionscript that makes the Picture Viewer work. Click here.

Image 2: The interface is constructed.

The line above the buttons and text is optional. I added it to my interface to break up the stage and separate the images from the text and navigation. The 3D effect is quite simple to accomplish. It is nothing more than 2 lines that "butt" up against eachother. The black line is 2 pixels wide and the light line is is a a grey line (#999999) that is 1 pixel wide. The black line is placed over the grey line.