0.17 Combining sound with motion and image animation

Table of contents

• Preface
  • General
    • Viewing tip
      • Figures
      • Listings
  • Supplemental material
• General background information
• Preview
• Discussion and sample code
  • The MXML code
  • The ActionScript code
• Run the program
• Resources
• Complete program listings
• Miscellaneous

Preface

General

This tutorial lesson is part of a series of lessons dedicated to object-oriented programming (OOP) with ActionScript.

The project that I will present and explain in this lesson is the culmination of several previous lessons dealing with animation, sound, transparency, mouseevents, chroma key, etc.

Several ways to create and launch ActionScript programs

There are several ways to create and launch programs written in the ActionScript programming language. Many of the lessons in this series willuse Adobe Flex as the launch pad for the sample ActionScript programs.

An earlier lesson titled The Default Application Container provided information on how to get started programming with Adobe's Flex Builder 3. The lesson titled Using Flex 3 in a Flex 4 World was added later to accommodate the release of Flash Builder 4. (See Baldwin's Flex programming website .) You should study those lessons before embarking on the lessons in this series.

Some understanding of Flex MXML will be required

I also recommend that you study all of the lessons on Baldwin's Flex programming website in parallel with your study of these ActionScript lessons. Eventually you will probably need to understand both ActionScript and Flex andthe relationships that exist between them in order to become a successful ActionScript programmer.

Will emphasize ActionScript code

It is often possible to use either ActionScript code or Flex MXML code to achieve the same result. Insofar as this series of lessons is concerned,the emphasis will be on ActionScript code even in those cases where Flex MXML code may be a suitable alternative.

Viewing tip

I recommend that you open another copy of this document in a separate browser window and use the following links to easily find and view the figuresand listings while you are reading about them.

Figures

• Figure 1 . LighteningStorm01 at startup.
• Figure 2 . Visual output produced by clicking the button.
• Figure 3 . Project file structure for LighteningStorm01.
• Figure 4 . The image named normalsky.jpg.
• Figure 5 . The image named flippedsky.jpg.
• Figure 6 . The tree image.

Listings

• Listing 1 . Beginning of the Driver class.
• Listing 2 . Beginning of the constructor for the Driver class.
• Listing 3 . The remainder of the constructor.
• Listing 4 . The CREATION_COMPLETE event handler.
• Listing 5 . Beginning of the TIMER event handler.
• Listing 6 . Controlling the motion of the moon.
• Listing 7 . The method named processBackgroundColor.
• Listing 8 . Beginning of the method named makeTheCloudsMove.
• Listing 9 . Compute new alpha value for the normal sky image.
• Listing 10 . Compute new alpha value for the flipped sky image.
• Listing 11 . Apply the new alpha values to both sky images.
• Listing 12 . The CLICK event handler for the button.
• Listing 13 . The method named flashLightening.
• Listing 14 . The method named drawLightening.
• Listing 15 . The method named soundCompleteHandler.
• Listing 16 . Code for Main.mxml.
• Listing 17 . Source code for the class named Driver.