stoimen's web log » flex 3

Flex 3 NetStream video rotation

Stoimen — Tue, 01 Dec 2009 08:00:00 +0000

Why should I rotate a video stream?

Well if you’d like to make some video upload application, let’s assume someone makes a video with it’s phone. The case with a video camera is not the same, almost every camera adjusts it’s rotation correctly, but when it comes to your mobile not always the video contains information about the rotation.

The problem is when the user uploads a rotated video, how I’d rotate it back on the correct position when playing it with a simple FLV player.

The answer is so simple!

You can just use this simple chunk of code:

...
_video = new Video();
_video.rotation = 90;
...

and thus you can rotate the video with several degrees.

Passing objects with ExternalInterface from JS to Flex

Stoimen — Thu, 29 Oct 2009 14:48:26 +0000

What if you’d like to pass an object to Flex

To continue the topic of my previous post I’m just going to add that there’s a native way to pass objects from JavaScript to Flex’s actionscript.

I’m not going to describe how to structure a object in JavaScript and/or Flex. Let’s go directly to the example.

The function in .js file should return something that is object in JavaScript:

.js file

function getObject() {
    return { foo : 'bar', zoo : 'tar' };
}

Now, supposing that in Flex there already has been added a callback with ExternalInterface(‘getObject’, receiveObject); and the as3 function receiveObject looks similar to this:

.mxml or .as

private function receiveObject( obj : Object ) : void
{
    Alert.show(obj.foo);
    Alert.show(obj.zoo);
}

That outputs respectively “bar” and “tar”.

Even more …

You can pass from .js to .as array of objects, but than with small change of the code you’d access the variables:

obj[0].foo
obj[1].foo

assuming that there are two objects with same properties.

Tips and tricks in ExternalInterface communication!

Stoimen — Wed, 28 Oct 2009 18:31:06 +0000

ActionScript and the rest of the world

In the past, when ActionScript v2 was widely used, the most common way to interact with the other parts of the web application, whether a page refresh, redirect or JavaScript method call was the as2 method getURL. With the simple getURL(‘javascript:someJSMethod…’) the flash movie called the JS function and everything was OK.

Now in ActionScript v3 where everything looks and it is different, everything about communication between JS and Flash/Flex is done by ExternalInterface. The communication can be done in both directions. From JS to Flash and vice versa.

The ExternalInterface.call

There are two simple methods implemented by ExternalInteface. The first one is addCallback and the second one is call. Here I’m going to write a little more about the second one.

The most common usage is:

ExternalInterface.call('jsMethod');

where jsMethod is, as you can guess, a JavaScript method. Something like:

test.js

function jsMethod() { alert('test') };

A bit different, but yet again simple, is the call to a js function with parameters:

ExternalInterface.call('jsMethod', param1, param2);

where the javascript function can be:

function jsMethod(param1, param2) { alert(param1) };

But what I was writing about is really tricky. What if the jsMethod returns a value? Than in the .js file you’ve the following method:

function jsMethod() { return 'foo bar' };

and when you try this:

var str:String = ExternalInterface.call('jsMethod');
Alert.show(str);

you get the alert box with the string ‘foo bar’.

Where to use it?

Well this is really useful, because you get the response within the call method, only with the .call instead with .call and than .addCallback. The problem of course appears when you try to use it with AJAX call. Than even if the function returns in the success method of the AJAX call the flash doesn’t get the response.

Than you simply implement the communication with both .call and .addCallback!

ExternalInterface from JavaScript to IE/Firefox

Stoimen — Wed, 08 Jul 2009 06:53:53 +0000

ExternalInterface communication with JavaScript

The most simple way to describe the case is as if you have the ExternalInterface addCallback in the Flex application like that:

flex.mxml

ExternalInterface.addCallback("jsFunc", flexFunc);

public flexFunc() : void
{ ... }

and in the javascript code you’ve something like that:

file.js

function getSwf(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
         return window[movieName];
    } else{
         return document[movieName];
    }
}

getSwf('movie').jsFunc();

that will execute the flexFunc in the flex app.

Important!

is very important to have the object/embed tag correct:

That doesn’t work? Where’s the bug?

Even it’s not so clear the bug is present. The getSwf function gets the window[moviename], or document[moviename] depending of which browser is used. But the problem is that both object and embed tags have same name and the selected object is not one but two.

So there’s a simple patch

Name the object embed tags with different names, i.e.

now they are named movieie (for IE) and movieff (for Firefox) and we must to change a bit the getSwf function like that:

function getSwf(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
         return window[movieName + 'ie'];
    } else{
         return document[movieName + 'ff'];
    }
}

getSwf('movie').jsFunc();

Flex 3 DateChooser UTC issue

Stoimen — Wed, 20 May 2009 06:11:21 +0000

What I intend to do

The task can be described as it is. There’s a Flex 3 DateChooser component integrated with a custom timeline component. The problem occurs when exporting the data from the flash to the browser. Than I write the unix timestamp to the url of the browser. Of course I’m using date.getTime() in Flex.

getTime()

Applying getTime() to any object of type Date in Flex results in a unix timestamp with included milliseconds. Of course the server side technology which in our case is PHP should devide by 1000 to remove the milliseconds.

The problem

The database and the server side script language use a UTC dates. The problem is the Flash functions getFullYear, getMonth, etc. don’t deal with UTC. Of course you can switch to getUTCFullYear, getUTCMonth, etc. but than comes the real problem.

The DateChooser …

When you’re using dates in Flex with no UTC in mind everything’s OK. You have the DateChooser component. Clicking on the 16th of May 2009 results in

Alert.show(date.toString());

which prints 16th of May 2009, which appears to be OK. Yes but the date.getTime() is still using the non-UTC time. If you’re using UTC, and suddenly print that kind of a message:

Alert.show(date.toUTCString());

Then for 16th of May 2009 you receive 15th of May 2009. Which is really bad.

No workaround

Unfortunately I didn’t find any workaround till now. I hope I’ll soon.

Flex 3: compare two dates

stoimen — Tue, 12 May 2009 12:22:47 +0000

Theory of Operation

You’re using Flex 3 and want to compare two dates. The format of the dates is string something like “2009 May 05″. The question is …

What’s the best way to compare them

Well if you’ve the dates as strings and you can easily conver them to something like unix timestamps. If they are a Date object you can try lik so:

date1 = new Date(’2009′);

date2 = new Date(’1990′);

if (date1.setTime() < date2.setTime())

Flex 3 HSlider thumb gap issue

stoimen — Sat, 25 Apr 2009 15:19:33 +0000

Introduction to the problem

When the HSlider is set up with two or more thumbs there’s a gap between them always. The problem is that you may want to put them on one single value of the slider, but it’s not possible.

First: hide your thumbs

The quick solution is to make custom skin for the thumbs, setup the height and width of the thumb to be 1px and make a transparent background image for skinning them. That of course does not solve the problem. There’s still gap of 1 value between the thumbs, and still you cannot select one single value with both of them.

Make your own thumbs

It’s difficult to make the calculation and positioning of course. With that approach you’ve to be careful with the math to adjust properly the new thumbs. They can be some kind of Flex built in component. As the button control is or whatever.

Hope for workaround

As it appears there’s a reported bug for this issue. And I hope soon there will be a workaround or even better there’s going to be new version. Something I don’t like in commercial software.

Flash doesn’t load in div with display:none style

stoimen — Wed, 08 Apr 2009 05:42:31 +0000

Where’s the problem?

As it appears if you have flash embed / object tags in a div which is initaly hidden (style=”display:none”) cannot be loaded. It means the .swf file is loaded via HTTP but when the div become visible then starts the loading process and the flash starts from the begining.

Is there a workaround?

I’m looking for a workaround which I’ll share as soon as I find it. If you have a solution please share it with us.

Flex 3 Custom Timeline Component

stoimen — Tue, 31 Mar 2009 05:57:22 +0000

Flex 3 custom timeline component Continue reading → Related posts:

Flex 3 text editor

stoimen — Wed, 18 Mar 2009 05:49:21 +0000

Here’s a nice short tutorial how to make simple text editor using Flex. Actually it’s interesting how simple is to make such a dynamic component.

I hope you’ll enjoy.