Wassim Sidani

It is a fact, flash is growing fast and the new changes to its scripting language i.e. actionScript3 is the most radical change, being a professional AS2 programmer, I find myself amazed of how much things have changed in the new language, the web is full of articles talking about the transition from AS2 to AS3, Adobe site contains a whole section about this yet I still find the introduced changes a bit of too much!

If I were in Adobe shoes, I would have provided AS2 experts with the same functionality using the existing language and added the new one as well, like they did with director when they introduced javascript in addition to director’s native scripting language “Lingo”.

AS3 offers better OOP practice, ok, I agree, but who said that matters for us web developers? We were happy with the ugly non OOP language we had; it was working well for us and the fact that a new version of flash i.e. CS3 emerged is the single proof of the popularity of this program and what it offered to the web.

Wherever you go, you see the fuss about classes, packages, cryptic error codes and more of the like, my guess is that AS3 wont be accepted by flash developers as fast as Adobe wish, I know I am not accepting it and wont do commercial jobs using it, no sir, I will stick to my good old AS2 and wait till adobe finish the upgrades and add the new beta features like high definition video and audio support (btw, work on flash player 10 is in its last stages, and words about flash CS4 with a set of new features is also spreading in the flash community), with the rate things are moving at, I guess I wont have time to play with CS3 since by the time I decide to dive in it, CS4 will probably be out and running…

More on this in the coming few days.

Hello again,

In part one, we saw an easy way to use the XML connector and dataBinding component to assign the contentPath propery of the media player component to one entry of an XML playlist.

In this tutorial, we go one step further and add a dataGrid then bind the selected index of that grid to the contentPath of the media Player component.

Before going further in this explanation, have a look here :

Custom MP3 Player-Glassy look

So how we do that?

First, the dataProvider property of the dataGrid has to be linked to the result of the XML parameter and more precisely to the array object in the results.

This ensures automatic parsing of the XML data into a bidimensional array which the dataGrid can use as a dataProvider.

Then, we use this code to listen to cell press event and to respond accordingly :

myListener = new Object();
myListener.change = function(evtObj) {
mp.contentPath = dg.selectedItem.location;
}
dg.addEventListener(”change”,myListener);


Where dg is the instance name of the dataGrid component and mp is that of the mediaPlayer component.

I’ve uploaded 4 songs I found on my HD, they do not correspond to the entries in the XML playlist yet that what I have for now so :)…

Till the next tutorial, stay safe and don’t do stupid things !

Bye.

Hello guys,
It’s been a while and I was very busy , could not get this data binding and XML connector tutorial posted. Excuse my delay.
So here is the long waited xml connector and data biniding tutorial at last!

Ok, let’s explain few things before we start.

XML connector is a class whose job is to make loading and parsing XML much easier.
Data binding provides an easy way to link various components to each other and to the XML connector (or data holder).

The following example explains how this works.
Let’s look at this simple XML file :

Let’s assume you want to build a cool mp3 player that plays songs provided by a playlist like the one this XML represents. If you’re going to do this the classical way, then prepare yourself for lots and lots of parsing and coding…
Using the XML connector together with data binding will make this task a joke!

So the first thing you need to do is to drag a media player and an XML connector component to the stage, give the former the instance name of mp and give the latter an instance name of “xmc”.

Place your xmc off stage, click on it and open up the component inspector, type the path to the playlist xml file, in our case it’s simply songs.xml as it resides with the swf in the same folder.

Now, click on the schema tab and then click on the “import a schema from a sample xml” button then browse to the songs.xml itself and click ok.

At this point, you’ll see the xml schema displayed, we’re particularly interested in the path to the mp3 file that the player has to read, so practically we need to grab the Path attribute (@Path).

Now comes the interesting part, click on the biniding tab in the component inspector then click on the “+” sign to add a binding, the same xml schema appears, click on the Path attribute then click Ok.

Now, in the grid below, choose out as direction from the drop down list, double click on the bound to field and from the dialog that appears choose the media player component and from the right hand side panel choose contentPath as the property of the mediaplayer to which the Path attribute will be bound to.

One last thing, put the following code on frame one of your timeline :

Without this, the xml connector will not function at all.

Now what we have is a mediaPlayer component that reads the first node in the xml, parses the path attribute and loads that as contentPath and start playing it!

Check the sample below.

That’s cool but what about other songs? How can we choose to play those?
Well, I will leave that to another tutorial…

mp3 player reading from XML and databinding
Here's the page where you can see the XML connector and the mp3 player:

Click Here

Hello,

Expect a new hot tutorial about XML connector and Data binding soon…

These two are among the least known and understood, they however are truely time saving and extremely powerful.

It will be up within two or three days.

Regards

This new addition to ActionScript is a very wanted feature, older versions of flash scripting language relied completely on fscommand to comunicate with the flash ocx container, fscommand is very limited in functionality, the new externalInterface is much more versatile.

Let's consider the following scenario, you want to get the type of browser the user is using and to adjust certain properties of your flash movie accordingly, there is no flash command that does just that, however there is one in javascript.

So the job now is to code a simple function in javaScript and call it from flash, flash should be able to call the function and to get the return value of it.

That's where externalInterface jumps in.

Here's a fast code snipet:

In javaScript:

now n holds the name of the navigator we want to know, in flash we will call this javascript function and we'll get the return value n, assign the n held text as the text of a dynamic text box, here's the code that does that:

and that's about it!

Now what if we want to do the opposite? i.e call an ActionScript function from the container , from javascript for example, how do we do that?

Easy, we register a flash function as callable using the code:

where:

methodName:String - The name by which the ActionScript function can be called from JavaScript. This name does not need to match the actual name of the ActionScript method.

instance:Object - The object to which this resolves in the method. This object is not necessarily the object on which the method can be found -- you can specify any object (or null).

method:Function - The ActionScript method to be called from JavaScript.

to show this in action, I've placed a small red rectangle on top of the swf and wrote the following code:

ExternalInterface.addCallback("obey", null, obey);
function obey() {
square._visible =false;
}

so whenever javascript calls the function obey, the red rectangle whose instance name is "square" will simply disappear since the function obey() does just that, see the code below:

function obey() {
square._visible =false;
};

one last step, the javascript that will call this actionscript function from:
function callExternalInterface() {
thisMovie("externalInterfaceExample").obey();
}

And that's all it takes.

I've added a more advanced sample where javascript prompts you for input then sends the input text back to flash.

Click here to see a sample swf showing externalInterface in action.