Creating a Portfolio Scene in Flash

By Blue_Chi | Macromedia Flash | Intermediate

This tutorial will teach you how to create a portfolio scene in Flash similar to the one displayed below. Our portfolio will feature an interactive display unit that shows a larger thumbnail of our selected product. Navigate the flash movie below to see the effect in action. Click on the buttons to display larger versions of the images.

Photography by Broken Dream - Used with permission.

This scene was created by giving each button two separate actions, one triggered upon rolling the mouse over the button to tell the central screen to show the required image, and a second action to be triggered upon clicking the button to open the actual image file. You will be required to have some basic ActionScript knowledge to follow this tutorial.

You will need to download this FLA file to follow this tutorial. (Runs in MX2004 and 8)

Starting Scene

Open the file you have downloaded to see our four buttons and a blue square on the scene. No symbols have been created of any of these. We will have to convert these to symbols to manipulate them via ActionScript. Select each of these images by turn and convert them to a Symbol by pressing on F8 (Or go to Modify>Convert to Symbol). Convert the first button on the left to a Button Symbol. The name here doesn't matter, you can name it Button1.

Create a new Symbol F8

While the button is still selected, access the Properties Panel (Ctrl+F3 in Flash 8) and give this symbol an instance name of btn1_btn. The instance name of an object is the name that we can use to refer to this object while scripting to manipulate it.

Instance name

Repeat the same process to the other three buttons, give each of them a different Symbol name, and name btn2_btn, btn3_btn, and btn4_btn. (From left to right)

Our buttons are now ready, select the only left object in the scene: The display unit. Select this and press F8 to convert it to a Movie Clip Symbol. The name of the symbol doesn't matter, give it the name of Display Unit.

The Instance name in the Properties Inspector matters A LOT, give it the name myScreen_mc.

The content to be displayed in our Display Unit will have to be put inside it, double click on the Display Unit to view its contents. On the timeline of the Display Unit, create two new layers in addition to the original layer you had. Name the one at the top Actions, and the one below it Images.

Add 2 new layers

We will need four keyframes in the Images layer to put our images in there. You can simply click on the first frame on that layer and then press F6 three times to add three extra keyframes in there (or go to Insert>Timeline>Keyframe). It doesn't matter if the frames of the layers below it extend in our example.

Add keyframes

Open up the library by pressing Ctrl+L (or go to Window>Library) and put the big copies of the images in those frames you created in the order of their names (BigImage1, BigImage2, BigImage3, BigImage4). Align them directly over the original blue square, they should be of the same size.

Add the images from the library

We will now stop the movie from playing these frames without us telling it to do so, click on the very first frame in the layer named Actions and then press F9 to open up the ActionScript panel (or go to Window>Actions). Simply type Stop(); to stop the movie from playing those frames automatically.

Stop Action

We have now completed setting up the whole scene, the only thing left for us to do is writing our script. If you are still on the Display Unit timeline click on Scene 1 to go back to the main timeline. Once there, click once on the first frame in the Actions layer and press F9 to open up the ActionScript panel.

Scripting those buttons to give two basic actions is dead easy. By putting our code in the main timeline instead of the buttons themselves make it easier to check and update the code. To tell the first button to command the Display Unit to show the first image we simply make the button go and stop at the first frame.

btn1_btn.onRollOver= function(){
myScreen_mc.gotoAndStop(1);
}

We also need to tell the button to do open up the actual image when the user clicks on it, we do this by using the getURL method:

btn1_btn.onPress = function() {
getURL("1.jpg");
};

This concludes our script for the first button. We simply repeat the same thing for the other buttons by changing the name of the button and the number of the image!

btn1_btn.onRollOver= function(){
myScreen_mc.gotoAndStop(1);
};

btn1_btn.onPress = function() {
getURL("1.jpg");
};

btn2_btn.onRollOver= function(){
myScreen_mc.gotoAndStop(2);
}

btn2_btn.onPress = function() {
getURL("2.jpg");
};

btn2_btn.onRollOver= function(){
myScreen_mc.gotoAndStop(2);
};

btn2_btn.onPress = function() {
getURL("2.jpg");
};

btn3_btn.onRollOver= function(){
myScreen_mc.gotoAndStop(3);
};

btn3_btn.onPress = function() {
getURL("3.jpg");
};

btn4_btn.onRollOver= function(){
myScreen_mc.gotoAndStop(4);
};

btn4_btn.onPress = function() {
getURL("4.jpg");
};

You can test the movie by pressing Ctrl+Enter to see your movie running. This is one of the most basic ways of creating a portfolio scene in Flash using a very simply structure.

Optional:

The code that we have written could be written in a much clearer way using Functions. You can read this tutorial to learn more about these. Our code be written this way using Functions.

function showing(frame:Number) {
myScreen_mc.gotoAndStop(frame);
};

function opening(frame:Number) {
getURL(frame+".jpg");
};

btn1_btn.onRollOver = function() {
showing(1);
};
btn1_btn.onPress = function() {
opening(1);
};
btn2_btn.onRollOver = function() {
showing(2);
};
btn2_btn.onPress = function() {
opening(2);
};
btn3_btn.onRollOver = function() {
showing(3);
};
btn3_btn.onPress = function() {
opening(3);
};
btn4_btn.onRollOver = function() {
showing(4);
};
btn4_btn.onPress = function() {
opening(4);
};

This concludes our tutorial. You can view the end result FLA if you had any problems applying this tutorial. I have written a tutorial on how to create a Dynamic Flash Portfolio which loads the images from an external source and another tutorial for creating a Simple Flash Website, both of which you might find interesting to read if you found this tutorial helpful.

- End of Tutorial