MP3PlayerDragAndDropCodeDescription modified by k10blogger

k10blogger — Tue, 16 Jun 2015 14:34:33 -0000

MP3PlayerDragAndDropCodeDescription modified by Anonymous

Anonymous — Sat, 28 Mar 2015 06:19:01 -0000

1. The background Movie Clip

The first thing to be done was to create a background Movie Clip to contain our MP3 Player. The background was quite simple with black border and white and gray colour as can be seen from the UI screenshot.

A close button is also provided. On this background the Native window codes of drag and close window were added. The code for the same are given below.

background_mc.addEventListener(MouseEvent.MOUSE_DOWN, startdragfunction);
closebutton.addEventListener(MouseEvent.CLICK, closeWindowFunction);
function startdragfunction(me:MouseEvent):void
{
    stage.nativeWindow.startMove();
}
function closeWindowFunction(me:MouseEvent):void
{
    stage.nativeWindow.close();
}

var shadowFilter:DropShadowFilter = new DropShadowFilter(); 
shadowFilter.color = 0x000000; 
shadowFilter.alpha = 0.4; 
shadowFilter.blurX = 5; 
shadowFilter.blurY = 5; 
shadowFilter.distance = 5; // 'external' shadows addShadow(this.bgBox); addShadow(this.largeImage); // 'internal' shadows addShadow(this.locationTxt); addShadow(this.tempTxt); addShadow(this.conditionTxt); addShadow(this.additionalTxt);
function addShadow(comp:DisplayObject):void 
{ comp.filters = [this.shadowFilter]; }
addShadow(background_mc);

The trick for this is quite simple the help menu movie clip is placed above all movie clips and objects with visibility and alpha setted to false and 0 respectively. This allows for event based trasition effects to be added on the Help Menu using the caurina trasition library. The code for the same is provided below.

Obviously the helper_outer_mc is the Help Menu MC.

help_outer_mc.visible = false;
help_outer_mc.alpha = 0;
stage.addEventListener(KeyboardEvent.KEY_DOWN, f1help);
function f1help(keyb:KeyboardEvent):void
{
    if(keyb.keyCode== Keyboard.F1)
    {
    help_outer_mc.visible = true;
    Tweener.addTween( help_outer_mc, { alpha: 100, time: 2.75, transition: "easeInQuart" } );//alpha, time
    stage.addEventListener(MouseEvent.CLICK, removehelpfunction);

    }
}
function removehelpfunction(me:MouseEvent):void
{
    Tweener.addTween( help_outer_mc, { alpha: 0, time: .75, transition: "easeOutQuart" } );//alpha, time
    stage.removeEventListener(MouseEvent.CLICK, removehelpfunction);
    help_outer_mc.visible = false;

}

3. The Drag and Drop Feature

The code for drag dop has been merged with the code for the player. Hence few functions of the player has been modified.

The MP3 player MC is the one where we can drop our mp3 files on. The MC will accept the files and create a playable list out of it. The code for the same is as provided.

var myMP3Loader:URLLoader = new URLLoader();

this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragEnter);
this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);
myMP3Loader.addEventListener(Event.COMPLETE, load_songs);

var countervariable:Number=0;
var totalNumber:Number=0;

current_item_title.text = "Drag your Mp3 files here...";

function onDragEnter(e:NativeDragEvent):void {
    var fa:Object=e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT);
    trace(e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT));
    var i:Number=1;//object array starts from 0
    for (i = 0; i < fa.length; i++) {
        if (fa[i].extension=="mp3") {
            NativeDragManager.acceptDragDrop(this);

            //use nativedragmanager instead of drag manager for drag and drop application
        }
    }
}
function onDragDrop(e:NativeDragEvent):void {
    var fa:Object=e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT);
    var i:Number=0;
    totalNumber=fa.length;
    total_items = total_items + totalNumber;
    trace(totalNumber);
    for (i = 0; i < totalNumber; i++) {
        myJpgLoader.load(new URLRequest(fa[i].url));
        //myJpgLoader.addEventListener(Event.COMPLETE, donothing );
        flashmo_item_list.push( {
            url: fa[i].url.toString(),
            artist: "File",
            track: fa[i].name.toString()
        } );
        donothing1();
        //countervariable++;
        //myJpgLoader.addEventListener(Event.COMPLETE, load_songs);
    }

    //load_songs();
    add_controls();
}
function donothing1():void
{
    trace(flashmo_item_list[0],flashmo_item_list[1],flashmo_item_list[2]);
}
var playfirsttime = 0;
function load_songs(e:Event):void
{
    trace(countervariable);
    trace(total_items);
    for( ; countervariable < (total_items ); countervariable++ )
    {
        i = countervariable;
        var flashmo_item_mc:MovieClip = new MovieClip();
        var item:MovieClip = new flashmo_item();

        item.item_title.text = flashmo_item_list[i].artist + " - " + flashmo_item_list[i].track;
        //item.y = item_group.numChildren * 30;
        item.y = i * 30;

        item.hit.buttonMode = true;
        item.hit.addEventListener( MouseEvent.MOUSE_OVER, item_over );
        item.hit.addEventListener( MouseEvent.MOUSE_OUT, item_out );
        item.hit.addEventListener( MouseEvent.CLICK, item_click );
        //item.hit.addEventListener( MouseEvent.MOUSE_DOWN, show_info);
        item.name = "flashmo_song_" + item_group.numChildren;

        item.addChild(flashmo_item_mc);
        item_group.addChild( item );
    }

    flashmo_sb.visible = true;
    flashmo_sb.buttonMode = true;
    flashmo_sb.scrolling("item_group", "slider_mask", 0.80, total_items);
    if(playfirsttime == 0)
    {
        play_item();
    }
    playfirsttime++;

}
function add_controls():void
{
    flashmo_previous.addEventListener(MouseEvent.CLICK, on_click_prev); 
    flashmo_pause.addEventListener(MouseEvent.CLICK, on_click_pause);   
    flashmo_play.addEventListener(MouseEvent.CLICK, on_click_play); 
    flashmo_next.addEventListener(MouseEvent.CLICK, on_click_next);

    status_bar.visible = true;
    flashmo_volume.visible = true;
    flashmo_previous.visible = true;
    flashmo_next.visible = true;

    if( auto_play )
    {
        flashmo_pause.visible = true;
        flashmo_play.visible = false;
    }
    else
    {
        flashmo_play.visible = true;
        flashmo_pause.visible = false;
    }
}

4. Rest of the code

Rest of the code remains the same. No changes have been made in the name of the objects. So code can be used directly on a Flashmo Mp3 Player.

The code for the same will not be provided here.

Note - This is not a tutorial its just a reference to drag and drop used in flash. This has been created with the Flash Professional. The code will remain the same with Flash builder with only difference of having a class.

Note - The similar code has been used in a Image viewer created in flash by me whose source code will be uploaded soon.

Recent changes to MP3PlayerDragAndDropCodeDescription

MP3PlayerDragAndDropCodeDescription modified by k10blogger

MP3PlayerDragAndDropCodeDescription modified by Anonymous

1. The background Movie Clip

2. The Help Menu

3. The Drag and Drop Feature

4. Rest of the code