How to make Mp3 player info text scroll horizontally

KJoe · May 9, 2011, 4:25pm

I have created an mp3 player and I would like to make the area which displays the artist name and song scroll horizontally when the song is clicked on.
I would then like this to loop until the next song is clicked or the song is stopped.

Here is the link to the player:

http://www.khawkinsdesign.com/boombox/mp3.html

Here is the actionscript:

import caurina.transitions.Tweener;
import caurina.transitions.properties.ColorShortcuts;
ColorShortcuts.init();

var auto_play:Boolean = false;
var i:Number;
var total_items:Number;
var current_no:Number = 0;
var flashmo_xml:XML;
var flashmo_item_list = new Array();
var item_group:MovieClip = new MovieClip();

var flashmo_s:Sound = new Sound();
var flashmo_sc:SoundChannel = new SoundChannel();
var flashmo_st:SoundTransform = new SoundTransform();
var flashmo_cpi:Number = 0;
var flashmo_lpi:Number = -1;
var flashmo_pos:Number = 0;
var item_paused:Boolean = true;
var playback_min:uint;
var playback_sec:uint;
var total_min:uint;
var total_sec:uint;
var estimated_length:int;
var drag_area:Rectangle = new Rectangle( 0, status_bar.status_bar_scroller.y, status_bar.load_progress_bar.width, 0 );

this.addChild(item_group);
item_group.mask = slider_mask;

flashmo_item_1.visible = false;
flashmo_sb.visible = false;
status_bar.visible = false;
flashmo_volume.visible = false;
flashmo_previous.visible = false;
flashmo_next.visible = false;
flashmo_play.visible = false;
flashmo_pause.visible = false;

current_item_title.text = “Loading XML Data…”;

status_bar.fm_bar.addEventListener( Event.ENTER_FRAME, item_progress );
status_bar.clickable_area.buttonMode = true;
status_bar.clickable_area.addEventListener( MouseEvent.MOUSE_DOWN, position_seek );
status_bar.load_progress_bar.addEventListener( Event.ENTER_FRAME, drag_area_progress );

function load_xml( xml_file:String ):void
{
var xml_loader:URLLoader = new URLLoader();
xml_loader.load( new URLRequest( xml_file ) );
xml_loader.addEventListener(Event.COMPLETE, read_xml);
}

function read_xml( e:Event ):void
{
flashmo_xml = new XML(e.target.data);
total_items = flashmo_xml.song.length();

for( i = 0; i &lt; total_items; i++ )
{
    flashmo_item_list.push( {
        url: flashmo_xml.song*.url.toString(),
        artist: flashmo_xml.song*.artist.toString(),
        track: flashmo_xml.song*.track.toString()
    } );
}
load_songs();
add_controls();

}

function load_songs():void
{
for( i = 0; i < total_items; i++ )
{
var flashmo_item_mc:MovieClip = new MovieClip();
var item:MovieClip = new flashmo_item();

    item.item_title.text = flashmo_item_list*.artist + " - " + flashmo_item_list*.track;
    item.y = item_group.numChildren * 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.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);
    
play_item();

}

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 = false;
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;
}

}

function change_color( mc:MovieClip, r_offset:int, g_offset:int, b_offset:int ):void
{
Tweener.addTween( mc, {_color_redOffset:r_offset, _color_greenOffset:g_offset,
_color_blueOffset:b_offset, time:1.5, transition:“easeOutExpo”});
}

function play_item():void
{
if( flashmo_lpi > -1 )
change_color( MovieClip(item_group.getChildAt(flashmo_lpi) ), 0, 0, 0);

change_color( MovieClip(item_group.getChildAt(flashmo_cpi) ), -40, 10, -40);

flashmo_s.removeEventListener(ProgressEvent.PROGRESS, load_progress);
status_bar.load_progress_bar.removeEventListener(Event.ENTER_FRAME, drag_area_progress);
status_bar.load_progress_bar.scaleX = status_bar.clickable_area.scaleX = 
status_bar.fm_bar.width = status_bar.status_bar_scroller.x = 0;

flashmo_sc.stop();
flashmo_s = new Sound();
flashmo_sc = new SoundChannel();
flashmo_volume.mute.gotoAndStop("on");

if( flashmo_volume.flashmo_scroller.x == 0 )
    flashmo_volume.flashmo_scroller.x = 60;

flashmo_st.volume = flashmo_volume.flashmo_scroller.x / 
                ( flashmo_volume.flashmo_scrollable_area.width - flashmo_volume.flashmo_scroller.width );
flashmo_s.load( new URLRequest( flashmo_item_list[flashmo_cpi].url ) );    

status_bar.load_progress_bar.addEventListener( Event.ENTER_FRAME, drag_area_progress );

if( flashmo_cpi != 0 || auto_play )
{
    flashmo_sc = flashmo_s.play();
    item_paused = false;
    flashmo_pause.visible = true;
    flashmo_play.visible = false;
}
else
{
    flashmo_pause.visible = false;
    flashmo_play.visible = true;
}


flashmo_sc.soundTransform = flashmo_st;
flashmo_sc.addEventListener(Event.SOUND_COMPLETE, next_item_handler);
flashmo_s.addEventListener(ProgressEvent.PROGRESS, load_progress);
flashmo_lpi = flashmo_cpi;
current_item_title.text = flashmo_item_list[flashmo_cpi].artist + " - " + 
                            flashmo_item_list[flashmo_cpi].track;

}

function next_item_handler( e:Event )
{
play_next_item();
}

function load_progress( e:ProgressEvent ):void
{
var load_ratio:Number = e.bytesLoaded / e.bytesTotal;
status_bar.load_progress_bar.scaleX = status_bar.clickable_area.scaleX = load_ratio;

if( load_ratio &gt;= 1 )
    flashmo_s.removeEventListener( Event.ENTER_FRAME, load_progress );

}

function item_over( me:MouseEvent ):void
{
var mc:MovieClip = MovieClip(me.target.parent);
current_no = parseInt(mc.name.slice(13,15));
change_color(mc, -40, 0, 40);
}

function item_out( me:MouseEvent ):void
{
var mc:MovieClip = MovieClip(me.target.parent);
current_no = parseInt(mc.name.slice(13,15));
if( current_no != flashmo_cpi )
change_color( mc, 0, 0, 0 );
else
change_color( MovieClip( item_group.getChildAt(flashmo_cpi) ), -40, 10, -40 );
}

function item_click( me:MouseEvent ):void
{
var mc:MovieClip = MovieClip(me.target.parent);
current_no = parseInt(mc.name.slice(13,15));
flashmo_cpi = current_no;
play_item();
}

function on_click_pause( me:MouseEvent ):void
{
flashmo_play.visible = true;
flashmo_pause.visible = false;
pause_it();
}

function on_click_play( me:MouseEvent ):void
{
flashmo_pause.visible = true;
flashmo_play.visible = false;
unpause_it();
}

function pause_it():void
{
item_paused = true;
flashmo_pos = flashmo_sc.position;
flashmo_sc.stop();
flashmo_sc.removeEventListener( Event.SOUND_COMPLETE, next_item_handler );
}

function unpause_it():void
{
item_paused = false;
flashmo_sc = flashmo_s.play( flashmo_pos );
flashmo_sc.addEventListener( Event.SOUND_COMPLETE, next_item_handler );
}

function on_click_next( me:MouseEvent ):void
{
play_next_item();
}

function on_click_prev( me:MouseEvent ):void
{
play_prev_item();
}

function play_next_item():void
{
if( flashmo_cpi < total_items - 1 )
flashmo_cpi++;
else
flashmo_cpi = 0;

play_item();

}

function play_prev_item():void
{
if(flashmo_cpi > 0)
flashmo_cpi–;
else
flashmo_cpi = total_items - 1;

play_item();

}

function scroller_drag( me:MouseEvent ):void
{
me.target.startDrag(false, drag_area);
status_bar.status_bar_scroller.addEventListener( Event.ENTER_FRAME, on_scroll );
status_bar.fm_bar.removeEventListener( Event.ENTER_FRAME, item_progress );
stage.addEventListener( MouseEvent.MOUSE_UP, up );
}

function scroller_drop( me:MouseEvent ):void
{
me.target.stopDrag();
}

function position_seek( me:MouseEvent ):void
{
status_bar.status_bar_scroller.startDrag(true, drag_area);
status_bar.status_bar_scroller.addEventListener( Event.ENTER_FRAME, on_scroll );
status_bar.fm_bar.removeEventListener( Event.ENTER_FRAME, item_progress );
stage.addEventListener( MouseEvent.MOUSE_UP, up );
}

function up( me:MouseEvent ):void
{
status_bar.status_bar_scroller.stopDrag();
set_progress();

status_bar.fm_bar.addEventListener( Event.ENTER_FRAME, item_progress );
status_bar.status_bar_scroller.removeEventListener( Event.ENTER_FRAME, on_scroll );
stage.removeEventListener( MouseEvent.MOUSE_UP, up );

}

function on_scroll( e:Event ):void
{
status_bar.fm_bar.width = status_bar.status_bar_scroller.x;
var playback_ratio:Number = ( status_bar.fm_bar.width / status_bar.load_progress_bar_bg.width )
* estimated_length * 0.001;

playback_min = Math.floor(playback_ratio / 60);
playback_sec = Math.floor(playback_ratio % 60);
        
status_bar.status_text.text = pad_zero(playback_min) + ":" + pad_zero(playback_sec)
                             + " / " + pad_zero(total_min) + ":" + pad_zero(total_sec);

}

function set_progress():void
{
var load_time:Number = flashmo_s.bytesLoaded / flashmo_s.bytesTotal;
var estimated_length:int = Math.ceil( flashmo_s.length / load_time );
var pos:Number = estimated_length * ( status_bar.status_bar_scroller.x / status_bar.load_progress_bar_bg.width );

if( !item_paused )
{            
    if( Math.ceil(pos) == estimated_length )
    {
        play_next_item();
    }
    else
    {
        flashmo_sc.stop();    
        flashmo_sc = flashmo_s.play(pos);
        flashmo_sc.addEventListener( Event.SOUND_COMPLETE, next_item_handler ); 
    }
}
else
{
    if( pos == estimated_length )
        pos = pos - 1;
    flashmo_pos = pos;
}

}

function item_progress( e:Event ):void
{
if( !item_paused )
{
var load_time:Number = flashmo_s.bytesLoaded / flashmo_s.bytesTotal;
estimated_length = Math.ceil( flashmo_s.length / load_time );

    playback_min = Math.floor( ( flashmo_sc.position * 0.001 ) / 60);
    playback_sec = Math.floor( ( flashmo_sc.position * 0.001 ) % 60);
    total_min = Math.floor( ( estimated_length * 0.001 ) / 60 );
    total_sec = Math.floor( ( estimated_length * 0.001 ) % 60 );
    
    status_bar.fm_bar.width = Math.round( flashmo_sc.position / flashmo_s.length * status_bar.load_progress_bar.width );
    status_bar.status_bar_scroller.x = status_bar.fm_bar.width;
    status_bar.status_text.text =  pad_zero(playback_min) + ":" + pad_zero(playback_sec) + " / " +
                        pad_zero(total_min) + ":" + pad_zero(total_sec) ;
}

}

function drag_area_progress( e:Event ):void
{
drag_area = new Rectangle(0, status_bar.status_bar_scroller.y, status_bar.load_progress_bar.width, 0);

if( status_bar.load_progress_bar.width == status_bar.load_progress_bar_bg.width )
    status_bar.load_progress_bar.removeEventListener( Event.ENTER_FRAME, drag_area_progress );

}

function pad_zero( str_to_pad:Number ):String
{
if(str_to_pad < 10)
return “0” + str_to_pad;
else
return String( str_to_pad );
}

//
//buttons

your_button.buttonMode = true;
your_button.useHandCursor = true;

var js:URLRequest=new URLRequest();
js.url=“javascript:window.open(‘http://www.khawkinsdesign.com/boombox/player.html’,‘popUp’,'width=429,height=243’);newWindow.focus(); void(0);”;

your_button.addEventListener(MouseEvent.CLICK,openPopUp);

function openPopUp(evt:MouseEvent):void
{
navigateToURL(js,"_self" );
trace( “Warning! this might not work in browsers that are set to block pop up windows”);

}

//
your_button.addEventListener(MouseEvent.CLICK, onClickStop);

function onClickStop(e:MouseEvent):void{
flashmo_sc.stop();
}

Any advice would be greatly appreciated.

Topic	Replies	Views
Scrolling dynamic text in mp3 player flash	84	October 30, 2007
Scroll text horizontally flash	71	September 13, 2005
Text scroller help [AS2] flash	60	April 1, 2008
List/scroller help [AS2] flash	45	April 2, 2008
Horizontally scrolling images with Tweener, remove white space flash	128	December 13, 2010

How to make Mp3 player info text scroll horizontally

Follow:

Popular

Loose Ends

How to make Mp3 player info text scroll horizontally

Related topics

Follow:

Popular

Loose Ends