New in AS3/Flash/Flex ?

I am seeing this question more now a days.
So here I am archiving few resources to read and understand AS3/Flash/Flex concepts:

• http://www.adobe.com/devnet/flex/videotraining.html
• http://yunfile.com/ls/developresource
• http://www.amazon.com/Essential-ActionScript-3-0-Colin-Moock/dp/0596526946/ref=ntt_at_ep_dpt_1
• http://www.lynda.com
• http://www.gotoandlearn.com
• http://www.taterboy.com/blog/2009/08/as3-101-introduction-to-variables/
• http://www.developphp.com/list_flash_video.php
• http://sixrevisions.com/flashactionscript/flash_tutorial_websites/
• http://www.amazon.com/Essential-ActionScript-3-0-Colin-Moock/dp/0596526946
• http://active.tutsplus.com/category/tutorials/page/54/

I will keep refreshing and reorganizing this list as and when I get some time.

Until that time, enjoy.

Changing output swf name

Today, I got an interesting problem where I had 4 Flex projects, all had Main.as as their default application file and all dropping their outputs to a common folder.
If you just read this problem, it doesn't seem to be a problem at all (at least I thought so initially), however the problem appears when your want to use all these four project's output SWFs in different pages. And the actual problem is that all of these four projects produce Main.swf as their output thus whoever is the last executable project, gets its bits dropped at the folder and remaining three are left crying.

Now the solution to this problem is also very simple. Just use -output switch in compiler arguments.
In Flex/Flash builder, go to Project > Properties > ActionScript Compiler and add following line inside Additional compiler arguments:

-output=C:/dev/project/bin-debug/Project1.swf

Do this for each project and change the name of swf in above argument.
Good to go...

Adobe Certification Hierarchy

Adobe Certification Hierarchy

I am an ACE :)

Yesterday (Sunday 16th Oct 2011), I cleared my first ever Adobe Certified Expert certification for Flex 4.5.
I was really happy when I saw the result screen. Though I got marks less than my expectations, but its okay. End of the day, I am pass. I will get my certificate and badge in a few days.

I used following sample exams/tutorials for my preparation:

• Adobe Flex Video Training
• Adobe Flex Livedocs
• 9A0-129 - Free Flex Training, Flex exam questions and Flex 4 study guide -uCertify
• Getting certified in Flex 4 - Some considerations on the Flex 4 (9A0-129) exam - Marco Casario | RIAvolutionize the web
• Download Adobe Flex 4 ACE Exam Aid 2.0 Free Trial - Software application specifically written to help you prepare for the Adobe Certified Expert (ACE) exam. - Softpedia
• Testking 9A0-129 Exam Questions - Pass Adobe 9A0-129 Exam
• Pass4sure 9A0-129 Exam Questions, your Best Adobe 9A0-129 Practice Engine
• FreeExamKing - Download Free ADOBE 9A0-129 Exam Questions Answers in PDF
• Download Practice Adobe 9A0-129 Exam Questions Brain Dumps PDF - ITExamsTube

The weird "Server Busy" dialog box

Today, for the first time, I observed the infamous weird "Server Busy" dialog box which asks you to either Switch to the process which is pending (but you will never know which is that process) or Retry. The calamity is that none of these options removes this dialog box and you cannot resume back to your work.

This dialog box usually appears when you try to import something in Flash CS5 or Dreamweaver CS5.

Causes:

• Lack of system resources, generally memory. Suggested here. (However in my case, I still had more than 2 gigs of RAM free.
• Adware/Malware. Suggested here.
• Some startup utilities. Suggested here.

Solutions:

• Switch to the busy program and finish it by either opening and closing that program or killing it using Task Manager. Suggested here. [Didn't work for me]
• A newly installed program which is not installed properly. [Didn't work for me]
• Running Anti Virus or Adware-Malware removal software. [Didn't work for me]
• Kill the pending task using Task Manager. Suggested here. [Didn't work for me]
• Rebooting. Suggested here. [Didn't work for me]
• Windows Update. Suggested here. [Didn't work for me]
• Clean up disk. Suggested here. [Voila. It worked!]. The reason for me seemed to be growing Temporary Internet Files.

mm.cfg hidden treasure

Found a very nice article about Hidden powers and features in form of mm.cfg file by jpauclair.
http://jpauclair.net/2010/02/10/mmcfg-treasure/

Change SWF height/width dynamically using Javascript/jQuery

Many time you need to have swf re-sized based upon your need. E.g. you don't want to show vertical scroll bar when content grows in flash, or you don't want that extra content to be cut because of fix flash height, or anything else.
Changing swf size is very simple using jQuery. Just call this JS function to make it happen:


function UpdateSWFSize(w, h) {
    if ($("#my-swf-id")) {
        // For IE
        $("#my-swf-id").height(h);
        $("#my-swf-id").width(w);

        // For FF, Chrome, Opera, Safari
        var swf_embed = document.getElementsByTagName("embed")[0];
        $(swf_embed).height(h);
        $(swf_embed).width(w);
    }
}

You can also do it without jQuery in this way:


function UpdateSWFSize(w, h) {
    if (document.getElementById("my-swf-id") ) {
        // For IE
        document.getElementById("my-swf-id").height = h;

        document.getElementById("my-swf-id").width = w;

        // For FF, Chrome, Opera, Safari
        var swf_embed = document.getElementsByTagName("embed")[0];
        swf_embed.height = h;
        swf_embed.width = w;
    }
}




Off course you must have included jQuery Javascript file in your page and "my-swf-id" is to be replaced with your actual swf id.

Flash player supported media formats

File Extn	Mime Type	Desc
.F4V	video/mp4	Video for Adobe Flash Player
.F4P	video/mp4	Protected Video for Adobe Flash Player
.F4A	audio/mp4	Audio for Adobe Flash Player
.F4B	audio/mp4	Audio Book for Adobe Flash Player

Video:

• FLV 
• F4V
• MP4
• F4P
• MOV
• M4V
• 3GP
• 3GPP

Audio:

• MP3
• F4A
• F4B
• MP4 
• AAC
• M4A

Image:

• GIF
• PNG
• JPG
• JPEG 

 Other:

• SWF 

Flex: Item Renderer v/s Item Editor

Item renderer only renders the particular row/column. The item in this case is read-only. It is always present in all controls.
However Item Editor allows you to display and make the item editable.

   1:  <mx:DataGridColumn dataField="vacationEligibility"

   2:      headerText="Vacation Days">

   3:          <mx:itemRenderer>

   4:              <fx:Component>

   5:                  <mx:Box>

   6:                       <mx:NumericStepper minimum="2" maximum="26" 

   7:                           stepSize="2"/>

   8:                       </mx:Box>

   9:               </fx:Component>

  10:          </mx:itemRenderer>

  11:  </mx:DataGridColumn>

Interesting Google search bug

I searched for flashutil10e.exe (which is automatically started by flash builder 4) in google because I wanted to stop this application from starting along with every build. And I found this :)

On search page 1, check the number of pages.

Go to page 2 and check the number of pages again.

Flex 4: ArrayList vs ArrayCollection

ArrayList and ArrayCollection both can be used to store and manipulate list data. Both supports flex data binding which can drive the watching object to update itself on data change.
However the key difference between ArrayList and ArrayCollection is that ArrayCollection has additional logic to sort and filter the list data however ArrayList is created specifically to hold and manipulate data and still be bindable. Thus ArrayList is lighter version of ArrayCollection.
Note: ArrayList is added in Flex 4 thus it will not be availalble in previous versions of flex sdk.

Technorati Tags: ArrayList,ArrayCollection

Ant to automate Flex builds

Today I wanted to automate my flex builds in order to save my and my team's time. Thus I did the obvious thing: Googling :) . However after 3 hours of Googling, I found that there is no clear writeup available for a newbie. Thus I am writing this step by step guide to automate your Flex builds using Apache Ant.


Prerequisites:

1. Install Flex builder (I know you must be having this already. Adding for the sake of initiation)
2. Download Apache Ant current bin from http://www.apache.org/dist/ant
3. Extract the zip folder at any location.
4. Define these environmental variables: ANT_HOME, FLEX_HOME, JAVA_HOME. For more info, go to Apache Ant documentation.
5. Create your Flex/ActionScript project and run it. If everything works fine, go to step 6, else remove the errors from your code and then go to step 6.
6. Now copy flexTasks.jar from Flex installation directory (in my XP machine it is "C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\ant\lib") and paste in the "libs" folder of your project.

Good to go, now we will continue with ANT specific configurations which will make your project builds automatic.


Create build script (xml):

1. By default ANT looks for build.xml file as a build script. However you can define any xml file as a build script file in the command line while executing ANT commands.
2. For an example, take a look at the XML Syndication build.xml and build.properties files.
3. The first element is project which is the starting point of ant execution. Its name can be any value (generally you would like to put your project name there). basedir reflects the base directory of the project. default attribute contains a target name (I have covered targets later in this post) which will run by default OR as the first executable.
• property defines a file which contains all static constants / properties to use during execution. For our case, these properties are defined in build.properties file.
• element defines the path of flexTasks.jar file. ( ). In order to get rid of this element, simply copy-paste the flexTasks.jar file from Flex installation directory to ANT's lib folder.
• Now comes the targets. It is nothing but a task block which will be run by ant during run time. Target name is actually its identifier so that it can be referred to in the script file (build.xml) using its name. Targets / tasks can be dependent on other tasks / targets to get completed. This is handled using depends attribute.
• Now you can run your custom tasks to run under element. e.g. In AS3SyndicaitonLib project's target named "properties" checks for property values set in build.properties. Target named "lib" fires Flex compile command (compc.exe) giving various parameters needed (-o, -el, sp, -is).

Running build script:

1. Open command prompt and write this command to run build.xml as ant script:
• $ ant -buildfile "/build.xml"
2. If you don't have flexTasks.jar in your project's libs folder, update the above command to:
• $ ant -lib ${basedir}/libs/flexTasks.jar -buildfile "/build.xml"

That's it. Enjoy :)


For more, read Adobe Flex Help, Adobe Developer Connection, Adobe Cookbooks, Gunua's blog.

Youtube Player

Simple Youtube Player
(Currently this is very simple. I am in process of enhancing it to make use of Youtube API in full.)

Autosize and Width sequence of TextField

Have you ever encountered a problem where you are entering text in a TextField however it is not showing up?
Happend to me today for this code:
var txt:TextField = new TextField();
txt.text = "This is my sample text. check this out.";
txt.width = 500;
txt.height = 24;
txt.autoSize = "left";


Do you catch what is the problem?
Let me tell you, it is nothing but a silly mistake. I am setting "width" before "autoSize" and that is what creating problem. So what actually happens when you use the same order is that ActionScript invalidate the width of a TextField after setting autoSize and make the width to 1-3 pixels only.
This problem can easily be solved like this:

var txt:TextField = new TextField();
txt.text = "This is my sample text. check this out.";
txt.autoSize = "left";
txt.width = 500;
txt.height = 24;

Tour de Flex

Suppress runtime error messages for debug player

Open mm.cfg (XP => C:\Documents and Settings\\  ,  Vista => C:\Users\\) and add this line at the end (if it is not already present):

SuppressDebuggerExceptionDialogs=1

If the key (SuppressDebuggerExceptionDialogs) already present, ensure its value is '1'.

GTweenFilter error: no filter at index '0'

Error: GTweenFilter: no filter at index '0'.
at com.gskinner.motion::GTweenFilter/updatePropertyTarget()[com\gskinner\motion\GTweenFilter.as:73]
at com.gskinner.motion::GTweenFilter/init()[com\gskinner\motion\GTweenFilter.as:88]
at com.gskinner.motion::GTween/setPosition()[com\gskinner\motion\GTween.as:737]
at com.gskinner.motion::GTween/handleTick()[com\gskinner\motion\GTween.as:826]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at HybridTicker/tick()[com\gskinner\motion\GTween.as:906]

This is the error you will see when you use GTweenFilter to do a blur, drop shadow or any other special property tweening.
I used the following code:

var blurTween:GTweenFilter = new GTweenFilter(obj, 0.6, {blurX:0,blurY:0}, {delay:1.0});


I was also getting the same error. I tried to give a filter index in the tween, but no help:

var blurTween:GTweenFilter = new GTweenFilter(obj, 0.6, {blurX:0,blurY:0}, {delay:1.0, filterIndex:0});
 
Then I came to know that I should first add respective filters to the target object and then use its tweening.
Thus I changed my code to make it:

obj.filters = [new BlurFilter( 0, 0, BitmapFilterQuality.MEDIUM )];
var blurTween:GTweenFilter = new GTweenFilter(obj, 0.6, {blurX:0,blurY:0}, {delay:d, filterIndex:0});

It is working now.

Namespaces in AS3

AS3 gives you advantages of defining user defined namespaces. AS2 already started namespaces with public and private however these were system defined. AS3 gives you flexibility to define user-defined namespaces. Those, who are familiar with OO languages like C++, Java and markup languages like XML must be familiar with user-defined namespaces.
Thus now there are two types of namespaces in AS3:

1. Predefined namespaces: public, private, protected, internal, static
2. User-defined namespaces

The flow of using user-defined namespaces could be:

• Define a namespace:
• Assign the namespace to a method/property.
• Call the method/property using its namespace.

Note: Namespaces are declared using 'namespace' Keyword.


package
{
 // define the namespace like this:

 public namespace my_public;


 //or like this:
 public my_public namespace;
 public class MyClass
 {
  // assign the namespace to a method
  my_public function myFunc()
  {
   //do something here.
  }

  // call the method using its namespace either this way:
  use namespace my_public;
  myFunc();

  // or this way:
  my_public::myFunc();
 }
}


Modern Video Player (v 0.8)

                                  Class Diagram
This is currently a basic video player, however I am gonna make it more fantastic and more useful.
Please contact me or post a comment for any suggestion/bug.

This version contains:

1. Play-Pause
2. Stop
3. Mute-Full volume
4. Progress bar flag moves as video plays
5. Load bar behind progress bar
6. Pause button in center of video
7. Progress scrubber
8. Video time text
9. Complete revamp of architecture (I will post the architecture in some time). It is kind of a smart mix of MVP,  MVC, Command, Observer and Singleton.
10. Better buffering
    
11. Full screen
    
12. Skinable
    
13. Some Bugs removal
    

Next Versions will contain:

1. Softer Full screen
   
2. Custom context menu
3. Volume scrubber
4. Clickable Progress bar to scrub
   
5. Much better buffering
6. Scalable to required width-height
7. Completely Skinable
8. Playlist with Previous-Next
   
9. Audio-video dual mode
10. Error-Response to user
11. 3D view
12. HD version
13. Replay
14. Tracking
15. Bugs removal
16. Tooltip for buttons
17. 16x9 ratio video display

Flash Player 10

Flash Player 10 is making 3D graphics & animations a Developers' cup of tea :)

This version of Flash Player is targeting High end 3D animations, Dynamic Streaming, New Text Engine, and pretty cool new Pixel Bender effect.

Some very short descriptions:

New Text Capabilities:

1. A Device font can be anti-aliased, styled and work with it like you work with an embedded font.
2. Right to left support
3. Vertical Layout.
4. Support for Columnization.

New 3D Capabilities:

1. Z-direction access (obj.x, obj.y, obj.z).
2. Z-Direction rotation (obj.rotationX, obj.rotation.Y, obj.rotationZ)

New Drawing API capabilities:

1. Ease of creating 3D polygons (instead of writing lineTo(); lineTo(); lineTo(); lineTo(); lineTo(); ... and so on)
2. Access to low level GPU to make use of hardware graphics rendering capabilities. (though they are not targeting to overtake PV3D, etc.)

And most excitingly, you can now load & create local files.

... And there are lot more stuffs.

You must view all of these demos

Excitingly enough, Flash Player 10 beta version is out and also it is supported by a command line compiler. You can download these both from adobe's site and start playing with 3D.

Download Flash Player 10 beta from here.

Download its command line compiler from here.

Learn how to create applications for Flash player 10 from here, here and here.

Play videos online using Flash

With the launch of Flash Media Server 2.0, Adobe (Macromedia) has proceeded too far (i guess the farthest) in online video solutions that nowadays most of the online video websites uses Flash Media Server as their first option. Be it YouTube, zapak, or any other website. It's fastly becoming technology solution for industry needs of online video.

Lets have a look at how we can provide an online solution to video playing using Flash Media Server 2.0.

Softwares Needed:

1. Flash Media Server
2. Flash Player Plugin
3. Video to FLV converter

Check out Guruji - the Indian Search Engine.

    I'm a little confused. What exactly is Indian in those results? They might have been better off creating a language specific search engine - for sites only in Hindi or Tamil. Something like Baidu. Indian is too vague a concept. Youtube, Wikipedia, and Orkut are very popular with Indian surfers and do have a lot of Indian content. Why then, weren't they indexed?
    This is the real clincher - Check what you get when you search for guruji.
    Bottomline : Site does have potential, but many issues need to be urgently ironed out.

Installing Red5 on SUSE Linux

The following are steps used to get Red5 running on SUSE Linux 10.0.

You would need the following files:

1. JDK 1.5
2. Apache Ant
3. Red5

Before beginning this make sure you are running these commands as root.

1. Make sure you have downloaded and installed the jdk 1.5 from java.sun.com
   • For this tutorial just download the .bin file. Change the permissions of the bin file
     

     chmod 755 jdk-1_5_0

     and then execute it.

     ./jdk-1_5_0

     Once it’s done you just copy the contents of the folder it made and put them in /usr/java/jdk1.5.0

   • Then set your JAVA_HOME variable. It may have to be set two different ways. First way:

     JAVA_HOME=/usr/java/jdk1.5.0

     and the second way.

     export JAVA_HOME=’/usr/java/jdk1.5.0′

2. Install apache-ant. Install the binary for it.
   • Download and unzip the file. Then copy the contents to a directory, something like /usr/ant. Then set your ANT_HOME variable. If it doesn’t work then don’t worry about it. We will not be using that pointer in this tutorial.
3. Once java and ant are all set up you simply pull the latest trunk for red5 to your box.

   • svn co http://svn1.cvsdude.com/osflash/red5/java/server/trunk red5-trunk

     That will create a folder in your current directory called red5-trunk. Then you will want to copy the contents of that folder to /opt/red5 like so

     cp -R red5-trunk /opt/red5

4. Navigate to the /opt/red5 directory and run

   /usr/ant/bin/ant

   That will build the project on your machine.

5. Finally run the red5.sh file. You can do this by either running

   sh red5.sh &

   or

   ./red5.sh &

   This will start the red5 service.

6. Run

   netstat -ant

   and verify the correct ports are being bound to. You may need to edit the red5.properties file in the /opt/red5/conf directory if you can’t connect to your server from an external location. Try to connect to the server before you modify the properties file because you may be able to connect to it with no problems.

Installing Tomcat 5.5 + OpenLaszlo + Red5 Flash Server on Windows XP

• Tomcat is a free, open source implementation of Java Servlet and JavaServer Pages (jsp) technologies.
• OpenLaszlo is a free, open source platform for creating zero-install web applications with the user interface capabilities of desktop client software. In fact, it’s a free Adobe® Flex Server.
• Red5 is a free, open source Flash server that supports streaming and recording audio/video, live stream publishing and Flash remoting. Its commercial brother is Adobe® Flash Media Server.

Prerequisites:

Download the following files:

1. JDK 5.0 Update ‘xx’ (Java SE Development Kit (JDK)) from http://java.sun.com/javase/downloads
2. Tomcat 5.5 from http://tomcat.apache.org:
• Core (windows service installer)
• Administration Web Application
3. Openlaszlo dev kit (war file) from www.openlaszlo.org
4. Red5 war file from www.osflash.org/red5

On my system, I ended up with the following files:

1. jdk-1_5_0_09-windows-i586-p.exe
2. apache-tomcat-5.5.20.exe
3. apache-tomcat-5.5.20-admin.zip
4. openlaszlo-3.3.3.war
5. red5-0.6rc1.war

Installing JDK + Tomcat 5.5:

• Perform a standard installation of JDK (next, next… finish)
• Install Apache Tomcat (use the default server port 8080 and remember your admin login credentials)
  

Test the installation in your browser: http://localhost:8080
The last thing we’ve to do is installing the Admin Web Application for easy Tomcat administration.

• Stop the Tomcat Service (from taskbar)
• Open “apache-tomcat-5.5.20-admin.zip” and drop the folders “conf” and “server” into “C:\Program Files\Apache Software Foundation\Tomcat 5.5\”. (Windows warns you about already existing folders, but that’s OK. Simply ignore this)
• Start the Tomcat Service again
• Test the installation again in your browser (http://localhost:8080) by clicking on “Tomcat Manager”. Please enter your login credentials you’ve thought earlier.
  

Installing OpenLaszlo:

We’re going to install OpenLaszlo from within the Admin Web Application.

• Login (again) into the Admin Web Application and click on “Tomcat Manager”.
• Locate “WAR file to deploy” and use the buttons “Browse…” and “Deploy” to install “openlaszlo-3.3.3.war”.
• Test your OpenLaszlo installation by accessing the following URL: http://localhost:8080/openlaszlo-3.3.3/

All right!
Note: if you’re planning to use OpenLaszlo in a live environment use the servlet (openlaszlo-3.3.3-servlet.war) instead of the dev kit. The dev kit contains extras like examples and documentation.

Installing Red5:

Next, we’re going to install Red5 in the same way.

• Rename “red5-0.6rc1.war” into “red5.war” to get a nice deployment URL (context path) and deploy it.
• Test your Red5 installation by accessing the following URL: http://localhost:8080/red5
• Also try this “real” demo: http://localhost:8080/red5/flvdemo.html

Done!

Streaming (online players)

Nowadays the most talked thing in media and entertainment industry is Streaming. Its very simple idea but very very useful as a user point of view. The basic idea is to send small packets of data (video, audio, data) in a contiguous manner at the client end. I myself is working on a streaming project and believe me, its exciting. The only problem is that it needs a dedicated streaming server, which is very costly in current date. There are several vendors who provide streaming services, e.g. Microsoft's Window Media player, Apple's QuickTime Player, Macromedia's Flash Player, etc.
But the most powerful and most widely used is Flash Player. Its because it is already available in more than98% PCs of the world and also it just needs a plugin in browser window to enable it playing. The quality and the smoothness of video is also very good as compared to others. It needs Macromedia Media Server (previously Communication Server) as a streaming server.

Just go to any news channel's site, they are currently using Flash to fulfill their needs of displaying video online. Be it BBC, NBC, Indiatimes, CNBC .. everybody is keen in getting a Flash Player for their website.