|
| View previous topic :: View next topic |
| Author |
Message |
caleb68 
Joined: 15 Jul 2006
Posts: 3385
Location: USA - WA
|
 Posted: Sun Nov 29, 2009 6:20 pm Post subject: Coding IMVU Flash Widgets 101 |
 |
|
IMVU Flash Widgets 101
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.
Well I hope this helps you get started with making flash widgets for use within the IMVU Client. I am thinking on making a few more flash widgets to release to the general public like the one that I built recently ( FREE FLASH WIDGET BUSINESS CARDS ) so keep your eyes open for those as well
_________________
My Products
I like the idea of Humanity, its the people I hate.
Last edited by caleb68 on Mon Nov 30, 2009 12:13 am; edited 1 time in total |
|
| Back to top |
|
 |
Tidy
Joined: 25 Nov 2006
Posts: 4564
Location: USA
|
| Posted: Sun Nov 29, 2009 6:21 pm Post subject: |
|
|
WOOT MORE FREEBIES
Caleb68 - THE FLASH KING!!!!!
T
_________________
 |
|
| Back to top |
|
|
s4F_disabled_12416706 
Joined: 05 May 2007
Posts: 2332
Location: Indonesia
|
| Posted: Sun Nov 29, 2009 6:37 pm Post subject: |
|
|
thx.. bookmarked!
_________________
fun stuff inside |
|
| Back to top |
|
|
ArienRay
Joined: 16 Nov 2008
Posts: 301
Location: India
|
| Posted: Sun Nov 29, 2009 6:44 pm Post subject: |
|
|
| Wow great job thanks. |
|
| Back to top |
|
|
SpirInk
Joined: 05 Nov 2008
Posts: 1728
Location: USA
|
| Posted: Sun Nov 29, 2009 11:00 pm Post subject: |
|
|
Tools, tools, and more tools from the DC team!
Great job, guys. I knew of the business cards, but not this - what a cool surprise! |
|
| Back to top |
|
|
neo1471
Joined: 22 Jul 2005
Posts: 3632
Location: United Kingdom
|
| Posted: Mon Nov 30, 2009 8:34 am Post subject: |
|
|
nice work caleb!
_________________
The head? i lost an auction -.-
"Crankificates" -Polystyrene |
|
| Back to top |
|
|
caleb68
Joined: 15 Jul 2006
Posts: 3385
Location: USA - WA
|
| Posted: Mon Nov 30, 2009 4:22 pm Post subject: |
|
|
thanks Neo just trying to help people get past that first little bit of frustration of making their first widget.
_________________
My Products
I like the idea of Humanity, its the people I hate.
|
|
| Back to top |
|
|
caleb68
Joined: 15 Jul 2006
Posts: 3385
Location: USA - WA
|
| Posted: Tue Dec 01, 2009 9:49 am Post subject: |
|
|
any suggestions for other tutorials on widgets?
_________________
My Products
I like the idea of Humanity, its the people I hate.
|
|
| Back to top |
|
|
caleb68
Joined: 15 Jul 2006
Posts: 3385
Location: USA - WA
|
| Posted: Wed Dec 02, 2009 6:24 pm Post subject: |
|
|
*bump* no one?
_________________
My Products
I like the idea of Humanity, its the people I hate.
|
|
| Back to top |
|
|
Firesaph
Joined: 08 Apr 2007
Posts: 2824
Location: United Kingdom
|
| Posted: Fri Dec 04, 2009 9:32 am Post subject: |
|
|
nice one thanx saved for later use
_________________
 
Free Gift Every Month For Active Users Here >>> www.firesaph.co.uk
Bling Me! |
|
| Back to top |
|
|
neo1471
Joined: 22 Jul 2005
Posts: 3632
Location: United Kingdom
|
| Posted: Fri Dec 04, 2009 10:09 am Post subject: |
|
|
as of yet no one knows what flash can be used for except advertising urself and games (but games need extra servers and all)
untill people dream up intresting use's for flash no one can know what they need, a flash widget like this will take us all ages to build upon let alone think of exanding from lol, its a gd thing its so far ahead of the average dev, gives us something to learn! ^_^
can you suggest things u think we could find useful to have tuts on see what the responses are?
maybe a tut on syncronising our product pages with a small amount of include code?
(i dont know much but id suggest seporate css and flash files due to imvu disabling some features every once in a while, css is usualy so passive they leave it be so least part will work)
iv had a few people asking me to make a tut on it but to be perfectly honest iv never felt iv known enough to make a tut on it worth reading, then again all most devs are looking for is simple CSS alter the hex colour for relivant name, and java to put a basic header or footer in place
_________________
The head? i lost an auction -.-
"Crankificates" -Polystyrene |
|
| Back to top |
|
|
FlashBob
Joined: 11 Dec 2006
Posts: 15
Location: Netherlands
|
| Posted: Sat Dec 05, 2009 12:29 am Post subject: |
|
|
Thats both a good point and a good suggestion neo 
A flash widget that can display my lastest 10 or 20 products would be very nice. Especially if the widget could 'read' those products from my developers page... |
|
| Back to top |
|
|
caleb68
Joined: 15 Jul 2006
Posts: 3385
Location: USA - WA
|
| Posted: Sat Dec 05, 2009 1:53 am Post subject: |
|
|
| FlashBob wrote: | Thats both a good point and a good suggestion neo
A flash widget that can display my lastest 10 or 20 products would be very nice. Especially if the widget could 'read' those products from my developers page... |
i can make that one but sadly i wouldn't make that a tutorial script, and there are a few reasons behind it, and no greed isn't one of them (being most my products are only at a 50-100cr markup that should denote that).
It is a good idea though, i'll get one made up that can be derived.
_________________
My Products
I like the idea of Humanity, its the people I hate.
|
|
| Back to top |
|
|
FlashBob
Joined: 11 Dec 2006
Posts: 15
Location: Netherlands
|
| Posted: Sun Dec 06, 2009 1:16 am Post subject: |
|
|
| Following the same idea... but a widget displaying my best selling 10 or 20 products would be my next suggestion... |
|
| Back to top |
|
|
caleb68
Joined: 15 Jul 2006
Posts: 3385
Location: USA - WA
|
| Posted: Sun Dec 06, 2009 1:43 am Post subject: |
|
|
| FlashBob wrote: | | Following the same idea... but a widget displaying my best selling 10 or 20 products would be my next suggestion... |
actually making the one widget configurable to either wouldn't be too much trouble either. simple flag there.
_________________
My Products
I like the idea of Humanity, its the people I hate.
|
|
| Back to top |
|
|
|
|
|
Hide ads? Get VIP!
|
|
You can post new topics in this forum
You can reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
| |
|
FAQ
Usergroups
Register
Profile
Log in for private messages