Flash
  Home arrow Flash arrow Page 3 - Making an MP3/FLV Player with Flash MX 200...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
FLASH

Making an MP3/FLV Player with Flash MX 2004 and JavaScript
By: S.M.H. Qadri
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 142
    2004-11-29

    Table of Contents:
  • Making an MP3/FLV Player with Flash MX 2004 and JavaScript
  • Designing an application interface with Flash MX 2004
  • Adding Action script to our Flash interface
  • Writing the JavaScripts

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Making an MP3/FLV Player with Flash MX 2004 and JavaScript - Adding Action script to our Flash interface


    (Page 3 of 4 )

    Click on the first frame of misc layer and if the action panel is not opened, press F9 and type following code in first frame of misc layer:

    //declare a variable called fName which will hold the name of the file that you //will select through our HTML Form
    var fName;

    Now select the first frame of functions layer and add following codes to it:

    listener = new Object ();
    listener.change = function(evtObj){
        var file = evtObj.target.selectedItem.data;
        _root.flPlayer.contentPath = file;
    };
    myList.addEventListener("change", listener);

    Actually we are adding these codes to our list component because when we select a MP3/FLV File, the file name will be added to this list component. When someone clicks any item (MP3/FLV Song) of that list, this function will be triggered. Now I'm going to explain the codes briefly, because there is very little to explain.

    Line 1: listener = new Object ();

    This line declares a new object called listener.

    Line 2: listener.change = function (evtObj) { }

    This line attaches an event “change” to our object, which listens to all the events which are related to our list component. Since we are attaching the “change” event of list component, when something changes in our List Component or some one clicks any of its items, it will launch the function which is stated as function(evtObj). Here we have used a term called “evtObj,” which is not a reserved word but just a variable that tells the Flash player that the event was triggered from our List component (since the object is attached to list component). For further help about event objects, check online help of macromedia at http://www.macromedia.com.

    Line 3: var file = evtObj.target.selectedItem.data;

    Line 3 actually declares a variable “file” which will hold the file name of a selected item of the list component and meantime assigns the path of the selected MP3/FLV from our myList (List component) to the “file” variable.

    Line 4: _root.flPlayer.contentPath = file;

    Line 4 tells the flPlayer(Media Playback Component) to load its content from the “file” variable by using its “contentPath” property, which takes in a string as the path of the content to be played.

    Line 6: myList.addEventListener ("change", listener);

    This line is adding the event listener to our list component. Click on “checker” movie clip on our stage and open the action panel by pressing F9 and type the following codes in it.

      onClipEvent(enterFrame) {
      if (_root.fName ne "" && _root.fName ne undefined){
        _root.myList.addItem({label:_root.fName,data:_root.fName});
        _root.fName = "";
        }
      }

    Line 1: onClipEvent(enterFrame){

    This line indicates to the Flash player that whenever this frame is played (of “checker” clip), execute this code.

    Line 2-3: if (_root.fName ne "" && _root.fName ne undefined){ 

    This line checks if the variable “fName” that we declared earlier on the “misc” layer of main timeline have some value or not. It further verifies that the value of “fName” should not be equal to “undefined,” which is the default for all undeclared variables in flash. It is used just to verify whether the value in fName variable is valid or not.

    Line 4: _root.myList.addItem({label:_root.fName,data:_root.fName});

    This line adds the value of fName (which will be the path to selected MP3/FLV file)  to our List component ( i.e. myList).

    Line 5:  _root.fName = "";

    This line resets the value of fName to empty so that it can store other values. Line 6 and line 7 are just the closing brackets of our "if" statement and main code block respectively.

    Click on the button instance which is present on our main stage (whose label was set to “Add MP3/FLV…”), launch the Action panel and add these codes:

      on (click){
      getURL("javascript:MM_openBrWindow
    ('url.html','popup','status=yes,width=300,height=50')",
    "_self");
      }

    Line 1: on(click){

    This defines the Flash player. If some one clicks this button then the following code is triggered.

    Line 2: this line is simply opening a Web page using JavaScript. This will be the same page that will allow us to browse our directories and select the desired song.

    NOTE: If you have installed any popup blockers (like yahoo, msn or google toolbar) or something of that sort, disable those first or else this code won't work.

    Now save the movie and test it. If you receive an error during compilation (exporting of movie), recheck to make sure that you have followed the steps accurately.

    NOTE: The Web page will not open at this time because we have not yet created that. In step three of this tutorial, we will create our HTML documents so move on to next step.

    More Flash Articles
    More By S.M.H. Qadri


       · userOne... I'm logged in in one window but can't logIn to this one very...
       · Hey i did everything your tutorial says and it doesnt work. I tried it twice from...
       · May be you are using a browser other then Internet Explorer as the javascript...
       · while following this tutorial i realized the following code is incorrect "... on...
       · I am really amazed hearing that the codes are not working because i had about 70-75...
       · Well the player works fine but I am curious if I can have mp3 files already existing...
       · For this functionality, you have to use XML or shared objets, for this, check out...
       · GreetingsI faced the same problem. There are four errors when i export the flash...
       · these errors are just the result of an innappropriate line break in the geturl...
       · No dear! as far as only flash is concerned, you cant play with directories & files...
       · I had the same errors as you did and i still can't fix this thing???
       · Hi there! you guys are facing problems for nothing, actually, you are getting...
       · **Error** Scene=Scene 1, layer=controls, frame=1:Line 1: Invalid mouse event...
       · May be you are using Flash MX & the tutorials is written for Flash MX 2004,...
       · you mentioned that the javascript differs from IE to Firefox. any suggestions or...
       · Great tutorial, thanks alot! For those still having trouble making this stuff work...
       · Does your player actually play the mp3 file or just load it into the player list....
       · Ok, I've just got flash, and being a stupid newbie means i need help!!! when I do...
       · The Answer of this question is already given above.Syed Mazhar HasanAuthor
       · Will this tutorial work if using Flash 8?
       · if you are opening the player in your browser using physical paths...
       · Hi,I encountered the same problem. The coding is right but when you cut and paste...
       · Hi, I encountered the same errors. The solution I foune is to put the code you...
       · Hi, Great Tutorial! I am just wondering if it would be possible to add some code...
       · The mp3 loads into the list but doesn't play. Do you have to set the properties of...
       · hello…..can anyone help me enter data into mysql databasefrom a flash form...
       · When will you publish your article about how to use XML so you can have mp3 files...
       · Sorry, i m ASP/PHP/ASP.NET programmer and i dont know coldfusion at epert level, so...
       · Try using Document. instead of window.
       · I got "the documents contain no data" after clicking on the add to list.
       · You must be using Firefox or a non-Microsoft Internet explorer browser, the...
       · Great page, not too fancy but well balanced! Cheers!
       · Everything works, but I can't load a mp3 and actually listen to it. I can't add a...
       · You must be using a not-internet explorer browser, as the javascrip provided in this...
       · Hi!You must be using a non-internet explorer browser such as firefox, netscpe or...
       · Try this site. Do not bother to create swf.. These guys create everything. You just...
       · how do u make the playlist only show the song name not 'C:\Documents And...
       · Hey, I went to that site you mentioned but can't seem to get an answer. What do I...
       · The code didnt work for me either... Until I realized that when you paste it from...
       · Try putting the entire function call to getURL on one line rather than breaking it...
       · Hi. Yes you can get this.In action script: replace the line: ...
       · To make it working in FireFox and Opera...
       · This code modification does not make it work on firefox. It does however still work...
       · I think i did all that using marcomedia 8 spanish version...FirstIm getting some...
       · Really i appreciate this tutorial, how simple and elaborative style from SMH Qadri....
       · Really i appreciate this tutorial, how simple and elaborative style from SMH Qadri....
       · Thanks a lot.Syed Mazhar Hasan QadriAuthor
       · nice tutorial, but I have same problem as a guy some time ago. I open the...
       · It doesnt works with firefox, it was IE only as when i wrote that article, FF was in...
     

    FLASH ARTICLES

    - Decorator Pattern
    - Organizing Frames and Layers for Flash Anima...
    - Organizing Frames and Layers
    - Using XML and ActionScript with Flex Applica...
    - Interfaces and Events with ActionScript and ...
    - Manipulating Data with ActionScript in Flex ...
    - ActionScript Syntax for Flex Applications
    - ActionScript in Flex Applications
    - A Closer Look at Apollo`s File System API
    - Using the File System API
    - ActionScript 101
    - Flash Buttons
    - Advanced Flash Animation
    - Creating Your First Animated Movie with Flas...
    - Flash: Building Blocks






    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway
    Stay green...Green IT