My comprehensive guide to Road Runner and Flash

Sonicxtacy02 · 09-19-2008, 09:40 AM

By request, i'm starting a thread as a resource to the use of flash skins and flash applications inside of Ride Runner. Flash skinning is a pretty easy way to create some stunning animation and design that uses RR's strong set of useful objects.

Before we begin....
The examples and source files included in this thread were created by swishmax v2. Its my opinion that swishmax is just a bit more flexible than adobe flash when it comes to skinning RR. Its also got a very small learning curver whereas you open flash and dont know where to begin.

Whats needed?
In order to properly display flash objects in Ride Runner, you MUST grab the latest version of flash player from here.

Chapter Breakdown:
Chapter 1: Running Ride Runner Commands In Flash
Chapter 2: Displaying And Controlling Ride Runner Labels In Flash
Chapter 3: Displaying and Using Ride Runner Indicators In Flash
Chapter 4: Ride Runner Variables And Flash
Chapter 5: Ride Runner Playlist Display And Control In Flash
Chapter 6: Ride Runner Directory List Display And Control In Flash
Chapter 7: Ride Runner Custom List Display And Control In Flash

Sonicxtacy02 · 09-19-2008, 09:40 AM

Chapter 1: Running Ride Runner Commands In Flash

Due to the level of implementation in Ride Runner's source code, running a RR command inside a flash skin could not be easier. Flash uses the function fscommand() to send the command into RR's queue. For example, if u wanted to run the AUDIO command in your flash skin the correct syntax would be:

Code:

onSelfEvent (press) {
    fscommand("AUDIO")
}

or

Code:

on(press) {
    fscommand("AUDIO")
}

This code can be used on any flash object, whether it be a sprite, text object, or shape. ALL ride runner and custom commands (from exectbl.ini) can be run this very same way. Very simple right?

Now there are ways within flash to change which command is run based on other events, variables, etc. More on this later

Sonicxtacy02 · 09-19-2008, 09:41 AM

Chapter 2: Displaying And Controlling Ride Runner Labels In Flash

Like commands, Ride Runner Labels in flash can be easily accessed for use in flash. Every defined label on the currently Ride Runner Skin is passed to the _root. or 0Level of flash. Therefore, to display the label on your flash skin you simply create a dynamic text object and name it "_root." plus whatever the label name is in RR. so to display the TRACKNAME label in a flash skin you would create a dynamic text named _root.TRACKNAME. Please note that flash 8 and higher the dynamic text is case-sensitive... so if TRACKNAME is defined as "trackname" in your .skin file, your dynamic text must be named _root.trackname. Also note that you are NAMING the dynamic text at this point.. not specifying its contents. You can enter whatever text you want into the dynamic text content box of a label.

Now defining a label in the .skin file only requires specifying the NAME of the label and the area of the label to display. Because of the fact that you dont want RR displaying the label, only flash, your label x,y,w,h should be 0,0,0,0, in most cases. However... with labels that contain a TON of information, you may want to consider using -1000,-1000,1000,1000 because large labels dont display properly at 0,0,0,0,. Here's an example of a .skin label thats flash friendly

Code:

L,0,0,0,0,,,,,,"TRACKNAME",

Now custom labels created by the SETLABEL command run in similar fashion to standard indicators with one exception. The "!" used to define some older custom labels does not work with flash. So when creating custom labels for use in flash skins you MUST use CUSTOM instead of "!". For instance...

!TEMPSENSOR1 will show nothing in flash
CUSTOMTEMPSENSOR1 will show in flash

Thats pretty much all you need to display RR labels in flash... however one of the appeals to flash skinning is the ability to not only display the information ... but USE it. Now there are MANY ways to do this.. Labels contain many forms of data and can allow you to do things like dim your screen when a photosensors data tells it, turn down your music based on lats and lons.. and much more. Using Blue_ZX3's famous media plugin i can show how using RR labels simplifies the skinning process by optimizing button actions. In the demo skin, the browse mode button brings up a pop up with 8 different browsing modes to choose from. Thats 8 buttons that need be skinned for.

attached is a snippet of sonique elite, which uses 1 button to accomplish all 8 buttons in a non-flash skin. The label in in this example is "RMMediaText" and here's how one button does a total of 9 tasks based on the information contained in the label

Code:

onSelfEvent (press) {
    if(_root.RMMediaText=="Songs"){
        fscommand("SETLABEL;RM_MEDIA_MODE;Albums");
        fscommand("RM_ALBUM");
        _root.RMMediaText="Albums";
    }else if(_root.RMMediaText=="Albums"){
        fscommand("SETLABEL;RM_MEDIA_MODE;Artists");
        fscommand("RM_ARTIST");
        _root.RMMediaText="Artists";
    }else if(_root.RMMediaText=="Artists"){
        fscommand("SETLABEL;RM_MEDIA_MODE;Genres");
        fscommand("RM_GENRE");
        _root.RMMediaText="Genres";
    }else if(_root.RMMediaText=="Genres"){
        fscommand("SETLABEL;RM_MEDIA_MODE;Folders");
        fscommand("RM_FOLDER");
        _root.RMMediaText="Folders";
    }else if(_root.RMMediaText=="Folders"){
        fscommand("SETLABEL;RM_MEDIA_MODE;Recently Added");
        fscommand("RM_RECENTLYADDED");
        _root.RMMediaText="Recently Added";
    }else if(_root.RMMediaText=="Recently Added"){
        fscommand("SETLABEL;RM_MEDIA_MODE;Ratings");
        fscommand("RM_Rating");
        _root.RMMediaText = "Ratings";
    }else if(_root.RMMediaText=="Ratings"){
        fscommand("RUNQ;$SKINPATH$Scripts\\playlistgrabber.exe");
        _root.RMMediaText="Playlists";
    }else if(_root.RMMediaText=="Playlists"){
        fscommand("SETLABEL;RM_MEDIA_MODE;Songs");
        fscommand("RM_SONGS");
        _root.RMMediaText="Songs";
    }
}

using a few basic conditional statements to form a loop based on the content of one label put to work for you. Thats how to control flash and RR with labels

Sonicxtacy02 · 09-19-2008, 09:41 AM

Chapter 3: Displaying and Using Ride Runner Indicators In Flash

Indicators are treated in flash in the same manner labels are, but based on there simple nature.. they actually tend to flesh out easier. Like labels, indicators must be defined in the .skin file, but 0,0,0,0 will work with every indicator. Again, if using flash 8 or higher indicators are case-sensitive. In this example we will use the SHUFFLE indicator. Defined in the .skin file as "0,0,0,0,SHUFFLE", the status of the indicator can be simply displayed as a dynamic text object named _root.SHUFFLE. this dynamic text object will now display ON or OFF depending on whether shuffle is enabled or disabled. Now really, who wants to display that right? We wanna USE it. This is how we do that in flash. Here's another snippet of sonique elite, it shows how u can run 3 seperate commands from 1 button based on 2 indicator states.

Sprite "shufflecheck"

Code:

onFrame (1) {
    if (_root.SHUFFLE == "ON") {
        _root.shufpress = 2;
        _root.Shuffle.gotoAndPlay(22);
    } else if (_root.REPEAT == "ON") {
        _root.shufpress = 1;
        _root.Shuffle.gotoAndPlay(11);
    } else {
        _root.shufpress = 0;
        _root.Shuffle.gotoAndStop(1);
    }
}
onFrame (20) {
    gotoAndPlay(1);
}

the role of this sprite is simply to check the state of the SHUFFLE and REPEAT indicators in RR. If one is ON certain events are carried over to the "shuffle" sprite.

"shuffle" sprite

Code:

onFrame (1) {
    stop();
}
onFrame (2) {
    stop();
}
onSelfEvent (press) {
    _root.Shuffle.spin = "true";
    _root.Shuffle.nextFrameAndPlay();
    if (_root.shufpress == 0) {
        fscommand("REPEAT");
        _root.shufpress = 1;
    } else if (_root.shufpress == 1) {
        fscommand("REPEAT");
        fscommand("SHUFFLE");
        _root.shufpress = 2;
    } else if (_root.shufpress == 2) {
        fscommand("SHUFFLE");
        _root.shufpress = 0;
    }
    _root.mediaIconsSprite.gotoAndStop(8);
    gotoAndStop(2);
}
onSelfEvent (release,releaseOutside) {
    _root.mediaIconsSprite.gotoAndStop(1);
    gotoAndStop(1);
}

the role of this sprite is to CHANGE the status of shuffle/repeat based on the associated indicator states. The combination of these two sprites creates one button that controls both shuffle AND repeat commands, as well as creates a animation of the actual indicator using a more complexed Math() function. See attachment.. which shows both the SHUFFLE indicator at work and the uses the STATUS indicator to control PLAY/STOP/PAUSE events in RR

Sonicxtacy02 · 09-19-2008, 09:42 AM

Chapter 4: Ride Runner Variables And Flash
Because of the way RR defines variables, accessing them inside of flash is hit or miss in most cases. RR Uses the "=" character in variable implementation, and some places in flash "=" is an invalid character. There are some exceptions you can get away with. For instance... if you have the the label "L,0,0,0,0,,,,,,"=$SKINCOLOR$" defined in your .skin file you can set a dynamic text object in flash to display the content of that variable in the same way we define dynamic text for labels. What you cant do however is access this dynamic text in functions. if(_root.=$SKINCOLOR <> "Blue") will not work for obvious reasons. An alternative lies in a trusty command in RR called SETFLASHVAR. This command will set the content of any variable in the _root.PATH. Using the syntax "SETFLASHVAR;SKINCOLOR;$SKINCOLOR$", we can define _root.SKINCOLOR for use any functions like a normal variable in flash.

Sonicxtacy02 · 09-19-2008, 09:42 AM

Chapter 5: Ride Runner Playlist Display And Control In Flash
Reading playlist from RR can be as complicated as you want to make it. Most of the work involves reading the label CUSTOMPL and parsing it for information. First and foremost, declare the label in your .skin file like so

Code:

L,-1000,-1000,1000,1000,,,,,,"CUSTOMPL"

big label for alot of data. The next step requires a little bit of understand of how CUSTOMPL is sorted. In short, CUSTOMPL holds your entire playlist.. which means only thru code will you know where you are within that list. Each item in that list is separated by chr(13) and is prefixed with "LST". With these bits of knowledge we can proceed with creating a loop to read each item.

Code:

onFrame (4) {
custompl= _root.CUSTOMPL;
playlist = _root.CUSTOMPL.split(chr(13));
}
onFrame (5) {
//tr is our current position in the playlist.  because we're reading it for the first time the default position is 0.
tr = _root.TRACKNUMBER - 1;

}

The code above sets our defaults which we will use to test if CUSTOMPL has been modified. The playlist variable uses a split method to put each item of CUSTOM into an array.

Code:

onFrame (8){
if (oldtr <> _root.TRACKNUMBER) {
    gototrack = "SETLIST;" + _root.TRACKNUMBER;
    tr = _root.TRACKNUMBER - 1;
    oldtr = _root.TRACKNUMBER;
}
t1 = substring(playlist[0 + tr],4,(length(playlist[0 + tr]) - 3));
t2 = substring(playlist[1 + tr],4,(length(playlist[1 + tr]) - 3));
t3 = substring(playlist[2 + tr],4,(length(playlist[2 + tr]) - 3));
t4 = substring(playlist[3 + tr],4,(length(playlist[3 + tr]) - 3));
t5 = substring(playlist[4 + tr],4,(length(playlist[4 + tr]) - 3));
t6 = substring(playlist[5 + tr],4,(length(playlist[5 + tr]) - 3));
t7 = substring(playlist[6 + tr],4,(length(playlist[6 + tr]) - 3));
tn1 = 1 + tr;
tn2 = 2 + tr;
tn3 = 3 + tr;
tn4 = 4 + tr;
tn5 = 5 + tr;
tn6 = 6 + tr;
tn7 = 7 + tr;

}

this frame does the bulk of our parsing. the first step simply checks to see if the current tracknumber matches our trackposition. If not, then we need to change the track position so that the currently playing track is always in the first playlist entry spot. t1 through t7 are dynamic text objects to display 7 songs within the playlist. Each is defined the same way.

t1 = substring(ArrayIndexHoldingListContent,4(to remove "LST"),(LengthOfListEntry - 3(3 being "LST")));

Easy to understand? Probably not! But practice will make it become easy. The next step is the tn... or TRACKNUMBER variable. These need to be defined for the list click command to work.

Code:

onFrame (10) {
    if(custompl<>_root.CUSTOMPL){
        gotoAndPlay(4);
    }else{
        gotoAndPlay(9);
    }
}

This little bit here? This just allows us to check to see if CUSTOMPL need be read again. This reduces the overhead of parsing that content heavy variable for no reason. Thats how we read our create our playlist! But how do we control it? Well playlist movement is rather simple.. we just need to change our track position or "tr" variable. So an "UP" command in RR equals

Code:

on (press){
    _root.list.tr = _root.list.tr-1;
    if(_root.list.tr<1){
        _root.list.tr = 1;
    }
    _root.list.gotoAndPlay(6);
}

and "DOWN" equals

Code:

on (press){
   _root.list.tr = _root.list.tr+1;
    if((int(_root.PLAYLISTCOUNT)-1)<_root.list.tr){
        _root.list.tr = (int(_root.PLAYLISTCOUNT)-1);
    }
    _root.list.gotoAndPlay(6);
}

Thats easy enough. Lastly, how do we switch songs? We use our tn variable we've created~!

each of the t1-t7 dynamic text objects should have this press event

Code:

on (press){
    gototrack = "SETLIST;" + tn1;
    if (tn1 <> _root.TRACKNUMBER) {
        fscommand(gototrack);
        fscommand("PLAY");
    }
    //gotoandplay(6);
}

Again.. relatively easy peazy~! That pretty much sums up the basics of playlist handling in flash. Advanced users can parse things like album art path, seperate title+artist into two lines.. or practically anything else.

Sonicxtacy02 · 09-19-2008, 09:49 AM

Chapter 6: Road Runner Directory List Display And Control In Flash
coming soon!

Sonicxtacy02 · 09-19-2008, 09:50 AM

Chapter 7: Ride Runner Custom List Display And Control In Flash
coming soon!

Sonicxtacy02 · 09-20-2008, 08:12 AM

i'll be adding some .swf examples to each post as well.. just ran outta time on friday

meddler · 09-20-2008, 08:57 AM

Sonicxtacy,

This is a really good how to. I have made it a sticky.

I will request that everyone not post in this thread to keep it clean for Sonicxtacy's guides.

Sonicxtacy02 · 09-20-2008, 01:51 PM

Quote: Originally Posted by meddler

Sonicxtacy,

This is a really good how to. I have made it a sticky.

I will request that everyone not post in this thread to keep it clean for Sonicxtacy's guides.

Thanks for the sticky. i wasnt sure how comments would/should be handled.. but i will continue to update the table of contents as tutorials are added so there is at least SOME organization

EDIT

i know i'm several months behind on this.. but its on my new years resolution list! For the wait i will also be including snippets on playlist searching.. all done within flash and lighting fast (faster than winamps JTF plugin!)

rizaydog · 06-22-2009, 11:21 AM

Quote: Originally Posted by Sonicxtacy02

Chapter 1: Running Ride Runner Commands In Flash

Due to the level of implementation in Ride Runner's source code, running a RR command inside a flash skin could not be easier. Flash uses the function fscommand() to send the command into RR's queue. For example, if u wanted to run the AUDIO command in your flash skin the correct syntax would be:

Code:

onSelfEvent (press) {
    fscommand("AUDIO")
}

or

Code:

on(press) {
    fscommand("AUDIO")
}

This code can be used on any flash object, whether it be a sprite, text object, or shape. ALL ride runner and custom commands (from exectbl.ini) can be run this very same way. Very simple right?

Now there are ways within flash to change which command is run based on other events, variables, etc. More on this later

I tried this coding with adobe flash cs3 and I always get an error. Is there any way the coding would be differant for this version? It works fine with swishmas???

Sonicxtacy02 · 06-22-2009, 12:21 PM

Quote: Originally Posted by rizaydog

I tried this coding with adobe flash cs3 and I always get an error. Is there any way the coding would be differant for this version? It works fine with swishmas???

i've never used adobe flash so i couldnt tell you. Definitely works in swishmax though. Whats the error you are getting