Flash CS3 component creation : The process

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

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

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

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

}
}

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 πŸ™‚ πŸ˜‰

Advertisements

Author: saumya

designer / developer / maker / educator @saumya

43 thoughts on “Flash CS3 component creation : The process”

  1. 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. πŸ™‚ 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

  3. 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 πŸ™‚

  4. yes now it works πŸ™‚ !!!
    Thank you very much ! Now I study it for create my first component πŸ™‚
    Thanks thanks thanks

  5. 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?

  6. 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)

  7. 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?

  8. 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. πŸ™‚

  9. 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

  10. 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.

  11. 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

  12. 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.

  13. 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;

  14. Nevermind, figured it out. It’s because I have semicolons ending each one and apparently with inspectables you can’t have that. Thanks.

  15. Hi cool forum … this is the first time when i have read any forum from top to bottom — Thanks, saumya

  16. 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,

  17. 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:Practice=new Practice();
    this.addChild(myLines);

    πŸ™‚

  18. 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

  19. 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.

  20. 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.

  21. 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.

  22. 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!

  23. 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.

  24. 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!

  25. 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

  26. 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! πŸ™‚

  27. 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

  28. HI Saumya
    Really this tutorial is fine and fantastic and i followed everything as per ur instructions and swc created,and dragged in new file and created a movieclip sized stageHeight(550 px) but i didn’t able to scroll the movieClip (instance name and scrollableClip name is same) did u help me please, if possible please give me the link to the file.Thank U.

    —–Balaji.M(-_-)——

  29. Hi Saumya,
    I’m not a pro in AS3. But my job demands me, that I should make some components.

    I wish to know how/what to code for getting values of variables from the Parameters tab in Flash. And how to add an icon for the created SWC which will be shown in the components panel.

    Thank You.

  30. Hi Saumya, could you please provide the link to the RAR file, since it is no longer available, or e-mail it to me. I went through the whole tutorial, and than saw that the link was broken 😦

  31. Hi Saumya, thanks a lot to make a really good and complete tutorial about how to make a flash cs3 component. I was very frustrated, because i searched many times in google, and read lot of page but i could make a functional component.

    So 3 year after your posts i want to know if is possible that you send me te rar file with the source to finish to understand the entire process.

    Again thanks for your tutorial…

    AdriΓ‘n.

  32. I’m with Adrian Saumya. It appears that your code links are dead and was wondering if I could get the source for the whole project. It would help me out a lot. Thanks man.

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s