Flash CS3 sound tutorial: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
m (Text replacement - "<pageby nominor="false" comments="false"/>" to "<!-- <pageby nominor="false" comments="false"/> -->")
 
(42 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{Stub}}
{{Incomplete}}
{{Incomplete}}
<pageby nominor="false" comments="false"/>
{{older version|CS3|[[Flash sound tutorial]]}}
== Overview ==
{{Flash tutorial|CS3, (CS4, CS5)|beginner|}}
<!-- <pageby nominor="false" comments="false"/> -->


This is part of [[Flash]] CS3 tutorials.
[[User:Daniel K. Schneider|Daniel K. Schneider]] 18:13, 9 September 2007 (MEST).


== Overview ==
<div class="tut_goals">
; Learning goals:
; Learning goals:
: Learn how to use sound with Flash 9 (CS3) components
: Learn how to use sound (attach sound to frames and button frames)
: Learn a little bit of Action Script '''3'''
: Learn how to edit sound with the Flash tool
: Play sound with Action Script '''3'''


;Prerequisites:
;Prerequisites:
Line 29: Line 29:
; Learning materials
; Learning materials
Grab the various *.fla files from here:
Grab the various *.fla files from here:
: http://tecfa.unige.ch/guides/flash/ex/sound-intro/ (not yet sorry)
: http://tecfa.unige.ch/guides/flash/ex/sound-intro/
</div>


== Basics ==
== Basics ==
Line 44: Line 45:
* AU (Sun)  
* AU (Sun)  


(Some formats may depend on whether quicktime is installed)
(Some formats may depend on whether QuickTime is installed on your computer).
 
Best bet is to use MP3 format, since it is very popular. E.g. it is easy to find music or sound textures on the Internet.
 
Flash CS3 and CS4 provide some sounds in a library (Menu: Window -> Common Libraries -> TNT sounds). CS4 has a much better choice...


== Import sounds ==
== Sound imports to frames of the timeline ==


=== Background sounds ===
=== Background sounds ===


; To import (small) sound files
; To import (smaller) sound files
* File->Import->Import To library
* File->Import->Import To library (or drag and drop).


=== Attaching sound to a frame ===
=== Attaching sound to a frame ===


; Create a new layer and import sound to a frame
; Step 1 - Create a new layer and import sound to a frame
 
You can attach sound to any frame via the properties panel
* Create a new layer for this sound
* Insert a '''keyframe''' (F7) where you want the sound to start
* Select a sound from the sound pull-down menu in the properties panel.
* Configure it in the same panel (see next)


* You can attach sound to any frame via the properties panel
Ideally, each sound should have its own layer. This way it is much easier to control fade in/outs, when to stop etc. You also can see exactly how far the sound will extend on the timeline. Hit F5 or F7 (if you want to stop the sound) somewhere to the right.
* Select a sound from the sound pull-down menu
* Configure it in the same panel


; Configuration of sounds
[[image:flash-cs3-sound-layers.png|thumb|600px|none|Flash sound layers]]
 
; Step 2 - Configuration of sounds
In the configuration panel you can change certain parameters and also edit a bit.
In the configuration panel you can change certain parameters and also edit a bit.
* Sync: Sound is synchronized with the timeline. You may have to extend sound  time line. Hit F5 somewhere.
 
* Event: Sound plays by itself until its done (independently of the rest)
Sync: Will defined how sound is synchronized with the timeline.
* Start: Will only play the sound once.
* '''Event''': Sound plays until it is done (independently of the rest). It has its own "timeline". Also, if this sound is triggered again (e.g. a user enters the same frame), a new sound will play even if the old one is not over.
* Stop : Will stop the sound (therefore include it before or after a sound frame.
* '''Start''': Similar as event. Will play the sound when the frame loads but will not play it if the old sound is still playing. Note: This doesn't always work as expected. Probably best to use together with the Stop (see below).
* Stream: Will try to match the length of sound until the end of the animation.
* '''Stop''' : Will stop the sound of a layer at this frame (therefore include it ''after'' a sound frame). Insert a new keyframe (F7) where you want it to stop and just edit the properties.
* '''Stream''': Will try to match the length of sound with the other layers, e.g. 20 frames of sound should play during animation of 20 frames. After that it should stop. Sound as stream should not be looped.  Use this for example for comic strips (talking characters).
 
Repeat:
* You can repeat the sound as many times as you like (or even have it loop forever).
 
Effect:
* You can choose from various fade in/out and left/right options, but you probably want to do your own custom fades (see next).
 
=== Attaching sound to buttons ===
 
You can attach sounds to buttons in the same manner as above.
 
* Double-click on the button in the library panel
* Edit the button's timeline (e.g. the mouse over, down and hit frames )
* For each sound you want to attach, create a layer
* Then insert a new keyframe (F7) and attach the sound
* You may try to stop a sound (insert a new keyframe)
 
[[image:flash-button-sound.png|thumb|600px|none|Flash CS3 Attaching sound to buttons]]


=== Editing sounds  ===
=== Editing sounds  ===


; Getting the Edit Envelope editor
; Editing sound with the Edit Envelope editor
* Click in the sound layer.
* Click in the sound layer in some frame where you have sound
* In the Properties Panel, Click the ''Edit ...'' button next to the ''Effect:'' field
* In the Properties Panel, Click the ''Edit ...'' button next to the ''Effect:'' field
* This opens the '''Edit Envelope''' editor.
* This opens the '''Edit Envelope''' editor.


; Manipulation of the sound envelope
; Manipulation of the sound envelope
* You can drag left/right Time In and Time Out controls in middle pane
* You can drag left/right ''Time In'' and ''Time Out'' controls in middle pane. I.e. you can cut off sound from the either the beginning or the end of the sound track.
* You can drag down volume controls (black lines on top). Click to insert a new distortion point.
* You can drag down volume controls (black lines on top) for the left and the right stereo channel
** Click to insert a new distortion point for these volume controls
** Up: means louder / maximum sound
** Down: means more silent / no sound
* Use the arrow (down left) to test
* At bottom right there are zoom buttons and a switch that either shows seconds or frames.
 
[[image:flash-cs3-sound-envelope.png|thumb|600px|none|Flash CS3 Sound envelope editor]]
 
=== Examples ===


== Load sounds with ActionScript ==
;Animation with sound
* You can look at my published [http://tecfa.unige.ch/guides/flash/ex/sound-intro/flash-cs3-cloud-animation-sound.html animation with sound example]. It shows a motion animation with a global music sound track and 4 layers with sound "textures" that are limited in time.
* Source: [http://tecfa.unige.ch/guides/flash/ex/sound-intro/flash-cs3-cloud-animation-sound.fla flash-cs3-cloud-animation-sound.fla]
* You can grab all the files flash-cs3-cloud-animation-sound.* from this directory:
: http://tecfa.unige.ch/guides/flash/ex/sound-intro/


;Button with sound
* See the [http://tecfa.unige.ch/guides/flash/ex/sound-intro/flash-cs3-button-sound.html button with sound].
* Source: [http://tecfa.unige.ch/guides/flash/ex/sound-intro/flash-cs3-button-sound.fla flash-cs3-button-sound.fla]


; ActionScript 2 example
== Load and play sounds with ActionScript ==
This starts playing sound on load
 
<code><pre>
It is better to load sounds with ActionScript if your sound file is large, e.g. a background music or if you want to to trigger a sound as a result of some complex user interaction.
var mySound:Sound= new Sound();
mySound.loadSound("track.mp3" , true);
mySound.onLoad = function() {
mySound.start();
}
</pre></code>


; ActionScript 3
; Embedded ActionScript 3
Insert this kind of code with F9 in the frame where you want if to load. Typically, use a frame in a layer called "action" or "script".


To load a sound from an external file
'''To load a sound from an external file''':
<code><pre>
<pre>
var request:URLRequest = new URLRequest("track.mp3");
var request:URLRequest = new URLRequest("track.mp3");
var your_sound:Sound = new Sound();
var your_sound:Sound = new Sound();
your_sound.load(request);
your_sound.load(request);
</pre>


To play it:
'''Alternatively, to load a sound from the library''':
<code><pre>
* Export the sound for ActionScript 3:
** Right click on the sound in the library, select properties
** Click on Advanced
** Tick ''Export for ActionScript''
** Define the classname, e.g name class for a file called "noise.mp3" something like "Noise_sound".
* Then create a new sound from this class (just this single line)
<pre>
var cool_noise_sound:Sound = new Noise_sound();
</pre>
 
 
To play your sounds:
<pre>
your_sound.play();
your_sound.play();
</pre></code>
cool_noise_sound.play ();
</pre>


To play 5 loops:
To play 5 loops:
<code><pre>
<pre>
your_sound.play(0,5);
your_sound.play(0,5);
</pre></code>
</pre>


To stop all sounds (this is a static method, just insert the line as is).
To stop all sounds (this is a static method, just insert the line as is).
</pre></code>
<pre>
SoundMixer.stopAll();
SoundMixer.stopAll();
</pre></code>
</pre>
 
For an example used in the [[Flash drag and drop tutorial]], look at[http://tecfa.unige.ch/guides/flash/ex/drag-and-drop-intro/flash-cs3-drag-and-drop-matching-3.html flash-cs3-drag-and-drop-matching-3.*]
* Source: [http://tecfa.unige.ch/guides/flash/ex/drag-and-drop-intro/flash-cs3-drag-and-drop-matching-3.fla flash-cs3-drag-and-drop-matching-3.fla]
 
; Note: ActionScript 2 is different (!)
This code snippet would start playing sound on load
<source lang="Actionscript">
var mySound:Sound= new Sound();
mySound.loadSound("track.mp3" , true);


For an example, see [[Flash drag and drop tutorial]], [http://tecfa.unige.ch/guides/flash/ex/drag-and-drop-intro/flash-cs3-drag-and-drop-matching-3.html flash-cs3-drag-and-drop-matching-3.*]
mySound.onLoad = function() {
    mySound.start();
}
</source>
 
'''For a button on and off''':
select the symbol which is aimed to be the button, in the frame where the on / off has to happen. Select the code snippet "click to play/stop sound" in the audio and video category. Give an occurrence name to your symbol and target your soundfile name instead of the flash example. For the sound to stop in the other frames, you can use the following action script in the frames you want the sound to be stopped.
<pre>
SoundMixer.stopAll();
</pre>


== Links ==
== Links ==


=== Sound textures to download ===
* [[Sound Assets]] (look this up if you need websites with free sounds)
 
=== Documentation ===
 
* [http://livedocs.adobe.com/flash/9.0/UsingFlash/help.html?content=WSd60f23110762d6b883b18f10cb1fe1af6-7ce9.html Working with sound] (Adobe), Using sounds, some AS2, no AS3
 
* [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/media/Sound.html Sound] (Adobe AS3 reference)
 
* [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/media/SoundMixer.html SoundMixer] (Adobe AS3 reference)
 
 


* [http://simplythebest.net/sounds/MP3/MP3_sounds.html SimplyTheBest.net] - MP3 sounds. This is a nice site. Ads are not annoying.


=== Documentation ===


* [http://livedocs.adobe.com/flash/9.0/UsingFlash/help.html?content=WSd60f23110762d6b883b18f10cb1fe1af6-7ce9.html Working with sound] (Adobe, using, AS2, not AS3)
[[Category: Flash]]
[[Category:Flash tutorials]]
[[Category: Music]]

Latest revision as of 17:31, 22 August 2016


Dead end.svg

This tutorial is outdated. It was made for (older) CS3

New version: Flash sound tutorial


Overview

Learning goals
Learn how to use sound (attach sound to frames and button frames)
Learn how to edit sound with the Flash tool
Play sound with Action Script 3
Prerequisites
Flash CS3 desktop tutorial
Flash drawing tutorial
flash layers tutorial
flash button tutorial
Moving on
The Flash article has a list of other tutorials.
Flash Video component tutorial
Quality
This text should technical people get going and may not be good enough for self-learning beginners. It can be used as handout in a "hands-on" class. That is what Daniel K. Schneider made it for...
Level
It aims at beginners. More advanced features and tricks are not explained here.
Learning materials

Grab the various *.fla files from here:

http://tecfa.unige.ch/guides/flash/ex/sound-intro/

Basics

Sound types

Flash can handle several sound formats:

  • AAC (Advanced Audio Coding):
  • AIFF (Audio Interchange File Format) - Mac only ?
  • MP3 (Moving Pictures Expert Group Level-Layer-3 Audio)
  • AVI (Audio Video Interleave)
  • WAV (Waveform Audio Format)
  • AU (Sun)

(Some formats may depend on whether QuickTime is installed on your computer).

Best bet is to use MP3 format, since it is very popular. E.g. it is easy to find music or sound textures on the Internet.

Flash CS3 and CS4 provide some sounds in a library (Menu: Window -> Common Libraries -> TNT sounds). CS4 has a much better choice...

Sound imports to frames of the timeline

Background sounds

To import (smaller) sound files
  • File->Import->Import To library (or drag and drop).

Attaching sound to a frame

Step 1 - Create a new layer and import sound to a frame

You can attach sound to any frame via the properties panel

  • Create a new layer for this sound
  • Insert a keyframe (F7) where you want the sound to start
  • Select a sound from the sound pull-down menu in the properties panel.
  • Configure it in the same panel (see next)

Ideally, each sound should have its own layer. This way it is much easier to control fade in/outs, when to stop etc. You also can see exactly how far the sound will extend on the timeline. Hit F5 or F7 (if you want to stop the sound) somewhere to the right.

Flash sound layers
Step 2 - Configuration of sounds

In the configuration panel you can change certain parameters and also edit a bit.

Sync: Will defined how sound is synchronized with the timeline.

  • Event: Sound plays until it is done (independently of the rest). It has its own "timeline". Also, if this sound is triggered again (e.g. a user enters the same frame), a new sound will play even if the old one is not over.
  • Start: Similar as event. Will play the sound when the frame loads but will not play it if the old sound is still playing. Note: This doesn't always work as expected. Probably best to use together with the Stop (see below).
  • Stop : Will stop the sound of a layer at this frame (therefore include it after a sound frame). Insert a new keyframe (F7) where you want it to stop and just edit the properties.
  • Stream: Will try to match the length of sound with the other layers, e.g. 20 frames of sound should play during animation of 20 frames. After that it should stop. Sound as stream should not be looped. Use this for example for comic strips (talking characters).

Repeat:

  • You can repeat the sound as many times as you like (or even have it loop forever).

Effect:

  • You can choose from various fade in/out and left/right options, but you probably want to do your own custom fades (see next).

Attaching sound to buttons

You can attach sounds to buttons in the same manner as above.

  • Double-click on the button in the library panel
  • Edit the button's timeline (e.g. the mouse over, down and hit frames )
  • For each sound you want to attach, create a layer
  • Then insert a new keyframe (F7) and attach the sound
  • You may try to stop a sound (insert a new keyframe)
Flash CS3 Attaching sound to buttons

Editing sounds

Editing sound with the Edit Envelope editor
  • Click in the sound layer in some frame where you have sound
  • In the Properties Panel, Click the Edit ... button next to the Effect: field
  • This opens the Edit Envelope editor.
Manipulation of the sound envelope
  • You can drag left/right Time In and Time Out controls in middle pane. I.e. you can cut off sound from the either the beginning or the end of the sound track.
  • You can drag down volume controls (black lines on top) for the left and the right stereo channel
    • Click to insert a new distortion point for these volume controls
    • Up: means louder / maximum sound
    • Down: means more silent / no sound
  • Use the arrow (down left) to test
  • At bottom right there are zoom buttons and a switch that either shows seconds or frames.
Flash CS3 Sound envelope editor

Examples

Animation with sound
http://tecfa.unige.ch/guides/flash/ex/sound-intro/
Button with sound

Load and play sounds with ActionScript

It is better to load sounds with ActionScript if your sound file is large, e.g. a background music or if you want to to trigger a sound as a result of some complex user interaction.

Embedded ActionScript 3

Insert this kind of code with F9 in the frame where you want if to load. Typically, use a frame in a layer called "action" or "script".

To load a sound from an external file:

var request:URLRequest = new URLRequest("track.mp3");
var your_sound:Sound = new Sound();
your_sound.load(request);

Alternatively, to load a sound from the library:

  • Export the sound for ActionScript 3:
    • Right click on the sound in the library, select properties
    • Click on Advanced
    • Tick Export for ActionScript
    • Define the classname, e.g name class for a file called "noise.mp3" something like "Noise_sound".
  • Then create a new sound from this class (just this single line)
var cool_noise_sound:Sound = new Noise_sound();


To play your sounds:

your_sound.play();
cool_noise_sound.play ();

To play 5 loops:

your_sound.play(0,5);

To stop all sounds (this is a static method, just insert the line as is).

SoundMixer.stopAll();

For an example used in the Flash drag and drop tutorial, look atflash-cs3-drag-and-drop-matching-3.*

Note
ActionScript 2 is different (!)

This code snippet would start playing sound on load

var mySound:Sound= new Sound();
mySound.loadSound("track.mp3" , true);

mySound.onLoad = function() {
    mySound.start();
}

For a button on and off: select the symbol which is aimed to be the button, in the frame where the on / off has to happen. Select the code snippet "click to play/stop sound" in the audio and video category. Give an occurrence name to your symbol and target your soundfile name instead of the flash example. For the sound to stop in the other frames, you can use the following action script in the frames you want the sound to be stopped.

SoundMixer.stopAll();

Links

  • Sound Assets (look this up if you need websites with free sounds)

Documentation

  • Sound (Adobe AS3 reference)