5/5/11

How to Build a Flash Website Music Template

If you want to create more than one music website, one solution is to create a Flash Music website template. After you have your file set up you can easily change it by switching out the artwork and adding new music files. Flash's publish feature will automatically embed the code in an .html file and all you will have to do is upload your files to your server. To add your music .swf to an already existing webpage, just copy and paste the .html code to the webpage.
    • 1

      Open Flash and click "File," then "New" and then click "Flash File (ActionScript 3.0)" from the pullout menu.

    • 2

      Import your artwork by clicking on "File," then "Import" and then click "Import to Stage." Browse to where your images are and then click "Open."

      (See Reference 1.)

    • 3

      Create a new layer by clicking "Insert Layer" at the bottom of the timeline and call it "Music." Open the components library by clicking on "Windows," then "Components." Drag a copy of the FLVPlayback component to the stage.

    • 4

      Click "Window," "Properties" and "Properties" again from the pullout menu. With your FLVPlayback component still highlighted, type in "musPlayer" for the "Instance Name."

    • 5

      Create a new layer and name it "Buttons." Using the drawing tools on the toolbar, create the shape that you want to use for your button.

    • 6

      Press F8 on your keyboard to convert to a symbol, click "Button," and "OK."

    • 7

      Double-click the button on the stage to edit the timeline. Right-click on the frame under "Hit" and click "Insert Keyframe."

    • 8

      Click "Scene 1" at the bottom of the timeline to go back to the stage.

    • 9

      Right-click on the button and click "Copy" from the pullout menu. Repeat for as many buttons as you need, giving each a different instance name such as 1_btn, 2_btn and 3_btn.

    • 10

      Save the file into the same folder as your video clips.

    • 11

      Create a new layer, and name it "Actions." Right-click on frame "1" of your "Action" layer and then click "Action" from the pullout menu. Type in the following code:

      1_btn.addEventListener(MouseEvent.CLICK, mus1);

      2_btn.addEventListener(MouseEvent.CLICK, mus2);

      3_btn.addEventListener(MouseEvent.CLICK, mus3);

      function vid1(e:Event):void{

      musPlayer.source = "music_01.flv"

      };

      function vid2(e:Event):void{

      musPlayer.source = "music_02.flv"

      };

      function vid3(e:Event):void{

      musPlayer.source = "music_03.flv"

      };

  • No comments: