Flash CS3 component creation : SWC to FLA

Here we will see how to cenvert a SWC based component to FLA based component. I hope you are following along my past posts. So, what we have here is a SWC and its source code ( The FLA and the Class file ). Now, to begin with, remove the SWC, because we no longer want it. Copy the FLA(scrollBar.fla) two times to make 2 more files.This is just to take the back up of the original SWC component file.What we need is two files, one component source file and one component Shim file ( Do not worry too much about the name, just think of it as another file ).So rename the 2 copied files as “FLA scrollBar.fla” and “FLA scrollBar Shim.fla”.

Open “FLA scrollBar.fla” and open its library.You will see, one compiled clip and one moveClip named “samScrollBar_bkup” along with the scrollbar component parts (mc_down,mc_slider,mc_sliderBg,mc_up).This is fine, I made “samScrollBar_bkup” just before compiling the SWC component.So do not worry much about it.Even if you do not have “samScrollBar_bkup” or the compiled clip, it does not make any difference.Only thing that differ would be for you to recreate one scrollbar component, if these things were not there . So problem, we are not going to do anything here. I was just making you aware of the FLA.

Flash CS3 component creation : The process

Hello and welcome to the component creation steps. Here, we will study how to make a simple component and what are the steps required for it.
1. Create a new Flash actionscript3 document and name it “ScrollBar”.
2. Create a new actionscript class file with name “SamScrollBar” ( I have simply appended first 3 characters of my name before ScrollBar, for some unique class name ).
Well, ideally one should save all the component classes inside a package like “com.saumya.components”, but for make the example simple and straight, we will keep the class file in the same folder as our FLA document.
3. So, right now in a folder called “myScrollComponent”, we have two files ( “ScrollBar.fla” and “SamScrollBar.as” )
4. As I have mentioned in my previous post, each component class must extend “UIComponent” class and should have some mandatory methods, I will just write the component template file(I mean a file, which will just have the basic code to make a component).So the class code now, should look like below

package {
import fl.core.UIComponent;
public class SamScrollBar extends UIComponent {

public function SamScrollBar(){
trace(’SamScrollBar : SamSCrollBar : ‘);
super();
}
protected override function configUI():void{
trace(’SamScrollBar : configUI : ‘);
super.configUI();
}
protected override function draw():void{
trace(’SamScrollBar : draw : ‘);

//Lastline
super.draw();
}
public override function setSize(w:Number,h:Number):void{
trace(’SamScrollBar : setSize : ‘);
}
//All the other methods and properties are component specific

}
}

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 ]

Flash CS3 component creation : introduction

To start with, I must say, it was really a good as well as tough time for me, creating my first CS3, component.Good is the way it let me study a lot of blogs, Adobe live docs, Adobe Devenet and a lot of trial and error.It was fun.Tough came in the way when almost all references say a little and when stuck in a problem, I have to re-search and find out. There was no direct reference available to it.But I read the links and articles (mentioned at the end of this topic) at least 10 times each.

Well, lets come directly to the point. One can create Flash CS3 component in several ways. What I mean here is from the root only Flash CS3 supports 2 kinds of components.
1. Pre-compiled Components (SWC components)
2. FLA-based components