Sexy, light mp3 player

22.12.2007 7400 7

First, I use 5 PNGs and a True Type Font (available in the zip package).
Here comes the SWFMill library source (library.xml) :

<?xml version="1.0" encoding="utf-8"?>
<movie version="8" width="200" height="24" framerate="21">
  <background color="#FFFFFF"/>
    <clip id="playFlag" import="assets/playFlag.png"/>
    <clip id="stopFlag" import="assets/stopFlag.png"/>
    <clip id="switchBtn" import="assets/switchBtn.png"/>
    <clip id="pannelBack" import="assets/pannelBack.png"/>
    <clip id="pannelFront" import="assets/pannelFront.png"/>
    <font id="dsDigital" import="assets/DS-DIGI.TTF" glyphs="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.,:;?!/-*0123456789%+_' ()[]="/>
    <textfield id="tf" width="150" height="16" size="12" font="dsDigital"/>
    <clip id="mcTf">
        <place id="tf" name="tf" depth="1" />
    </clip>
    <clip id="btnPlay">
        <frame name="play">
            <place id="switchBtn" depth="1" />
            <place id="playFlag" depth="2" />
        </frame>
        <frame name="stop">
            <place id="switchBtn" depth="1" />
            <place id="stopFlag"  depth="2" />
        </frame>
    </clip>
    <clip id="pannel">
        <frame>
            <place id="pannelBack" depth="1" />
            <place id="mcTf" name="mcTf" x="10" y="4" depth="2" />
            <place id="pannelFront" depth="4" />
        </frame>
    </clip>
    <frame>
        <place id="btnPlay" name="btnPlay" x="3" y="2" depth="1" />
        <place id="pannel" name="pannel" x="30" depth="2" />
    </frame>
</movie>

To build the library :

swfmill simple library.xml library.swf

Then come the mp3 player's source (Main.hx) :

import flash.MovieClip;
import flash.TextField;
import flash.Sound;

typedef Pannel = { & gt; MovieClip, mask : MovieClip, mcTf : { & gt; MovieClip, tf : TextField } }

class Main
{
    static var scene        : { > MovieClip, btnPlay : MovieClip, pannel : Pannel, file : String, text : String, loop : String };
    static var btnPlay        : MovieClip;
    static var pannel        : Pannel;
    static var sound        : Sound;
    static var isPlaying    : Bool;
    static var isLoaded        : Bool;
    static var loop            : Bool;
    static var offset        : Float;
    static var textStartX    : Float;
        
    static function switchBtn()
    {
        if ( !isPlaying )
            start();
        else
            stop();
    }
    
    static function start()
    {
        if ( !isLoaded )
        {
            sound = new Sound( scene );
            sound.onSoundComplete = function()
            {
                stop();
                if ( loop )
                    start();
            }
            sound.loadSound( scene.file, true );
            isLoaded = true;
        }
        sound.start( offset );
        btnPlay.gotoAndStop( "stop" );
        scene.onEnterFrame = moveText;
        isPlaying = !isPlaying;    
    }
    
    static function stop()
    {
        pause();
            pannel.mcTf._x = textStartX;
            offset = 0;
    }
    
    static function pause()
    {
        if ( isPlaying )
        {
            offset = sound.position / 1000;
            sound.stop();
            btnPlay.gotoAndStop( "play" );
            
            scene.onEnterFrame = null;
            isPlaying = !isPlaying;
        }
        else
            switchBtn();
    }
    
    static function moveText()
    {
        pannel.mcTf._x-= 2;
        if ( pannel.mcTf._x < - pannel.mcTf._width )
            pannel.mcTf._x = 200;
    }
    
    static function main()
    {
        scene = cast flash.Lib.current;
        
        isPlaying = false;
        isLoaded = false;
        loop = scene.loop != null ? scene.loop == "true" ? true : false : false;
        offset = 0;
                    
        btnPlay = scene.btnPlay;
        btnPlay.gotoAndStop( "play" );
        btnPlay.onRelease = switchBtn;
        
        pannel = scene.pannel;
        pannel.onRelease = pause;    
        
        var tfx = new flash.TextFormat();
        tfx.color = 0xFF9900;
        
        pannel.mcTf.tf.text = scene.text == null ? "Fmp3PlayerHx v.01" : scene.text;
        pannel.mcTf.tf.autoSize = "left";
        pannel.mcTf.tf.multiline = false;
        pannel.mcTf.tf.wordWrap = false;
        
        pannel.mcTf.tf.setTextFormat( tfx );
        pannel.mcTf.tf.embedFonts = true;
                
        pannel.mask = pannel.createEmptyMovieClip( "mask", 3 );
        pannel.mask.beginFill( 0x999999, 100 );
        pannel.mask.moveTo( pannel.mcTf._x, pannel.mcTf._y );
        pannel.mask.lineTo( 165, pannel.mcTf._y );
        pannel.mask.lineTo( 165, pannel.mcTf._y + pannel.mcTf._height );
        pannel.mask.lineTo( pannel.mcTf._x, pannel.mcTf._y + pannel.mcTf._height );
        pannel.mask.endFill();
                
        pannel.mcTf.setMask( pannel.mask );
        var filter = new flash.filters.GlowFilter(0xCCCCCC, 1, 7, 7, 1, 1, false, false);
        btnPlay.filters = pannel.filters = [ filter ];
        
        textStartX = pannel.mcTf._x;
        
        var menu = new flash.ContextMenu();
        menu.hideBuiltInItems();
        menu.customItems.push( new flash.ContextMenuItem( "Fmp3PlayerHx v0.1", function( e, f ){ flash.Lib.getURL( "http://filt3r.free.fr" ); } ) );
        menu.customItems.push( new flash.ContextMenuItem( "Set loop mode " + if ( loop ) "off" else "on", function( e, f ){ loop = !loop; f.caption = "Set loop mode " + if ( loop ) "off" else "on"; } ) );
        untyped scene.menu = menu;
    }
}

To build the player (Fmp3PlayerHx.hxml):

-swf Fmp3PlayerHx.swf
-swf-lib library.swf
-main Main
-D network-sandbox
--flash-use-stage
--flash-strict

Download sample

Commentaires

06.07.2008 à 21:19 Ruffy

where's the autoplay option??

06.07.2008 à 22:20 Michal

Hej!
There is no autoplay option, but you can easilly add it, just get the sources

21.07.2008 à 11:37 amy

Coup de cœur pour la piste audi­o du klümp ! Quelle aura ! Bonne continuation l'artiste

21.07.2008 à 14:29 Clifford

Very nice. I'd like to build this, but I can't see where to get the assets (PNG files)?

21.07.2008 à 17:05 Michal

Hi, you can see all the library assets in the package "download sample" upper.

24.08.2008 à 07:32 Jon

Nice MP3 player. It does suffer from an annoying bug common to many flash players though. If you're streaming from a server like icecast it still downloads after the stop. Since haxe has no close if you put a loadsound of null you can close the connection make sure you flip isLoaded too.
Thanks for the nice sample code.

20.11.2008 à 00:18 Igor Cemim

Nice man!!!! Very great!!!
Thanks!

Laisser un commentaire

http://
×