# How to make Mp3 player info text scroll horizontally

**URL:** <https://forum.kirupa.com/t/how-to-make-mp3-player-info-text-scroll-horizontally/322067>\
**Category:** flash\
**Created:** [May 9, 2011, 4:25pm UTC](https://forum.kirupa.com/t/how-to-make-mp3-player-info-text-scroll-horizontally/322067 "2011-05-09T16:25:36Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![KJoe](https://avatars.discourse-cdn.com/v4/letter/k/48db29/32.png) [@KJoe](https://forum.kirupa.com/u/KJoe)\
**Post date:** [May 9, 2011, 4:25pm UTC](https://forum.kirupa.com/t/how-to-make-mp3-player-info-text-scroll-horizontally/322067/1 "2011-05-09T16:25:36Z")

</div>

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](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](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.