Creating a Dynamic Portfolio in Flash

By Riyadh Al-Balushi (Blue_Chi) | Flash | Intermediate

We previously published a tutorial on how to create a simple portfolio in Flash that features a selection of thumbnails and an image display unit. This tutorial will teach you how to create an advanced portfolio that dynamically loads images and text from external sources. An example SWF movie could be seen below featuring images and texts which are being loaded at real time from external image and text files.

The movie that we see above loads all the images, their titles, and the description from external files that are loaded when the user clicks on the specified button. Not only that this makes updating the content of your portfolio much easier as you will only have to alter your text files and the images without touching your FLA again, but it also gives the user the choice to load whatever content he chooses to view instead of forcing him to load all the content in advance whether he ends up watching it or not.

This is an intermediate level tutorial that will require basic knowledge on how to use the Loader Component, the LoadVars Class, and functions. I have previously written short tutorials on these three topics and you should be able to follow this tutorial easily if you read these three pieces before attempting this tutorial. This tutorial will be divided into two parts: the first will deal with the images and the second will deal with the text. Creating a preloader for those images and text goes beyond the scope of this tutorial and hopefully will be explained in a future tutorial.

Part I - Loading Images Dynamically

I will provide you with all the material that you will need to follow this tutorial so that you can concentrate on learning how to make it work instead of worrying about the images and the graphics. The following zip file contains the FLA (Works with MX2004 and later) file with the background graphics ready for you. The zip file also contains three small thumbnails and three larger copies of the images. You will need to extract all these from the zip file and place them in a single folder for this tutorial to work.

Empty stage.

We'll start off with the images as stated earlier. We will use the Loader Component to load our images, so once you have opened your FLA, access the Components Panel (Window>Components) and drag a copy of the Loader Component - it should be found under the 'User Interface' category. You will have to place four of these in our Components Layer on the timeline, the three vertical ones will act as our buttons while the main one in the centre will load our larger copies of the images. You can resize them using the scale tool and the properties panel to reach a result similar to the one below. (The dimensions of a thumbnail box is 90x60, while the main display box is 340x200 - you can precisely set these using the properties inspector.)

Inserting the components.

We will now give our components instance names to be able to manipulate them via ActionScript. Access the Properties Inspector and give the side components the names comp1_btn, comp2_btn, comp3_btn respectively starting from the top. Assign the instance name main_mc to our main display component at the centre.

Assigning instance names to our components.

It's time to put the code, click on the single frame in our Actions layer and then access the Actions (Right click the frame>Actions) to assign our script to the timeline and not any of the objects. You should put all your code in a single place on the timeline instead of scattering the code all over the place.

We'll start off by simply loading all of our thumbnails of the buttons. This should be easy if you read the other Loader Component tutorial:

comp1_btn.contentPath = "thumb1.jpg";
comp2_btn.contentPath = "thumb2.jpg";
comp3_btn.contentPath = "thumb3.jpg";

You can test the movie to see the buttons take their images if you would like to. We will now make each of these components a button that tells the main component to load a specific image according the button clicked. Any movie clip in modern Flash can act as a button by simply attaching a button event handler property such as .onRelease. We will combine the usage of this with a function to make the scripting faster and to reduce the amount of code written. You should review the functions tutorial if you do not know how to use functions. Our function will simply tell the main component to load the image that we specify, button 1 will load image 1, button 2 will load image 2, and button 3 will load image 3.

function portfolioLoader (image) {
main_mc.contentPath = image;
}

comp1_btn.onRelease = function (){
portfolioLoader("image1.jpg");
}
comp2_btn.onRelease = function (){
portfolioLoader("image2.jpg");
}
comp3_btn.onRelease = function (){
portfolioLoader("image3.jpg");
}

This should complete the first half of this tutorial, test the movie and congratulate yourself if it works. Move on to page 2 to learn how to load the descriptive text of each item in our menu when you're ready.

NEXT PAGE 2/2