Hello World! - 01hello.fla

This is classic the "Hello World!" program.

Most computer programs have at least one of ...

  • An Input - in this example the input is a button press.
  • A process - in this example the process is to detect the button press and run the code to produce the output.
  • An output - in this example the output is "Hello World!".

This Program Introduces

  • static text output
  • button release event handling
  • dynamic text output
  • how to undo your mistakes --- PRESS CTRL+Z --- Really useful!
Start up Macromedia Flash.
  1. Select the text tool
  2. Drag out a rectangle where you can type some text. Now type some text such as "Hello World!"
  3. Select the text and change its colour.
    Optionally make other changes to its font, size etc.
  4. Make sure this is static text. That means it will never change.
  5. Use the arrow tool to reposition the text on the screen.
  6. Save your file as "01hello.fla".

Using the same techniques as above, place another text field on the stage ...

  1. Make the new text dynamic.
    This means you can use program code to alter it.
    The text should be left blank.
  2. Where it says <Instance Name>, enter a name like outputText
  3. Save your file.

Add a button control to your stage

  1. CTRL+F7 toggles the components pane on and of. Make this pane visible.
  2. Double click here to add a button to your stage.
  3. Use the arrow tool to position your button
  4. Give your button an Instance Name of "hello_pb". Then in the Parameters tab, alter the text on the button to "Press Me".
  5. Save your file.
  6. Test-run your movie (program) by pressing CTRL+Enter.

    If you click the button, you will see that it does nothing yet.
  7. Close the test movie

Write an event handler to make the button do something.

  1. Use the arrow tool (see step 5 or 12) to select the push button. This step is IMPORTANT. If you select the wrong thing, your code will not be linked to the button.
  2. Click here to open the Actions screen area. This is where you write your code.

Write some "ActionScript" code.

  1. Make sure the button is selected.
    Enter the code as shown in this screen shot.
    Here is the code ...

    on (release)
    {
        _root.outputText.text = "Hello World!";
    }


    Save your file and do a test run using CTRL+Enter.
    When you click the button, your text should appear.

Here is the finished Movie / Program.

You can download the source.

Refresh your page to run the program again.
(F5 key in Internet Explorer)

A Learning Task

Write your own version of this program to display a message of your choice. Learn how to do it without these notes.

 

 

© C N Bauers (2004) - You may use these materials for your self education. Educational institutions may use these materials too.