Lesson 7 - Moving Actionscript into IMVU • IMVU Mafias

Posted 15 years ago · Author

First, unzip the zipped API folder which you downloaded from our requirements thread. If you can not unzip this folder, you may need to download 7zip: http://www.7-zip.org/download.html

Let's get the lay of the land and take an inventory of what is included in this folder. In the folder you will find all of the following:

bin - The compiled IMVU ActionScript library (imvu-flash.swc). You'll use this library when developing and compiling your widgets.
doc - The API documentation for the IMVU ActionScript library. Open "index.html" to browse the API reference.
example - Example files that will help you better understand how the API works for different types of widgets.
fla - Various Adobe Flash (FLA) files used for compiling the
ActionScript libraries.
lib - External 3rd party libraries used alongside the IMVU API.
src - The full source code of the IMVU Flash Widget API.
test - A collection of AsUnit (see http://www.AsUnit.org) test cases that verify that the IMVU API is functioning properly. Writing test cases for your widgets can be very beneficial, especially as they become more complex.
tools - A set of tools for running your widgets locally without using the IMVU 3D client. The tools will allow you to simulate multi-user chat sessions and test your widgets. We will cover these tools in more detail later in the tutorial.

Assingment:
1. Create a new folder called "Hello World"
2. Startup your Flash IDE and make a new actionscript 3.0 document
3. Write the following code:

Code

package 
{    
import com.imvu.widget.*;    
import com.imvu.events.*;    
import flash.events.*;    
import fl.motion.Color;
    
 public class HelloWorld extends ClientWidget 
 {                
  public function initWidget():void 
  {                
  }          
 }
}

This is the base document class for your first widget. Whenever you want to build an IMVU widget, you'll want to make sure that it extends IMVU's ClientWidget class, which will give you access to special capabilities in the IMVU client, including multi-user communication.

4. To Be Continued

-----------------------------------------------------------------------------------

Welcome, today were going to teach you how to build a basic flash widget in Adobe Flash CS3 / CS4. This tutorial is designed around them and designed to help get someone new to flash widgets on the road and going down the right path.

First off, we will start you off with having you download the files you will need in order to successfully build this flash widget. This zip file contains all the files that you need along with the IMVU Classes, MockServer, and a Modified Mock Client that will allow you to test the widget to ensure it will Unload when a unload event is triggered.

The zip file is located here:
http://www.caleb68.org/flashtut/avibuttons.zip

unzip the files from the zip file and make sure you unzip to paths, else this tutorial will not work for you (the files must be in the proper folders).

There are a series of files inside the zip, but there are only a couple that you will need to pay attention to in order to make this work. avibutton_start.fla is a blank starting file for this tutorial, avibutton_finished.fla is what your start file should look like after your done.

So go ahead and fire up Flash CS and open up avibutton_start.fla

the first thing that we are going to need to do is make sure that the file knows where to find the class files, so from here we will need to do a few little things:

is important that the class path is pointing to the right directory or you'll end up getting a whole slue of errors when you try to compile your flash file.

After you've gotten these set properly, we move on to the next few steps of editing the flash file and getting it ready for the actionscript file:

once were all done with that we are ready to move on to the Action Script file. I tried commenting it the best I could for you to let you know what every little part of the script will be doing, hopefully i got enough comments in there to keep everyone on que

so lets open up the avibutton.as file and take a look at it. There are several key things here that we need to know right off the bat, so lets start covering the basics of the file.

All of your imvu widget class files will start out with a basic structure:

Code

package {
   import com.imvu.widget.*;
   import com.imvu.events.*;
   
   public class avibutton extends ClientWidget   {

      public function initWidget():void {
         this.widgetName = "avibuttons";
         this.space.addEventListener(com.imvu.widget.WidgetSpace.WIDGET_LOADED, addWidgetToStage);
      }
      
      public function addWidgetToStage(e:Event):void {
         this.space.removeEventListener(com.imvu.widget.WidgetSpace.WIDGET_LOADED, addWidgetToStage);
      }
   }
}

the first line sets up the package for the class file, the following two lines are includes that must be in all your widgets you want to use in the IMVU client to keep problems from happening.

Code

public class avibutton extends ClientWidget   {

this line sets up the class name for the widget and links it to the widget space, something very important to remember is that the class name (here its avibutton) must also be the name of the saved file.

Code

public function initWidget():void {

this line is fired off when the widget starts loading, and before its complete, this is where you set the unique name for your widget, its important to set the name space else other widgets may cancel out your widget.

Code

this.widgetName = "avibuttons";

this line sets up the namespace of the widget and is how you set your widgets name, it can be anything you want it to be, there isn't a limitation to the name, but try to be unique so that your name space doesn't conflict with someone else .

the next line:

Code

this.space.addEventListener(com.imvu.widget.WidgetSpace.WIDGET_LOADED, addWidgetToStage);

is setup so that when your widget finishes loading, it will fire off the main event when the widget is added to the stage. which leads us to the next part of the basic widget structure:

Code

public function addWidgetToStage(e:Event):void {

this is where you will fire off all your finishing events for the widget, and trigger the main process of it. Sense the widget that we are building is really small and fast loading, we will be executing the majority of the functions here.

so to the flash widgets avibutton.as file

you'll notice that we have additional items imported at the start, this is so that we can load images off the web, and modify and add buttons to the page.

in the first part of our widget, just after we link it to the clientwidget, we setup some vars for the widget itself. Now there are two types of vars you can make, public vars, which are shared with everyone, and private vars which are only shared within your class file. Public vars and private vars take up the same ammount of space in the compiled flash file, but if they are vars you do not want to let other widgets have access to, its best to set the vars to private.

now in the addWidgetToStage function, we set it right off the bat to remove the event listener, Event listeners fire off every frame, checking to see if their even has been fired, without removing the event listener we leave it there to continually check even though that it has already fired off. If your event listeners are only to fire off once, its best to remove them after they have fired off to lower processor usage of your flash file.

now the add widgetToStage i commented heavily in the file but we will go over it here as well

we dont need to listen for the even anymore so lets stop listening.

Code

         this.space.removeEventListener(com.imvu.widget.WidgetSpace.WIDGET_LOADED, addWidgetToStage);

now we are going to add buttons to the page, remember, we added the buttons to the flash library so that is the button that will be used in this flash file, if you change the coloring of that button, it will be reflected when we add the buttons.

first we set the button labels

Code

this.myBtnA.label = btnA;
this.myBtnB.label = btnB;

next we set the position of the buttons inside of the flash space we setup, sense we are going to leave the buttons against the left side, we dont need to set the x value of them, but sense we want to move them down we need to set the y value:

Code

this.myBtnA.y = 116.0;
this.myBtnB.y = 138.0;

now we add them to the widgets stage, what we are doing here is setting them to the highest level of the flash file, numChildren returns the current number of levels that the flash file (or object) has, addChildAt is what is used to position the inserted item on a certain level. keep in mind, if you want to add a button or object to a specific level, like level 1, you could use addChildAt(myobject, 1) but we want to add them to the highest level for each item, so were using numChildren:

Code

         addChildAt(this.myBtnA, numChildren);
         addChildAt(this.myBtnB, numChildren);

next we setup listeners to the buttons so that when someone clicks the button, it knows what to do, the event listeners will fire whenever someone clicks the button, there are several different ways that you can track clicks but we want to ensure that they are actually clicking the button so were using the mouse event CLICK

Code

this.myBtnA.addEventListener(MouseEvent.CLICK, btnClicked(1));
this.myBtnB.addEventListener(MouseEvent.CLICK, btnClicked(2));

now we get fancy and load in a avatar pic, to make it look pretty. the first thing we do is setup a listener to our loader so it knows what to do once its loaded.

Code

         loader.contentLoaderInfo.addEventListener(Event.COMPLETE, iconLoaded);

after we have the event listener setup we tell it to load up the graphic. Were doing it this way because we want to resize the image, if you weren't resizing the image you could skip the event listener and just add it to the stage after you tell it to load the image

Code

loader.load(new URLRequest(myIcon));

And that covers our first function. were almost done, but now we move on to the next step. The iconloaded function is what is triggered when the graphic we told it to load is done loading, what it does is resizes the image, and then adds it to the widgets stage:

Code

      private function iconLoaded(e:Event) : void {
         //ok lets resize the image to make sure it fits
         loader.width = 80;
         loader.height = 110;
         // now we need to position the image.
         loader.x = 10;
         loader.y = 3.5;
         // now we add the image to the widget
         addChildAt(loader, numChildren);
      }

Now the next function, and last one, is abit more complex then your regular fuctions, just because of how its written up, and remember this is case sensitive.

Code

      private function btnClicked(id:int): Function {
         return function (e:Event) : void {
         }
      }

were basically making a function here that can handle multiple actions, the first line sets up the function to recieve vars, this one is just set to recieve a single var being a integer, but we want this function to be able to be called both by events and by other actions. so, rather then doing a typicial event function:

Code

private function btnClicked(e:Event) : void {

we replace void e:Event with id:int (the var we want to get) and replace void with "Function".

The following line allows us to receive the event if its called by a event listener. If its not called by a event listener and called by one of our other fuctions, the e:Event returns a null object.

Inside of our function we have a 'Switch' event setup:

Code

switch(id) {
   case 1:
      // id = 1 so were going to go to btnAlink
      navigateToURL( new URLRequest(btnAlink), "_blank");
      break;
   case 2:
      // id = 2 so were going to go to btnBlink
      navigateToURL( new URLRequest(btnBlink), "_blank");
      break;
}

basically a switch is a fancy 'if' statement that can compare mulitple items to see if they are true. if its true, then it executes it, as shown above.

And that covers the ActionScript file. I figured it would be best just to include the full action script already wrote up with all the comments to help, then try to run you through writing it all. Hopefully I explained what its all doing good enough

now, we can compile it and test it out. so if you click file, publish it will create the flash file in the directory. fire up MockServer.swf, and then MockClient1.swf, click the + icon in the client one and load up your compiled swf file. it should show in the mock client with your avatar button and the button labels, if you click a button it should launch a page in a new browser window/tab

now, one more trick I will show you, for testing the flash files, you can rim out a few lines within the flash file to be able to test it within flash CS (Control -> test movie)

look for the following lines in the Action Script file:

Code

      this.space.addEventListener(com.imvu.widget.WidgetSpace.WIDGET_LOADED, addWidgetToStage);
      }
      
      public function addWidgetToStage(e:Event):void {
         // we dont need to listen for the even anymore so lets stop listening.
         this.space.removeEventListener(com.imvu.widget.WidgetSpace.WIDGET_LOADED, addWidgetToStage);

and change them to the following:

Code

/*
this.space.addEventListener(com.imvu.widget.WidgetSpace.WIDGET_LOADED, addWidgetToStage);
      }
      
      public function addWidgetToStage(e:Event):void {
         // we dont need to listen for the even anymore so lets stop listening.
         this.space.removeEventListener(com.imvu.widget.WidgetSpace.WIDGET_LOADED, addWidgetToStage);
*/

this will allow you to compile and test the flash file within Flash itself without using the mock client and mock server. Dont forget to change it back before you put it into a product though, else your widget may misfire and not show up at all.

Last edited by Don Von Alpha Dom on Tue Dec 01, 2009 6:36 pm, edited 1 time in total.