How to Create an Interactive Picture for a Website in Flash

Save

Flash provides the ability to create visually engaging, interactive effects within websites. Using Flash, you can add a level of interaction to website images. With a little ActionScript code, you can declare different behaviors when the user interacts with a website picture, including moving their mouse on and off it, pressing and releasing the mouse button on it. One reason that Flash is so widely used is that it makes the creation of such interactive elements easy, even for people with little or no coding experience.

  • Create a new document in Flash by choosing "File," then "New" then selecting "Flash Document" from the list. Your document will open and display the white stage area in the middle. You can use the drawing tools on the left to draw a picture, but if you already have an image file, such as a photograph that you want to use, you can import it into your Flash document. Choose "File," then "Import," then "Import To Stage" and then browse to your chosen image file. Your image will appear on the stage area.

  • Convert your image into a Symbol so that you can add interactive effects to it. Select your image on the stage by clicking it. Press "F8" to convert it to a Symbol or choose "Modify" and then "Convert To Symbol." Choose the "Movie clip" radio button and give your Symbol a name, then click the "OK" button. With your Symbol selected on the stage, open the "Properties" panel by clicking it at the bottom of your screen. In the "Instance Name" text-box, enter "myObject_mc" or any name you prefer.

  • Add another visual element to your Flash document. For demonstration purposes, add some text. Insert a new layer in your document by pressing the "New Layer" button next to the Timeline at the top of your screen. Lock the other layer using the padlock button on the Timeline, then select the new layer, making sure it is unlocked. Insert some text on this new layer by clicking the text tool in the panel to the left, then clicking on the stage area and typing some text. Convert your text to a Movie Clip Symbol using the same technique you used for the image, but choosing a different name. In the Properties panel, give the text Symbol the instance name "text_mc."

  • Add interactivity to your Flash file. Create another new layer in your document. Open the Actions panel for the new layer by clicking to select it in the Timeline area, then choose "Window," then "Actions," or press "F9." The Actions panel will appear so that you can enter code. Click within the white text entry area, and enter the following, changing "myObject_mc" if you chose a different name:

    text_mc.visible=false;

    function picClicked(event:MouseEvent):void

    { text_mc.visible=true; }

    myObject_mc.addEventListener(MouseEvent.CLICK, picClicked);

  • Save your file with a name of your choice, such as "interactivepic.fla." Export and test your Flash movie by choosing "Control," then "Test Movie." Your movie will open in a separate window. Test the functionality by clicking the picture and checking that the text appears when you do. This is a simple example to demonstrate the principle of having an interactive image in Flash, but you can add many different effects to suit your own projects.

Tips & Warnings

  • You can add event handlers to multiple elements in a Flash document, listening for user events, such as clicking, moving the mouse and text entry.
  • When you include Flash movies in websites, there is a strong chance that some users will not be able to view them because they do not have Flash Player. It's best therefore to include alternative content as well.

References

  • Photo Credit Comstock/Comstock/Getty Images
Promoted By Zergnet

Comments

Resources

Related Searches

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!