Flash Site Optimization


One very important thing that a lot of web developers forget is making a site that is optimized. What I mean with optimized here is for the site to only do things and load things that is necessary for the it to perform properly.

 

It is understandable since computer and internet connection are getting faster and faster, that developers sometimes forget about those still using a 56K dial up connection. I myself don’t normally invest too much time into optimizing the sites I develop until I started working at my current company where they pay attention to every pixels, download time and always pushing and changing stuff to get the end result better and better. I guess that is what separate a good site and a great one. It is a lot of hassle, but I believe these small and yet actually important details are the things that can help get your skill and knowledge to the next level. Am I glad to be around all these talented people or not?

 

Back to the topic. There are 2 ways to tune up your site. First is through the client side elements, and Second is through the server side.

1. Client Side

-Refactoring. - This one is obvious. The lesser the lines of codes that you write, the smaller the file size is going to be. Sometimes it is good to refactor your code to improve perfomance, since the second time round you look at the code you can actually take out a good chuck of unnecessary code excecution.
-Assets optimization. - Cutting down the file size of the image assets used in Flash. For example often times using an image with quality 90% and 60% is almost the same visually. So why use 90% if 60% looks alright.
-Omit trace actions. - For the final release it is good to omit trace actions. First it prevents people from seeing the swearing you use in your trace statement. Secondly, it can also cut down your file size quite a lot depending on how much you put traces in the codes.
-Asset / Font sharing - This one is a good one. Most Flash sites now use multiple files that is loaded by the master.swf file. So instead of embedding fonts and exporting assets in every single external component, sharing those might cut down size tremendously. Check out Informit if you need to find out how to do this.
-Class Exclude. - This one is also a good one. Basically what this means is that instead of having to export every classes in every external clips, you might be able to share some of those classes that are used across the clips. Check out www.martijndevisser.com if you need to find out how to do this.

 

2. Server Side

-Caching. - Turning this on means that components that has been loaded once does not have to be loaded again and again.

In Apache webserver this is how to turn this thing on

First you have to turn on this module LoadModule expires_module modules/mod_expires.so

Second add this codes
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType application/x-shockwave-flash “access plus 1 months”
ExpiresDefault “access plus 1 days”
</IfModule>

 

The above tips should be able to save quite a bit of loading time. I am sure there are more ways to even improve perfomance further. So feel free to drop a line to share it.

 

Add comment

Actionscript 3 - Sound Spectrum


One of the cool features in AS3 is the ability to take snapshots of the sound wave as your sound is playing, allowing you to do crazy animations that match your sound.

 

So I decided to make a little experiment using it. Click on the preview below to see how it works (it will take you to a new page).

 

Frog Sound Spectrum Snapshot

 

By the way, it was meant to be a frog, eventhough it looks nothing like a frog. ;p

 

The title of the song used is “Teluk Bayur”, which means “Bayur Bay” by an Indonesian singer “Rani” (Note: Rani is not the original singer of the song. I hope I won’t get sued for putting it up. After all it is kind of a promotion. ;p). The song tells a story about someone leaving his/her hometown to learn and acquire new knowledge for a better tomorrow, just like me. So I guess it is a dedication to everyone like me, and a reminder for me not to let my mom and dad down. ;p

 

The coolest looking sound spectrum experiment I have seen is the one done by Andre Michelle, which is also the one that inspires me to write this one.

 

Add comment

Guest Speaker at the University of Miami - School of Communications


Today, I had the privilege of speaking as a guest speaker for an Actionscript course at the University of Miami - School of Communications.

 

The session was not so much into technical stuff. It was more about an overview of the capabilities of Flash/Flash Lite/Flex, what it takes to get into the industry, what life is like working in the industry, and how the process work from concepting/ideas to production and launching.

 

Initially I was kind of concerned that I won’t have enough materials to talk about for 1.5 hours, but I felt that it ended up great. I also pulled up some of the projects that we have done just to show them the kind of work we are doing, and I think that everyone was really liking it, asking lots of questions like how we built it and stuff.

 

I also got a tour of the whole facility and learning new stuff along the way. They showed me how they do radio broadcasting, tv broadcasting and some other stuff, which I have never done before.

 

Like most people do, I ended up the session by giving out business cards, hoping to get some qualified people on board.

 

Overall, I had a great time and the trip was a blast. I am so glad that they invited me over. I would think that it won’t be the last time, but a beginning of more.

 

2 comments

Random Abstract Animation


Random animations have always caught my eyes. They look chaotic and yet very nice to see.

 

Today, my old bookmarks lead me to this amazing works of the experts.

 

So I got inspired to try making one for myself.

 

Here it is:

 


 

Add comment

JSFL Center Calculator


While cleaning my computer today, I happen to find a JSFL script I wrote a while ago, for finding the center position of a symbol with respect to another symbol or anything else you desire.

 

This is my first and last attempt to write a JSFL script. :p

 

I barely use it anymore, but thought that someone might be interested in trying it out or just curious to find out about JSFL.

 

Here is a snapshot of the script in action:

Snapshot of JSFL Center_Calculator

 

In case you are not familiar with JSFL, it is basically an ActionScript like “script” that can be used to add new functionalities to your Flash IDE. So, it has the potential of increasing your productivity by writing a JSFL script for things that you use regularly.

 

Anyway, you can download the script here.

 

To run it, you need to unzip it into the C:\Program Files\Macromedia\Flash 8\en\First Run\Commands directory and restart your Flash. After restarting your Flash, you can see this new command if you click in the Command toolbar at the top of the IDE.

 

I hope someone might find some use with the script.

 

Add comment

Role of Eclipse in Flash development


Eclipse is a superb open source IDE widely used for software development. I was first introduced to Eclipse in 2003 by my college professor, who happens to work for IBM, a major contributor to Eclipse development. It was a shame that I did not use it on a more regular basis until recently. Reason was because I was intimidated by the many functionality buttons all over the IDE. ;p

 

I am more interested in discussing its role in the future of Flash development, however, in case anyone is interested in trying it, first you need to download the following softwares, which are all free:

  • Eclipse (the IDE)
  • ASDT (ActionScript editor plug-in for Eclipse)
  • MTASC (Flash compiler)
  • Flashout (swf viewer plug-in for Eclipse)
  •  

    So how big is Eclipse’s role in future Flash development? I believe that it is going to play a big role in the future.

     

    Reason 1: Completely free

    Eclipse is completely free, and so does all the plug-ins required to do Flash development in it. Besides, not too long ago, Adobe said that there will be a free version of Flex. It was said that this free version only comes with the compiler and the framework. But hey, there is an Eclipse, Flex plug-in, allowing you to do development in an IDE environment, FREE.

     

    Reason 2: Project management

    New features added to Flash with each release has enabled more and more complex projects to be made. To accomplish the increasingly complex projects, more people from the different divisions (database, programming, online, designers) are going to get involved with the development. When that many people are involved in a project, there is the need to do versioning. There is an Eclipse plug-in for Subversion and CVS, allowing development to be done on 1 window instead of having to keep on changing your windows.

     

    Reason 3: New Flash users

    Right now it is not uncommon for designers to do some programming and programmer to a some design, especially in smaller firms, which is acceptable for small projects. However, imagine building an RIA application with that same practice. Not very recommended. That’s why if you take a look at job postings today, there are jobs for Flash Developer and Flash Designer. Where do these developers come from? Mostly Java programmers. Guess what? Most of these Java programmers’ favourite development tool is Eclipse.

     

    I am sure there are some other good reasons of why Eclipse will play a big role in future Flash development, which is not crossing my mind now.

     

    Having said all that, it does not mean that the Flash IDE is bad. It is a very useful tool itself. So a balance (”Yin Yang”) use of the two would be the best.

     

    Add comment

    Utilizing Webservices


    A few weeks ago, I was asked to translate a script that I wrote in ASP a year ago to Perl, which I did, because the client wanted the project to be written in Perl.

     

    Well, can’t blame the client since ASP is kind of outdated anyway.

     

    Later on, I was thinking to myself that it won’t be very fun for me to rewrite the script again everytime a client wants the server script to be in a different language that I don’t yet have.

     

    So I decided to write a Web Service for that particular script. I think that it is a very useful tool and would love to encourage other people to start utilizing it or at least get familiar with it.

     

    Web Service, just like its name implies is a “service”. The major advantage is that different platforms and programming languages can use the “service”.

     

    Since this post is targeted to encourage people to take a look at Web Service, I am only going to give a preview of things that can be done using Web Service.

     

    This Flash movie utilize the Web Service that I wrote here to get the distance between 2 US zipcodes

     


     

    If you have SOAP package for PEAR and some other prerequisite packages like Mail_Mime, Net_URL, HTTP_Request, and Net_DIME installed, you can also use the following PHP script to utilize the Web Service previewed in the Flash movie above.

    
    <?php
    require('SOAP/Client.php');
    
    $soap = new SOAP_WSDL('http://capcai.indorelation.com/webservices/ZipWS.php?wsdl');
    $proxy = $soap->getProxy();
    
    $proxy->setOpt("timeout",0);
    $hasil = $proxy->getDistance("78741", "90010", "mi");
    print_r ($hasil);
    ?>
    

     

    Surprised? It takes only 6 lines of code to access and display the output.

     

    If you are interested in learning more about Web Service, Alessandro Crugnola of sephiroth.it has written a very nice tutorial here.

     

    Add comment

    Recursion in Flash


    Recursion is a programming technique that is used in many important applications such as “sorting”, “parsing”, and “searching” among many others.

     

    Many programmers shy away from using this techniques because the logic behind it can be quite abstract. However, the basic idea of recursion is a function that calls itself in a finite number of times. Finiteness is a very important part to consider when dealing with recursion, since it is very easy to get an infinite loop when doing recursion. Recursive calls utilize the stack, as such the first call to the recursive function will eventually finish last (LIFO).

     

    In this post, I am going to show one of the most widely used recursion example, i.e. drawing a tree branch. However, if you are interested to see how recursion can be used for “sorting” (QuickSort algorithm in this case - one of the faster sorting algorithm), feel free to download it here.

     

    Here is a preview of the final product:

     


     

    To begin, let’s take a look at the complete code first:

     

     var pi:Number = Math.PI;
    
    function drawBranch(start_x:Number, start_y:Number, color:Number, length:Number, angle:Number, thickness:Number, level:Number):Void {
    if (level > 0) {
    this.lineStyle(thickness, color, 100);
    this.moveTo(start_x, start_y);
    var end_x:Number = start_x-length*Math.cos(angle);
    var end_y:Number = start_y-length*Math.sin(angle);
    this.lineTo(end_x, end_y);
    
    --level;
    drawBranch(end_x, end_y, color << 1, length/1.4, angle+pi/4, thickness/2, level);
    drawBranch(end_x, end_y, color << 1, length/1.4, angle-pi/4, thickness/2, level);
    }
    }
    
    drawBranch(100, 120, 0x993300, 20, pi/2, 8, 10);
    

     

    Let’s look at the following line

    var pi:Number = Math.PI;

    The purpose of this is just to store value of Math.PI. The reason I put it here and not inside of the function is for optimization by avoiding multiple Math.PI calls

     

    The next line of code is

    function drawBranch(start_x:Number, start_y:Number, color:Number, length:Number, angle:Number, thickness:Number, level:Number):Void {
    

    It is just the function declaration with a whole bunch of parameters that is dynamic according to the recursion level.

     

    The next line of code is

    if (level > 0) {

    This is a vital part of the code. This is what defines the finiteness of your recursive function. Without this, your recursive function will go in an infinite loop.

     

    The next line of codes is

     this.lineStyle(thickness, color, 100);
    this.moveTo(start_x, start_y);
    var end_x:Number = start_x-length*Math.cos(angle);
    var end_y:Number = start_y-length*Math.sin(angle);
    this.lineTo(end_x, end_y);
    

    This is what draws the tree branch. It utilizes the Flash drawing API. There are many good tutorials out there if you are not familiar with them. But basically this.lineStyle(thickness:Number, color:Number, alpha:Number) is what defines the style of your line stroke. this.moveTo(x:Number, y:Number) position the starting point of your line. this.lineTo(x:Number, y:Number) position the ending point of your line. So your line will drawn from those 2 points that you define here.

     

    The next line of code is

    --level;

    This is another vital part of the code. This code is what makes the finiteness rule (in this case, if (level > 0)) of this code possible.

     

    The next line of codes is

     drawBranch(end_x, end_y, color << 1, length/1.4, angle+pi/4, thickness/2, level);
    drawBranch(end_x, end_y, color << 1, length/1.4, angle-pi/4, thickness/2, level);
    

    This is the recursive call. Notice how it is calling the function itself. Also notice the difference between the 2 lines. One has angle+pi/4 and the other has angle-pi/4. The only reason for calling it twice is because your tree will be 1 sided otherwise.

     

    1 comment

    Flash behind HTML


    Sometimes integrating your Flash movie into the HTML page may cause some layout issues such as your HTML dropdown menu appearing below the Flash movie.

     

    Those are caused because by default browsers place embedded content on the topmost layer.

     

    A fast fix to the above problem would be to add the “wmode” and setting the value to “transparent” in the embed tag. (Note: The “wmode” tag is not supported in some browsers)

     

    However, what if the background color of your Flash movie is not the same as the color of your HTML page? (Might not be the best example, but for argument sake)

     

    This is when the putting “Flash behind HTML” technique might come in handy.

    To achieve this, we need to utilize layering in the HTML page, and another possible value for the “wmode” tag, which is “opaque”.

     

    Layering in CSS has pretty much the same concept like layering in Flash. To do layering using CSS, we need to use a special attribute called the z-index. The smaller the z-index, the lower in the stack they are. So stuff that are put in layer 2 (or z-index:2) will block those that are put in layer 1 (or z-index: 1).

     

    Do not use negative z-index, because it won’t show up on Mozilla. If there are 2 objects with the same layer, whichever comes later will be on top of the one that comes before it.

     

    This is the HTML to embed your Flash movie behind the HTML (to test it just grab the code below and make a simple Flash movie and name it “yourmovie.swf”):

     

    
     <div style="position:relative; font-size:30px; z-index:5;">LAYER 5</div>
     <div style="position:relative; font-size:30px; z-index:2">LAYER 2 before flash</div>
     <div style="position:absolute; top:0; left:0; font-size:120px; z-index:2;">
     	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="200" height="150" id="recursion_tree_branch" align="middle">
     		<param name="allowScriptAccess" value="sameDomain" />
     		<param name="wmode" value="opaque" />
     		<param name="movie" value="yourmovie.swf" />
     		<param name="quality" value="high" />
     		<param name="bgcolor" value="#e7e7e7" />
     		<embed src="yourmovie.swf" mce_src="yourmovie.swf" wmode="opaque" quality="high" bgcolor="#e7e7e7" width="200" height="150" name="yourmovie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
     	</object>
     </div>
     <div style="position:relative; font-size:30px; z-index:4">LAYER 4</div>
     <div style="position:relative; font-size:30px; z-index:2">LAYER 2 after flash</div>
     <div style="font-size:30px; z-index:1">LAYER 1</div>
    

     

    7 comments

    Passing arguments to an ActionScript function


    Utilizing functions in programming is a fundemental thing in programming.

     

    However, I think its worth knowing what is happening behind the scene.

     

    To start, let’s take a look at the following sample code:

    
    var num:Number = 5;
    var obj:Object = new Object({name: "Hello", arr: new Array(5,3,8)});
    
    function foo (n:Number, o:Object):Void {
    	o.name += " Hai";
    	o.arr[1] += 10;
    	++n;
    	trace("in foo n = " + n);
    	trace("in foo o.name = " + o.name);
    	trace("in foo o.arr[1] = " + o.arr[1]);
    }
    
    foo(num, obj);
    trace("num = " + num);                                  // 5
    trace("after without clone obj.name = " + obj.name);    // Hello Hai
    trace("after without clone obj.name = " + obj.arr[1]);  // 13
    

     

    At a glance, the output of this code seems to be perfectly predictable. However, you will notice something is off if you look at it closer.

     

    num is declared 5 and obj.name is declared “Hello” at the beginning. After they were passed to function foo and we print their values again, num still has the value 5. But how come obj.name becomes “Hello Hai” now?

     

    The reason is because, for primitive data types like Boolean, Number and String, arguments are passed as a value. That means a copy of them is made, such that when the argument is modified inside of the function, the change does not affect the original variable being passed in.

     

    Object, however, is not an ActionScript primitive data types. When a non-primitive data type is passed as an argument to a function, it is passed by reference. To understand that, we need to understand that variable values are all stored in the memory as bits. Supposed that the value of obj.name is stored at location 1000. What we are passing is really the reference to that location, in this case 1000. That’s why the original obj.name is also affected.

     

    So, how do we prevent this behaviour? Simply doing var obj_copy:Object = obj; would not solve the above problem because of the same reason. If we want to prevent that from happening, we need to first make a deep copy of our object.

     

    Here is the sample code to prevent that “ripple” effect behaviour.

    
    function clone (o:Object):Object {
    	var copy:Object = new Object();
    
    	for (var i in o) {
    		if (o[i] === o) {
    			copy[i] = copy;
    		} else {
    			copy[i] = (typeof(o[i]) == "object")? clone(o[i]) : o[i];
    		}
    	}
    
    	return copy;
    }
    
    foo(num, clone(obj));
    trace("num = " + num);                    // 5
    trace("after obj.name = " + obj.name);    // Hello Hai
    trace("after obj.name = " + obj.arr[1]);  // 13
    

     

    Argument is still being passed by reference. But by doing a deep copy means that the objects are referencing at different locations. The original still reference location 1000. But the second one at location 1001 maybe.

     

    I am including the source code used in this post here in case anyone is interested in playing more with it.

     

    6 comments