Step one
Begin by opening Flash MX and creating a new project. Set the stage to 600 pixels wide by 400 pixels high. Pick a background color that offers enough contrast for the elements you will add later. Adjust the frame rate to 21 frames per second; this will give your site a lively feel without consuming too many resources. Save the file as main.fla inside a new folder named task2. This folder will keep all the files you need for the demo – images, text files and the final movie.
In the timeline, rename the single layer to actions to signal that it will contain code rather than visual symbols. Select the first frame, open the Actions panel and paste the following ActionScript. Flash MX lets you write code directly on the timeline; there is no separate script file needed for this example.
Each line has a purpose. The first line creates a text field called theTextBox, places it at coordinates (50,50), and gives it a width of 200 and a height of 300. The depth of 20 ensures it sits above most other elements you may add later; if another object is placed on the same depth it will push the text field behind it. The following six lines turn on the background and border, set their colors, and enable multiline text with word wrapping. The variable property attaches the field to a global variable named myText; this connection is essential for the dynamic content that follows.
The next block creates a TextFormat object, which lets you define the font, size, and color that will apply to the text field. After assigning the desired properties, you apply the format with setNewTextFormat. At this point you have a blank, styled box ready to receive content.
To test what you have built, click Control > Test Movie (or press Ctrl+Enter). The text field should appear in the center of the stage with a white background and a black border. The box will be empty because no text has been loaded into myText yet. The next step is to bring external text into the field, which is a core feature of dynamic Flash sites.
Open a plain text editor such as Notepad or TextEdit and type the following lines exactly as shown, including the variable name:
Save this file as welcome.txt in the task2 folder you created earlier. Returning to Flash, add one more line of ActionScript beneath the previous code:
The loadVariables function reads the external text file and assigns any variables defined within it to the target scope – in this case the main timeline (_root). Because the file defines myText, the value automatically populates the text field you created earlier.
Test the movie again. The message should now appear inside the box. This demonstrates how you can swap content by editing a single text file, a powerful technique for creating sites that can update without re‑exporting Flash each time.
With the text field in place, the next step is to add interactive elements that can change the content or the visuals on the stage. The code below will create four square buttons that will later serve as triggers for loading different text or images. These squares will be drawn on the main timeline using ActionScript, so no symbols need to be pre‑prepared.
Each iteration of the loop creates a new movie clip named button1, button2, and so on, and assigns it a depth that increases by one with each loop pass. The drawing commands outline a red square with a black border, and the positioning lines place each square horizontally across the top of the stage, leaving a small margin between them.
At this point, you should see four red boxes appear on the stage when you test the movie. Although they are not yet interactive, they will be turned into buttons in the next step.
Step two
Now that you have visual placeholders, it’s time to add interactivity. The ActionScript below assigns onRelease handlers to the first two buttons. When a user clicks a button, the handler will execute a function that loads a different text file into the same myText variable that feeds the text field.
Before you can test these actions, create the two external text files. In a text editor, paste the following content into a new file and save it as text1.txt inside the task2 folder:
Do the same for the second file, but use this content and save it as text2.txt:
Test the movie again. Hovering over the first two squares should change the cursor to a hand, indicating that they are clickable. Clicking on either button should swap the message inside the text field, demonstrating a basic form of client‑side navigation without leaving the Flash container.
While these handlers are useful, the demo will also benefit from dynamic image swapping. Flash MX’s loadMovie function allows you to pull JPEG files into movie clips on the fly, similar to how loadVariables brings in text. For a more engaging interface, we’ll place two larger image containers on the stage and fill them with pictures.
First, add the following code after the button handlers. It creates two empty movie clips named imageHolder1 and imageHolder2, positions them, and then loads two JPEGs into each. The JPEG files must reside in the same folder as the Flash file for the path to resolve correctly.
To complete the image component, prepare four JPEG files named image1.jpg through image4.jpg. These should each be 100 pixels wide by 150 pixels high to keep the layout tidy. Place them in the task2 folder. Flash MX will automatically place each image’s top‑left corner at the registration point of its holder, which we positioned at the desired coordinates.
When you test the movie, you should see the two images load beside the four button squares. The text field remains on the left, ready to display messages triggered by the buttons.
At this stage, your project already contains three dynamic elements: a text field that updates via external text files, four clickable squares that change that text, and two image holders that display external pictures. The next section will turn the remaining two squares into image toggles, expanding the interactive experience further.
Step three
To make the final two squares useful, we’ll give them the ability to switch between two images each. This will demonstrate a simple toggle mechanism that can be expanded to handle more content or complex states. First, add two Boolean variables to keep track of which image is currently displayed for each holder:
Next, attach onRelease handlers to button3 and button4. These functions will check the corresponding variable, load the alternate image if needed, and then flip the flag so that the next click will reverse the action.
When these handlers run, they call loadMovie with the new JPEG file and the target holder. Flash replaces the previous image instantly, creating a smooth visual switch. The flag variables prevent unnecessary reloading; each click simply flips the state.
After adding this code, test the movie again. Clicking on the third button should replace image1.jpg with image3.jpg, and a second click should restore the original. The same logic applies to the fourth button and its image pair. Now the stage contains fully interactive elements that can be modified by editing the external files you already created.
Because the code for the button handlers is repetitive, you could refactor it into a helper function if you later decide to add more toggles. However, keeping it explicit makes it easier for beginners to trace the logic and understand how each piece works.
Beyond the four squares and two image holders, you might want to add background audio to enhance the experience. Flash MX allows you to stream MP3 files in the background, letting you keep the site lively without constant user input. The next section will cover how to embed a looping soundtrack.
Step four
To bring an auditory layer, copy a favorite MP3 file into the task2 folder and rename it track1.mp3. The following ActionScript creates a new Sound object, loads the MP3 with streaming enabled, and starts playback immediately. Because the file is set to stream, the audio will play continuously, even while the user interacts with the buttons and images.
Notice that the second argument to loadSound is true, which turns on streaming. If the MP3 is short, you can also set this to false to load the entire file before playing. The start method begins playback from the beginning; you can control position and volume later if desired.
After adding the sound code, test the movie again. The background music should play automatically. If it does not, try a different MP3 file or ensure the path is correct. Some MP3s are compressed in a way that Flash cannot stream, so selecting a standard MP3 from a music library is a safe bet.
At this point the site has a dynamic text field, four clickable squares that can change text or swap images, and a looping soundtrack. All assets are loaded at runtime, meaning you can update the text files, JPEGs, or MP3 without re‑exporting Flash. This approach reduces development time and keeps the final file lightweight.
For those interested in scaling up, consider adding a menu layer or a slideshow timer that automatically cycles through images. You could also explore embedding video or using ActionScript to communicate with a backend service via HTTP requests. The core concept remains the same: load external data, bind it to runtime variables or movie clips, and trigger changes through event handlers.
Thanks for following along. If you run into any problems or have questions, feel free to ask. The goal is to show you how flexible Flash MX can be when you leverage ActionScript for dynamic content.
© Bill Trikojus, Tableau Design – a Melbourne‑based studio that specializes in Flash scripting, web page design, and multimedia production. With years of experience in audio, video, 3D animation, and interactive media, Tableau Design brings a wealth of knowledge to every project.
No comments yet. Be the first to comment!