Flash Initial Code

Progress Bar

The next thing the Vshift Flash team wanted to do was create a progress bar for the application (useful for users with a slow Internet connection to indicate when the application is done loading). Luckily, with Flash MX, a progress bar is available from the Flash UI Component Set 2. To use the component, the team simply dragged the component over to the Objects layer of the first frame on the main timeline and gave the component instance the name progressComponent. Then all they needed to do was add some ActionScript to the Actions layer of that same frame:

 //setprogressbartotrackthe_rootobject  progressComponent.setLoadTarget(_root); //everytimethebarupdatesitcallsonProgress progressComponent.setChangeHandler("onProgress"); //runseverytimetheprogressbarupdates functiononProgress(){ //whenitgetsto100%movethestatetoLogin if(progressComponent.getPercentComplete()==100){ gotoAndPlay("Login"); } } 

The setLoadTarget method simply tells the progressComponent to watch the _root of the Flash movie (which is the same as telling it to watch everything that's included in the movie). The setChangeHandler method calls the onProgress function every time something changes. When the 100 percent of the movie's content has been loaded, the onProgress function tells Flash to play the "Login" state .

GlobalStyleFormat

Because the application is going to rely heavily on the Flash MX form components, the Flash team wants to control the look of these components across the entire application. The team members wanted to add some shadow to the components and control the highlighting, so they used the following ActionScript in the movie's first frame:

 //globalstylesforformelements  globalStyleFormat.darkshadow=0x666666; globalStyleFormat.highlight=0xffffff; globalStyleFormat.shadow=0x999999; globalStyleFormat.applyChanges(); 

The globalStyleFormat has many properties you can find by consulting the Flash MX ActionScript dictionary (available from Flash MX's help menu). The team was only concerned with setting the colors of the shadow, darkshadow, and highlight properties.

instant message

Style colors are input in hexadecimal notation. Flash MX's Color Mixer Panel can be useful for helping to identify a color's hexadecimal notation.

The applyChanges method of the globalStyleFormat simply commits all of the changes that were made.

Displaying Dollars Properly

Since the application will be making extensive usage of expenses calculated in dollars, the team thought it would be nice to create a global function for converting strings that contain a number into their dollar equivalent (for example, 21.5 should be displayed as $21.50). One way to create a globally available function is to add it as a new method of an existing Flash object. You can accomplish this by having the function utilize Flash's prototype function to add a method to an existing Flash object (in this case the string object). Here is an example of how it can be used:

 String.prototype.newmethod=function(){ //Thefunction } 

This creates a new method of the String class that can be employed anywhere in a Flash movie, simply by using stringvar.newmethod(). Before writing their own function, the Vshift team members decided to search the Internet to see if one already existed that could perform the formatting function. They found one at [PROTOtype] (www.layer51.com/proto/), written by Alex Leon, that worked perfectly. All the team needed to do was place the code in a file called moneyformat.as in the same directory as the Flash .fla file, and then include the .as file using #include"moneyformat.as" on the first frame of the movie. This adds the money format() function to any Flash string.

 //Thecodeformoneyformat.as  String.prototype.moneyformat=function(){  //uselikethis  //tester="1";  //trace(tester.moneyformat());  varmyString=this.toString();  //varmyString=amount.toString();  varmyDot=myString.indexOf(".");  varcoin="$";  if(myDot<=0){   varmyvalue=myString;   varcents="00";  }else{   varmyvalue=myString.substr(0,myDot);   varcents=myString.substr(myDot+1,myString.length);  }  if(myvalue.length>0){   varmyLength=myvalue.length;   vardivide=myLength/3;   if((myLength%3)==0){    vardivide=(myLength/3)-1;   }   for(vari=1;i<=divide;i++){    varmyvalue=myvalue.substr(0,(myLength-(3*i)-(i-1)))+  ","+myvalue.substr((myLength-(3*i)-(i-1)),(3*i)+(i-1));    myLength=myvalue.length;   }   dollars=myvalue;  }  if(cents.length>2){   cents=Math.round(cents.substr(0,2)+"."+  cents.substr(2,cents.length));  }elseif(cents.length==1){   cents=cents+"0";  }  returncoin+dollars+"."+cents; }; 

Flash Remoting

Given that this application will make extensive use of the Internet to communicate with ColdFusion MX components, the team needs to include the Flash MX NetServices functions that come with the Flash Remoting install.

instant message

The Flash Remoting authoring components can be downloaded from Macromedia's Web site at www.macromedia.com/software/flash/flashremoting/

By including NetService.as and NetDebug.as (used for debugging NetServices applications), the team will have access to many powerful Flash Remoting commands. Most important of these will be the ability to call ColdFusion MX components directly from Flash. The following example shows how to include the NetServices files, in addition to showing how to connect to the Flash Gateway and call a ColdFusion component:

 #include"NetServices.as"  #include"NetDebug.as" NetServices.setDefaultGatewayURL("http://thewebserver:850 0/flashservices/gateway"); gatewayConnection=NetServices.createGatewayConnection(); CFCService=gatewayConnection.getService("thecfc",this); CFCService.cfcfunction(); 

In this example, the two include lines at the top include the NetServices libraries. The NetServices.setDefaultGatewayURL sets the URL of the gateway that will be used. NetServices.createGatewayConnection() opens the connection to the gateway, and gatewayConnection.getservice selects the component that will be accessed by Flash MX.