Flash CS3 component creation : introductionBy 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 creation1. with Framework2. without FrameworkOk, 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 aspublic class SamScrollBar extends UIComponentOn the other hand a component not using component framework will start aspublic 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.html2.http://www.flashbrighton.org/wordpress/?p=31

3.http://www.flashgamer.com/2007/12/inspectable_metadata.html4.http://www.jumpeyecomponents.com/blog/2007/07/13/create-fla-components-for-flash-cs35.http://flexion.wordpress.com/2007/06/27/building-flash-cs3-components

Flash CS3 component creation : Getting into itBy 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…..…..

//Lastlinesuper.draw();//mandatory call}//Best parctice is to have this method reside herepublic 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 processBy 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 : ‘);

//Lastlinesuper.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 belowprotected override function draw():void{trace(’SamScrollBar : draw : ‘+totalHeight);//creates component partsup_mc=new mc_up();down_mc=new mc_down();sliderBg_mc=new mc_sliderBg();slider_mc=new mc_slider();//adds component parts to display listaddChild(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 propertiesprivate 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 propertiesprivate 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 partsup_mc=new mc_up();down_mc=new mc_down();sliderBg_mc=new mc_sliderBg();slider_mc=new mc_slider();//adds component parts to display listaddChild(up_mc);addChild(down_mc);addChild(sliderBg_mc);addChild(slider_mc);

//Lastlinesuper.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 advanceVerifyError: 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 toEdit>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 whethertrace(_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 FLABy 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 ASDocsimport 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 variablespublic 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 eventsdispatchEvent(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 textformatvar 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 barblueHigh.x = 6.8;blueHigh.y = 0;blueHigh.width = mBody.width - rCorner.width - lCorner.width;//low half of top blue barblueLow.x = 0;blueLow.y = blueHigh.height+blueHigh.y;blueLow.width = mBody.width;//Right corner toprCorner.x = blueHigh.x+blueHigh.width;rCorner.y = 0;//left corner toplCorner.x = 6.8;lCorner.y = 0;//bottom blue barbBar.x = mBody.x;bBar.y = mBody.y + mBody.height - bBar.height;bBar.width = mBody.width;//left blue barlBar.x = mBody.x;lBar.y = mBody.y;lBar.height = mBody.height;//right blue barrBar.x = mBody.x+mBody.width;rBar.y = mBody.y;rBar.height = mBody.height;//red x close buttonx_close.x = blueLow.width - 25.2;x_close.y = 5;//text blockmsgTxt.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 scrollBarsif (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 Blockvar 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 buttonvar 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 ButtoncloseBtn = 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 functionsprivate 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 SaumyaI 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

@SaumyaI 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

@saumyaTo 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