poll by twiigs.com

poll by twiigs.com

Flash on the beach........

Marina, the second longest beach in the world could be an ideal place for us developers to have an informal meet to discuss on flash actionscript 2 & 3.

This is not restricted to any one, whoever works in flash can come and attend this meet.

But i wish to know how many of them would be really interested to attend this. For this i request you to poll on this blog.

Regards,

Ashok Srinivasan.

Streams not being Saved or saved with zero file size.

I am currently playing around with Flash Media Server based applications using RED 5(Amazing tool I would say.) and encountered a very very strange Bug. When I tried to record voice over the web using my application url I found that a FLV file is being created but it does not appear to have a valid file size. I have been struggling over this from changing my code from AS3 - AS2 and vice versa but with no luck. But one thing that constantly came to my notice during this struggle was that in other applications (that came along with red 5 server as demo files ) whenever I tried to record my voice I was able to see a setting window invoked by the flash player asking for user's confirmation to allow data to be recorded. And in my application whenever i clicked record this setting window never showed. Maybe it was my bad luck that stopped me from thinking or analyzing in this line of thought i was busy thinking about other problems which resulted in failure to make my application work correctly until today morning when tried the red 5 applications native demo swf file to record my voice using my app's url. Amazingly my voice was starting to be recorded and i could see the flv's file size constantly increasing with voice data being stored.

I did not know why or how it occured to me but i once again opened my own application fla file and changed its stage size to 250 x 250 then published it to test.

Guess what happened ??? when i connected to the RED 5 server and clicked the record button i was able to see the flash setting window being opened asking for the request to allow my url to record data. And happily saw the size of flv file increasing being saved in my streams folder.

Concluding i guess it was the stage size that was giving problem all this time. My guess is that if the stage size needs to be big enough to accommodate the flash player setting box to be shown (in my case i found it to work perfectly with 250 x 250 px).

Regards,

Ashok Srinivasan.

Organizing your ActionScript code.

Well when it comes to actionscript projects, one stops to think and wonder how do I start ? Wow that's a very elementary question but also it is very important and fundamental.

One approach is to open flash IDE and start writing the code like hell and pride yourself with the speed with which you complete, and end up being the most most happiest person in this whole world. Days pass by and one day something new to be added turns up for the happiest project you did once before only to make you feel annoyed and irritated at the end of the day. Remember writing code would be like getting married to a girl due to infatuation where you enjoy the initial phase but regret later. Whereas on the contrary if things had been organized and are in the right places with proper framework will result in something that can be better maintained and a good rapport will always exist between you and your code(wife). Forget about maintaining it yourself but anyone who takes it later will load you with lot's of blessings (in real life scenario this does not apply to my example).

Have you decided about your attitude towards writing code ? If yes please proceed further, else you always have time to take a decision and make a choice out of yourself.

Whatever I am going to explain hereafter will strongly pertain to AS3 and still will be applicable to AS2 also. I will not be explaining about frameworks or design patterns for I myself lack a lot in that area and lot to be learned is still pending. Instead what you will see in this tutorial is some of the techniques I have been following till now in my ActionScript career.

 

 

The folder Architecture :::::::::::::::::::

Before you start with a project ensure to maintain proper folder architecture. A good developer will always do this. Ensure that you have the following folders for sure in your project folder.

 

com - Folder consisting of your class files.

src - Folder containing your source FLA file(s).

bin - Contains the output file (subfolder's Release || Debug).

assets - Contains the graphic assets required for designing your flash project.

includes (If as2 ) - Folder containing the necessary include files (Generally there is only main.as).

 

Folder "com" explained

Usually this folder contains a folder named "yourcompany" which in turn will contain subfolder named "yourprojectname" and subfolders with the following names.

 

main - The main controlling class file Main.as is present here.

display - Class files used for linking to display objects or referenced via linkage id are created here.

components - Class files used for your custom components are created here. (example : CustomScrollbar.as etc., )

utils - Class files that are written to do some utility operations (example : MyMath.as, Logging.as etc.,)

 

With this you will now be able to sort out and will be able to design your application framework in an even better way.

 

Some example classes are written below for your better understanding.

 

Display class example :

 

package com.yourcompany.yourprojectname.display

{

public class YourClassName extends MovieClip
{
    public function YourClassName ()
    {

    }
}

}

Component class example :

package com.yourcompany.yourprojectname.component

{

public class YourComponentName extends MovieClip
{
    public function YourComponentName()
    {

    }
}

}

Main class example :

This differs a little bit based on the version you are currently targeting. The immediate below one is an example of AS3 and the next is for AS2 

 

AS3:::::::::::::::

package com.yourcompany.yourprojectname.main

{

public class Main extends MovieClip

{
    public function Main()
    {

    }
}

}

 

AS2:::::::::::::::

class Main

{

    private var mainmovie:MovieClip;

  
    public function Main(targetScope:MovieClip)
    {

         mainMovie = targetScope;

    }

}

 

Utils class example :

package com.yourcompany.yourprojectname.utils

{

public class YourUtilClassName

{
    public function YourUtilClassName()
    {

    }
}

}

Fine I accept the way you have presented and will attempt to try this. But tell me how do I proceed after this ?

That was a good question you asked now, get back to the folder architecture mentioned above for a flash project. Supposing you are using AS3 then you just need to set the Main.as as the document's class with the path com.yourcompany.yourprojectname.main.Main.as. Once again if you are using AS2 then comes the role of the "includes" folder where you write a small main.as and place it in this folder. The content of the main.as file would be something like as shown below.

 

import com.yourcompany.yourprojectname.main.Main;

var main:Main = new Main(this);

Save this file and include it in the first frame of the main main using :

#include "includes/main.as"

 

Now try compiling the file and lo the compile has failed ! But why ? I don't want to realize now that after all this amount of reading this has resulted in an error. Please don't tell me that.

 

Patience my friend I did not want you to anticipate errors and the reason for this is just wanted you to wonder and know the concept of Document Class Path setting. If you remember correctly we have put the fla inside a folder named "src" and the files are above one level from the path of the flash source file. So when the movie is compiled it starts to look for the class files and the included file and hence it panics for it expects to find the folder "includes" and "com" inside "src" itself. To clarify all about this we will now look at Publish Settings.

 

Publish Settings ::::::::::::::::::::::

 

Document Class Path :

Since we wanted to maintain the architecture of the folder intact we have kept the files in their respective directories. So in order to compile the class files along with the included "as" files we will add an new path using the PLUS button and enter ".." to Document Class Path in the Publish Settings for swf. Screenshot available for more clarification.

 

 

Publish Location Setting. Since the outputs generally go to the bin folder decide if the version is a release version or the debugger version and point them to the respective folders (release/debug) inside bin folder.

 

That's all is needed to be known for a effective project maintenance and the rest lies upon your rational and creative intelligence. See you all in a short time and till then bye.

 

Regards,

Ashok Srinivasan.

AS3 Migration - XML PARSING.

Something is better than nothing. This is a thought that runs into the mind of a Flash Developer working on a project that requires a lot of XML based data handling. But now that is not the case anymore, with the new AS 3.0 comes a powerful XML parser that implements E4X standards. With this standard being implemented in AS 3.0 now we don't have to go through the pain of parsing a known XML format anymore. What I mean is  no more heavy loops and inner loops to access a childnode at a deeper levels. But still do not worry for the legacy XML AS 2.0 classes have been moved to flash.xml package and retained. So if you still want to use the old style XML class still you can have it from this package. My sincere recommendation would be to get used to the new one and discard the old fashion of parsing the XML.

When I said E4X has been implemented what do I exactly mean by that ? In ActionScripting 2.0 while dealing with XML we had to refer to children nodes and their nodes values using index positions (numbers) and never had a way to find an element in a document by using the name value. Meaning we were not able to search XML documents using name values but had to use integers as the index position for locating XML nodes. This resulted in cumbersome loops and logics to access a particular childnode that was lying deep into the rabbit hole.

 

For example consider the below family tree represented in XML.

<GrandFather>
    <children>
       <Ram>
          <children>
              <Andrew/>
              <John/>
              <Josephine age=21 isSingle ="single" sex="girl" beautiful="true"/>
           </children>
      </Ram>
      <Rahim>
         <children>
             <David/>
             <Celine/>
             <Paul/>
             <Mary age=24 isSingle = "married" sex="girl" beautiful="true"/>
         </children>
     </Rahim>
  </children>

</GrandFather>;

 

So the XML is all about some Grandfather's family. The children node clearly shows the number of sons he had under the node name children. Now further penetrating into his children nodes we understand more of his children's family and about their offspring's. Ok now let's say I am interested about the family of his first son "Ram". And to enquire about Ram's family details present in the XML using AS 2.0 would be done as shown below.

 

AS 2.0 ::::::::::::

var xml:XML = new XML('<GrandFather>

                             <children>

                                 <Ram>

                                    <children>

                                         <Andrew/>

                                         <John/>

                                         <Josephine age=21 isSingle = "single" sex="girl" beautiful="true"/>

                                   </children>

                                 </Ram>

                                 <Rahim>

                                    <children>

                                       <David/>

                                       <Celine/>

                                       <Paul/>

                                       <Mary age=21 isSingle = "married" sex="girl" beautiful="true"/>

                                   </children>

                                 </Rahim>

                             </children>

                         </GrandFather>');

xml.ignoreWhite = true;

trace(xml.firstChild.firstChild.firstChild.firstChild.childNodes);

 

So in order to know about Ram's family we have to start from his grandpa as a reference and go all the way using the firstChild property (or childNodes[0]) for four levels and finally ask for the childNodes property to know about Ram's Children.

Now seeing that Ram's third child is a girl whose name is Josephine (nice name isn't it ?) with age being 21 and also beautiful property being true, I would like to know if she is single and hence see if I can marry her(her attribute claims that she is beautiful). Let's see how I can message her in AS 2.0 for marrying her if her status is single, for I don't want to be beaten by her husband incase she is married already.

 

var josephine:XMLNode = xml.firstChild.firstChild.firstChild.firstChild.childNodes[2];

if(josephine.attributes.isSingle == 'single')
{
    trace('Josephine will you marry me ?');
}
else
{
    trace('Convey my regards to your husband');
}

 

Without bothering about my what happened to my proposal let's get back to the tutorial and see how the above process can be done in AS 3.0.

 

AS 3.0 :::::::::::: 

var family:XML = <GrandFather>
                    <children>
                        <Ram>
                            <children>
                                <Andrew/>
                                <John/>
                                <Josephine age="21" isSingle="single" sex="girl" beautiful="true" />

                             </children>
                        </Ram>
                        <Rahim>
                            <children>
                                <David/>
                                <Celine/>
                                <Paul/>
                                <Mary/>
                            </children>
                        </Rahim>
                    </children>
                </GrandFather>;

 

trace(family.descendants('children')[1].children());

var josephine:XMLList = family.descendants('Josephine');

if(josephine.attribute('isSingle') == 'single')
{
    trace('Josephine will you marry me ?');
}
else
{
    trace('Convey my regards to your husband');
}

 

Don't you think this is much easier than the previous one? The concept reference by name is actually good. Still one can access the childnodes using index positions too but the thing is it is more easy to traverse through a XML using String based search words rather than indexes. 

Did you see the vast leap in XML processing ? I would personally say that is really a great thing Adobe has introduced into AS 3.0. For I see no more nightmares with monster loops having big i,j,k..... claws to fight through a XML and its childNodes.

Hope the above tutorial on XML was useful. More is yet to come.

 

Regards,

Ashok Srinivasan.

AS 3 Migration ..... Part 2

As each day is progressing with AS-3, my life has become really interesting nowadays. Today we will be seeing the next step's we will be taking in learning more about AS-3 migration. To do that we will start with a small hello world application. By this way we will learn almost all  of the basic aspects of Flash/AS 3.0 and by the way to do this exercise you need to have Flash CS3 installed in your machine.

Before starting with the new HelloWorld application, we have a small home work to be done initially. Create a new folder in a location and with name of your convenience and inside the folder you created just now, create a new folder named "Hello World". Once that is done then navigate inside the created folder and create a subfolder named "com". Inside "com" create another subfolder named "learn". Don't get angry with me but for the one final time create two folders named "as3" and "Main" as subfolder's inside the last created folder "learn".

Now if look at  your current screen it should look like the one below(except for the three red circles which was made by me using mspaint to show the path and the two subfolders created for reference).

 

Thats it for now and run the Flash IDE, after it has initialized completely do select "File" -> "New". From the options select "Flash File(ActionScript 3.0)" and click "OK". The screenshot is attached below for your reference.

 

After creating the Actionscript 3.0  type File click on the stage and create two objects as follows

1) Dynamic TextField  - instance name "$dyn".

2) Simple Button - instance name "$btn" .

 

Now click an stage area and open the properties panel(shortcut ctrl+f3). Now the property panel is open type com.learn.Main.Main in the Document Class field. See screenshot below.

 

 

 

Do not try to compile for we have to add the class files now. Still you wish to know what could have changed in the error messages go ahead and try it.

After all the above steps are completed hit Ctrl+N or create a new ActionScript File from the New Document window just like the way you created a new flash file sometime before but select ActionScript File (which would be probably the sixth item). Upon successfully opening an empty ActionScript file copy and paste the code below. see screenshots first.

 

 

package com.learn.Main
{
    import flash.display.MovieClip;
    import flash.text.TextField;
    import flash.events.MouseEvent;
    import flash.display.SimpleButton;
    import com.learn.as3.HelloWorld;
    public class Main extends MovieClip
    {
        private var hWorld:HelloWorld;
        public function Main()
        {
            init();
        }
        private function init():void
        {
            trace('I N I T');
            hWorld = new HelloWorld();
            $dyn.text = hWorld.sayHello();
            $btn.addEventListener(MouseEvent.CLICK,releaseAction);
        }
        private function releaseAction(e:MouseEvent):void
        {
            trace('onRelease : '+e.target.name);
        }

   }
}

Finished pasting the above code ???? Now save it in the name "Main" under the folder com->learn->Main->Main.as. What we have done now is an ActionScript class has been associated with the FlashDocument itself. have you ever remembered this being possible in the previous versions ? what we have been doing earlier was that we wrote an class file and associated the main timeline as an parameter to AS2.0 class file. But now the Flash File itself can be associated with an Custom Class File. isn't this great ?

We are almost 70% done for the tutorial to be completed. The one final thing you have to do is create another ActionScript Class just like the way you created Main.as and paste the below code in that. Save the file under the folder com->learn->as3 with the name HelloWorld.as.

 

package com.learn.as3
{
    public class HelloWorld
    {
        public function HelloWorld()
        {
        }
        public function sayHello():String
        {
            return "Hello World";
        }
    }
}

Done pasting the second code? Now get back to the fla file and save it under the folder Hello World with the file named as "HelloWorld.fla". Now there should be a flash source file "HelloWorld.fla"(you will see file name extension ".fla" only if you have enabled show extensions setting in windows) and a folder (which we created initially) named "com" inside the folder HelloWorld. To avoid confusion and for having a clarity see screenshot below.

Now that everything is in place and the only step remaining is to compile the flash file we have created. Doing this will generate the swf file named "HelloWorld.swf " without any errors if you had copied and pasted the code and saved them with the appropriate names and at correct location specified above. The output of the swf  is attached as a screenshot below.

But still if you wish to know what happens when the button is clicked you need to either run it from the Flash IDE or have some good logger tools like afterthought or Flash Tracer plugin for firefox.

Thats it for now and we will in less time see what the chunk of code written for this tutorial does.

 

Regards,

Ashok Srinivasan.

AS3 Migration......

 

Hi folks,
it's been a long time once again. Latest news at my end is that i have started working on AS3 and i need to say at this point that it really great and cool. With the new AVM2 (adobe virtual machine version 2) powering players above 9 one can really create wonders double/triple the times over the previous versions.
Initially i was a bit skeptical about getting into AS3 for my current projects i am working on are so Himalayan such that it would take a lot of time and energy to really convert it to support flash player9. Moreover i felt it was a great paradigm shift for someone like me for AS3 migration. Guru's out there have really started rocking with AS3, while a lot of children like me sitting here keep wondering about what's the deal in the new version of flash. I was also feeling that i am not doing my homework on learning AS3 for my current projects did not spare me the time for that but luckily and also daringly i thought of starting my new project based on AS3. Though it was a great risk but still was ready to face it.
Below i have mentioned a few areas where great changes have happened.

The new Class style :::::

Whenever we wanted to have more than one class file to share the same name serving different purpose but could not have it. In As3 they have introduced the concept of package naming culture as used in JAVA(but can you tell me what in Actionscript is not like JAVA?). This serves as a way to differentiate two classes sharing the same name but serving different purposes. Look below for an example.

An example of a AS3 class file

package com.mycompany.myprojectname.purposename;
{
     import requiredclasses.*;
     public class MyClass
    {
            public function MyClass()
            {
            }

            public function doSomething():void

            {

            }
    }

}

 

 

And now after the class is being written we can as usual import the package in the timeline and instantiate the variable the usual way as we do in AS2.0

Example ::::::

import com.mycompany.myprojectname.purposename.MyClass;

var mclass:MyClass =  new MyClass();

mclass.doSomething();

   

And now as we have now seen how the classes have changed to a class way we will now look at what has happened to our onPress, onRelease, onReleaseOutside etc.,

 

Handling Events ::::::

Before dwelling deep into the details we will now look at how we assigned mouse events to movieclips and buttons the AS-2.0 way.

 

       Example AS-2.0 ::::

       var mc:MovieClip = this.createEmptyMovieClip("mc",0);

       mc.onPress = function()

       {

        trace("Hey i think a jerk pressed me");

        //output shows this message when pressed

       }

 

 Example AS-3.0 ::::::

First create a rectangle and convert it to movieclip with the library name MyMc. Below are the screenshot's for your reference.

 

 

import flash.display.MovieClip;

import flash.events.MouseEvent;

var mc:MyMc = new MyMc();

function myMcClick(e:MouseEvent):void

{

   trace("Hey some jerk pressed me");

}

this.addChild(mc);

mc.addEventListener(MouseEvent.CLICK,myMcclick);

 

So this is the way we add actions to the new version of Flash.

 

Depth Management ::::::

Yeah this is the part i loved the most with AS-3.0. From the above example's code for AS-2.0 and 3.0 you would have noticed that there are some differences in the way we work with adding and assigning actions to MovieClips. The thing is that in the new version we have been spared the job of assigning the depth. You just need to use the keyword "addChild" which is a method in any MovieClip to add a childMovieClip.

Example ::::

//to create an MovieClip from the library.

var myMc:MyMc = new MyMc();

this.addChild(myMc); 

 

So how do we remove a MovieClip we added to the stage ????

Example :::::

//to create an EmptyMovieClip from the library.

var myMc:MyMc = new MyMc();

myMc.name = ''foo';

this.addChild(myMc); 

//To remove this movieclip you have created.

this.removeChildAt(0);//where the number is the index.

//or

this.removeChild(this.getChildByName('foo'));

//or

this.removeChild(myMc);

  

Many more promising new things have come in the new version and i am at all loss of words to express it completely now. Better keep visiting my blog for there will be more updates,posts and learning's with what's new in AS-3.0.

Children will be Children, Flash will be Flash

Well the title itself suggests when things prove to be problematic while dealing it the natural way then we need to do some workarounds always. But at the end we find a solution. And here i present a problem that i faced while working one of the vital child of Flash and mine called as the TEXTBOX.

Assuming myself to be a dad in flash programming (not yet a dad in real life b'coz i am not a husband yet. I am still an Eligible bachelor you see...) i had to deal with this TextBox child of mine. Let me tell you his problems, he can either stuff his fonts with him by embedding or either stay using Device Fonts before going out to the world from his development home. But the former way suggests that his bag becomes heavy with each different type of font he will be supporting. Consider supporting Ten generic fonts that will be available in all the operating systems, then the process is to add 4 types of fonts in the library with normal,bold,italic, and bolditalic options seperately.

Elobrating on the process consider embedding Arial font which would result in four font items in the library with following linkage ids :

Arial - normal support with bold and italic option disabled.
ArialBold - Font with only Bold option.
ArialItalic - Font with only Italic support.
ArialBoldItalic - Font with Bold and Italic support.

And the max size for all the above embedded fonts items would be 72.

Now coming to the original count that we needed to support was 10 and hence the total number of embedded fonts we need would be (10 x 4 = 40). Can you imagine the size of your swf ? ok, here still i have the option of using RunTime shared font. After all this is done we can now rotate,scale the textboxes in our application.

Think once again is there a better solution to this ? Now being in the world where Flash7 is close to becoming history and flash 9 prevailing on all the browsers widely we now have options of rendering text in a better way.

One more time i am going to present you all a way to exploit the Bitmap Class for serving this purpose. Coming to the original requirement i just removed all the embedded fonts from the library and selected the Device Fonts as the text rendering method. But here comes the problem that i will not be to rotate and scale the textboxes in my application. Also using Device fonts ensures me no heavy stuffs to be stuffed to my TextBox child. He can be light and compact, the only time when i would face problem would be when rotating my child.

Hmmmm...... what are we going to do now ? Better would be to draw a bitmap object using the textbox, attach it to a movieclip and rotate that instead of transforming the textbox directly. So only while editing the text we need to show the textbox and once the editing is completed we display bitmap that is drawn to the updated version of the textbox with the transformation applied already.

Hope you understood how i dealt with my son and might also help you in a similar scenario.