welcome to preetamrai.com
Webtopics > Flash for the People > Interactive Infographics

Flash can be used to build infographics (informative graphics). News sites and educational sites often use Flash to illustrate a concept or to graphically portray some news story.

Check these pages for some examples of infographics created in Flash

http://www.unav.es/malofiej/entries/indice.sel.html

Paul Nixon, a Pheonix based web designer's page has links to good infographics. http://www.nixlog.com/infographics/

For a more involved discussion on infographics see this article: Interactive Visual Explainers — A Simple Classification at http://www.elearningpost.com/features/archives/002069.asp

I have two examples here. I encourage you to use the technique presented here and come up with your own infographics.


Example 2: Interactive Captions


(voyager spacecraft picture from NASA JPL website)

Click on the highlighted areas to try out the captions. This example encourages the viewer to explore. You can use a digital camera take your own pictures and use them in the Flash movie.

Download the pictures pda or spacecraft (right click and select "Save Target as")

1. Import the picture into your Flash file
File -> Import. The Spaceship shows up on your screen. Rename this Layer to Spaceship. Lock the Layer.

2. Insert a New Layer. Name this Layer Camera.

3. Use the Brush Tool and draw a "patch" that covers the camera.

4. Click on the Black Arrow in the Toolbar (it is the first item in the Toolbar)

5. Now click on the patch. The patch get selected. You can see dots all over it.

6. From the top menu, Select Insert -> Convert to Symbol.

7) In the new prompt that appears, select Button. Give it a name.

8) The last couple of steps (5 to 7) converted our shape to a Button. Now we need to go and make some changes to this button.

9) From the top menu select Window -> Library. You will find your Button inside the Library. Right click over the name of the Button and select Edit.

10) The screen will change and take you to the Button Editing Mode. Look at the Timeline. You will see four Frames.

Currently, the UP stage is filled. Go to each one of the other frames (over, down and hit) , Right Click and select Insert KeyFrame.

11) Rename the Layer to Button. Lock this Layer.

12) Insert a New Layer. Name it Text. This is the layer where we will type our Text.

13) Go the OVER frame in this Text Layer. Right Click and select Insert Keyframe. In the HIT Frame, Insert a Blank Keyframe. Why do I insert a blank keyframe in the hit frame?

14) Go to the Stage and type in some text near the patch.

15) Return to the Stage by clicking on the "Scene 1" icon.

16) Save and Test your move. (Control -> Test Movie)

17) You may want to make the patch more transparent, as it obscures the image behind it. Open the Library again. Select the Camera Button and Edit it.

18) Unlock the Button Layer. Select the UP Frame. Click on the patch. From the top menu, select Window-> Color Mixer.

19) Reduce the Alpha to 20%.

20) Select the OVER Frame. Reduce the Alpha to 0%

21) Save and Test Movie again.