Flashnik : Authoring Interactivity with Flash and Beatnik

by Chris Burke

  Contents

Introduction

This is version 2.0 of the Flashnik Tutorial. Please also see V 3.0 which covers the use of an alternate Flash sound movie for users who do not have Beatnik installed.

This tutorial will walk you through several methods of integrating Flash with interactive Beatnik audio and music. It includes an online demo and a downloadable package including a Flash file (FLA) that developers can open in Flash 4 to see exactly how Beatnik and Flash work together. This tutorial is also contained in the package for reading offline. By reading the tutorial and examining the FLA, you will learn to create your own Flashnik projects. This tutorial assumes that the reader has a working understanding of Flash.

You will need:

In addition, you will need the following files which are part of the downloadable FLA package (Windows and Macintosh):

Flashnik: Flash and Beatnik

Beatnik has become an indispensable tool for web developers. It sounds good, is bandwidth friendly and is relatively easy to learn. Similarly, Flash was recognized early on by developers as the bandwidth-friendly choice for web animation. Both are in heavy use by end-users, making them attractive even on their own, but doubly so together.

Luckily for developers there is a relatively painless way to make the two technologies interact. Thanks to Beatnik's Music-Object, much of the coding work is done for us and we just have to make the connections. There are two ways to do this. One can control Beatnik from a Flash movie using FS Commands or control a Flash movie from Beatnik using Meta Events. One can also use a combination of the two methods.

There are advantages to both methods. Controlling Beatnik from Flash is good for projects with functional sounds such as button sounds and playNote cues triggered by frames or actions in the Flash movie. It is also good for triggering changes in a music mix from actions in Flash. Controlling Flash from Beatnik is good for scoring a Flash movie as you would a film and keeping tight sync between musical and visual events. This is the first of several articles to be written for this forum and will deal with the first method. Make sure to also check out the Flashnik Remixer Tutorial for the next step in Flashnik authoring.

You might like to review our Suggestions section for helpful tips on Flashnik authoring habits and creative strategies.




Part 1: Flash Authoring

First, take a look at the online demo. It's a simple example of some of the more common ways to use Beatnik and Flash together.

The techniques used in the demo include:

There are many other ways to effect the music and sound in an rmf file. Consult the Beatnik Web Authoring Doc. for a list of features.

Follow these steps to add music and sound to your own Flash project. Open the FLA file in Flash 4 to examine the methods used more closely.

Background Music

It is sometimes helpful in Flash to dedicate the top layer to labels and actions as we have done in Demo.FLA. In this "Labels" layer:

1. Select the frame where you would like the music to start. We have chosen frame 2.

2. From the "Modify" menu, choose "Frame".






3. Click the "Action" tab.

4. Click the "+" sign and drag down to "FS Command".






5. Click the words "FS Command" and in the "Commands" box, type "player1.play".






Note: "player1" is a generic Beatnik Instance name. You can name it what you like as long as it is consistent in your FLA and HTML file. For more on Music Object methods like those used in these examples, see the Web Authoring Doc.

6. Click "Okay".




Button sound

In the case of the Demo.FLA, we have a flyswatter that needs a swat sound when clicked. There is a lovely swoosh sound in the Beatnik Special Bank, program number 118. We will set the program in the RMF file later. For now, we will create the FS Command that will play the note. The flyswatter button is in a nested Movie Clip called "stop btn MC".

1. From the Library, double-click the symbol of your button ("stop btn MC" in Demo.FLA). Select the frame that corresponds to the "downstate" of the button (frame 21 in the "flyswatter" layer). Click on the button graphic to select it on the stage.

2. From the "Modify" menu, choose "Instance".






3. In the dialog box, where it says "behavior", choose "button".






4. An "Action" tab will appear. Click it.

5. Click the "+" sign and drag down to "FS Command".

6. Clicking the words "On Release" will bring up a parameters box with a list of user actions (on rollover, on press, on release, etc.) Choose "On Press".

7. Click the words "FS Command" and in the "Commands" box, type "player2.playNote".

8. In the "Arguments" box, type "12,1,118,66,127,1500".






Note: This will play a note on Midi Ch. 12, bank 1, program 118, note number 66, at velocity 127, for 1500 milliseconds or 1.5 seconds. The other actions listed control the rollover and downstate graphics for the button.

9. Click "Okay".




Sound Effect

We have an annoying little fly in our Demo movie who needed a synchronized buzzing sound effect. For our purposes, the helicopter program in the Beatnik GM Bank fit the bill. We also wanted to simulate the rightward motion of the fly and the movement away from the viewer. To add a synchronized, panning sound effect to an animation in your FLA:

1. In your "Labels" layer, click the frame where your animation starts (frame 39 in Demo.FLA).

2. From the "Modify" menu, choose "Frame".

3. Click the "Action" tab.

4. Click the "+" sign and drag down to "FS Command".

5. Click the words "FS Command" and in the "Commands" box, type "player2.setController".

6. In the "Arguments" box, type "13,10,5".

Note: This command sets controller 10 (pan) on midi channel 13, to a value of 5 (far left).

7. Click the words "FS Command" again and in the "Commands" box, type "player2.playNote".

8. In the "Arguments" box, type "13,0,125,87,125,20".

Note: This command will play a note on Midi Ch. 13, Bank 0, Program 125, Note Number 87, at Velocity 125, for 20 milliseconds.

9. Click "Okay".

10. In your "Labels" layer, click several frames later (frame 43 in Demo.FLA).

11. Repeat step 2-9 but this time type the command"player2.setController" and the argument "13,10,20". Then for the second FS Command, type the command "player2.playNote" and the argument "13,0,125,82,115,20".

This sets controller 10 to 10, or slightly further rightward, and plays note number 82, at velocity 115, for 20 milliseconds- slightly lower in pitch and quieter. In this way we will simulate the sound of the fly as it moves left to right and further away.

12. Put FS Commands on every fourth frame until the fly is out of sight, with the last of these frames containing a full pan right (13,10,127) and very low note velocity. In the Demo.FLA, we let the last notes trail off as we continued to pan.

The "Beatnik" voice sample that is spoken by the green critter in the tree is achieved in the same way. An action is placed on the frame in the "Labels" layer where the mouth animation begins. Here we put the FS Command "player2.playNote" with "14,1,112,62,100,1500" as the arguments.

You will now want to save your Flash file and then choose "Export Movie" from the File Menu. Include a version number in the file name.




Part 2: HTML and Javascript

Below is sample code to cut and paste into your html. It shows how to use the "Music.embedFlashMovie" method built into Beatnik's musicObject. This method automates the correct Embed and Object tags needed for cross-browser applications.

Please note: Music.embedFlashMovie does not write in the code needed for certain advanced settings in Flash such as java player and quicktime options, as well as certain playback options like 'paused at start', 'loop', and 'display menu'. If you need to use these settings, you will not want to use Music.embedFlashMovie. Instead, consult the "Music Object extensions- Flash" section of the Beatnik Web Authoring Doc for info on using the wireFlashMovie method. Music.embedFlashMovie will work for most projects and it greatly simplifies the code and therefore the opportunities for mistakes.

In this template, you will notice that some parts are bolded in black and other parts are bolded in red. All the bolded parts are parts that you can / should customize. The red parts represent the parts that are critically important to making the Flash-to-Beatnik wiring work correctly. You should pay close attention to matching up all the things that need to be matched up. For example, all occurrences of "myFlashMovie" in this template should be substituted with the name that you choose for the Flash movie instance. If you don't change all the occurrences to exactly the same name, then the page is almost certain to not work correctly. The same applies to "player1" and "my-flash-movie.swf". 

<HTML><HEAD><TITLE>Beatnik and Flash Template</TITLE></HEAD>
<BODY>

<SCRIPT SRC="correct-path-here/music-object.js"></SCRIPT>
<SCRIPT SRC="correct-path-here/music-object-x-flash.js"></SCRIPT>

<SCRIPT LANGUAGE=JavaScript><!-- //

Music.embedFlashMovie (
   'SRC="my-flash-movie.swf" NAME="myFlashMovie" BASE="http://www.mydomain.com" ' +
   'WIDTH=600 HEIGHT=400 ALIGN=TOP QUALITY="high"'
);
player1 = new Music ();
player2 = new Music ();
player1.magicEmbed ('SRC="my-music-file.rmf" WIDTH=2 HEIGHT=2 HIDDEN AUTOSTART=TRUE');
player2.stubEmbed ('stub.rmf');

// --></SCRIPT>

</BODY></HTML>

Note: for our example, we would set autostart to "false" since we created an FS Command to start the music.

In addition to the Music.embedFlashMovie method, notice that player2 uses the "stubEmbed" method. This method allows playback of sounds from the General and Special banks of the Beatnik Player (including our 3 sound effects above) without requiring a user-created RMF file. Instead, it embeds "stub.rmf", essentially an empty rmf file, which you will find in the downloadable package. If you use this method on your page, you will need to include stub.rmf on your site as well.

Save your html file as "index1.html" in your "HTML" folder.

If you tried viewing the source of our online demo page, you will have noticed that the above code is not there. In it's place you will have found the code that the Beatnik music-object had written in based on which browser and platform you are using.




Part 3: Tweaking

You should now have a working set of files. Copy them all into a new folder called "TEST" along with the music-object.js and music-object-x-flash.js files that came in the downloadable package.

Now rename the copies of your .rmf and .swf with the names you used in your code. Open index1.html (or whatever you renamed it) in your browser.

If your Flash file is at all complex, there may be a few things that don't work on your first test. Take detailed notes and look for clues as to why it isn't working. Try some trouble shooting if you need to. For instance, if you can't get the .rmf to play, try mocking up a simple page with just the .rmf embed and music-object reference. In the embed, set autostart to "true". Or, if your .swf file shows up blank, double click it in the finder to make sure it plays alright outside the browser. Frequently in this kind of project, the problem will lie in your html or javascript. Double check it against the sample above with an eye to the exact syntax and look out for typos. Next, look at your FS Commands for typos or syntax errors.




Part 4: Using Custom Sounds

If you wish to create custom sounds to use in your Flashnik project, you can download the Beatnik Editor for MacIntosh. You will also need a midi sequencer and a sound editor to create the custom sounds that will then be imported into the Beatnik Editor. Consult the Editor Doc for more on this.

Keep in mind that you will then need to make some changes to your FS Commands and HTML to reflect the new instrument information. One method is to combine custom SFX in your backgroud music file so that you need only embed one RMF. In this case you would alter your HTML from the above example, deleting the two lines that refer to "player 2". Then in your Flash file, change all "player2" references to "player1". Your "playNote" FS Commands will need to reflect the correct midi channel, bank, program, and note number info for your new custom instrument.




Resources


Good luck. We look forward to seeing and hearing lots of great Flashnik sites.




Suggestions

Here are some suggestions that may help you be more productive in creating your Flashnik project.

It is usually advisable to adopt a sketch-based working method. Finding a fatal flaw in your design after working for days on the assets is not much fun. A good amount of shifting between Beatnik, Flash and html is probably the most efficient way to achieve your goal. If something just can't be done effectively, you will know before you have expended too much energy on it. Also, the trial and error process can often suggest new techniques that you might not have thought of otherwise.

Another good practice is to keep a well-organized folder for your work with subfolders for Beatnik, Flash, html and tests. Since you will be creating successive versions of rmf, swf and html files that need to have the same names as their predecessors, you might want to assign version numbers. Then you can copy the current rmf/swf/html set to the test folder and rename the files there for checking them in the browser. This way you always have a clearly labeled backup of each version for when you need to go back to them.

Try approaching your project without too much thought to the technology you will use. Don't think of your piece as a demonstration of the technology, but as a work with it's own reason to exist. In the end, it may well demonstrate some cool feature of Beatnik (there are lots), but will be more centered creatively if you think of it as separate from the technology.

In creating your Flashnik project, think of Beatnik and Flash features as they relate to character, story or events in your piece. The setTrackMute feature, for example, can mean that each character in a story can have a different instrument play when they enter. How does this in turn suggest possibilities for your project?

It is helpful to write your Beatnik music with interactivity in mind. Here are some Beatnik tips:

Back to the Tutorial