Flash CS3 component creation : Getting into it

Hi,lets now go for creating an SWC component and then convert this component to a FLA component. Well, what does that mean ? Yes, that means the code for both type of components remains the same. 🙂 That is a very nice thing, one should not write codes for both type of components differently. Only the creation process of FLA-component will have some more steps. After getting into the component framework and understanding it, I found the component creation process is not that tough as I thought. Its just the unavailability of documentation, which scared me.

The whole component creation framework revolves around the concept of “Invalidation and Validation”. We talk about that in a separate post in detail. Here we will discuss about the creation process of the component first and then discuss the framework. But one must know the “Invalidation and Validation” process, so let me tell this in a very short description.

Invalidation-Validation framework : If something changes in a component, which affects the look of the component (ex : height, width, skin etc) to change, the component goes to “invalidate” state.This is the default behavior if the component uses the V3 component framework. So, if a component is marked as “invalidate”, to make it validate “draw()” method is called and this call is automatic, one should try to avoid calling “draw()” directly. This “draw()” method, redraws the component and marks the component as “valid”. Now, this “valid” component is ready to be used by the user. [ Please follow part6 of Jeff Kamerer’s article ]

Its fun time now. Below is the basic code one needs to create a component following the V3 component architecture. I have comments on the code to make it easier for referencing. Lets go through it and then we will discuss.

package saumyaComponent {
import fl.core.UIComponent;

public class SaumyaComponent extends UIComponent {

public function SaumyaComponent(){
trace(‘SaumyaComponent : constructor: ‘);
//mandatory call, responsible for calling this constructor first.Else, it will be called after configUI()
protected override function configUI():void{
trace(‘SaumyaComponent : configUI : ‘);
//mandatory call, responsible for calling setSize() before “draw()” is being called
//create almost all(Almost all, not all) visual elements and configures default settings for them
//……….creation code goes here……….

protected override function draw():void{
trace(‘SaumyaComponent : draw : ‘+totalHeight);
//……….code for creating of all component parts goes here…..…..

//mandatory call
//Best parctice is to have this method reside here
public override function setSize(w:Number,h:Number):void{
trace(‘SaumyaComponent : setSize : ‘);
//……..resizing code goes here…………
//All the other methods and properties are component specific



To be in the V3 component framework, our component must extend ‘UIComponent”.Once this is done, we just have to call appropriate methods and define specific methods in our class. The classes we must define is “construtor”,”configUI”,”draw()” and “setSize()”. Out of these methods, 3 methods are overridden as they must be. All the other methods and properties will be according to the component we are making.

Next we will make a vertical scrollbar and make a SWC out of it.There we will go about looking into the Flash IDE and components are structured.


Author: saumya

designer / developer / maker / educator @saumya

3 thoughts on “Flash CS3 component creation : Getting into it”

  1. Greetings.
    thanks for your article. However, I can’t seem to download the source. I think the link is broken. Can you help me with that?

  2. hi Maverick,
    You are right, the links are broken now 😦 .Actually the service provider had shut down the online service, all the data were gone.I will search for the source in my local machine, if got will put up here.

  3. оцените первокласное порно из каталогов нашего сайта, где можно найти лучшее воплощение ваших идей и фантазий в сексе.
    Hello. delete please message.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s