S. Friss – Design + TechnologyFreelance Interactive Design and Development

piclens

ASDocGUI

Very nice Kuler panel for Flash, written with JSFL.  This tool adds a little panel (can be accessed under window->other panels) which has Kuler themes in it.  You can download it here Kuler Panel and there is also an article on how to create this.  Just execute the mxp file and you're set.

Here it is, it's very simple, but it will publish all of the fla's you have open with one command.

Publish All 

CREATE THE COMPONENT FILE

1. Create a file named “MyComponent.fla.” This will be used to house your component along with the requisite assets.

CREATE THE LIBRARY SYMBOLS ( inside of MyComponent.fla)

2. Create a library symbol named “avatar.” This will be used to size your component upon initialization

3. Create your component MovieClip library symbol, I will call it “MyComponent” from here on out. This will be you component container, you will eventually place all of your assets in here.

4. Create a folder named “Component Assets.” This will house all of you component assets. Place the “avatar” symbol in here.

5. Inside “Component Assets” create a folder named “_private.” This will house you component shim, which we will discuss in a moment.

6. Create any assets you plan on using in your component and place them inside of “Component Assets.” Any asset you plan on using must be “export for actionscript” and NOT “export in first frame.”

SETUP THE COMPONENT CLIP

1. Create 4 layers, each with 2 frames inside of your “MyComponent” library symbol.

a. assets: This layer will house all of the assets that you component will use. All assets that you plan to use inside of your component must be placed on frame 2 of this layer.

b. asset labels: This layer will contain all of the explanations and labeling for the assets. This layer should be set to be a guide layer, as it is not to be rendered. The main purpose of this layer is just to illustrate what is what to whoever will be customizing the component. The labels should also be placed on frame 2.

c. avatar: This layer will contain the avatar symbol on frame 1. It will be used to set the default size of you component once it is initialized i.e. dropped on the stage.

d. componentshim: This layer will contain your component shim, which we will discuss in a moment.

CREATE THE COMPONENT CLASS

1. Create a file named “MyComponent.as.” This will be the class file you will use for you component. It should extend UIComponent and resemble the following:

package com.test

{

import fl.core.UIComponent;

public class MyComponent extends UIComponent

{

public function MyComponent ()

{

}

override protected function configUI():void

{

super.configUI();

trace("configUI");

//UI setup code goes here

}

override protected function draw():void

{

//Drawing code goes here

trace("Draw");

super.draw();

}

}

}

2. Link your class to your component. Select “linkage options” from the context menu of your MyComponent library symbol and type in the class name, in this case it’s “com.test.MyComponent” and make sure “export for actionscript” as well as “export in first frame” are checked.

CREATE THE COMPONENT SHIM

The component shim is used to house all of the source code of your component, so that when you distribute it, you do not need to also give you source code away. Also, it contains all of the code for UIComponent, which is used in your component.

1. Create a file named “MyComponentShim.fla.” Place this file in the same directory as your “MyComponent.fla” file.

2. Open the file called “ComponentShim.fla”, which is located under “en\Configuration\Component Source\ActionScript 3.0\User Interface” it will contain a symbol called “ComponentShim source” in the library. Right click on this symbol and select “Convert to Compiled Clip.” This will create a file named “ComponentShim source SWF.” Copy this file into your “MyComponentShim.fla” file’s library. Check the linkage and make sure this symbol is exported for actionscript and exported in the first frame.

3. Create a symbol named “MyComponentShim source”, where “MyComponent” is the name of your component. Check the linkage and make sure this component is exported for actionscript and exported in the first frame.

4. Create a symbol called “MyComponent”, link this symbol to you “MyComponent” class and export for actionscript in the first frame.

5. For every asset that you used in your component, create a symbol with the same name and same class linkage and export for actionscript in the first frame.

6. Right click you “MyComponentShim source” symbol and choose “Convert to Compiled Clip.” This will create a symbol called “MyComponentShim source” which is a compiled clip. Rename this to “MyComponentShim.” Check the linkage and make sure it is NOT exported in the first frame, but that it is exported for actionscript.

7. Copy “MyComponentShim” into your “MyComponent.fla” file into the “_private” folder.

FINAL STEPS

1. Make sure there is nothing on the stage.

2. In “MyComponent.fla” right click your “MyComponent” library symbol and make sure that the linkage class variable is pointing to the right class, that “export for actionscript” is checked and that “export in first frame” is also checked.

3. Right click again and select “Component Definition.” Make sure that “ the “Class” variable is pointing to your class ( “MyComponent.as” ), also make sure that “Display in Component Panel” is checked and that “Edit frame” is set to 2. Hit “OK” and wait for your component to compile.

4. To ditribute your component and have it show up in your components panel, place your “MyComponent.fla” file in “\en\Configuration\Components.”

5. You can select “Reload” or restart flash to see your components.

EDITING CODE

1. Anytime you edit your class file, you must do the following to see the changes.

a. In “MyComponentShim.fla” delete the “MyComponentShim” library symbol.

b. Right click on “MyComponentShim source” and select “Convert to Compiled Clip”

c. Rename the “MyComponentShim source” compiled clip to “MyComponentShim”

d. Make sure the linkage of “MyComponentShim” is set to “export for actionscript” but NOT “export in first frame.”

e. Copy “MyComponentShim” into the “_private” folder in the “MyComponent.fla” file.

f. In “MyComponent.fla” right click the “MyComponent” library symbol and select “Component Definition” and just click “ok”.

g. Copy the “MyComponent.fla” file to the “\en\Configuration\Components” directory overwriting the old one.

h. Either “reload” your components or restart flash.

i. Replace component instances on the stage

EXECUTION ORDER

The UIComponent class executes it’s methods in the following order:

contructor

protected function configUI

public function setSize

protected function draw