Flash CS3 component creation : introduction

By saumya
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
When creating SWC components, one have a choice of either following the Flash CS3
component framework or can make a component from ground up without the component
framework. I would say taking the help of component framework is better as it does a lot of
things automatically. We will discuss both. The same holds good for FLA based components,
but here if one does not take component framework’s help, it would take a high amount of
time,code, frustration and patience to achieve the same. So again there are 2 choices to
component creation
1. with Framework
2. without Framework
Ok, so we now have options to create components. Lets start with creating a component.
We will make both, compiled clip, I mean a pre-compiled component, as well as a FLA-
based component.But first of all we must know, for creating a component we must use a
display object for it. Again we have a choice here, whether to use Movieclip or Sprite. I
would say what Jeff Kamerer from Adobe has already stated it in his article,
All of the Flash CS3 components, as well as the Adobe Flex 2 components,inherit from
Sprite and not from MovieClip. The class fl.core.UIComponent extends Sprite, so any
component built upon the User Interface Component Infrastructure will inherit from
Sprite but not from MovieClip.
Inheriting from Sprite instead of MovieClip is a matter of clean design and best practice;
when a movie clip will not function as a multi-frame animation, the Timeline-related
APIs are an unnecessary distraction, and the restriction against frame scripts enforces
the best practice of keeping all code in external ActionScript files.
A component using component framework must inherit from UIComponent as
public class SamScrollBar extends UIComponent
On the other hand a component not using component framework will start as
public class SamScrollBar extends Sprite
With these basic informations, I will close this post.Next we will directly jump into the code
of component creation.
References :
1.http://www.adobe.com/devnet/flash/articles/creating_as3_components.html
2.http://www.flashbrighton.org/wordpress/?p=31
3.http://www.flashgamer.com/2007/12/inspectable_metadata.html
4.http://www.jumpeyecomponents.com/blog/2007/07/13/create-fla-components-for-
flash-cs3
5.http://flexion.wordpress.com/2007/06/27/building-flash-cs3-components
Flash CS3 component creation : Getting into it
By saumya
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: ‘);
super();//mandatory call, responsible for calling this constructor first.Else, it will be called
after configUI()
}
protected override function configUI():void{
trace(’SaumyaComponent : configUI : ‘);
super.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…..…..
//Lastline
super.draw();//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.
Possibly related posts: (automatically generated)
• Flash CS3 component creation : introduction
• Defining your own components in cakePhp
Flash CS3 component creation : The process
By saumya
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
}
}
5. Now look at our FLA document. Our scrollbar component is having four graphical parts as
“up arrow”,”down arrow”,”slider”,”slider background”(a line on top of which slider
moves).
So, we will create 4 movieclips with names as
“mc_up”,”mc_down”,”mc_slider”,”mc_sliderBg”.
6.Now, right click on top of “mc_up” in Library and select “Properties” from the list.IT
should bring up “Symbol Properties” dialogue box. Select “Export for ActionScript”.Once
done Flash will automatically fill up the “Class” and “Base class” parameters for you and it
will also check mark “Export in first frame”.Just uncheck “Export in first frame”.Because
we will set this on component level. Click “ok” and flash you prompt you with another
dialogue box saying the “the class is not found and a default class will automatically
created”.Click ok to it too. Do the same for each of the clips
(”mc_down”,”mc_slider”,”mc_sliderBg”).
7.Since we are setting up the environment, lets do classpath settings too. While
“ScrollBar.fla” is open, go to “File” menu “Publish settings…”.It will give us “Publish
settings” dialogue box.Select “ActionScript 3.0″ and “Flash Player 9″ if not selected
previously.Now, click “Settings…” button just next to “ActionScript version” settings. It will
open “ActionScript 3.0 Settings” dialogue box. In “Classpath” box add a “.” as the
classpath. Now, uncheck “Automatically declare stage instances” ( if you want to know
what it does, please go to one of my previous post, which describes this topic in
detail. ).Click “ok” and then click “ok” to get out of the “Publish Settings”.Save your work.
8.Lets create the component Movieclip . Create a new Movieclip on library and name it
“samScrollBar” (not CAPITAL ‘S’, its small ’s’ , just to differentiate). Configure its
properties as to “Export for ActionScript” and “Export in first frame” and class would be
“SamScrollBar “. Now go inside the clip by double clicking the symbol in Library.So we are
in Symbol Editing mode of “samScrollBar”. Create 2 layers in side the clip.The layers would
be named as “avatar” and “assets”.Create 2 key frames on both the layers. Now just to
clarify a bit, “avatar” layers first frame and “assets” layer’s second frame will have
content. Yes, the second frame of “avatar” and the first frame of “assets” will be blank or
empty. Now, “avatar” layer will have only the bounding box of the component, just that.So
lets make a box with hairline thickness as border thickness and no fill in it in the “avatar”
layer’s first frame.Do not convert it into any kind of symbol.Ok, moving ahead, lets go to
second frame of “assets” layer. Now, drag each of the movieclips in the library
( “mc_up”,”mc_down”,”mc_slider”,”mc_sliderBg” ) to this frame and make sure you do not
provide any instance name to anybody here. Thats all the settings as long as graphics
setting go. Yep, thats all . Well, we are almost done.
You want to test it now ?!! No problem, go ahead and drag the “samScrollBar” movieclip
from Library to stage and test movie.You will see something on trace and some thing on
“Compiler Errors” pannel. We will fix them next. Take a break, come back with fresh and
cool head.
9.Now, open the “SamScrollBar.as” file and first of all import some classes as below
package {
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import fl.core.UIComponent;
public class SamScrollBar extends UIComponent {
10. Please note that I am only showing the parts of the script which are different from the
base script file, which we have written in the beginning.
11. Next, we must define the movieclips, which we are going to use (If you remember, we
have set “Automatically declare stage instances” as false in our publish settings dialogue
box).So the next couple of line of code is as below
public class SamScrollBar extends UIComponent {
private var up_mc:Sprite;
private var down_mc:Sprite;
private var slider_mc:Sprite;
private var sliderBg_mc:Sprite;
12. In this component we do not need to change any code for constructor,configUI and
setSize.So they will be as as in our previous script. Only thing we need to change is at our
“draw()” method. In the first lines of “draw()” we will create the component parts
dynamically and add them to the display list.So the code would be as below
protected override function draw():void{
trace(’SamScrollBar : draw : ‘+totalHeight);
//creates component parts
up_mc=new mc_up();
down_mc=new mc_down();
sliderBg_mc=new mc_sliderBg();
slider_mc=new mc_slider();
//adds component parts to display list
addChild(up_mc);
addChild(down_mc);
addChild(sliderBg_mc);
addChild(slider_mc);
13. Intentionally I have kept the traces as to make you know how the “draw()” and all other
methods get called automatically once we extend our component from “UIComponent”.
14. Next we need the user to be able to specify the scroll height,the scroll speed and the
content to be scrolled.So we will be adding some more properties to our class for that and
for slider creation calculation. So in the end our properties declarations would be as below
public class SamScrollBar extends UIComponent {
private var up_mc:Sprite;
private var down_mc:Sprite;
private var slider_mc:Sprite;
private var sliderBg_mc:Sprite;
[Inspectable(name="Height",type="Number",defaultValue=120)]
public var totalHeight:Number=120;
[Inspectable(name="ScrollSpeed",type="Number",defaultValue=0.1)]
public var scrollSpeed:Number=0.1;
private var scrollableContent:Sprite;
private var totalScrollHeight:Number=-1;
private var scrollArea:Sprite;
private var scrollWidth:Number=100;
//utility properties
private var minContentY:Number=-1;
private var maxContentY:Number=-1;
private var minSliderY:Number=-1;
private var maxSliderY:Number=-1;
private var prevMouseY:Number=-1;
//END utility properties
15. If you can see, I have added some public properties directly, one should not do that in a
real programming situation.Instead one can use “get” and “set” to do the stuff. I have done
that in another situation, which we will be discussing soon. The intention here is that we
need some data to be filled by the user in the “Component Inspector” panel or
“Parameters” panel. So the properties must be public and there has to be “Inspectable” tag
before it. Till now the first part of the code will look as below
package {
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import fl.core.UIComponent;
public class SamScrollBar extends UIComponent {
private var up_mc:Sprite;
private var down_mc:Sprite;
private var slider_mc:Sprite;
private var sliderBg_mc:Sprite;
[Inspectable(name="Height",type="Number",defaultValue=120)]
public var totalHeight:Number=120;
[Inspectable(name="ScrollSpeed",type="Number",defaultValue=0.1)]
public var scrollSpeed:Number=0.1;
private var scrollableContent:Sprite;
private var totalScrollHeight:Number=-1;
private var scrollArea:Sprite;
private var scrollWidth:Number=100;
//utility properties
private var minContentY:Number=-1;
private var maxContentY:Number=-1;
private var minSliderY:Number=-1;
private var maxSliderY:Number=-1;
private var prevMouseY:Number=-1;
//END utility properties
public function SamScrollBar(){
trace(’SamScrollBar : SamSCrollBar : ‘);
super();
}
protected override function configUI():void{
trace(’SamScrollBar : configUI : ‘);
super.configUI();
}
public override function setSize(w:Number,h:Number):void{
trace(’SamScrollBar : setSize : ‘);
}
protected override function draw():void{
trace(’SamScrollBar : draw : ‘+totalHeight);
//creates component parts
up_mc=new mc_up();
down_mc=new mc_down();
sliderBg_mc=new mc_sliderBg();
slider_mc=new mc_slider();
//adds component parts to display list
addChild(up_mc);
addChild(down_mc);
addChild(sliderBg_mc);
addChild(slider_mc);
//Lastline
super.draw();
}
16. Well, next we will add one setter method to set the private property
“scrollableContent” and we want this property to be user settable from component
inspector panel.So the code will look as
[Inspectable(name="scrollableClip",type="String",defaultValue='')]
public function set scrollableClip(clipName:String):void{
trace(’SamScrollBar : scrollableClip : ‘);
if(clipName!=”){
var clip:Sprite=Sprite(parent.getChildByName(clipName));
scrollableContent=clip;
}
}
17. Till this point what we were doing was mandatory to make a component V3 component
architecture compliant. The next set of codes is specific to this component. I will not go
line by line here, rather give you the source code of it with proper commenting inside it,
for your reference.In case any doubt you can ask here.
Since we are discussing about V3 component architecture I think talking about one
particular component is not fair and will lead to creation of that component. So, its better
to get to know, how to adhere to V3 component framework and developing any component.
At this point you can download the source code from here and have a look at them.
18. Once we have our class ready and the FLA ready, we need to create a SWC out of the
component. For that, open the FLA and select the “samScrollBar” movieclip on library and
rightclick on it.Select “component definition…”.It will open “Component Definition”
dialogue box. Put the class name as the class name we provided in the linkage and is the
same class file we just scripted, thats “SamScrollBar”.Now, below there are some more
settings to be done. “Parameters are locked in instances”,”Display in Components panel”
should be checked, I mean selected. Put some tooltip text if you want.Minimum flash
player version to be 9 and minimum ActionScript version should be “ActionScript 3.0″. Now,
one setting remained is “Edit frame”, put it to be 2. This will come handy when we will
make FLA based component.What it does is, if you double click any component, it will
directly take you to the 2nd frame of your componet to be edited.If you remember, we
have put all the component assets on the 2nd frame of the component clip in the “assets”
layer.
Everything is done, click “OK”. It will take a while for flash to respond, as it was compiling
the class file in the background.Once done, you can see a component icon in place of
movieclip icon for the component clip.Now, right click on the component click and click
“Export SWC File..”.It will ask you to save your component as a compiled clip. Next step is
to place your compiled clip in the “Components” folder of Flash.Actually there are 2
places, one is directly in side “Program Files” and one is inside “User configuarion”.Lets say
we will be placing it inside “Program Files”, so the typical location would be
“C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Components”
You can make a directory here and put all your components.So that next time you re-start
flash or reload the components, you will see all your components in that folder.For now say,
the folder name is “Saumya”, I will put our SWC in this folder and reload components’ in
components panel or restart Flash application.If we open “Components” panel, we will see
a folder named “Saumya” in it and there would be a a component named “samScrollBar” in
it.
Drag it to stage and have fun . We have just finished creating an SWC component.
There are a lot of things to be studied and a lot of questions to be answered, but before
that I would say go for the links I have provided in past post and read them to get a hnag of
the Framework.
love you for your patience

Possibly related posts: (automatically generated)

• Flash CS3 component creation : SWC to FLA
This entry was posted on December 7, 2007 at 6:28 pm and is filed under Actionscript3, Flash. You can follow
any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own
site.

37 Responses to “Flash CS3 component creation : The process”

1. daniele Says:
December 21, 2007 at 8:57 pm
hi Saumya,
I tested the source code you provide in the zip file but I obtain these errors as output
and I don’t know how fix it. Can you help me please maybe these some error in the
code?
Thanks in advance
VerifyError: Error #1014: Impossible find class fl.core::UIComponent.
ReferenceError: Error #1065: variable SamScrollBar not defined
ReferenceError: Error #1065: variable mc_down not defined
ReferenceError: Error #1065: variable mc_up not defined.
ReferenceError: Error #1065: variable mc_slider not defined.
ReferenceError: Error #1065: variabile mc_sliderBg not defined.
2. saumya Says:
December 22, 2007 at 4:56 pm
hi daniele,
These are because of the settings in the publish settings box. You will have a better
understanding once you go through this previous post.
happy flashing

3. daniele Says:
December 22, 2007 at 9:17 pm
in the publish setting box the “Automatically declare stage instances box is
unchecked.
Anyway Im using the within the download zip scrollbar_v1.rar.
Maybe I must modify the files?
I try the swc too. It seem doesn’t make error instead but I can’t move the slider.
Sorry if I bother you but I m so excited for finally have found how make as3
component and not to be able to make it works drive me crazy
Daniele

4. saumya Says:
December 23, 2007 at 6:13 pm
hi daniele,
Now lets go one step at a time.
Fixing up the Error messages are to do with classpath settings too.You have to add
the follwoing paths to your class path:
.
$(AppConfig)/ActionScript 3.0/Classes
$(AppConfig)/Component Source/ActionScript 3.0/User Interface
These are the paths where Flash finds the base classes to make the components.You
can add these in the Global class path settings by going to
Edit>Preferences…
Now, select “ActionSCript” and there select “ActinScript3.0 Settings..”. This will
open up a popup to add the class paths. Add the above 3 paths here, one by one.Save
them and try publishing again. That should fix your Errors .
Now, to see why you can not scroll ? It seems you have not provided any scrollable
clip to be srolled. This can be done as below. Once you put your scrollbar component
in stage.Select the component and open “Component Inspector” from “Window”
menu (Shift+F7). There is an option to provide the “scrollableClip”, this has to be
filled as the instance name of the MovieClip, you want to scroll.So, put a MovieClip
on Stage, which should be more in height than the scrollbar(otherewise, no point the
scrollbar should active).Give some instance name to the MovieClip. Give teh same
name in the parameter for “scrollableClip” in the component pannel of the scrollbar
component. Now, publish and it should be a working scrollbar

5. daniele Says:
 December 23, 2007 at 6:31 pm
yes now it works !!!
Thank you very much ! Now I study it for create my first component
Thanks thanks thanks

6. Nick Says:
January 1, 2008 at 4:27 am
I’m receiving the following errors
VerifyError: Error #1107: The ABC data is corrupt, attempt to read out of bounds.
ReferenceError: Error #1065: Variable SamScrollBar is not defined.
ReferenceError: Error #1065: Variable samScrollBar_bkup is not defined.
ReferenceError: Error #1065: Variable mc_down is not defined.
ReferenceError: Error #1065: Variable mc_up is not defined.
ReferenceError: Error #1065: Variable mc_slider is not defined.
ReferenceError: Error #1065: Variable mc_sliderBg is not defined.
ReferenceError: Error #1065: Variable MainTimeline is not defined.
any idea what the ABC data is ourrupt is referring to?

7. Nick Says:
January 1, 2008 at 5:07 am
And now the parameters aren’t being saved, ugh. Also after I delete the components
SWCs, they are still in the Components Window. I love how Components are so
straight forward and not overly circuitous and complicated. =o)

8. Nick Says:
January 1, 2008 at 6:05 am
ok, got it working! thanks for the tutorial

9. saumya Says:
January 1, 2008 at 7:50 am
Happy new year
Keep flashing

10. daniele Says:

January 1, 2008 at 4:05 pm
Hi Saumya,
I want create an email form component. I put 3 textbox and 2 button in the assets
movieclip. Now I wonder if I need recreate these obiects in the draw function..
because when I compile the swc I have 3 button and 4 textbox
Maybe I must create only an empty movieclip … but in your tutorial is different..
what Im wrong?
11. saumya Says:
January 1, 2008 at 5:32 pm
hi daniele,
you must understand why we are keeping things in assets layer. If you are reading
carefully, the first frame of assets layer is blank. Only the second frame is having the
component parts. This is just to make sure that our component part classes export
for scripting. Since we have put off export for actionscript from 1st frame while
defining the component parts.
Now, you must create your component parts in “draw()” method, or else you will get
nothing on screen. Since the first frame got only the bounding box and we are not
creating anything with code. Even if we are going to further rectify the component,
the “configUI()” should call “removeChildAt(0)”, which clears of the bounding box
too.So when we reach till draw method, our screen is clear, we should be ready to
start building our component parts. So, yes, you need to create your component
parts in draw method.
Please note , this tutorial is very basic and for the purpose of removing the fear of
AS3 Component and looking inside the process followed in AS3 component creation.
This just explains the basic path in the creation process and the functionalities of
individual functions in the component. Play arround with them as per your liking.

12. ganesh kumar Says:

February 3, 2008 at 11:46 am
hi sam , I dont your m/f
ok,
mr/ms sam
after cunsult yuor site i learnt component creation
but your proccess is lengthy and small-confution and unable to understand yet it is
fine
finallly :what is the exact meaning of your slogoan
i am total fans & flat for your aticals

13. ganesh kumar Says:

February 3, 2008 at 11:49 am
am i able to up load some component examples for domload

14. saumya Says:

February 3, 2008 at 6:20 pm
hi ganesh,
thank you for your kind words. But i can not understand all of your sentences.
1. Regarding the lengthiness, I have tried to make your understanding better.
2. Regarding the site slogan, I think you must have heard that from standard 1 of
your school days. That means if you really want to do something, you will always get
a way to do that.So the intention( or will ) must be there to do something.
15. Harry Says:
April 22, 2008 at 2:25 pm
hi,
I’m having a little problem with the component. None of the properties that I define
with “inspectable” show up in the component inspector…
only ones are see are I suspect default : enabled and visible…
any idea’s?
thx in advance

16. saumya Says:

April 22, 2008 at 7:03 pm
hi Harry,
this is really impossible to comment anything in this regard without looking at your
code. But my suggestion would be just have a look into your code again, may be
there is some thing missing.

17. Jonathon Says:

April 29, 2008 at 1:42 pm
I have the following code yet I can not get these values to appear in the property
inspector. Any ideas?
[Inspectable(name="Main Body Width", type="Number", defaultValue=300)];
public var bodyWidth:Number = 300;
[Inspectable(name = "Main Body Height", type="Number", defaultValue=100)];
public var bodyHeight:Number;
[Inspectable(name = "Scroll Bar Value", type="Number", defaultValue="0")];
public var scrollBarVal:Number;
[Inspectable(name = "Stage Height", type="Number", defaultValue="400")];
public var stageHeight:Number;
[Inspectable(name = "Stage Width", type="Number", defaultValue="750")];
public var stageWidth:Number;
[Inspectable(name = "X Position", type="Number", defaultValue="225")];
public var xPosVal:Number;
[Inspectable(name = "Y Position", type="Number", defaultValue="116")];
public var yPosVal:Number;
[Inspectable(name = "Message Text", type="String", defaultValue="Message Text in
Window")];
public var msgText:String;
[Inspectable(name = "Message Title Text", type="String", defaultValue="Message
Window Title")];
public var titletext:String;
18. Jonathon Says:
April 29, 2008 at 2:56 pm
Nevermind, figured it out. It’s because I have semicolons ending each one and
apparently with inspectables you can’t have that. Thanks.

19. saumya Says:

April 30, 2008 at 4:04 am
Hi Jonathon,
I am happy that you got the answer.
Happy Flashing

20. Rahul M Says:

May 21, 2008 at 9:10 am
Hi cool forum … this is the first time when i have read any forum from top to bottom
— Thanks, saumya

21. saumya Says:

May 21, 2008 at 9:47 am
Hi Rahul,
I am glad that you enjoyed reading it in full.
Thanks for the kind words.

22. Rahul M Says:

May 21, 2008 at 2:16 pm
Hi saumya what a quick reply — u proved that this is most active forum
Can i have your chat id : mine is rahul047@gmail.com & rahul047@yahoo.com wish to
chat with u
Thanks ,

23. Rahul M Says:

May 21, 2008 at 3:07 pm
hi saumya,
i am new to flash world — am working from last 2 month in flash 8 now from last 4
days i have started working in cs3 and i found it more interesting as i can create
components using OOP’s concept — i am having a problem while implementing
package.
———- this is code in as file of drawing multiple lines randomly which i found on net
and thought of implementing it
———————————–
package{
import flash.display.Sprite;
 import flash.events.Event;
public class Practise extends Sprite {
public function Practise( ) {
trace(”1111111″);
graphics.lineStyle(1, 0, 1);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void {
trace(”22222222″);
graphics.lineTo(Math.random( ) * 400, Math.random( ) * 400);
}
}
}
————- ——————————————–
My query :
As per my knowledge there are 2 ways of calling a package
1) By directly giving the class name in the the “Document class” inputbox in the
properties — It worked fine
2) Other way us by importing the class file and the creating the object of the class
and thus calling the constructor of the class which i am really interested in—-
— I failed to do this — the class is called, if i put trace the output is coming but the
graphic lines are not displaying can u help ?
It will be great help as this is currently biggest hurdle for me
regards,

24. saumya Says:

May 22, 2008 at 3:55 am
Hi Rahul,
You must understand the Display list in Flash (Actionscript 3.0) and a little more
about the class and package things. I would suggest, go for essential actiosncript 3.0
book by coolin mook.
Well, to make things clear.In Actionscript 3.0 once you create a display
object(movieclip or sprite etc), you have to tell flash player that display the
thing.This is done with ‘addChild()’ method. So your current ‘Practise’ class actually
makes a display object but then you need to add that to the parent display object.
Ex:
The following two lines of code inside a display object or main time line will create
your lines;
var myLines ractice=new Practice();
this.addChild(myLines);

25. Rahul M Says:

May 22, 2008 at 7:20 am
 Thanks. saumya - cheers

26. Rahul M Says:

June 10, 2008 at 10:00 am
Hi,
is their any what to export content in flash[structure build. eg. image created]
in the form of XML and then again redrawing that using that xml
i am working in as3

27. saumya Says:

June 10, 2008 at 10:08 am
hi Rahul,
this is a topic not related to component creation process, so I will suggest if you can
post it in flashmove forum so that you will get a lot of help from everybody.
The trick is export each pixel information into XML and then re-read the Pixels from
XML and render the image.

28. Rahul M Says:

June 10, 2008 at 12:57 pm
ok thanks

29. Bruce Epstein Says:

June 25, 2008 at 7:32 pm
I followed the instructions, and the SWC Export appears to complete without errors,
but the SWC file is never created.
So there seems to be some silent failure that I can’t track down.
Has anyone had such “silent failures” and do they know any possible causes or
solutions?
Any insights appreciated.

30. Bruce Epstein Says:

June 25, 2008 at 10:22 pm
I seem to have got it working. Best I can tell, the problem was that my component
referred to some external libraries, and perhaps that was consuming too much
memory and preventing it from compiling. It seems to work a lot better now that I
reduced references to external libraries.

31. Sundar Krishnamurthy Says:

July 10, 2008 at 6:19 am
Hi Saumya, great tutorial, thanks for doing this! I tried downloading the RAR file
from the link above but noticed that it is no longer available. Can you please tell
where I can get it?
 Thanks!

32. saumya Says:

July 10, 2008 at 6:28 am
Hi Sunder,
Thanks for your kind words.
Unfortunately, the storage space has been shifted and my old files are gone from
there. I will try to search my computer for the source.If I got them, I will store it at
some location and provide you the link.

33. Sundar Krishnamurthy Says:

July 10, 2008 at 8:02 am
That will be great, thanks for doing that, appreciate it.
Sundar

34. GCC Says:

July 24, 2008 at 5:43 pm
Hi saumya!
I have a little problem
I would like to get the parameters from my MovieClip component in Flash CS3 with AS
3.0. How can I use the variables what I defined in the “Component Definition” panel?
Where can I use these variables in AS?
Thanks for your help!

35. saumya Says:

July 25, 2008 at 6:26 am
hi GCC,
parameters, what you provide in the pannel are simply pointers to the properties of
the component class. So to get the values back in flash, its simply the
“componentObject.property”. By the way, I hope I understand your question
correctly.
happy flashing

36. GCC Says:

July 25, 2008 at 6:50 am
Thanks saumya!
But maybe I’m a noob
I have the variable in the component definition named sizeWidth. In this panel I
defined the class (textboxClass) what I have in a custom as file ( it’s working fine ). I
imported it simply in the first frame. So the code is the following:
import controllers.*;
var myMovieClip:MovieClip = MovieClip(this).textbox_mc;
 var _TEXTBOX:controllers.textboxClass = new controllers.textboxClass (myMovieClip,
50, 50, 220, 10, “orange”, true);
trace(_TEXTBOX.sizeWidth);
I get the following error:
“1119: Access of possibly undefined property sizeWidth through a reference with
static type controllers:textboxClass.”
I would like to use this fla/AS as component, so I need the variables from the
component’s parameters.
I hope you can understand me/my problem!
Thanks for your time!

37. saumya Says:

July 25, 2008 at 8:20 am
hi GCC,
I strongly suggest you to start from the beginning one step at a time. Learn how to
define variables, getters and setters in a class.Then jump into the component
development.That way you will be at home all the time.
Regarding the problem, just check whether
trace(_TEXTBOX);
is returning something. If yes, then you need to understand the “invalidation” model
of the components.Google out “invalidation” for flash components.May be your
component is not getting validated or available for get the values.
If everything is fine, then go ahead and add a setter for the variable inside the
class.Take a look at getters and setters in classes too.
hope it makes sense to you
Flash CS3 component creation : SWC to FLA
By saumya
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.

Lets make the real trick here. The “Component Shim”. Close the “FLA scrollBar.fla” and
open “FLA scrollBar Shim.fla”. This is also having the same structure as the previous
movieclip as we have copied from the same source.We will change this files to make our
component Shim (forget about the name for the time being, think of it as a requirement for
FLA component).
Create a blank Movieclip in Library and name it “sam_scrollbar_shim_source” (name is not
important as long as it does not ovelap with another name in the program). Rightclick the
clip on Library and click “Properties…”, which will open “SymbolProperties”.In the “Symbol
Properties” dialogue box, set this clip to “Export for ActionScript” and uncheck “Export in
first frame”, in the “Class” field, Flash will automatically put a class name,do not modify
it. Click “Ok”, flash will prompt you that “The class definition is not found, so a default
class will be created”, click “Ok”.
Double click the same clip to go inside its symbol editing mode.Create 2 layers with names
as “shim name” and “component parts”.Create 2 frames in both the layers. Put some text
in the “shim” layer.I put it as “Shim”, this is not mandatory, but simply for some visual
reference on stage.You can delete this “Shim” layer too. Now the “component parts” layer
should contain 2 keyframes.Let the first frame be blank.In the second frame, we need to
put all the component parts.So drag each of the movieclip ( which make up the
component;mc_down,mc_slider,mc_sliderBg,mc_up ) to this layer.One more clip we need to
add here is the component movieclip itself.But in the library we do not have a component
movieclip, what we have is one compiled clip and one clip with name
“samScrollBar_bkup”.We could use them, but I want to show you that actually we do not
need a component clip, rather a clip with name same as our component clip and with its
identifier and class same as component clip.So delete “samScrollBar_bkup and the
compiled clip from library.What we have in library is only the component parts.Now create
a movieclip in library with name “samScrollBar”, set it to “Export for ActionScript” and
uncheck “Export in first frame”.In the class field add the class name we used to create the
component “SamScrollBar”. Thats it. Now save the file. Come out of any symbol editing
mode to the main timeline. Now go inside “sam_scrollbar_shim_source” movieclip and on
the second frame of layer “component parts” make sure that you have all of the
component part movieclips along with “samScrollBar” clip is present, if previously not
present, drag each one of the clip to this frame.Come back to main timeline. Rightclick on
“sam_scrollbar_shim_source” movieclip on Library and click on “Convert to Compiled
clip”.That will take some time and will create a clip named “sam_scrollbar_shim_source
SWF” in the Library. Rename this clip to “sam_scrollbar_shim”.
Now open the “FLA scrollBar.fla” file.Copy “sam_scrollbar_shim” clip from “FLA scrollBar
Shim.fla” files library to “FLA scrollBar.fla” files library.
Close the “FLA scrollBar Shim.fla” file. Double click on the “samScrollBar” clip to go inside
it.You should see 2 layers in it, as “avatar” and “assets”.Make another layer in it and drag it
named “Component shim”.Currently this clip has 2 frames, add another frame in the
“Component shim” layer.So on frame 3 of the “Component shim” layer add a keyframe. Do
not make anychanges anywhere else .In the third frame of “Component shim”, put the
“sam_scrollbar_shim” clip, which we just copied from other file. Make sure, your first layer
contains only the “avatar”(bounding box), second frame contains only the
“assets”(component parts) and third frame contains only the “componentShim”.
Come out of the symbol editing mode to the main timeline. Rightclik on “samScrollBar” clip
on library and click on “Component Definition”. That will open “Component Definition”
dialogue box.Do not do anything, just click “Ok”.Thats all .
Now, copy the FLA(FLA scrollBar.fla) to the components directory (typical path is
“C:\Documents and Settings\saumyar\Local Settings\Application Data\Adobe\Flash
CS3\en\Configuration\Components”) and restart flash. You will see your FLA component in
the components panel
Everything else is just good practice. Best practices will include, locking the
“componentShim” layer and “avatar” layer, while making the Shim clip, removing the
graphics present in them. As you see, when we make the scrollbar clip, we simply make an
empty clip and add the same “class” name to it in the exports settings dialogue box. You
can do the same thing for all the component parts too, so that in the component shim there
would be no visual disturbing elements.
I would say, these are the only steps, but there are a lot of things to understand and get
used to. You can make the component in 2 frames too, but for that one need to write some
extra scripts. So the choice is yours, I was just trying to make you understand the basic and
all steps in a V3 component, rest is all yours.

Possibly related posts: (automatically generated)

• Flash CS3 component creation : The process
• AS3 Scrollbar component for MovieClip
• Tools & Code: “How Do I… Create a custom Web user interface for my Flas…
 • RJ45 Jack with Magnetic coupling
This entry was posted on December 11, 2007 at 4:28 am and is filed under Actionscript3, Flash. You can follow
any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own
site.

15 Responses to “Flash CS3 component creation : SWC to FLA”

1. Pablo Says:
February 16, 2008 at 7:16 pm
Good tutorial, perfect, best on the web. Thanks!

2. saumya Says:
February 18, 2008 at 3:43 am
Thank you so much Pablo, and it is indeed a special comment for me as it came in my
Birth Day. So, I will take it as my B’Day present .

3. bigi Says:
February 22, 2008 at 10:29 am
Hello,
i have a big problem. Thank you if guide me.
I created an AS3 project and wanna make it as a component. I created a movie clip
and assign all of my assets and defining the component definitions.
I mean everything is ok and I could convert it as a SWC and also created MXI file from
it. When I install it by extension manager it shows me this is FLA base component
rather than SWC !
I do now know why because this is a compiled clip and no FLA file it has.
Is it possible to describe why it shows FLA base component?
Best,

4. saumya Says:
February 22, 2008 at 5:59 pm
hi bigi,
It would be real tough to say why it is saying an FLA based component without
looking at the source.
You must know that there is a difference between a project and a component. If you
think you can convert a project to a component then I am afraid that is not that
straight forward. If you want to create a component, then follow the path shown in
my posts.

5. Capi Says:
March 12, 2008 at 4:08 pm
Congratz man, to quote the American Idol judges: “You nailed it”
I still think developing FLA components feel more like a hack than a methodology
developed by a respected company like adobe.
but hey, that’s not your fault (i think )
 great tutorial, i hope to put it to use very soon

6. saumya Says:
March 12, 2008 at 6:57 pm
Hi Capi,
thanks for your kind words.

7. Jonathon Says:
May 5, 2008 at 7:33 pm
I’ve done this now but one of my component assets is a button with 3 frames, and a
stop layer action, it cause an error that says it was ignored everytime. How do I
avoid this?
Also, I know you can skin an FLA based component, how would I add skinning to this?

8. saumya Says:
May 6, 2008 at 3:48 am
For a button you need to import other classes while doing your component. The one
and most obvious class is ‘SimpleButton’.Just import this class and it should be fine
or else I have to go through your source code for the component.
This example shows the basic method of creating a component.I hope I will get some
time to write down further, regarding skinning and other aspects of the component.
Till then my suggestion would be join FlashMove or Flash-DB forum and ask the
questions there, I am sure you will never be disappointed.

9. Jonathon Says:
May 6, 2008 at 12:47 pm
Here’s my code:
I am trying to add the ability of skinning through AS like:
window1.setStyle(”lBarSkin”, leftbarsilver);
leftbarsilver being a movieclip in the library exported for as. Any help is greatly
appreciated. Thanks.
Basically this code builds a windows message window.
package {
import fl.controls.ScrollBar;
import fl.controls.UIScrollBar;
import fl.controls.ScrollPolicy;
import fl.controls.ScrollBarDirection;
import fl.controls.TextInput; //Only for ASDocs
import fl.core.InvalidationType;
import fl.core.UIComponent;
import fl.events.ComponentEvent;
import fl.events.ScrollEvent;
import fl.managers.IFocusManager;
import fl.managers.IFocusManagerComponent;
import flash.display.DisplayObject;
import flash.events.Event;
import flash.events.TextEvent;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.events.FocusEvent;
import flash.system.IME;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.text.TextFormat;
import flash.text.TextLineMetrics;
import flash.ui.Keyboard;
import flash.display.*;
import flash.events.*;
import flash.text.*;
import flash.xml.*;
import flash.net.*;
import flash.filters.*;
import flash.geom.*;
import fl.controls.UIScrollBar;
import fl.core.UIComponent;
import fl.controls.ScrollBar;
import fl.controls.ScrollPolicy;
[Event(name="change", type="flash.events.Event")]
[Event(name="textInput", type="flash.events.TextEvent")]
[Event(name= "enter", type="fl.events.ComponentEvent")]
[Event(name="scroll", type="fl.events.ScrollEvent")]
[Style(name="upSkin", type="Class")]
[Style(name="disabledSkin", type="Class")]
[Style(name="textPadding", type="Number", format="Length")]
[Style(name="embedFonts", type="Boolean")]
[Style(name="lBarSkin", type="Class")]
[Style(name="rBarSkin", type="Class")]
[Style(name="tHSkin", type="Class")]
[Style(name="tLSkin", type="Class")]
[Style(name="bBarSkin", type="Class")]
[Style(name="mBodySkin", type="Class")]
[Style(name="rCSkin", type="Class")]
[Style(name="lCSkin", type="Class")]
public class XpMessageWindow extends UIComponent {
protected var _editable:Boolean = true;
protected var _wordWrap:Boolean = true;
protected var _verticalScrollPolicy:String = ScrollPolicy.AUTO;
protected var _windowsThemeColor:String = “Blue”;
protected var _verticalScrollBar:UIScrollBar;
protected var _html:Boolean = false;
protected var _savedHTML:String;
protected var textHasChanged:Boolean = false;
private var defaultIt:TextFormat = new TextFormat(”Arial”, 12, 0×006600, false,
false, false, “”, “”, “left”, 0, 0, 0, 0);
private static var defaultStyles:Object = {
upSkin:”TextArea_upSkin”,
disabledSkin:”TextArea_disabledSkin”,
focusRectSkin:null,
focusRectPadding:null,
textFormat:”defaultIt”, disabledTextFormat:null,
textPadding:3,
embedFonts:false
};
protected static var winDefaultStyles:Object = {
lBarSkin:”leftbar”,
rBarSkin:”rightbar”,
tHSkin:”toplevelblue”,
tLSkin:”lowlevelblue”,
bBarSkin:”bottombar”,
mBodySkin:”mBodyWin”,
rCSkin:”rightcorner”,
lCSkin:”leftcorner”
};
protected static const SCROLL_BAR_STYLES:Object = {
downArrowDisabledSkin:”downArrowDisabledSkin”,
downArrowDownSkin:”downArrowDownSkin”,
downArrowOverSkin:”downArrowOverSkin”,
downArrowUpSkin:”downArrowUpSkin”,
upArrowDisabledSkin:”upArrowDisabledSkin”,
upArrowDownSkin:”upArrowDownSkin”,
upArrowOverSkin:”upArrowOverSkin”,
upArrowUpSkin:”upArrowUpSkin”,
thumbDisabledSkin:”thumbDisabledSkin”,
thumbDownSkin:”thumbDownSkin”,
thumbOverSkin:”thumbOverSkin”,
thumbUpSkin:”thumbUpSkin”,
thumbIcon:”thumbIcon”,
trackDisabledSkin:”trackDisabledSkin”,
trackDownSkin:”trackDownSkin”,
trackOverSkin:”trackOverSkin”,
trackUpSkin:”trackUpSkin”,
repeatDelay:”repeatDelay”,
repeatInterval:”repeatInterval”
};
public static function getStyleDefinition():Object {
return UIComponent.mergeStyles(defaultStyles, ScrollBar.getStyleDefinition());
return winDefaultStyles;
}
public static var createAccessibilityImplementation:Function;
public function XpMessageWindow() {
super();
trace(”new window”);
}
//my variables
public var windowMC:MovieClip;
public var choiceBtnMC:MovieClip;
public var closeBtn:MovieClip;
private var mBody:MovieClip;
private var blueHigh:MovieClip;
private var blueLow:MovieClip;
private var rCorner:MovieClip;
private var lCorner:MovieClip;
private var bBar:MovieClip;
private var rBar:MovieClip;
private var lBar:MovieClip;
private var x_close:MovieClip;
private var backDrop:Sprite;
public var msgTxt:TextField;
private var whiteTitle:TextFormat = new TextFormat();
private var blackTitle:TextFormat = new TextFormat();
private var blackBody:TextFormat = new TextFormat();
private var bodyTxtFormat:TextFormat = new TextFormat();
private var titleTxtFormat:TextFormat = new TextFormat();
//end my variables
//my inspectables
[Inspectable(name="Body Width",type="Number",defaultValue=300)]
public var bodyWidth:Number=300;
[Inspectable(name = "Main Body Height", type="Number", defaultValue=100)]
public var bodyHeight:Number = 100;
[Inspectable(name = "Message Title Text", type="String", defaultValue="Message
Window Title")]
public var titletext:String = “Message Window Title”;
[Inspectable(name = "Window Response Button Text", type="String",
defaultValue="OK")]
public var btnTxt:String = “OK”;
/*[Inspectable(name = "Windows Theme Color", defaultValue="Blue",
enumeration="Blue,Silver,Olive Green")]
public function get windowsThemeColor():String {
return _windowsThemeColor;
}*/
//backdrop or not
[Inspectable(name="Backdrop?",type="Boolean",defaultValue="false")]
public var backDropVar:Boolean = false;
[Inspectable(name="Backdrop Alpha Value",type="Number",defaultValue=.75)]
public var bDAlpha:Number = .75;
[Inspectable(name="BackDrop Color",type="uint",defaultValue=0x000000)]
public var bDColorVal:uint = 0×000000;
//body text format options
[Inspectable(name = "Message Text Font", type="String", defaultValue="Arial")]
public var txtFont:String = “Arial”;
[Inspectable(name = "Message Text Color", type="uint", defaultValue=0x000000)]
public var txtColor:uint = 0×000000;
[Inspectable(name = "Message Text Size", type="Number", defaultValue=12)]
public var txtSize:Number = 12;
//title text format options
[Inspectable(name = "Title Text Font", type="String", defaultValue="Arial")]
public var titleTxtFont:String = “Arial”;
[Inspectable(name = "Title Text Color", type="uint", defaultValue=0x000000)]
public var titleTxtColor:uint = 0xFFFFFF;
[Inspectable(name = "Title Text Size", type="Number", defaultValue=12)]
public var titleTxtSize:Number = 14;
//end my inspectables
public function get verticalScrollBar():UIScrollBar {
return _verticalScrollBar;
}
[Inspectable(defaultValue=true, verbose=1)]
override public function get enabled():Boolean {
return super.enabled;
}
override public function set enabled(value:Boolean):void {
super.enabled = value;
mouseChildren = enabled; //Disables mouseWheel interaction.
invalidate(InvalidationType.STATE);
}
[Inspectable(name="Non-HTML Text",defaultValue="")]
public function get text():String {
return msgTxt.text;
}
public function set text(value:String):void {
if (componentInspectorSetting && value == “”) {
return;
}
msgTxt.text = value;
_html = false;
invalidate(InvalidationType.DATA);
invalidate(InvalidationType.STYLES);
textHasChanged = true;
}
[Inspectable(name="Message Body Text")]
public function get htmlText():String {
return msgTxt.htmlText;
}
public function set htmlText(value:String):void {
if (componentInspectorSetting && value == “”) {
return;
}
if (value == “”) {
text = “”;
return;
}
_html = true;
_savedHTML = value;
msgTxt.htmlText = value;
invalidate(InvalidationType.DATA);
invalidate(InvalidationType.STYLES);
textHasChanged = true;
}
[Inspectable(defaultValue="auto", enumeration="auto,on,off")]
public function get verticalScrollPolicy():String {
return _verticalScrollPolicy;
}
public function set verticalScrollPolicy(value:String):void {
_verticalScrollPolicy = value;
invalidate(InvalidationType.SIZE);
}
public function get verticalScrollPosition():Number {
return msgTxt.scrollV;
}
public function set verticalScrollPosition(value:Number):void {
// We must force a redraw to ensure that the size is up to date.
drawNow();
msgTxt.scrollV = value;
}
public function get textWidth():Number {
drawNow();
return msgTxt.textWidth;
}
public function get textHeight():Number {
drawNow();
return msgTxt.textHeight;
}
public function get length():Number {
return msgTxt.text.length;
}
public function get maxVerticalScrollPosition():int {
return msgTxt.maxScrollV;
}
[Inspectable(name="Word Wrap?",defaultValue="true")]
public function get wordWrap():Boolean {
return _wordWrap;
}
public function set wordWrap(value:Boolean):void {
_wordWrap = value;
invalidate(InvalidationType.STATE);
}
public function getLineMetrics(lineIndex:int):TextLineMetrics {
return msgTxt.getLineMetrics(lineIndex);
}
public function appendText(text:String):void {
windowMC. msgTxt.appendText(text);
invalidate(InvalidationType.DATA);
}
override protected function configUI():void {
super.configUI();
tabChildren = true;
windowMC=new MovieClip();
backDrop=new Sprite();
stage.addChild(backDrop);
stage.addChild(windowMC);
msgTxt = new TextField();
windowMC.addChild(msgTxt);
updateTextFieldType();
_verticalScrollBar = new UIScrollBar();
_verticalScrollBar.name = “V”;
_verticalScrollBar.visible = false;
_verticalScrollBar.focusEnabled = false;
copyStylesToChild(_verticalScrollBar, SCROLL_BAR_STYLES);
_verticalScrollBar.addEventListener(ScrollEvent.SCROLL,handleScroll,false,0,true);
windowMC.addChild(_verticalScrollBar);
msgTxt.addEventListener(TextEvent.TEXT_INPUT, handleTextInput, false, 0, true);
msgTxt.addEventListener(Event.CHANGE, handleChange, false, 0, true);
msgTxt.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown, false, 0,
true);
_verticalScrollBar.scrollTarget = msgTxt;
addEventListener(MouseEvent.MOUSE_WHEEL, handleWheel, false, 0, true);
}
protected function updateTextFieldType():void {
with(windowMC) {
msgTxt.type = (enabled && _editable) ? TextFieldType.INPUT :
TextFieldType.DYNAMIC;
msgTxt.selectable = enabled;
msgTxt.wordWrap = _wordWrap;
msgTxt.multiline = true;
}
}
protected function handleKeyDown(event:KeyboardEvent):void {
if (event.keyCode == Keyboard.ENTER) {
dispatchEvent(new ComponentEvent(ComponentEvent.ENTER, true));
}
}
protected function handleChange(event:Event):void {
event.stopPropagation(); // so you don’t get two change events
dispatchEvent(new Event(Event.CHANGE, true));
invalidate(InvalidationType.DATA);
}
protected function handleTextInput(event:TextEvent):void {
event.stopPropagation();
dispatchEvent(new TextEvent(TextEvent.TEXT_INPUT, true, false, event.text));
}
protected function handleScroll(event:ScrollEvent):void {
dispatchEvent(event);
}
protected function handleWheel(event:MouseEvent):void {
if (!enabled || !_verticalScrollBar.visible) { return; }
_verticalScrollBar.scrollPosition -= event.delta * _verticalScrollBar.lineScrollSize;
dispatchEvent(new ScrollEvent(ScrollBarDirection.VERTICAL, event.delta *
_verticalScrollBar.lineScrollSize, _verticalScrollBar.scrollPosition));
}
protected function setEmbedFont() {
var embed:Object = getStyleValue(”embedFonts”);
if (embed != null) {
msgTxt.embedFonts = embed;
}
}
override protected function draw():void {
trace(’Message Window : draw’);
if (isInvalid(InvalidationType.STATE)) {
updateTextFieldType();
}
if (isInvalid(InvalidationType.STYLES)) {
setStyles();
setEmbedFont();
}
if (isInvalid(InvalidationType.STYLES, InvalidationType.STATE)) {
drawTextFormat();
invalidate(InvalidationType.SIZE, false);
}
if (isInvalid(InvalidationType.SIZE, InvalidationType.DATA)) {
drawLayout();
}
super.draw();
}
protected function setStyles():void {
copyStylesToChild(_verticalScrollBar, SCROLL_BAR_STYLES);
}
protected function drawTextFormat():void {
// Apply a default textformat
var uiStyles:Object = UIComponent.getStyleDefinition();
var defaultTF:TextFormat = enabled ? uiStyles.defaultTextFormat as TextFormat :
uiStyles.defaultDisabledTextFormat as TextFormat;
msgTxt.setTextFormat(defaultTF);
var tf:TextFormat = getStyleValue(enabled?”textFormat”:”disabledTextFormat”) as
TextFormat;
if (tf != null) {
msgTxt.setTextFormat(tf);
} else {
tf = defaultTF;
}
msgTxt.defaultTextFormat = tf;
setEmbedFont();
if (_html) {
msgTxt.htmlText = _savedHTML;
}
}
protected function drawLayout():void {
trace(’Message Window : drawLayout’);
if (backDropVar == true) {
backDrop.graphics.beginFill(bDColorVal, bDAlpha);
backDrop.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
backDrop.graphics.endFill();
}
mBody = new mBodyWin();
blueHigh = new toplevelblue();
blueLow = new lowlevelblue();
rCorner = new rightcorner();
lCorner = new leftcorner();
rBar = new rightbar();
lBar = new leftbar();
bBar = new bottombar();
x_close = new xclose();
windowMC.addChild(mBody);
windowMC.addChild(blueHigh);
windowMC.addChild(blueLow);
windowMC.addChild(rCorner);
windowMC.addChild(lCorner);
windowMC.addChild(bBar);
windowMC.addChild(rBar);
windowMC.addChild(lBar);
windowMC.addChild(x_close);
whiteTitle.color = 0xFFFFFF;
whiteTitle.font = “Arial”;
whiteTitle.size = 14;
blackTitle.color = 0×000000;
blackTitle.font = “Arial”;
blackTitle.size = 14;
blackBody.color = 0×000000;
blackBody.font = “Arial”;
blackBody.size = 12;
bodyTxtFormat.color = txtColor;
bodyTxtFormat.font = txtFont;
bodyTxtFormat.size = txtSize;
titleTxtFormat.color = titleTxtColor;
titleTxtFormat.font = titleTxtFont;
titleTxtFormat.size = titleTxtSize;
with(windowMC) {
mBody.x = 0;
mBody.y = blueLow.y+blueHigh.height+blueLow.height;
mBody.width = bodyWidth;
mBody.height = bodyHeight;
//top half of top blue bar
blueHigh.x = 6.8;
blueHigh.y = 0;
blueHigh.width = mBody.width - rCorner.width - lCorner.width;
//low half of top blue bar
blueLow.x = 0;
blueLow.y = blueHigh.height+blueHigh.y;
blueLow.width = mBody.width;
//Right corner top
rCorner.x = blueHigh.x+blueHigh.width;
rCorner.y = 0;
//left corner top
lCorner.x = 6.8;
lCorner.y = 0;
//bottom blue bar
bBar.x = mBody.x;
bBar.y = mBody.y + mBody.height - bBar.height;
bBar.width = mBody.width;
//left blue bar
lBar.x = mBody.x;
lBar.y = mBody.y;
lBar.height = mBody.height;
//right blue bar
rBar.x = mBody.x+mBody.width;
rBar.y = mBody.y;
rBar.height = mBody.height;
//red x close button
x_close.x = blueLow.width - 25.2;
x_close.y = 5;
//text block
msgTxt.multiline = true;
msgTxt.wordWrap = true;
msgTxt.defaultTextFormat = bodyTxtFormat;
msgTxt.mouseEnabled = false;
msgTxt.x = mBody.x+10;
msgTxt.y = mBody.y+10;
var availHeight:Number = msgTxt.height;
var vScrollBar:Boolean = needVScroll();
// Size and move the scrollBars
if (vScrollBar) {
_verticalScrollBar.visible = true;
_verticalScrollBar.x = msgTxt.width+5;
_verticalScrollBar.y = msgTxt.y;
_verticalScrollBar.height = availHeight;
_verticalScrollBar.visible = true;
_verticalScrollBar.enabled = enabled;
msgTxt.width = mBody.width - 20 - _verticalScrollBar.width;
msgTxt.height = mBody.height - 40;
} else {
_verticalScrollBar.visible = false;
msgTxt.width = mBody.width - 20;
msgTxt.height = mBody.height - 40;
//msgTxt.autoSize = TextFieldAutoSize.CENTER;
msgTxt.defaultTextFormat = bodyTxtFormat;
}
//Title Text Block
var titleTxt:TextField = new TextField();
addChild(titleTxt);
titleTxt.defaultTextFormat = titleTxtFormat;
titleTxt.mouseEnabled = false;
titleTxt.x = 1.8;
titleTxt.y = 4.0;
titleTxt.width = blueLow.width - x_close.width - 25.2;
if (titletext != “”) {
titleTxt.htmlText = ““+titletext+”“;
titleTxt.defaultTextFormat = titleTxtFormat;
} else {
titleTxt.text = “”;
titleTxt.defaultTextFormat = titleTxtFormat;
}
//choice button
var newBtn:choicebtn = new choicebtn();
windowMC.addChild(newBtn);
choiceBtnMC = new MovieClip();
choiceBtnMC = newBtn;
choiceBtnMC.x = (mBody.width/2) - (choiceBtnMC.width/2);
choiceBtnMC.y = mBody.height;
choiceBtnMC.choiceTxt.text = btnTxt;
choiceBtnMC.mouseChildren = false;
choiceBtnMC.addEventListener(MouseEvent.ROLL_OVER, mouseOverHandler);
choiceBtnMC.addEventListener(MouseEvent.ROLL_OUT, mouseOutHandler);
choiceBtnMC.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
//Red X Button
closeBtn = new MovieClip();
closeBtn = x_close;
closeBtn.mouseChildren = false;
closeBtn.addEventListener(MouseEvent.ROLL_OVER, mouseOverHandler);
closeBtn.addEventListener(MouseEvent.ROLL_OUT, mouseOutHandler);
closeBtn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
//}
blueHigh.addEventListener(MouseEvent.MOUSE_DOWN, windowStartDrag);
blueLow.addEventListener(MouseEvent.MOUSE_DOWN, windowStartDrag);
lCorner.addEventListener(MouseEvent.MOUSE_DOWN, windowStartDrag);
rCorner.addEventListener(MouseEvent.MOUSE_DOWN, windowStartDrag);
blueHigh.addEventListener(MouseEvent.MOUSE_UP, windowStopDrag);
blueLow.addEventListener(MouseEvent.MOUSE_UP, windowStopDrag);
lCorner.addEventListener(MouseEvent.MOUSE_UP, windowStopDrag);
rCorner.addEventListener(MouseEvent.MOUSE_UP, windowStopDrag);
}
windowMC.x = (stage.stageWidth-bodyWidth)/2;
windowMC.y = (stage.stageHeight-bodyHeight)/2;
windowMC.swapChildren(msgTxt, mBody);
windowMC.swapChildren(msgTxt, _verticalScrollBar);
updateScrollBars();
addEventListener(Event.ENTER_FRAME, delayedLayoutUpdate, false, 0, true);
}
protected function delayedLayoutUpdate(event:Event):void {
if (textHasChanged) {
textHasChanged = false;
drawLayout();
return;
}
removeEventListener(Event.ENTER_FRAME, delayedLayoutUpdate);
}
protected function updateScrollBars() {
_verticalScrollBar.update();
_verticalScrollBar.enabled = enabled;
_verticalScrollBar.drawNow();
}
protected function needVScroll():Boolean {
if (windowMC._verticalScrollPolicy == ScrollPolicy.OFF) { return false; }
if (windowMC._verticalScrollPolicy == ScrollPolicy.ON) { return true; }
return (msgTxt.maxScrollV > 1);
}
/////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////
//my functions
private function mouseOverHandler(evt:Event):void {
evt.target.gotoAndStop(2);
}
private function mouseOutHandler(evt:Event):void {
evt.target.gotoAndStop(1);
}
private function mouseDownHandler(evt:Event):void {
evt.target.gotoAndStop(3);
 evt.target.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
private function mouseUpHandler(evt:Event):void {
evt.target.gotoAndStop(1);
stage.removeChild(windowMC);
stage.removeChild(backDrop);
}
private function closeHandler(evt:Event):void {
stage.removeChild(windowMC);
stage.removeChild(backDrop);
}////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////
private function windowStartDrag(evt:Event):void {
evt.target.parent.startDrag();
}
private function windowStopDrag(evt:Event):void {
evt.target.parent.stopDrag();
}
//end my functions
}
}

10. Chetan Sachdev Says:

September 13, 2008 at 4:43 pm
Hello Saumya
I have developed a component in Flash CS3 which uses Button, TextArea and
TextInput component of Flash CS3. My problem is When I deploy (paste my
component in Components folder); with my component it also shows those three
(Button, TextInput and TextArea) components. Could you please tell me a
workaround so that those three components are not displayed.
Looking forward to your response.
–
Chetan Sachdev

11. saumya Says:

September 13, 2008 at 5:39 pm
hi Chetan,
This visibility has something to do with “Component Definition” pannel.There is a
setting called “Display in Components pannel”.Just see if turning it on and off has
any effect on the result you wanted. I am very sure the setting is somewhere here
only.At the time I used to create these components I also came across the same kind
of problem and found the fix here somewhere. All the best and share your
experience.

12. Chetan Sachdev Says:

September 14, 2008 at 7:50 pm
 @Saumya
I tried to uncheck “Display in Components Panel”, then it stops displaying my
component but it displays the rest of them which are used to develop it
I would be pleased If you could look into one of your source file and tell me how to
do that. I have tried almost all combinations but no success.
–
Chetan Sachdev

13. Anissa Says:

September 15, 2008 at 3:06 am
Thank you for this tutorial, I’ve been struggling for a few days to make a custom
component and this is the first tutorial I’ve found which actually covers all the steps.
You are a life saver!

14. saumya Says:

September 15, 2008 at 5:33 am
Thank you Anissa for your kind words. This gives me a lot of enthusiasm to me.

15. Chetan Sachdev Says:

December 3, 2008 at 8:35 am
@saumya
To fix my problem, I compiled internal components again with “Display in
Components Panel” unchecked. I hope this would be of help for someone
–
Chetan Sachdev