Week 12 Topics

Chapter 13 - Working with Sound

Exercise 1 - Importing Sounds

Open a new file and save it as basicSound.fla inside the Chapter 13 folder. Choose File>Import and navigate to the folder soundsPC inside of the folder soundFiles in the chapter 13 folder. Ctrl-click to select Breakout7, Miko_Big_Beatz, andMiko_Boardgrinder and click Open to import the sounds into Flash. The sounds go directly into the Library.
Press F11 to open the library and play each of them using the Play button at the top right of the library. Save the file and keep it open for the next exercise.

Exercise 2 - Compressing Sound - important to keep file sizes down -- Key point: you can set compression settings moviewide in the Publish Settings dialog box, but setting compression settings for each file allows one to make the quality/file size tradeoff on each individual file, which can lead to a better overall result..

With the file from the last exercise, in the Library, click on the Miko_Big_Beatz sound to select it. Click the Properties button at the bottom of the library, to open the Sound Properties box. In the Compression dialog box, there are 5 settings: Default (uses global settings in Publish Settings dialog box), ADPCM (consider if you need it to work for Flash 3 Player), MP3 (works for Flash 4 and later), Raw (resampling, but no compression), and Speech (new with Flash MX).
The current file size is 2805.9KB. Choose MP3 and a bit rate of 8kbps and press Test to listen to the sound. At the bottom, you will see the new file size. The lower the bit rate, the lower the quality and file size.
Choose 160kbps and uncheck the Preprocessing:Convert Stereo to Mono box. Note the improvement in quality and the increase in file size. Choose 24 kbps and uncheck the convert box. The sound is pretty good. Click the quality drop down and choose Best. The conversion process takes longer and the quality is better, but the file size remains the same. Thus the best compression settings is often a process of trying several and testing the quality and the file size. Save and close the file.

Exercise 3 - Creating a Background Sound with Sound Effects (using bkgdSound.fla)

Open the file -- can choose View>Magnification>Show All to see the entire image. Open the library (F11). Click the Insert Layer button to insert a layer, renaming it sound. Choose File>Import and open the mp3 folder inside of the sounds folder and select the X-tacy-groove file. Click open to import the file.
With the first frame of the sound layer selected, drag the sound file and drop it anywhere on the Stage. You will not see a representation of the sound on the stage, but you will see the sound in the library as a blue wave form. The sound must be in a keyframe. Choose Control>Test Movie and you will hear the sound play once and stop. You can test sound under some conditions (see p. 509) just by pressing Enter on the keyboard.
Click on the first frame in the sound layer (where you placed the sound) and in the Property Inspector, change the Sync option from Event to Stream. The Event option causes the sound to start playing when the Playhead reaches the frame that contains the sound. The sound will play all the way to the end, regardless of the main Timeline.
With the Stream option selected, choose Control>Test Movie. The Stream setting stops the sound when the movie stops and here the movie only has one frame.
Change the option to Start and choose Control>Test Movie. The Start setting is the same as the Event setting, except that if a Start sound is alredy playing, no new instance of the sound can be played, where with the Event setting, they will overlap.
In the Property Inspector, click the Effect drop down menu and choose Fade in and set Loop equal to 3.
Click the Edit button in the Property Inspector and click the Play button at the lower left of the Edit Envelope dialog box. Move the left and right envelope handles -- this will affect the way the sound fades in from the right and left speakers.
Drag the Time In control in the middle at the left of the Edit Envelope box -- this will change the start point of the sound. Choose Control>Test Movie and save the file and leave it open for the next exercise.

Effect option - options are Left Channel, Right Channel, Fade Left to Right, Fade Right to Left, Fade In, Fade Out, Custom
Sync option - Event, Start, Stop, Stream (forces the movie to keep pace with the sound, by skipping frames, and starts to play before entire sound is downloaded -- thus good for narration)
Loop - looping a Stream sound will cause Flash to add frames, thus increasing file size
Edit - change the start and end and change the volume

Exercise 4 - Controlling Sound with On/Off Buttons (using soundOnOffFinal.fla)

Open the final version of the file and choose Control>Test Movie, testing the on and off buttons. Close the file. With the file from the last exercise, save the file as soundOnOff.fla. In the Property Inspector, choose Effect: Fade In and Sync:Start and Loop:5.
Lock the sound layer in the Timeline and insert a new layer below the sound layer, naming it buttons. Open the Library and drag an instance of each button onto the upper left hand corner of the artwork. Select the sound off button on the Stage and open the Actions panel (F9). Choose Actions>Movie Control and double-click on stopAllSounds. Choose Control>Test Movie to test the off button.
Add a new layer above the sound layer, naming it actions. Click and drag down in Frame 2, selecting Frame 2 on all the layers. Press F5 to add a frame to each layer in the Timeline.Click in Frame 2 of the actions layer and press F7 to add a blank keyframe. Select Actions>Movie Control and double click on the stop action. The Timeline is going to loop by default, so we are adding a stop action to stop this.
In the buttons layer, click on the sound on button to select it and in the Actions panel, choose Movie Control and then doubleclick GotoandPlay is selected and set the type to Frame Number and the Frame to 1. Choose Control>Test Movie

Exercise 5 - Compression Settings for Narration (using soundSyncFinal.fla and soundSync.fla ) - Sound in Flash can be controlled so that it synchronizes with animation, such as a character's movement.

Open the final version of the file and choose Control>Test Movie. Close the file and open the other file. Scrub the playhead back and forth. You can change the frame view at the top right, selecting Tiny and Short so that you can see more frames at once.
Insert a new layer, naming it sounds and drag it above all the other layers. Choose File>Import and open the codeSounds folder inside the sounds folder. Shift click to select all the sounds. Press F11 to open the library and play one or more of the sounds.
Select the control sound again and click on the Properties button -- notice the large size of the file. Choose Speech from the Compression drop down menu and select 5kHz. Click the test button -- notice that it doesn't sound very good. Select 11kHz and notice how much better it sounds. -- 11 is the recommended sample rate for speech.
In the Library, change each sound's compression settings to the same settings as for control. Save the file and keep it open for the next exercise.

Exercise 6 - Synchronizing Sound to Narration Cues

Using the file from the previous exercise, select Frame 1 in the sounds layer. From the Library, drag an instance of the control sound onto the Stage. Notice that the waveform appears in the Timeline -- all sounds must be in a keyframe.
Doubleclick on the Layer icon next to the sounds layer name. Change the Layer Height in the drop down menu to 200% to make the layer taller so that you can more easily see the waveform.
Click on Frame 1 to select it and the Property Inspector select Sync:Stream. This will force the movie to keep pace with the sound. Choose Control>Test Movie. Scrub the Playhead back and forth to identify where the next animation of the O begins on the Overtaking layer -- about frame 101. Click on the Frame View pop-up menu on the right side of the Timeline and choose Normal and short to make it easier to select frames in the timeline.
On the sounds layer, select Frame 101 and press F7 to add a keyframe -- this is because all sounds must be in a keyframe. In the Property Inspector, choose overtaking from the drop down sound list. (This is another way of adding sound to a movie -- previously we dragged an instance from the library onto the Stage). Repeat this step for the other sounds in the movie.
Choose Control>Test Movie. Notice that some of the sounds are cut short when a new animation begins -- this is because Stream sounds will stop as soon as a new keyframe is encountered on the same layer.
To fix this, in the sounds layer, click and drag Frame 201 to Frame 240. Notice that the previous sound (overtaking) continues until Frame 231. Click and drag Frame 240 back to Frame 232 -- just after the previous sound ends.
Click and drag the last keyframe in the overtaking layer to Frame 231. This will make the overtaking animation and the sound narration end together. Click to the right of the layer name on the Visible layer to select all the frames on that layer including the tween. Click in the Timeline and drag 31 frames to the right so that so that the animation that started on frame 201 now begins on frame 232. (You have to release the mouse and click off the layer to deselect it, to see whether you have accomplished this.) Test the Movie again. Notice that the sounds and animations of the first few letters are now harmonized and the sounds are not cut short. Repeat these steps for the other sounds. Save and close the file

Chapter 14 - Components and Forms

Components allow one to use things like a scrollable text box without having to develop them from scratch. In Flash, they are a special type of Movie Clip. Flash MX ships with 7 components (a check box, a combo box, a list box, a push button, a radio button, a scrollbar, and a scroll pane).

Exercise 1 - Creating a Form (using orderFormFinal.fla and orderForm.fla)

Open the final version of the file and choose Control>Test Movie. When you are done testing, close the file and open the other file. In the Main Timeline, click the Add Layer button and name it components and move it to the top.
Choose Window>Components to open the Components panel if it isn't already open. Select the ComboBox to select it and drag an instance onto the Stage, to the right of "How many boards would you like to order".
Open the Library (F11). The Flash UI Components folder was added to the Library when you added the component to the Stage. Open up the folder to see what is inside -- these are the various things needed to a ComboBox.
From the components panel, click on the ListBox to select it and drag it onto the Stage, to the right of Choose the board text. Choose the radio button component, and drag 4 instances of it onto the Stage, to the right of "Choose your board color"
Select the Text tool in the Toolbox.. In the Property Inspector, choose Input Text foe the Text Type, Multiline for the Line Type, and click the Show Boarder Around Text button. Make sure the font is set to Arial, 12pt, black. Drag on the stage to create a textbox.
Click and drag the Scrollbar component onto the right side of the text box on the Stage -- the scrollbar component resizes itself to match the height of the text box. You can also attach one to the bottom (a horizontal scrollbar).
Click on the PushButton and drag an instance of it onto the Stage just below the scrolling text box.
Choose Window>Align and select all the components that are near the white vertical interface line. In the Align panel, choose Align left edge (top left button). [If the "To Stage" button is pressed, everything will go to the left margin so unpress this button.] Click off the Stage to deselect everything and now Shift+click the two radio buttons on the right and choose Align right edge. [It's odd that one is right-aligning these rather than left-aligning them since one would I think want the radio buttons underneath each other and the amount of text might differ among the two buttons]
Click off the Stage to deselect everything and shift+click the top two radio buttons and select Align top edge in the Align panel. Do the same for the bottom two, selecting Align bottom edge.
Notice that the scrollbar isn't attached to the textbox anymore. Click on the Scrollbar component to drag it back onto the right edge of the textbox where it will snap back into place. Save the file and keep it open for the next exercise.

Exercise 2 - Configuring Components

With the file from the last exercise, click on the ComboBox on the stage to select it. In the Property Inspector (it looks different than usual because it is displaying the built-in properties of the component. One can also see these parameters by choosing Window>Component Parameters and then selecting a component on the Stage to view its parameters.
In the Property Inspector, click inside the Instance Name text box and type quantityCB -- we will use this instance name in ActionScript. Click on the Labels parameter in the Property Inspector and click on the magnifying glass at the right to open the Values dialog box, where one can enter the values that will appear for the user to select from.
In the Values dialog box, click on the Plus sign to enter a new value. Click on "default Value" and enter 1. Click the plus sign, and repeat, entering 2, 3, 4, and 5, one at a time. Click OK when done. Choose Control>Test Movie to test the box.
Click on the ListBox component and name it textLB. Click on the labels parameter to select it and then click on the magnifying glass on the right; if you don't see the magnifying glass, click the [] in the middle of the row.
In the Values dialog box, click on the Plus sign to enter a new value boardThis. Click on the + sign to enter the next value and add more text. Do this several times. To move an entry up or down, click on the number at the left and use the arrow keys at the top of the Values box. Choose Control>Test Movie.
Notice that some of the entries are cut off. Select the Free Transform Tool in the Toolbox and click on the ListBox; click on the right hand middle handle and drag it to the right to make it bigger.
Select the top left RadioButton on the Stage. In the Property Inspector, give it an instance name of redRB. Select the label parameter and enter firecracker red on the right -- this is what the user will see. For Group Name, enter colorGroup. All radio buttons with the same Group Name will function as a group; i..e. only one radio button in a group can be checked, so checking another one, unchecks the currently checked button. Select the Initial State parameter, and select True. This means the button will be initially checked; only one button in a group can have this. Leave the label placement to right -- this will put the label to the right of the radio button.
Select the top right Radio Button on the Stage. Enter greyRB for the instance name, for Label, type gunmetal grey, set Initial State to false, and enter ColorGroup for Group Name. Select the bottom left radio button, type RB for the instance name, lights out black for the label, etc. Select the bottom right radio button, enter blueRB for instance name, midnight blue for label, etc. Choose Control>Test Movie to test the radio buttons.
Click on the textbox to select it and give it an instance name of messageTxt. Select the scrollbar and for the TargetTextField parameter, enter the instance name of the textbox, i.e. messageTxt. Leave the Horizontal parameter to false, which results in a vertical scrollbar. Choose Control>Test Movie to test the scrolling text box and see how the textbox automatically scrolls as one adds more text.
Click on the pushbutton and give it an instance name of submitPB and enter Submit for the label parameter. This will be the text that appears on the button. For the Click Handler parameter, type onSubmit. Save the file and keep it open for the next exercise.

Exercise 3 - Modifying Components - one can change the appearance of components

With the file from the previous exercise, choose Control>Test Movie to preview. Notice how the background of the scrollbars are grey. In the Library (F11), double-click on the Component Skins folder to exapnd it. Doubleclick on the FScrollbar Skins folder to expand that folder. Double click on the fsb_ScrollTrack Movie Clip to open that Movie Clip's Timeline.
Double click on the artwork on the Stage to open the scrollTrack symbol's Timeline. Select the shape on the Stage and in the Property Inspector, click on the Fill Color box and enter #C1CE0F in the text field at the top of the palette. Press Enter and in the Information Bar, click on Scene 1. The changes to component skins cannot be seen on the Stage, you must choose Control>Test Movie to see them.
In the Library, double-click on the FRadioButton Skins folder and double-click the frb_frame Movie Clip to open that Timeline. Change the magnificaton level to 800%. Double click on the lower right edge of the inner circle. This will put you inside the frb_rightln Movie Clip. Double click on the same spot to open the group inside that Movie Clip. In the Property Inspector, click on the Fill Color box and enter #C1CE0F as the color. This will change the color of half of the inner circle.
On the Stage, double click four times on the upper left side of the circle, to leave the group, to leave the frb_rightln, to open the frb_leftin and open the group inside it. In the Property Inspector, click on the Fill Color box and again enter #C1CE0F as the color. Click on Scene 1 in the Information Bar and Control>Test Movie
In the Library, double click on the FPushButton Skins folder and double click on the fpb_over Movie Clip. Inside the Movie Clip, double click on the side of the square to open fpb_face_over Movie Clip. Click on the inside square to select the fill of the square and enter the same color for the Fill Color. In the Information Bar, click on Scene 1 and then choose Control>Test Movie to test the rollover for the button. Save and close the file.

Revised: April 14, 2006. Comments to William Pegram, wpegram@nvcc.edu