Blog for Nayan

In my earlier blog post i mentioned how the user needs Flash Player 10.2 for Stagevideo to work but if you want to make sure that your video player is compatible with older versions of Flash some changes need to be done.

The trick to achieve this is not to use any stagevideo classes and make them generic and we need to add a timer to check if the stagevideo event is fired or not. To demonstrate this i am going to use the sample code presented in this article and make same code compatible with 10.1 and older versions of the Flash Player.

If you look at the code the classes which cause problem are stagevideo specific classes i.e. flash.media.StageVideo or flash.events.StageVideoAvailability etc, these are not present in 10.1 and older so we have to get rid of those.

Some tricks that i have used is to remove the event classes and reference the individual events with strings. for eg.

is replaced by,

this shouldn’t change in future releases if flash hopefully but if it does then you have to change your code unfortunately.

One additional thing to note is that the above event won’t get fired in 10.1 and older flash versions so we add a 1 second timer to detect if this event is fired or not. This allows us to fall back on using regular video to play our media file.

The modified class and the original class which are included in the flex project can be downloaded here for comparison.

Adobe announced Flash Player 10.2 a while back and the main update was StageVideo which allows rendering of video using the hardware and in a completely different way. This article really explains that in detail on how the amazing better CPU performance is achieved and other limitations.

This blog post i want to highlight the problems in using stagevideo which i personally have come across and hopefully adobe will resolve soon.

• No Flex Support. If you take class containing stagevideo and add to an instance of UIComponent the video doesn’t render. All you see is a blank screen, you can tell the video is playing because you can hear it.
• you have to use wmode=”direct” in your html embed otherwise it doesn’t work, this usually is not a problem but sometimes can be. If you have some over laying content like a menubar it will show behind the flash, our company website www.eonline.com has this problem and we don’t use stagevideo for our live streaming events even though the player is capable.
• No Backward Compatibility, if you use the stagevideo classes then the user needs to have 10.2 installed, Flash player will throw an exception otherwise. I have created a hack to use stagevideo and make it backwards compatible but its not out of the box. blog post about it

These are not major problems but Flex support is a huge one i believe. Hopefully we will see support for it soon but it seems like the Flex team is focussed on mobile platform for now.

Other restrictions on stage video are noted in the article linked above.

I had to find a way to post a link to twitter directly from Flash. Twitter has its own API but then they expect us to collect username and password.
 
If you don’t want to collect usernames and passwords on your site and still manage to post stuff to twitter directly there is a way to do. Since I wanted a tiny url link included as well so had to integrate Tiny Url along with twitter.
 
It turned out to be really easy and here is how,
 

 
The first thing is to get a tinyurl link and they have a api for it, the best thing is they also have a crossdomain.xml so we don’t have to worry about getting the response back within Flash.
 
Since it returns just the url, I have set the dataFormat for my URLLoader to be text so that it gets stored in the data property and i can use it directly.
 
Now when we get our tinyurl back its time to post it to twitter. Twitter API doesn’t mention this one possibility where you can submit any message as a post var and the main page captures it, if you are already logged in then it will populate the share screen.
 
Its a neat little way, if you don’t want to deal with usernames and passwords on your website.
 

 
The swf file is embedded above, if you click this button then we call tinyurl, get the link and then open a new window for twitter. If no window opens, it might be because of popup blocker. To avoid popups from Flash i have written another post, Avoiding Popup Blockers
 

 
Download the fla file here.
 

I came across this very useful feature of AS 3.0, previously to control timeline sounds you had to do a lot of crazy things. Yes it was possible using AS 2.0 as well but not as straightforward.

If you have a document class for your main movie, this piece of code is all you need.

Yep only 3 lines of code and it controls sound for every swf loaded and if you want to increase the sound in certain Movieclip you can just add another sound transform to it and control the audio.

My post about problems with Flex Videodisplay component has been the most viewed post. All this while the alternative video component i created was used with wowza streaming server. It was a Flex Component and wasn’t just pure Flash i.e. not using Flex Framework classes.

I had to create a Flash only AS3 Videoplayer component which would work with both the streaming server and also play normal flv files like youtube does.

I came across a very interesting Netstream problem, While playing local files the netstream would broadcast “NetStream.Play.Stop” fine but when i was streaming the flv files the broadcast of “NetStream.Play.Stop” would happen few seconds before the movie actually was supposed to stop. 

Sometimes it would be 20 seconds before the movie would stop playing, so if you are streaming flv files and need to know when exactly the movie ends, you should be using “onPlayStatus”. This is sent by the server whenever the playback movie ends. 

This can be implemented in the same way as one would implement “onMetaData” or “OnCuePoint” listeners. Hope this post helps you if you are planning to write a generic Flash AS3 videoplayer. 

Anyone who has written code using Flex Builder Plugin for Eclipse or just the Flex Builder by itself will agree with me completely that writing code using Flash IDE is not fun anymore. 

So when i had to write something in pure AS3 i decided to use FB for writing all the classes and Flash only for compiling the FLA. It is a bit of hassle but the efficient provided by FB far exceeds that hassle. Also in my case the project is integration of Flex and Flash, the pure AS3 swf is going to be loaded into a Flex project so i have to launch the project through FB. 

Some tips/suggestions from my experience of using this methodology,

• For debugging the code in FB you have to select permit debugging check box in the Fla options.

• Some of the advantage of using FB is lost because the child instances of movieclips have to be declared as movieclips even if they have some class attached to it.

public var sample:Movieclip; this is how you would declare it or this is another way 

public var sample:Sample; Flash doesn’t like this declaration and it freaked out on me. 

you won’t get any compile errors but when you run the movie it won’t be as you expected. So because of this it has to be a movieclip and therefore the FB autocompletion is not much of use there.

• Major annoyance is that every time you change the code and have to test out the swf, you have to compile it and then copy paste is into the bin-debug folder of your flex project. Cleaning the project takes long time.

I am not sure how many Flex/Flash programmers are aware of this fact or also you might call me to be a noob on this point but i discovered this today in AS 3.0, I just use ! to find if the object is null or not and don’t bother testing against another property within that object but sometimes there is no other way around it.

Consider the following example,

But the trace statement shows up, it almost seems that Flash is treating this object as null but no if you look at the variable using the debugger the value is not null. So this isn’t the smartest way of checking if the object is null or not specially when you are dealing with strings.

Many people recommend doing it differently, like combing it with && for some property check of that object, it would look like this,

Just something to keep in mind, its not always necessary.
 

For a project i decided to try out the Flex libraries for both Yahoo maps and Google maps as well and they both seem to be pretty cool.

http://developer.yahoo.com/flash/maps/ and http://code.google.com/apis/maps/documentation/flash/

After working with examples of both the API’s it was not that difficult to find out which had better features.Lets consider the Visual Aspects first,

Speed

When you change the map types, Google emerges the clear winner. you can see it for yourself how fast the maps load. 

Zooming

When you zoom in and out, yahoo loads one tile at a time and its not pretty specially while zooming in. Google maps just scales the original image and then when the tiles load it fades out. It could have been better implemented by just waiting for all the tiles to load but they choose not to. Its not 100% clean but still better than yahoo.

Dragging

When you drag the map at any level, google maps keeps on repeating the images where as yahoo map just shows one image.It doesn’t matter much but i think its a nice feature to have. 

So visually Google is winner but for a Flash developer, Yahoo maps have a lot more to offer.

Geocoding

When you geocode something, both work well but the results returned by yahoo provide a lot more information. You can get the state and country information from the city name etc. It is awesome feature which google maps lack and hence for our application we are using yahoo maps.

Edit: If you look at the comments, I have been corrected that google does indeed have geocoding features, but i am sorry to say that as of 9th September 2008 the geocoding could use some work. See examples.

Search and Traffic

Yahoo maps allows you to get the traffic situation and also perform local search and then display the results on the map. Google map has no such features. 

Overlays

Google maps has polygon overlay which yahoo map lacks but then it seems easy to draw everything in yahoo maps using the Flash drawing API’s. 

I haven’t looked into changing the look and feel of the buttons etc but it seems to me that both the api’s allow the same. Samples and examples can be found for both, I will be putting one with yahoo maps soon.

Examples:

For our application I just wanted the map to move as the region were selected by the city, state and country data. you can check it out here, 

Yahoo Maps: Application Source

Google Maps: Application Source

Please Note: I am using amfphp to get the countries, states (US) and cities data. Also i have edited the keys in the source.

If you have both examples open, try to select the country yugoslavia and then see the results. At this point i stopped working on google maps example because it returned everything with yugoslavia. It can be a good thing or a bad thing depending on your application, for me it was bad thing. 

So Yahoo which returns me the country works for me, I am using standard city, state and country format to get the geocode results. Yahoo seems to be giving priority in that order.

I know you might have come across the usual posts for reductions of file size of a Flex swf. Some of them are listed below incase if you don’t already know about it.

• Use the optimize parameter for the compiler.
• Don’t embed images, load them during runtime.
• Use only classes which are required, import only single class instead of the complete package.
• try using modules instead of developing one single application.

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”1024″ height=”768″ preinitialize=”applyCSS()”>
 

applyCSS would look something like this,

To convert your CSS into SWF in Flex Builder simply right click on it and then select convert to swf file. 

Overall ofcourse your will be still loading in that styles swf file, so the bandwidth usage will remain the same but the initial load time will be less. 

You might argue that it will be the same wait time for user to interact with the application but atleast the initial preloader will be on screen for less amount of time. 

Also depending on your application you can break it into multiple stylesheet documents and then load the required styles when a particular module loads thereby getting a lot of leverage from this technique. Hope this helps

I have had opportunity to use Cairngorm with Webservices, Httpservice and Remote Object as well. I had some difficulty passing variables to the amfphp backend but ultimately resolved it. here is how,

For some reason operation.argumentNames i thought would take the array and then send the objects in this array as variables, but it was sending undefined as the value for the variable.

I resolved the problem by sending the variables in send function and i am sure you can send more than one variable in the send function.