Skinner Info

[Sama]

First of all, you'll need to install Velocity. Then you'll need to get the example skin from here.

Velocity operates an asynchronous event-based model. A request is sent, and it's forgotten (you never get an immediate, synchronous response). Some data is sent back from Velocity to Flash, and this should invoke some event on Flash. It's a different way of coding, just like AJAX. But once you get your head around it, it does all you need.

To break it up into steps, it's as follows:

Request
1. Flash sends a request to Velocity
2. Velocity will deal with that request

Asynchronous Response
1. Velocity sends some data to Flash
2. Flash responds to that event

For example, if the play button is pressed on some media playback screen, the following sequence of events happens:

Request
1. Flash sends the play command to the media plug-in in Velocity
2. Velocity tells the media plug-in to play (which tells mplayer to play)

At this point, mplayer is playing the vide and doesn’t' really care about anything else. Velocity is monitoring all the outputs of mplayer and keeping track of field changes, such as bitrate, track position, track name, etc.

Initially, all this data is sent to Flash, but as the media plays, only a few things change, so only those are sent back to Flash, like the current position in the track, and perhaps the bitrate.

All this data is sent back to Flash and is held in native Flash objects, which you can watch for changes, and respond accordingly. Here's are the steps of a response:

Asynchronous Reponse
1. Media plug-in sends current position, media length, etc. to Flash
2. Flash monitors changes to variables (using watch), and responds accordingly (updates the label that shows the current time/media length)

The asynchronous responses can happen at any time. Which means any labels/visuals that depends on the state of the underlying plug-in, should always be hooked directly to the data that is send from Velocity.

And that's the essence of Velocity. The skin tells Velocity what to do, and the skin displays the state of the underlying plug-ins. Other than that, you can do what you like with the skins, transitions etc.


And now for some info, on how to actually call the methods, and how to pull data out.

There are two AS classes that you need to include. which are Velocity.as and JSON.as. These are in a package called com.hatoum.velocity.

You then need to initialise the Flash-side Velocity plug-in, and this is a little hairy because of the way Flash loads classes, and Velcoity heavily uses static classes. So if you look at the first Frame, it has a call to:

import com.hatoum.velocity.Velocity;
Velocity.initialize(3);

which tells velocity to connect to the Java server, and then jump to the designated frame when it's done. If it fails, it will just continue playing. So in the above example, Flash starts at frame 1, tries to initialise, if it fails, it'll show frame 2 (which says "there has been a problem" etc), and if it succeeds, then it will just to frame 3, which will show controls etc.

So let's say we got to frame 3, and it's all connected and running. Imagine we just have one "play" button for now.

play_btn.onRelease = function() {
	Velocity.getPlugin("Media").invoke("play" + " c:/mysong.mp3" );
};

This should do exactly what is says on the tin! (Of course you would never hardcode the filename in there, and there are many options to invoking the play method, but we'll get to that in due time).

It's worth noting at this point that every plug-in has a corresponding accessBean, which is a DTO (data transfer object). This is where the state of a plug-in is held. So for the Media plug-in, this will contain the current track name, its length, the playlist entries, and so forth. In a similar way to getting the plug-in to do something, we can also get properties from its accessBean by doing this:

var length = Velocity.getAccessBean("Media").length;

Back to the original line of thought, if a song is playing, you'll want to update the skin's time label, to show that this song is x seconds through. You do this as follows:

// setup a method that does what we want, which is to update the time label int his case
var currentTimeWatcher:Function = function (prop, oldVal, newVal) {
	var _length:Number = Velocity.getAccessBean("Media").length;
	var _time_seconds:Number = newVal%60;
	_time_lbl.text = _time_seconds+"/"+_length;
};
// then add a watcher to the desired variable, and give it the method we setup above
Velocity.getAccessBean("Media").watch("timePos", currentTimeWatcher);

So we setup a method, which updates the _time_lbl's text with the given value (newVal). This value will come from the watch method. which performs a callback on the currentTimeWatcher method, when timePos changes. timePos is a field from the Media plug-ins accessBean.

The same principle applies to list boxes. To add a change listener to the playlist for example, you do:

var playlistWatcher:Function = function (prop, oldVal, newVal) {
	playlist_ls.dataProvider = newVal;
};
Velocity.getAccessBean("Media").watch("playlist", playlistWatcher);

It gets a little more complicated when you have to deal with double clicks, at the same time as being asynchronous. For example, what do you do if you're double clicking, and the state underneath changes at the same time? You add a "stale" boolean to indicate the state underneath. This is something that can be seen in the FileBrowser plugin.

A list of the available plug-ins, methods and fields can be seen in the threads below.

I think the above should be enough to get the ball rolling. I appreciate that the methods are not all 100% self explanatory, and that it makes 100% sense only in my head, so please fire any questions this way.

You can put the Flash plugin into a more verbose debug mode, by setting the _debug field tio true, in com/hatoum/velocity/Velocity.as

[Sama]

THE MEDIA PLUGIN

Properties
playlist
currentPosition
fileName
percentPos
timePos
length
videoCodec
videoBitrate
videoResolutionX
videoResolutionY
audioCodec
audioBitrate
audioSamplesFrequency
audioSamplesChannels
metaTitle
metaArtist
metaAlbum
metaYear
metaComment
metaTrack
metaGenre
voFullscreen
subVisibility
isPlaying


Commands
arbitaryCommand(string)
osd(value)
osdShowText(text)
keyDownEvent(key)
subSelect(value)
subVisibility(subVisible)
switchAudio(audioTrack)
switchRatio(ratio)
frameStep()
seek(position)
seek(position, relative)
audioDelay(delay, relative)
pause()
mute()
clearList()
play()
play(fileOrIndex)
remove(indexOrIndices)
moveUp(indexOrIndices)
savePlaylist(listName)
moveDown(indexOrIndices)
addRecursively(aDirectory)
addAll(aDirectory)
add(aFile)
previous()
next()
stop()
volume(volValue, relative)
toggleFullScreen()
speedSet(speed)
contrast(contrast, relative)
gamma(gamma, relative)
brightness(brightness, relative)
hue(hue, relative)
saturation(saturation, relative)

Note: The relative parameter is either a 0 or a 1, to indicate if the value change you're applying is a relative one. That means, if the volume was currently at 50% and you set the volume like this:

volu = 10; // this would normally come from a button or something;
Velocity.getPlugin("Media").invoke("volume " + volu + ","  + "0");

This would set the volume to 10%

But if you change the relative bit like this:

volu = 10; // this would normally come from a button or something
Velocity.getPlugin("Media").invoke("volume " + volu + ","  + "1");

This would set the volume to 60%

[Sama]

THE FILE BROWSER PLUGIN

Properties

refreshRoots()
selectDirectory(input)
select(input)
filter(filter)
clearFilters()
refresh()

Commands
roots
currentDirectory
currentFile
directoriesView
filesView
mixedView
currentFileStale

[Sama]

Reserved For Future Plugins

[Sama]

Reserved For Future Plugins

[Sama]

Reserved For Future Plugins