This tutorial teaches how to create a dynamic portfolio in Flash that loads images and text from external files. It uses Loader components to dynamically load thumbnail images and larger images. LoadVars loads text files containing image titles and descriptions. Buttons trigger a function to load corresponding images and text files, displaying them in dynamic text fields. The portfolio can be easily updated by changing external files without modifying the FLA.

1. Creating a Dynamic Portfolio in Flash
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.

2.
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.)
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,

3. comp3_btn respectively starting from the top. Assign the instance name main_mc to our main display
component at the centre.
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 (){

4. portfolioLoader("image3.jpg");
}
Unlike the first part, I did not provide you with the external text that will be loaded into your SWF
movie. We will have to start by creating those text files. The portfolio we are creating will load (1) the
title of each item and (2) its description from an external text file that we can update at any time
without going back to the FLA. We will create three text files for each of our items in the portfolio. Open
the folder that contains your FLA, SWF, and your image files and create three text files named text1.txt,
text2.txt, and text3.txt.
Each of these files will contain a title and a description. We will use the variable name theTitle and
theDescrip to label our content. Revise the LoadVars tutorial if you do not understand how this works.
The contents of the first text file should be like this:
theTitle=Bangles&theDescrip=This is the description of my first image.
Edit the contents of the second and third text files to have a title and a description for the other items.
Make sure that you do keep the variable identifiers as theTitle and theDescrip. Go back to Flash when
you've done this easy job.
Our external content is now ready, we will create the text fields at which this content will be displayed
when loaded. We'll start with the Title field, use the text tool to create a text field in the layer labeled
Text to create a text field similar to the one displayed in the image below.

5.
We will now have to set this as a dynamic text field and give it an instance name so that we can control
its contents via ActionScript. Access the Properties Inspector and change the Text Type to Dynamic, then
assign the instance name myTitle_txt to the text field. You can also configure the other properties of the
text such as the size and the style, but remember to embed the font characters if you would like to use
any special font for your text. Revise the LoadVars tutorial for more details on this.
Create another text field for the description content. You will have to change the text type to Dynamic
and then assign the instance name myDescrip_txt to it.

6.
This should complete the setting up of the stage for loading the external textual content. We will now
add the required code to command the buttons to load the text when needed. Right‐click the only frame
in the Actions layer and click on 'Actions'.
Our current code should look like this:
comp1_btn.contentPath = "thumb1.jpg";
comp2_btn.contentPath = "thumb2.jpg";
comp3_btn.contentPath = "thumb3.jpg";
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");
}
We will edit our portfolioLoader function to load the external text and will give it an extra parameter to
put the name of our text file in it. You will then have to put the name of each text file to load in below as
illustrated.

7. comp1_btn.contentPath = "thumb1.jpg";
comp2_btn.contentPath = "thumb2.jpg";
comp3_btn.contentPath = "thumb3.jpg";
function portfolioLoader (image, textFile) {
main_mc.contentPath = image;
myData = new LoadVars();
myData.onLoad = function() {
myTitle_txt.text = this.theTitle;
myDescrip_txt.text = this.theDescrip;
};
myData.load(textFile);
}
comp1_btn.onRelease = function (){
portfolioLoader("image1.jpg","text1.txt");
}
comp2_btn.onRelease = function (){
portfolioLoader("image2.jpg","text2.txt");
}
comp3_btn.onRelease = function (){
portfolioLoader("image3.jpg","text3.txt");
}
This should conclude our tutorial, test the movie to see your text and images loaded at the command of
the user. I hope that you learnt how to use all the various skills taught in the previous tutorials to create
a practical portfolio such as this one. Here is the FLA for the end result, if you have any questions or
other queries related to Flash feel free to post at the Oman3D Forum.
‐ End of Tutorial.