Archive for the 'Flash' Category

Sep 01 2011

Making Stagevideo backwards compatible.

Published by under AS 3.0,Flash

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.

1
container.stage.addEventListener(StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY, onStageVideoState);

is replaced by,

1
container.stage.addEventListener("stageVideoAvailability", onStageVideoState);

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.

One response so far

Aug 29 2011

Stage Video Problems

Published by under AS 3.0,Flash

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.

No responses yet

Jul 09 2009

Posting to Twitter from Flash using Tiny Url

Published by under AS 3.0,Flash

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,
 

import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLLoaderDataFormat;

shareBlog.addEventListener(MouseEvent.CLICK,postToTwitter);

function postToTwitter(event:MouseEvent):void{
tinyLoader.load(new URLRequest('http://tinyurl.com/api-create.php?url=http://nayansavla.com/blog?p=253' ));
}

var tinyLoader:URLLoader = new URLLoader();
tinyLoader.dataFormat = URLLoaderDataFormat.TEXT;

tinyLoader.addEventListener(Event.COMPLETE,gotTinyURL);

function gotTinyURL(event:Event):void{
trace(tinyLoader.data);
var reqString:String =  'http://twitter.com/home?status=Check this out ' +  encodeURIComponent(tinyLoader.data);
navigateToURL(new URLRequest(reqString),"_blank");
}

 
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.
 

12 responses so far

Jun 30 2009

Controlling Timeline Sounds in AS 3.0

Published by under AS 3.0,Flash

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.

var effectSounds:SoundTransform = new SoundTransform();
effectSounds.volume = 0.3;
this.soundTransform = effectSounds;

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.

No responses yet

Nov 06 2008

Difference in Netstream behavior

Published by under AS 3.0

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. 

 

No responses yet

Oct 16 2008

Using Flex Builder and Flash together…

Published by under AS 3.0,Flex

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.
I always run my projects in debug mode, it helps me to see what exceptions are being thrown if any and i love to use break points to debug the code. It has made my life lot easier. So for that flash only swf to connect to flex debugger we need to check this option otherwise it won’t work.
  • 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.
Let me explain this further, lets say in your AS3 document class you have a movieclip with instance name sample which has a class Sample.as 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.
Because of the earlier problem, FB doesn’t compile any classes which are assigned to the movieclips and there any errors are discovered only when you compile the fla. After compilation of the swf, you have to copy it in the bin-debug folder so that the most recent changes are reflected when you run the project.
So far it has been the above things, if i encounter something new then i will add to this post.

No responses yet

Sep 25 2008

Testing for null Objects

Published by under AS 3.0

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,

 

var strObj:Object = "";

//this is standard way of finding if the objects are null or not 

//since the object is initialized there should not be a trace

if (!strObj){ 

    trace("this shouldn't be happening");

}

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,

var strObj:Object = "";

//this is standard way of finding if the objects are null or not 

//since the object is initialized there should not be a trace

//ofcourse since this is string i am testing for length.

if (!strObj && strObj.length){ 

    trace("this shouldn't be happening");

}

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

2 responses so far

Sep 05 2008

Using Mapping Services with Flex

Published by under AS 3.0,Flex

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.

 

2 responses so far

Jul 23 2008

Reducing Main Application file size in Flex

Published by under AS 3.0,Flex

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.
There is one more thing which is really useful if you are looking to  and i haven’t it being discussed that much.
 
Convert your CSS files into SWF files and then load during runtime.
 
When you use stylesheets to customize your Flex application, we usually import it in the mxml using the <style> tag. I would recommend using StyleManager class to load the styles swf file during pre initialization of your 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,

private function applyCSS():void{
StyleManager.loadStyleDeclarations("styles/mystyles.swf")
}

 

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 :)

One response so far

Jul 21 2008

References and how they work in Actionscript

Published by under Flash,Flex

This tutorial/article is mainly for newbies/intermediate programmers. Someone who is writing Actionscript code without coming from C or Java background will benefit from this. 

A quick test to find if this article is for you, without executing this piece of code can you predict what will be the trace statement will output,

function referenceTest():void {
var mainArray:Array = new Array("1","2","3","4");
var tempArray:Array = mainArray;

tempArray.pop();

trace(mainArray.length + " is the length ");
}

 

Be honest and if you think the answer will be 4 then you definitely need to read this article and understand it. Still confused???? now you can run this piece of code and then you will find that the answer is 3.

how is this possible? We are not modifying mainArray at all, yes we are not modifying the reference to the array but then we are creating another reference to this array and then using it to modify the array. confused still, i need to explain it in more simple terms.

Lets take a look at the picture below, forgive my drawing skills but i think it serves the purpose,

 Pointer example

var mainArray:Array = new Array(“1″,”2″,”3″,”4”);
this line of code actually creates a reference which we have called mainArray. This reference points to an array class.

 

var tempArray:Array = mainArray;
one would expect this to create a duplicate array but no, we are just creating a new reference to the
same memory block, this reference is called tempArray.

 

tempArray.pop();
now we are using this reference called tempArray to modify the block of memory its pointing at, and hence that block of memory changes and we have only 3 elements in this array now.

Since mainArray is a reference pointing to the same block of memory as tempArray is, whenever we use mainArray reference it has changed now and its length is no longer 4.

 

if we do something like this, var tempArray:Array = new Array(“1″,”2″,”3″,”4”);
then we are actually creating a new block of code in memory and any changes to tempArray won’t affect mainArray.

hope now your doubts have cleared.

Remember, In Actionscript all complex data types are passed by reference and not by value.

 

Another test to find out if you understood how this works, try the following code, I am not including the graphical elements and i shall leave upto you to fill out the code for that.

package {

package {
    public class SampleClass {

        public var value:String;

        public function SampleClass() {

        }
    }
}

A sample test class to be used in our example, I am copying this code from Flex so will include only the actionscript code, you need to do proper initialization etc.

public var dataArray:Array;

//initialization function with an array holding the sampleclass instances
private function init():void{
    dataArray = new Array();
    for (var i:Number= 0;i&lt; 6 ;i++){
        var tempSample:SampleClass = new SampleClass();
        tempSample.value = String(i);
        dataArray.push(tempSample);
    }
}

//this function is called on button click
private function findSample(event:MouseEvent):void{
   
    //call the getSample function
    var tempClass:SampleClass = getSample();

    //if we find a match then we will change its value
    if (tempClass){
        trace(" found something lets change value");
        tempClass.value = "found yay";
    }

    for (var i:Number = 0; i &lt; dataArray.length ;i++){
        //what do you this this trace statement will output
        //will it show the modified value or will output 0 through 5
        trace(dataArray[i].value);
    }
}


//this function is called from the findSample
private function getSample():SampleClass{

    var foundSample:SampleClass;

    //get the string on which matching is to be performed
    var findSample:String = sampleText.text;

    for (var i:Number = 0; i &lt; dataArray.length ;i++){
        if (dataArray[i].value == findSample){
            foundSample = dataArray[i];
            break;
        }
    }

    return foundSample;
}

Once you get run this modify the getSample function as shown below and compare the results. It should give you a better idea.

//this function is called from the findSample
private function getSample():SampleClass{

    var foundSample:SampleClass = new SampleClass();

    //get the string on which matching is to be performed
    var findSample:String = sampleText.text;

    for (var i:Number = 0; i &lt; dataArray.length ;i++){
        if (dataArray[i].value == findSample){
            foundSample.value = dataArray[i].value;
            break;
        }
    }

    return foundSample;
}

 

hope this article was useful, as usual questions, comments always welcome :) 

 

No responses yet

Next »