Flash Scripting Primer, loading sounds and images

After doing some basic coding in the first lesson we want to use images and sounds to make a first interactive flash movie.

We have a folder with sounds and a folder with images. We keep images and sounds in these folders outside the flash movie. We will load the needed sounds or images with a script. This keeps our actual movie small. So the movie is loaded quickly.

What is the plan? We have a few images and sounds. We will make a story using these images and sounds.

If the user pushes some keys, 1,2,3,4,5,6,7,8 for example, the movie reacts by loading either a sound or an image.

The details of this loading a sound or an image are hidden in a function which is already prepared. For new movies you can copy these functions from the example script. You don't have to study this! Concentrate on the concepts behind your movie.

IMAGES

Movieclips:

An image is caught in a MovieClip, with we which can shift the image around, make it rotate, scale it.

You have to do a bit of work with the movieclips though. First of all, a MovieClip must be created:

var myMovieClip1: MovieClip = new MovieClip();//(this is called instantiating an object, we have a var (variable) with the name myMovieClip1(you can choose this name) of type MovieClip, and this will become (=) a new Movieclip....)

Then you must put this "object" on stage, to make it visible:

stage.addChild(myMovieClip1);//your movieclip is a child, becomes dependent of, the stage, the "main" movieclip

But if you look now exporting the movie with CMD ENTER (for MAC) or CTRL ENTER (for Wondows), nothing is shown: that is because there is nothing yet in the movieclip!

So now we load an image using a prepared function:

loadImage(myMovieClip1, "3.png", 10, 100);//this tells to load an image called "3.png" inside this movieclip called myMovieClip1, and put it on the spot with coordinates 10 for x and 100 for y.

This line of code shows the image on Stage. It can be used for a background.

But we want to make the movie interactive:

Eventlisteners:

On key touch, of key 1, we want to load another image:

For this we need "an eventlistener", a process looking for the keyboard presses:

stage.addEventListener(KeyboardEvent.KEY_UP, keyDownHandler);

So, the stage is looking (listening) for events, happenings, like the pressing, or here the letting go of keys.

Then we have to ask: which key is pressed? We need some abstract stuff for that:

if (String.fromCharCode( event.charCode) == "3")
loadImage(myMovieClip1, "myDuck.png", 10, 100);

But you can recognize the key 3 in "3". And you can make this a 5 for key 5 etc. Be careful that in the FLASH environment the characters or letters are mostly shortcuts. If using characters, then test the movie in de flashplayer.

This checking which key is touched must happen inside a function, and this function was indicated by the listener: see keyDownHandler after stage.addEventListener(KeyboardEvent.KEY_UP, keyDownHandler );

function keyDownHandler ( event:KeyboardEvent ): void
{

//which key???:

if (String.fromCharCode( event.charCode) == "3")
loadImage(myMovieClip1, "myDuck.png", 10, 100);

}

example with only images: http://www.contrechoc.com/flash/e-paper-images.zip

* 1,2,3,4 are to switch backgrounds
* 5 is a text (of Heidegger, Frage der Technik)
* 6 is a duck which has a sequence of images
* 7,8,9 are random images, the red paint dot always comes on top

SOUND
The same goes for sound.
Loading a sound is done from the folder sounds.
The actual loading is done in a function readSound (not needed to study at the moment)
The sound must be in a Soundchannel, just like the image in a movieclip, to start playing and to stop playing.

so checking a key: (again inside this keyDownHandler function)
if (String.fromCharCode( event.charCode) == "9")
readSound("1.mp3",1000);
This tells the movie that if key 9 is touched, then it should load soundFile "1.mp3" and play it 1000 times!
This 1000 is there to get it looping. You can make this 1, for playing the sound once.

To stop the sound use this:
if (String.fromCharCode( event.charCode) == "2")
myChannel.stop();
Touching 2 will stop the sound.

Actually I am using only one soundChannel. This soundChannel was defined at the top of the script, like the MovieClip:
var mySound:Sound = new Sound();
var myChannel:SoundChannel = new SoundChannel();//you recognize the var, the SoundChannel name (actually a Class name) and the new.

When wanting to play two sounds at the same time , you should make an extra soundChannel:
and Sound:
var mySound2:Sound = new Sound();
var myChannel2:SoundChannel = new SoundChannel();
and pass this second Sound and SoundChannel with the readSound function as parameters, like the loadImage...but that is for later! We use a few images at the moment, but only one sound at the time....

Why not just use Image and Sound?

This Movieclip and Soundchannel can be thought of as wrappers, paper around the actual content. We need this "paper" to do things with it, like playing (for the sound) and shifting (of the image)

With these simple tricks we will make an animation with shifting images and sounds.

The example file with all the script working can be found here:

http://www.contrechoc.com/flash/flashImportImageAndSound.zip

If the file does not open, then make a new flashmovie and copy and paste the text from the textfile "script for importing images and sounds" in the folder to your the actions window of the new movie, save the movie in the folder you downloaded and it will play. This is a problem of FLASH CS4 and FLASH CS3: this example was made in CS4 and CS3 refuses it...

Sounds must be in a mp3 format for FLASH
Because of this I have made a collection of ready to use sounds:

http://www.contrechoc.com/flash/shortMP3sounds.zip

The image have to come from your own collection, you can use JPG or PNG.

PNG can be transparent.

Download Flash CS3 example: (script in a textfile)

http://www.contrechoc.com/flash/keyboardInput_CS3script.txt

(Make a new flash movie, window->actions copy paste the script text into this actions window, save movie in a folder, make also the folders images and sounds in this folder, provide the sounds ( .mp3 format) and the images (jpg or png) put them into the appropriate folders and play!)

used:

* keys, keyboard, keyListener, movieclip, soundChannel