Creating a Dynamic Portfolio in Flash
| Flash | Intermediate
Part II - Loading Textual Content Dynamically
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.
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.
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.
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.