Edit a sound in Soundbooth

You can add a sound to a document using the library, or you can load a sound into a SWF file during runtime, using the loadSound method of the Sound object. For more information, see loadSound (Sound.loadSound method) in the ActionScript 2.0 Language Reference or Sound Class in the ActionScript 3.0 Language and Components Reference.

1. Import the sound into the library if it has not already been imported.
2. Select Insert > Timeline > Layer.
3. With the new sound layer selected, drag the sound from the Library panel onto the Stage. The sound is added to the current layer.

You can place multiple sounds on one layer or on layers containing other objects. However, it is recommended that each sound be placed on a separate layer. Each layer acts as a separate sound channel. The sounds on all layers are combined when you play the SWF file.

• In the Timeline, select the first frame that contains the sound file.
• Select Window > Properties > Properties, and click the arrow in the lower-right corner to expand the Property inspector.
• In the Property inspector, select the sound file from the Sound pop-up menu.
• Select an effect option from the Effects pop-up menu:

None
Applies no effects to the sound file. Select this option to remove previously applied effects.

Left Channel/Right Channel
Plays sound in the left or right channel only.

Fade Left To Right/Fade Right To Left
Shifts the sound from one channel to the other.

Fade In
Gradually increases the volume of a sound over its duration.

Fade Out
Gradually decreases the volume of a sound over its duration.

Custom
Lets you create custom in and out points of sound using the Edit Envelope.

Select a synchronization option from the Sync pop-up menu:

Note: If you are placing the sound on a frame other than Frame 1 in the main Timeline, select the Stop option.

Event
Synchronizes the sound to the occurrence of an event. An event sound, such as a sound that plays when a user clicks a button, plays when its starting keyframe first appears and plays in its entirety, independently of the Timeline, even if the SWF file stops playing. Event sounds are mixed when you play your published SWF file. If an event sound is playing and the sound is instantiated again (for example, by the user clicking the button again), the first instance of the sound continues to play and another instance begins to play simultaneously.

Start
The same as Event, except that if the sound is already playing, no new instance of the sound plays.

Stop
Silences the specified sound.

Stream
Synchronizes the sound for playing on a website. Flash forces animation to keep pace with stream sounds. If Flash can’t draw animation frames quickly enough, it skips frames. Unlike event sounds, stream sounds stop if the SWF file stops playing. Also, a stream sound can never play longer than the length of the frames it occupies. Stream sounds are mixed when you publish your SWF file.

An example of a stream sound is the voice of a character in an animation that plays in multiple frames.
Note: If you use an mp3 sound as a stream sound, you must recompress the sound for export. You can export the sound as an mp3 file, with the same compression settings that it had on import.

• Enter a value for Repeat to specify the number of times the sound should loop, or select Loop to repeat the sound continuously.

For continuous play, enter a number large enough to play the sound for an extended duration. For example, to loop a 15-second sound for 15 minutes, enter 60. Looping stream sounds is not recommended. If a stream sound is set to loop, frames are added to the file and the file size is increased by the number of times the sound is looped.

• To test the sound, drag the playhead over the frames containing the sound or use commands in the Controller or the Control menu.

Supported sound file formats

When you finish your FLA file, you are ready to publish it so it can be viewed in a browser. When you publish the file, Flash Professional compresses it into the SWF file format. This is the format that you place in a web page. The Publish command can automatically generate an HTML file with the correct tags in it for you.

To publish the FLA file and view the SWF in a browser:

1. Choose File > Publish Settings.
2. In the Publish Settings dialog box, select the Formats tab and verify that only the Flash and HTML options are selected (see Figure 1)This action causes Flash to publish only the SWF file and an HTML file. The HTML file is used to display the SWF file in a web browser.

   

   Figure 1. Flash and HTML options on the Formats tab

3. In the Publish Settings dialog box, select the HTML tab and verify that Flash Only is selected in the Template pop-up menu (see Figure 2). This template creates a simple HTML file that contains only your SWF file when displayed in a browser window.

   

   Figure 2. Choosing Flash Only from the Template menu

4. Click OK.
5. Choose File > Publish and open your web browser.
6. Choose File > Open in the web browser.
7. Navigate to the folder where you saved your FLA file. The SimpleFlash.swf and SimpleFlash.html files are there. Flash Professional creates these files when you click Publish.
8. Select the file named SimpleFlash.html.
9. Click Open. Your application displays in the browser window.

Congratulations! You have now completed your first FLA file.

You can turn your new artwork into a reusable asset by converting it to a symbol. A symbol is a media asset that can be reused anywhere in your document without the need to re-create it. Symbols can contain images and animations along with other types of content.

1. Click the Selection tool in the Tools panel (see Figure 1).

   Figure 1. Tools panel with the Selection tool selected

2. Click the circle on the Stage to select it. A bounding box selection appears around the circle.
3. With the circle still selected, choose Modify > Convert to Symbol (or press F8) to bring up the Convert to Symbol dialog box (see Figure 2).Note: You can also convert a graphic into a symbol by selecting it and dragging it into the Library panel.

   

   Figure 2. Convert to Symbol dialog box

4. Click OK. A square bounding box appears around the circle. You have now created a reusable asset, called a symbol, in your document. In this case, you created a movie clip symbol.If the Library panel is not open, choose Window > Library. The new symbol appears in the Library panel.

Animating the circle

Now that you have some artwork in your document, you can make it more interesting by animating it to move across the Stage:

1. Drag the circle to just left of the Stage area (see Figure 3).

   Figure 3. Circle moved to the left of the Stage area

2. Right-click the dot (also called the keyframe) on frame 1 of the Timeline and choose the Create Motion Tween option from the menu. Notice that the Timeline is automatically extended to frame 24 and the red marker (current frame indicator or playhead) is located at frame 24 (see Figure 4). This indicates that the timeline is ready for editing at 1 second—that is, at frame 24 when the frame rate is 24 fps.

   Figure 4. Extended Timeline ready for editing on frame 24

3. Select the circle on the Stage and drag it to the right of the Stage area. This step just created the tweened animation. Notice the dot (keyframe) which appears at frame 24. Also notice the motion guide line showing the path of motion between frame 1 and frame 24 (see Figure 5).

   Figure 5. A 24-frame animation showing the circle at the end of the animation on frame 24

4. In the Timeline, drag the red playhead back and forth from frame 1 to frame 24 to preview the animation by scrubbing the Timeline.
5. Add a change in direction in the middle of the animation by dragging the playhead to frame 12 and then moving the circle to another location on the screen. Notice the change in the motion guide line and the new dot on the Timeline at frame 10 (see Figure 6). The dots on the Timeline are keyframes which mark where (at what frame) objects change on the screen.

   Figure 6. The tweened animation showing a change in direction at frame 12

6. Experiment with changing the shape of the motion guide path. Click the Selection tool in the Tools panel and then click a section of the motion guide line and drag it to bend the line shape (see Figure 7).

   Figure 7. The tweened animation showing curves added to the motion guide line

7. Choose Control > Test Movie to test the FLA file.
8. Close the Test Movie window.

To build an application in Flash CS4 Professional, you create vector graphics and design elements with the drawing tools, and import additional media elements like audio, video, and images into your document. Next, you define how and when you want to use each of the elements to create the application you have in mind.

When you author content in Flash Professional, you work in a document called a FLA file. FLA files have the file extension .fla (FLA). While viewing a FLA file, you’ll notice the Flash CS4 Professional user interface (see Figure 1) is divided into five main parts:

• The Stage is where your graphics, videos, buttons, and so on appear during playback.
• The Timeline controls the timing of when elements in the movie appear on the Stage. You also use the Timeline to specify the layering order of graphics on the Stage. Graphics in higher layers appear on top of graphics in lower layers.
• The Tools panel holds the general set of tools used for selecting objects on the stage and drawing vector graphics.
• The Property inspector displays editable information about any selected object.
• The Library panel is where media elements and symbols are stored and organized.

Figure 1. Flash CS4 Professional user interface is divided into five main parts

ActionScript code allows you to add interactivity to the media elements in your document. For example, you can add code that causes a button to display a new image when the user clicks it. You can also use ActionScript to add logic to your applications. Logic enables your application to behave in different ways depending on the user’s actions or other conditions. Flash CS4 Professional uses ActionScript 3.0 when an ActionScript 3.0 or Adobe AIR file is created, or ActionScript 1.0 and 2.0 when an ActionScript 2.0 file is created.

Flash includes many features that make it powerful but easy to use, such as prebuilt drag-and-drop user interface components, built-in motion effects which you can use to animate elements on the Timeline, and special effects that you can add to media objects.

When you have finished authoring your FLA file, you publish it using the File > Publish command (Shift+F12). This creates a compressed version of your file with the extension .swf (SWF). You can then use Flash Player to play the SWF file in a web browser or as a stand-alone application.

Creating a simple FLA file

To illustrate the basic steps of creating any FLA document, this tutorial guides you through the process in a simple tutorial. This short tutorial is just a sample of the workflow you’ll use while authoring in Flash Professional. The first step is to create a new document:

1. Choose File > New.
2. In the New Document dialog box, Flash File (ActionScript 3.0) is selected by default. Click OK.
3. Click the workspace drop-down menu un the upper right of the screen and select the Essentials workspace layout option (see Figure 2).

   

   Figure 2. Choosing the Essentials option to see the workspace layout used by the tutorial

4. Click the Properties tab in the upper right side of the user interface to view the Stage properties for the file.
5. In the Property inspector, located by default vertically along the right side of the workspace, the Size button displays the current Stage size setting as 550 × 400 pixels (see Figure 3). The Background color swatch is set to white. You can change the color of the Stage by clicking the swatch and selecting a different color.

   

   Figure 3. Property inspector showing the Stage size and background color

6. Choose File > Save.
7. Choose a location for the file on your hard disk, name the file SimpleFlash.fla, and then click Save. Remember this location, because you’ll need to find this directory at the end of this tutorial.

Drawing a circle on the Stage

After you’ve created your document, you are ready to add some artwork for the document:

1. Select the Oval tool from the Tools panel (see Figure 4).

   

   Figure 4. Oval tool in the Tools panel

2. Click the stroke color swatch in the Property inspector and select the No Color option from the Stroke Color Picker (see Figure 5).

   

   Figure 5. Selecting the No Color option in the Stroke Color Picker

3. Select a color of your choice from the Fill Color Picker, located directly below the Stroke Color Picker. Make sure the fill color contrasts well with the Stage color. In this example, we chose a blue fill color with a red Stage color.
4. With the Oval tool still selected, draw a circle on the Stage by Shift-dragging on the Stage (see Figure 6). Holding the Shift key constrains the Oval tool to a circle.

   

   Figure 6. Circle drawn on the Stage

To make a button that stops or starts a music loop (variable name: “music”) depending on whether the music is playing already, create a true/false variable (in this case, “musicplaying”) and change it with the button:
on (release) {
if (musicplaying == true) {
music.stop();
musicplaying = false;
} else {
music.stop(); // guard against overlap
music.start(0, 100);
musicplaying = true;
}
}

This way, you don’t need to do any checking to figure out whether the sound is playing. You also need only one button, not two.

This script works with an attached or loaded sound, with the ID “music.” When you start the sound file for the first time, you must initialize (set) the variable “musicplaying” to true:
music.start(0,100);
var musicplaying = true;

The script for a fully functional pause button, which stops and starts at the same spot in the audio file, is explained in the book.

To go to a new Web page using Flash buttons as your navigation, put this script on a button in your FLA:
on (release) {
getURL(“http://flashconf.com/”);
}

Change the URL to match your needs. You can use a relative address instead of an absolute one.

You can add a target to the script, inside the parentheses. Add a comma and then the target name in quotes, such as “_blank” or “_parent.”

This is an easy technique, but remember that your user may not have the Flash plug-in installed, or may have an older version of the plug-in. In that case, the user may not see your buttons at all. Have you provided alternative navigation options?

To open an HTML pop-up window from within Flash, put this script on a button in your FLA:

on (release) {

}

The four indented lines should all appear on one line with no spaces.

Change the filename, the width and the height to match your pop-up window needs.

If you don’t want scrollbars, delete that word and the comma following it.

If you don’t want the pop-up window to be resized, delete the word “resizable” and the comma preceding it.

If you want to have different HTML windows open at the same time, change the window name (‘popper1′) for each separate window.

This information applies ONLY to the old ScrollBar component that came with Flash MX and to the “Flash MX Components for Flash 2004.” If you are using the new UIScrollBar component for Flash MX 2004, this will not work. Please see the other Tips page about using a scrollbar in MX 2004.

Seven lines of ActionScript will allow you to change the colors in Macromedia’s ScrollBar component for Flash MX:

sbar.setStyleProperty(“arrow”, 0xFF0000);

sbar.setStyleProperty(“highlight”, 0xFFFFFF);

sbar.setStyleProperty(“highlight3D”, 0xFF0000);

sbar.setStyleProperty(“shadow”, 0xFF99CC);

sbar.setStyleProperty(“darkshadow”, 0xFF0000);

sbar.setStyleProperty(“scrollTrack”, 0xCC6666);

sbar.setStyleProperty(“face”, 0xFFCCCC);

In this case, the ScrollBar instance name is “sbar.”

The attributes map as follows:

• arrow: Both little triangles
• highlight: Left & top edge, inner
• highlight3D: Left & top edge, outer
• shadow: Right & bottom edge, inner
• darkshadow: Right & bottom edge, outer
• scrollTrack: Slide area
• face: Dragger bar & both buttons

Version: Flash MX

Movieclip symbols are reusable pieces of flash animation – consisting usually of one or more graphic and button symbols – thus they are flash movies within your flash movie. They have their own non-restricted Timeline (any number of layers and frames – just like the main timeline) that plays independent of the main movie’s timeline.

The best thing about using movieclips is that you can control them with ease – you can change their dimensions, position, color, alpha, and other properties and can even duplicate and delete them. Thus any object that needs to be controlled using flash actionscript (no matter how simple or complex it might be) needs to be a movieclip with an instance name that is called in the actionscript code.

Please carry out the following steps in Flash to create movieclip symbols.

1. First create/import the object(s) to be converted into a movieclip. Import bitmaps onto the stage using Ctrl+R.
2. Select the object(s) and then press F8 (or Modify >> Convert to Symbol).
3. Select the Movieclip Behavior and name the symbol, say ‘mc_fade’).
4. Double-click the instance of ‘mc_fade’ on the stage to switch to its symbol-editing mode. Now create an animation sequence (you can use simple Tweened Animation or Frame-by-Frame Animation)



Fig: Symbol-editing Mode of completed flash movieclip ‘mc_fade’

5. The above figure shows the Timeline of the Movieclip symbol. Click Scene 1 to exit from the symbol editing mode.
6. Save your work and test the Movie (Ctrl + Enter). That’s it your movieclip is ready! Its that simple.

Please carry out the following steps in Flash to create button symbols.

1. First create/import the object(s) to be converted into a button. Import bitmaps onto the stage using Ctrl+R.
2. Select the object(s) and then press F8 (or Modify >> Convert to Symbol).
3. Select the Button Behavior for the symbol and name the symbol say, ‘btn_home’.
4. Double-click the instance of ‘btn_home’ on the stage to switch to its symbol-editing mode. The Timeline header changes to display four consecutive frames labeled Up, Over, Down, and Hit as shown below.
   
   Fig: Symbol-editing Mode of completed flash button ‘btn_home’
5. The first frame displays the drawn vector/plain text used for creating this button, now insert a Key frame (F6) in the frame labeled Over (Flash automatically duplicates the contents of the Up frame).
6. Now change the color of the object in the Over frame to create a rollover effect in the button.
7. Insert frames (F5) for the Down frame and the Hit frame (only defines the area of the button that responds to user action and is not visible at runtime).
8. Save your work and test the Movie (Ctrl + Enter). That’s it your simple button is ready!

Graphic symbols are reusable static images that are used mainly to create animations. Any drawn vector/plain text/imported bitmap (photo), or combinations of these, can be converted into a single controllable object, called a graphic symbol. Graphic Symbols have only one frame in their timeline.

Please carry out the following steps in Flash to create graphic symbols.

1. First create/import the object(s) to be converted into a graphic. Import bitmaps onto the stage using Ctrl+R.
2. Select the object(s) and then press F8 (or Modify >> Convert to Symbol).
3. Select the Graphic Behavior and name the symbol, say ‘g_home’.
4. To edit it at a later point, double-click the symbol in the library (Ctrl + L) or any of its instances on the stage to switch to its symbol-editing mode as shown below. The name of the symbol will appear near the scene name (‘Scene 1′ by default, as shown below).
5. Make the necessary changes and click ‘Scene 1′ to exit from the symbol editing mode and go back to view the main movie’s time-line.

What is a Flash Symbol?

A symbol is a reusable object used/created in Flash. A Symbol can be reused throughout your movie or imported and used in other movies. There are three types of symbols: Graphics, Buttons, and Movieclips.

A copy of a symbol used in the movie is called an Instance, which can have its own independent properties (like color, size, function, etc.) different from the original symbol. All symbols used in a flash movie are stored in the Library from where you can drag-and-drop new instances of the symbols into your movie. When a symbol is edited all of its instances get updated, but changing the properties, effects or dimensions of an instance of a symbol does not affect the original symbol or other instances.

Importance of using Flash Symbols

Using flash symbols is very crucial to the file size of your Flash movie. The Flash file size depends largely on the size of all the graphics and texts used in the movie (both symbols and non-symbols) – here the major advantage of using symbols is that a symbol’s size is taken into consideration only once even if it is used a hundred times – this is the true power of Flash. Unused symbols in your library are not counted in the size of your movie.

Important Tip: Get used to using symbols in flash right from the beginning and name them neatly for easy maintenance. It is a very tough job optimizing your file size if you don’t use symbols from scratch!

The Three Types of Symbols

Graphic symbols are reusable static images that are used mainly to create animations. Any drawn vector/plain text/imported bitmap (photo), or combinations of these, can be converted into a single controllable object: as a graphic symbol. They have only one frame in their timeline. Learn how to create a graphic symbol.

Button symbols are used for timeline navigation - They add interactivity to the movie and respond to mouse clicks, key press or rollovers/rollout, and other actions. You define the graphics associated with various button states (Up/Over/Down/Hit), and then assign actions to the instance of a button. They have 4 frames in their timeline – one each for the up, over and down states, and one to define the hit area of the button. Learn how to create a button symbol.

Movieclip symbols are reusable pieces of flash animation – consisting of one or more graphic/button symbols – thus they are flash movies within your flash movie. They have their own non-restricted Timeline (any number of layers and frames – just like the main timeline) that plays independent of the main movie’s Timeline. The best thing about using movieclips is that you can control them from actionscript – you can change their dimensions, position, color, alpha, and other properties and can even duplicate and delete them. Learn how to create a movieclip symbol.

The three symbols appear in the flash library similar to the three symbols the above image. Let’s look at how to create these three types of flash symbols now.

Enable Linux compatibility and linprocfs

Add linux_enable=”YES” to /etc/rc.conf. Add compat.linux.osrelease=2.6.16 to /etc/sysctl.conf. Add OVERRIDE_LINUX_BASE_PORT=f8 to /etc/make.conf. Add this line to /etc/fstab:

linproc /usr/compat/linux/proc linprocfs rw 0 0

After run these commands:

mkdir -p /usr/compat/linux/proc
mount /usr/compat/linux/proc
/etc/rc.d/abi start
/etc/rc.d/sysctl start


Update ports and install all the needed software

Now you need to install the following ports and their dependencies:

cd /usr/ports/emulators/linux_base-f8 && make install clean
cd /usr/ports/www/linux-flashplugin9 && make install clean
cd /usr/ports/www/nspluginwrapper && make install clean

Follow the nspluginwrapper instructions to enable all available plugins:

# nspluginwrapper -v -a -i
Auto-install plugins from /usr/X11R6/lib/browser_plugins
Looking for plugins in /usr/X11R6/lib/browser_plugins
Auto-install plugins from /usr/local/lib/npapi/linux-flashplugin
Looking for plugins in /usr/local/lib/npapi/linux-flashplugin
Install plugin /usr/local/lib/npapi/linux-flashplugin/libflashplayer.so
into /usr/local/lib/browser_plugins/npwrapper.libflashplayer.so
Auto-install plugins from /root/.mozilla/plugins
Looking for plugins in /root/.mozilla/plugins

Now you can Open Firefox 3 and enter about:plugins into your address bar. You can see the output here

If your browser doesnt register the Shockwave Flash Plugin as pictured above, you need to do this:

cd /usr/local/lib/firefox3/plugins && ln -s /usr/local/lib/browser_plugins/npwrapper.libflashplayer.so npwrapper.libflashplayer.so

This video shows you how to make a simple maze game in flash.

Start Button:

on(release){
gotoandstop(whatever frame your maze is going to be on)
}

(USE THAT CODE FOR THE PLAY AGAIN BUTTONS ALSO.)

Maze walls:

on(rollover){
gotoandstop(whatever your losing frame is on)
}

Finish line:

(The same code as the maze walls, except put it to your winning frame, or your next level)

on(rollover){
gotoandstop(whatever your winning frame is on)
}

Sometimes, when you open the template .fla file with your Flash editor, once you have downloaded the template and uncompressed the sources you might get the following error message:

When you save your .fla files, it is important to keep the same filenames that were originally used by the template designer. Also consider using a consistent naming scheme for your documents. This is particularly important if you save multiple versions of a single project.

Use intuitive, easy-to-read names for your files. Do not use spaces, capitalization, or special characters. Only use letters, numbers, dashes, and underscores. If you save multiple versions of the same file, devise a consistent numbering system such as main_v7-1.fla, main_v7-2.fla, and so on. Our designers and developers choose to use all lowercase characters in their naming schemes. Many Flash designers and developers adopt a naming system that uses a noun-verb or adjective-noun combination for naming files. Two examples of naming schemes are as follows: class_planning.swf and my_project.swf. Avoid cryptic file names.

It is good practice to save new versions of a .fla file when you build an extensive project. The following are different ways that you can save new versions of files:

•    ‘ Select File’ > ‘ Save As’, and save a new version of your document.
•    Use version control software (such as SourceSafe, CVS, or Subversion) to control your Flash documents.

Note: SourceSafe on Windows is the only supported version control software that integrates with the Project panel. You can use other version control software packages with FLA documents, but not necessarily in the Project panel.

Some problems might occur if you work with only one .fla file and do not save versions during the process of creating the file. It is possible that files might bloat in size because of the history that’s saved in the .fla file or that a file might become corrupt (as with any software you use) while you are working on it. If any of these unfortunate events occur, you have other versions of your file to use if you save multiple versions throughout your development.

You might also encounter problems when you create an application. Perhaps you made a series of changes to the file and you do not want to use these changes. Or you might delete parts of the file that you want to use later in your development. If you save multiple versions while developing, you have an earlier version available if you need to revert.

There are several options that you can use to save a file: ‘ Save’, ‘ Save As’, and ‘ Save and Compact’. When you save a file, Flash does not analyze all the data before creating an optimized version of the document. Instead, the changes you make to the document are appended to the end of the .fla file’s data, which shortens the time it takes to save the document. When you select ‘ Save As’ and type a new name for the file, Flash writes a new and optimized version of the file, which results in a smaller file size. When you select ‘ Save and Compact’, Flash creates a new optimized file and deletes the original file.
Caution: When you select ‘ Save and Compact’, you cannot undo any changes you made before you saved the file. If you select Save when working with a document, you can undo changes made prior to that save point. Because Save and Compact deletes the earlier version of the file and replaces it with the optimized version, you cannot undo earlier changes.

Remember to use ‘ Save As’ frequently and to type a new file name for your document after every milestone in your project if you are not using version control software to create backups of your .fla file. If you encounter major problems while working on the document, you have an earlier version to use instead of losing everything.