Movie Clip Symbol

Contracting at Guaranteed Highest Commissions - Call (800)770-0492, email david@naaip.org, via chat, daily conference call or Click eContracting Portal.

Make a Movie Clip of the Sound File for Easy Handling

Placing sound files on the main stage in Flash gets a bit messy. The timeline expands and now you can’t really control the audio they way you might like. To solve this problem, you can place the sound file in a movieclip symbol. This will allow you to place the movieclip on the main stage and control the sound with ActionScript.

  • Create a new movieclip symbol by going to Insert>New Symbol>Movieclip. Name the new symbol sound_clip_mc.
  • Place a keyframe in the first frame, first layer. From the Properties Inspector>Sound drop down menu pick the sound. All the available sounds from the library will be showing here.
  • Go back to the main timeline by clicking Scene 1 on the Scene path tabs above the timeline.
  • In the sound layer, click on Frame 1 and drag sound_clip_mc on to the outer part of the stage. The file does not need to lay on the stage because it is a sound file embedded in a movie clip that will play anywhere in the stage window it is placed.
  • Save and test the movie (F12). The sound should play. The button is not created and will not show yet. Close the Flash player window and let’s begin the next phase of creating the audio on/off switch. Next we will make the button. The button will act simply as a rollover graphic. We will be coding the ActionScript to an invisible button. The invisible button is great for starting to develop your interactive tendencies in Flash. The button symbol we make now will have a text rollover that will grey out the on/off switch when rolled over.
  • Make a button by going to Insert>New Symbol>Button. Name it text_btn. This will catapult you into the button symbol editor which has the UP, OVER, DOWN, HIT states that we discussed earlier in the text. We want to create a rollover only for this audio switch so all we really need are the up and over states. The hit state is not needed because it‘s job will be performed by an invisible button.
  • Select the text tool in the Flash tool panel. Go to the UP state and type in the words
  • music on / off. Use the same color text for all the words.
  • Go to the OVER state and press F6 and create a keyframe. Highlight the on / off text and change the color to grey. Navigate out to the main stage.
  • Place the text_btn on the stage in Frame 1 the Button text layer.

Align it to the stage. With the button in place and the sound file inserted, we are ready to make the invisible button, add some ActionScript to it, and publish our movie. Making the Invisible Button The invisible button is a hit state only. It is useful when you want to track your action scripts easily with visual clues. The invisible button is represented as a blue box on the stage and is similar to a “slice” in Fireworks. The invisible button acts as a hotspot for the attached ActionScript. It can be coded as any other movieclip or button symbol, but it requires less work because it has few attributes and is independent of the object it sits on.

  • Insert>New Symbol>button, name the button Trigger_btn. This but- ton will trigger the ActionScript that controls the sound clip on the timeline.
  • In the button symbol editor, click on the HIT STATE and add a keyframe. With the rectangle tool from the tool panel, create a box that is 125 pixels by 25 pixels and center align it to the stage. Make the box color a bright green. Navigate to the main stage through the Scene Path above the timeline.
  • Add the trigger to the button on the stage
  • Place the trigger_btn on top of the text_btn. Align the trigger to the stage.
  • Add a keyframe to Frame 2 (the one with the stop label) for EVERY LAYER
  • This will extend the artwork across the two frames. The only item that will change in Frame 2 is the ActionScript attached to the invisible button (trigger_btn). All layers should have a dot (keyframe in them). Insert > Figure > Screenshot > Audio Switch > Keyframes Add ActionScript to the trigger_btn We have done all the setup, now we must call on ActionScript to add the interactive functionality that we need to get this button working. We want to accomplish two things:
  • Stop all sounds (ActionScript) stopAllSounds(); and gotoAndPlay(“stop”)
  • Start a sound (ActionScript) gotoAndPlay(“play”) Here are the scripts Click on the invisible button keyframe in Frame 1: Add this ActionScript on (release) { stopAllSounds(); gotoAndPlay(“stop”); } Click on the invisible button keyframe in Frame 2: Add this ActionScript on (release) { gotoAndPlay(“play”); } Hit CTRL+ENTER to test the movie. Hopefully it worked. If not, check your layers and review the steps carefully. When completed, save the Flash movie to the root directory of your site and name it music_switch.swf. Then publish the movie and the SWF file is automatically generated by Flash.

The Guts of this Flash Object

When the Flash audio button is launched the sound automatically starts playing. When the button is pushed the play head is sent to Frame 2 which it is told to stop all sounds and stop the play head. While in Frame 2 the button is pushed and the play head is sent to Frame 1 which starts the audio movieclip over again. By adding audio switches, you can create a multi-track music player for your Web portfolio. For now, one soundtrack will keep your users entertained and allow them to shut the music off if they want to. Now that we have the Flash audio switch you can place it in a layer on the index page of your portfolio. Here are the steps again:

  • In Dreamweaver, Insert>Layout Objects>Layer. Then you need to position the layer on the page to where you want to place your Flash animation. After positioning, go to Insert>Media>Flash. Find the music_switch.swf file and place it in the layer
  • Press F12 to preview the page in the browser.
  • Add both .SWF files to individual layers on the index.htm page in Dreamweaver. Press F12 to test the page in the browser. You can also test Flash movies inside Dreamweaver pages by click on the green play button on the Properties inspector. This plays the movie without having to go into a browser.

Making Edits to the Flash Files

In order to make changes to a Macromedia flash document the need to go back into the Flash application. Dreamweaver gives you a quick way to do this by letting you access source files from within the Dreamweaver page. Whenever you insert a flash object into a Dreamweaver document you are using the SWF file and have the FLA file as source.

The SWF is represented on the Dreamweaver page as a grey box with a Macromedia Flash icon in the center. If you right click on the image, you get a drop down menu that allows you to edit the Flash file. When this option is choosen, Dreamweaver will prompt you to navigate to the flash file (FLA) location. Once open in Flash, the source file can be edited and re-exported. In the case of the edited file and the old file, it is important to keep the file names the same after updating if you want Dreamweaver to update automatically the SWF in the Dreamweaver page.

If the file has been updated for purposes other than a quick fix or typo, you may want to add a version number to the file so that you know that the file has had a major change (eg: intro_v2.swf). In this case, you would need to reinsert the new SWF file into the existing Dreamweaver page because of the name change.

Conclusion

With the Web portfolio coming together and multimedia being explored and possibly integrated into the pages, we are now ready to upload pages to the world wide Web. The completed pages need to be uploaded and tested to insure that the site is working properly. Next we will discuss the internet and how to secure a Web portfolio address, host space, and issues surrounding getting the portfolio live on the internet.

Add a quote engine to your website for Free! We'll even create the website for you for Free!
There are No Catches! It's free and always will be.

"Best system in industry for insurance agents - anything less in not acceptable.

Step number #1 - NAAIP's technology helps producers project themselves as top level professional with minimal time and effort.

Step number #2 - Being among the largest brokerages in the insurance industry, allows agents access to top commissions and resources on every case.

Commitment to growing this relationship is nurtured by providing best in class service. Our attorneys, underwriters, case managers and sales experts will help you grow your business - one client at a time. Welcome to our team, a system that is uniquely suited for insurance professionals in this new millennium."

Aaron Levy - Website Owner, NAAIP.org

Moses Newman - Chief Technical Officer, NAAIP.org