Flash CS3 component creation : SWC to FLA

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

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


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

Advertisements

18 thoughts on “Flash CS3 component creation : SWC to FLA

  1. 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 :) .

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

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

  4. 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 :P)

    great tutorial, i hope to put it to use very soon

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

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

  7. Here’s my code:

    I am trying to add the ability of skinning through AS like:

    window1.setStyle(“lBarSkin”, leftbarsilver);

    leftbarsilver being a movieclip in the library exported for as. Any help is greatly appreciated. Thanks.

    Basically this code builds a windows message window.

    package {
    import fl.controls.ScrollBar;
    import fl.controls.UIScrollBar;
    import fl.controls.ScrollPolicy;
    import fl.controls.ScrollBarDirection;
    import fl.controls.TextInput; //Only for ASDocs
    import fl.core.InvalidationType;
    import fl.core.UIComponent;
    import fl.events.ComponentEvent;
    import fl.events.ScrollEvent;
    import fl.managers.IFocusManager;
    import fl.managers.IFocusManagerComponent;
    import flash.display.DisplayObject;
    import flash.events.Event;
    import flash.events.TextEvent;
    import flash.events.KeyboardEvent;
    import flash.events.MouseEvent;
    import flash.events.FocusEvent;
    import flash.system.IME;
    import flash.text.TextField;
    import flash.text.TextFieldType;
    import flash.text.TextFormat;
    import flash.text.TextLineMetrics;
    import flash.ui.Keyboard;

    import flash.display.*;
    import flash.events.*;
    import flash.text.*;
    import flash.xml.*;
    import flash.net.*;
    import flash.filters.*;
    import flash.geom.*;
    import fl.controls.UIScrollBar;
    import fl.core.UIComponent;

    import fl.controls.ScrollBar;
    import fl.controls.ScrollPolicy;

    [Event(name=”change”, type=”flash.events.Event”)]

    [Event(name=”textInput”, type=”flash.events.TextEvent”)]

    [Event(name= “enter”, type=”fl.events.ComponentEvent”)]

    [Event(name=”scroll”, type=”fl.events.ScrollEvent”)]

    [Style(name=”upSkin”, type=”Class”)]

    [Style(name=”disabledSkin”, type=”Class”)]

    [Style(name=”textPadding”, type=”Number”, format=”Length”)]

    [Style(name=”embedFonts”, type=”Boolean”)]

    [Style(name=”lBarSkin”, type=”Class”)]
    [Style(name=”rBarSkin”, type=”Class”)]
    [Style(name=”tHSkin”, type=”Class”)]
    [Style(name=”tLSkin”, type=”Class”)]
    [Style(name=”bBarSkin”, type=”Class”)]
    [Style(name=”mBodySkin”, type=”Class”)]
    [Style(name=”rCSkin”, type=”Class”)]
    [Style(name=”lCSkin”, type=”Class”)]

    public class XpMessageWindow extends UIComponent {

    protected var _editable:Boolean = true;

    protected var _wordWrap:Boolean = true;

    protected var _verticalScrollPolicy:String = ScrollPolicy.AUTO;

    protected var _windowsThemeColor:String = “Blue”;

    protected var _verticalScrollBar:UIScrollBar;

    protected var _html:Boolean = false;

    protected var _savedHTML:String;

    protected var textHasChanged:Boolean = false;

    private var defaultIt:TextFormat = new TextFormat(“Arial”, 12, 0x006600, false, false, false, “”, “”, “left”, 0, 0, 0, 0);

    private static var defaultStyles:Object = {
    upSkin:”TextArea_upSkin”,
    disabledSkin:”TextArea_disabledSkin”,
    focusRectSkin:null,
    focusRectPadding:null,
    textFormat:”defaultIt”, disabledTextFormat:null,
    textPadding:3,
    embedFonts:false
    };

    protected static var winDefaultStyles:Object = {
    lBarSkin:”leftbar”,
    rBarSkin:”rightbar”,
    tHSkin:”toplevelblue”,
    tLSkin:”lowlevelblue”,
    bBarSkin:”bottombar”,
    mBodySkin:”mBodyWin”,
    rCSkin:”rightcorner”,
    lCSkin:”leftcorner”
    };

    protected static const SCROLL_BAR_STYLES:Object = {
    downArrowDisabledSkin:”downArrowDisabledSkin”,
    downArrowDownSkin:”downArrowDownSkin”,
    downArrowOverSkin:”downArrowOverSkin”,
    downArrowUpSkin:”downArrowUpSkin”,
    upArrowDisabledSkin:”upArrowDisabledSkin”,
    upArrowDownSkin:”upArrowDownSkin”,
    upArrowOverSkin:”upArrowOverSkin”,
    upArrowUpSkin:”upArrowUpSkin”,
    thumbDisabledSkin:”thumbDisabledSkin”,
    thumbDownSkin:”thumbDownSkin”,
    thumbOverSkin:”thumbOverSkin”,
    thumbUpSkin:”thumbUpSkin”,
    thumbIcon:”thumbIcon”,
    trackDisabledSkin:”trackDisabledSkin”,
    trackDownSkin:”trackDownSkin”,
    trackOverSkin:”trackOverSkin”,
    trackUpSkin:”trackUpSkin”,
    repeatDelay:”repeatDelay”,
    repeatInterval:”repeatInterval”
    };

    public static function getStyleDefinition():Object {
    return UIComponent.mergeStyles(defaultStyles, ScrollBar.getStyleDefinition());
    return winDefaultStyles;
    }

    public static var createAccessibilityImplementation:Function;

    public function XpMessageWindow() {
    super();
    trace(“new window”);
    }
    //my variables
    public var windowMC:MovieClip;
    public var choiceBtnMC:MovieClip;
    public var closeBtn:MovieClip;

    private var mBody:MovieClip;
    private var blueHigh:MovieClip;
    private var blueLow:MovieClip;
    private var rCorner:MovieClip;
    private var lCorner:MovieClip;
    private var bBar:MovieClip;
    private var rBar:MovieClip;
    private var lBar:MovieClip;
    private var x_close:MovieClip;

    private var backDrop:Sprite;

    public var msgTxt:TextField;

    private var whiteTitle:TextFormat = new TextFormat();

    private var blackTitle:TextFormat = new TextFormat();

    private var blackBody:TextFormat = new TextFormat();

    private var bodyTxtFormat:TextFormat = new TextFormat();

    private var titleTxtFormat:TextFormat = new TextFormat();

    //end my variables

    //my inspectables
    [Inspectable(name=”Body Width”,type=”Number”,defaultValue=300)]
    public var bodyWidth:Number=300;

    [Inspectable(name = “Main Body Height”, type=”Number”, defaultValue=100)]
    public var bodyHeight:Number = 100;

    [Inspectable(name = “Message Title Text”, type=”String”, defaultValue=”Message Window Title”)]
    public var titletext:String = “Message Window Title”;

    [Inspectable(name = “Window Response Button Text”, type=”String”, defaultValue=”OK”)]
    public var btnTxt:String = “OK”;

    /*[Inspectable(name = “Windows Theme Color”, defaultValue=”Blue”, enumeration=”Blue,Silver,Olive Green”)]
    public function get windowsThemeColor():String {
    return _windowsThemeColor;
    }*/

    //backdrop or not
    [Inspectable(name=”Backdrop?”,type=”Boolean”,defaultValue=”false”)]
    public var backDropVar:Boolean = false;

    [Inspectable(name=”Backdrop Alpha Value”,type=”Number”,defaultValue=.75)]
    public var bDAlpha:Number = .75;

    [Inspectable(name=”BackDrop Color”,type=”uint”,defaultValue=0x000000)]
    public var bDColorVal:uint = 0x000000;

    //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 = 0x000000;

    [Inspectable(name = “Message Text Size”, type=”Number”, defaultValue=12)]
    public var txtSize:Number = 12;

    //title text format options
    [Inspectable(name = “Title Text Font”, type=”String”, defaultValue=”Arial”)]
    public var titleTxtFont:String = “Arial”;

    [Inspectable(name = “Title Text Color”, type=”uint”, defaultValue=0x000000)]
    public var titleTxtColor:uint = 0xFFFFFF;

    [Inspectable(name = “Title Text Size”, type=”Number”, defaultValue=12)]
    public var titleTxtSize:Number = 14;
    //end my inspectables

    public function get verticalScrollBar():UIScrollBar {
    return _verticalScrollBar;
    }

    [Inspectable(defaultValue=true, verbose=1)]

    override public function get enabled():Boolean {
    return super.enabled;
    }

    override public function set enabled(value:Boolean):void {
    super.enabled = value;
    mouseChildren = enabled; //Disables mouseWheel interaction.
    invalidate(InvalidationType.STATE);
    }

    [Inspectable(name=”Non-HTML Text”,defaultValue=””)]

    public function get text():String {
    return msgTxt.text;
    }

    public function set text(value:String):void {
    if (componentInspectorSetting && value == “”) {
    return;
    }

    msgTxt.text = value;
    _html = false;
    invalidate(InvalidationType.DATA);
    invalidate(InvalidationType.STYLES);
    textHasChanged = true;
    }

    [Inspectable(name=”Message Body Text”)]

    public function get htmlText():String {
    return msgTxt.htmlText;
    }

    public function set htmlText(value:String):void {
    if (componentInspectorSetting && value == “”) {
    return;
    }
    if (value == “”) {
    text = “”;
    return;
    }
    _html = true;
    _savedHTML = value;
    msgTxt.htmlText = value;
    invalidate(InvalidationType.DATA);
    invalidate(InvalidationType.STYLES);
    textHasChanged = true;
    }

    [Inspectable(defaultValue=”auto”, enumeration=”auto,on,off”)]

    public function get verticalScrollPolicy():String {
    return _verticalScrollPolicy;
    }

    public function set verticalScrollPolicy(value:String):void {
    _verticalScrollPolicy = value;
    invalidate(InvalidationType.SIZE);
    }

    public function get verticalScrollPosition():Number {
    return msgTxt.scrollV;
    }

    public function set verticalScrollPosition(value:Number):void {
    // We must force a redraw to ensure that the size is up to date.
    drawNow();
    msgTxt.scrollV = value;
    }

    public function get textWidth():Number {
    drawNow();
    return msgTxt.textWidth;
    }

    public function get textHeight():Number {
    drawNow();
    return msgTxt.textHeight;
    }

    public function get length():Number {
    return msgTxt.text.length;
    }

    public function get maxVerticalScrollPosition():int {
    return msgTxt.maxScrollV;
    }

    [Inspectable(name=”Word Wrap?”,defaultValue=”true”)]

    public function get wordWrap():Boolean {
    return _wordWrap;
    }

    public function set wordWrap(value:Boolean):void {
    _wordWrap = value;
    invalidate(InvalidationType.STATE);
    }

    public function getLineMetrics(lineIndex:int):TextLineMetrics {
    return msgTxt.getLineMetrics(lineIndex);
    }

    public function appendText(text:String):void {
    windowMC. msgTxt.appendText(text);
    invalidate(InvalidationType.DATA);
    }

    override protected function configUI():void {
    super.configUI();
    tabChildren = true;

    windowMC=new MovieClip();
    backDrop=new Sprite();
    stage.addChild(backDrop);
    stage.addChild(windowMC);

    msgTxt = new TextField();
    windowMC.addChild(msgTxt);
    updateTextFieldType();

    _verticalScrollBar = new UIScrollBar();
    _verticalScrollBar.name = “V”;
    _verticalScrollBar.visible = false;
    _verticalScrollBar.focusEnabled = false;
    copyStylesToChild(_verticalScrollBar, SCROLL_BAR_STYLES);
    _verticalScrollBar.addEventListener(ScrollEvent.SCROLL,handleScroll,false,0,true);
    windowMC.addChild(_verticalScrollBar);

    msgTxt.addEventListener(TextEvent.TEXT_INPUT, handleTextInput, false, 0, true);
    msgTxt.addEventListener(Event.CHANGE, handleChange, false, 0, true);
    msgTxt.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown, false, 0, true);

    _verticalScrollBar.scrollTarget = msgTxt;
    addEventListener(MouseEvent.MOUSE_WHEEL, handleWheel, false, 0, true);
    }

    protected function updateTextFieldType():void {
    with(windowMC) {
    msgTxt.type = (enabled && _editable) ? TextFieldType.INPUT : TextFieldType.DYNAMIC;
    msgTxt.selectable = enabled;
    msgTxt.wordWrap = _wordWrap;
    msgTxt.multiline = true;
    }
    }

    protected function handleKeyDown(event:KeyboardEvent):void {
    if (event.keyCode == Keyboard.ENTER) {
    dispatchEvent(new ComponentEvent(ComponentEvent.ENTER, true));
    }
    }

    protected function handleChange(event:Event):void {
    event.stopPropagation(); // so you don’t get two change events
    dispatchEvent(new Event(Event.CHANGE, true));
    invalidate(InvalidationType.DATA);
    }

    protected function handleTextInput(event:TextEvent):void {
    event.stopPropagation();
    dispatchEvent(new TextEvent(TextEvent.TEXT_INPUT, true, false, event.text));
    }

    protected function handleScroll(event:ScrollEvent):void {
    dispatchEvent(event);
    }

    protected function handleWheel(event:MouseEvent):void {
    if (!enabled || !_verticalScrollBar.visible) { return; }
    _verticalScrollBar.scrollPosition -= event.delta * _verticalScrollBar.lineScrollSize;
    dispatchEvent(new ScrollEvent(ScrollBarDirection.VERTICAL, event.delta * _verticalScrollBar.lineScrollSize, _verticalScrollBar.scrollPosition));
    }

    protected function setEmbedFont() {
    var embed:Object = getStyleValue(“embedFonts”);
    if (embed != null) {
    msgTxt.embedFonts = embed;
    }
    }

    override protected function draw():void {
    trace(‘Message Window : draw’);
    if (isInvalid(InvalidationType.STATE)) {
    updateTextFieldType();
    }

    if (isInvalid(InvalidationType.STYLES)) {
    setStyles();
    setEmbedFont();
    }

    if (isInvalid(InvalidationType.STYLES, InvalidationType.STATE)) {
    drawTextFormat();
    invalidate(InvalidationType.SIZE, false);
    }

    if (isInvalid(InvalidationType.SIZE, InvalidationType.DATA)) {
    drawLayout();
    }

    super.draw();

    }

    protected function setStyles():void {
    copyStylesToChild(_verticalScrollBar, SCROLL_BAR_STYLES);
    }

    protected function drawTextFormat():void {
    // Apply a default textformat
    var uiStyles:Object = UIComponent.getStyleDefinition();
    var defaultTF:TextFormat = enabled ? uiStyles.defaultTextFormat as TextFormat : uiStyles.defaultDisabledTextFormat as TextFormat;
    msgTxt.setTextFormat(defaultTF);

    var tf:TextFormat = getStyleValue(enabled?”textFormat”:”disabledTextFormat”) as TextFormat;
    if (tf != null) {
    msgTxt.setTextFormat(tf);
    } else {
    tf = defaultTF;
    }
    msgTxt.defaultTextFormat = tf;

    setEmbedFont();
    if (_html) {
    msgTxt.htmlText = _savedHTML;
    }
    }

    protected function drawLayout():void {
    trace(‘Message Window : drawLayout’);
    if (backDropVar == true) {
    backDrop.graphics.beginFill(bDColorVal, bDAlpha);
    backDrop.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
    backDrop.graphics.endFill();
    }
    mBody = new mBodyWin();
    blueHigh = new toplevelblue();
    blueLow = new lowlevelblue();
    rCorner = new rightcorner();
    lCorner = new leftcorner();
    rBar = new rightbar();
    lBar = new leftbar();
    bBar = new bottombar();
    x_close = new xclose();
    windowMC.addChild(mBody);
    windowMC.addChild(blueHigh);
    windowMC.addChild(blueLow);
    windowMC.addChild(rCorner);
    windowMC.addChild(lCorner);
    windowMC.addChild(bBar);
    windowMC.addChild(rBar);
    windowMC.addChild(lBar);
    windowMC.addChild(x_close);
    whiteTitle.color = 0xFFFFFF;
    whiteTitle.font = “Arial”;
    whiteTitle.size = 14;

    blackTitle.color = 0x000000;
    blackTitle.font = “Arial”;
    blackTitle.size = 14;

    blackBody.color = 0x000000;
    blackBody.font = “Arial”;
    blackBody.size = 12;

    bodyTxtFormat.color = txtColor;
    bodyTxtFormat.font = txtFont;
    bodyTxtFormat.size = txtSize;

    titleTxtFormat.color = titleTxtColor;
    titleTxtFormat.font = titleTxtFont;
    titleTxtFormat.size = titleTxtSize;

    with(windowMC) {
    mBody.x = 0;
    mBody.y = blueLow.y+blueHigh.height+blueLow.height;
    mBody.width = bodyWidth;
    mBody.height = bodyHeight;
    //top half of top blue bar
    blueHigh.x = 6.8;
    blueHigh.y = 0;
    blueHigh.width = mBody.width – rCorner.width – lCorner.width;
    //low half of top blue bar
    blueLow.x = 0;
    blueLow.y = blueHigh.height+blueHigh.y;
    blueLow.width = mBody.width;
    //Right corner top
    rCorner.x = blueHigh.x+blueHigh.width;
    rCorner.y = 0;
    //left corner top
    lCorner.x = 6.8;
    lCorner.y = 0;
    //bottom blue bar
    bBar.x = mBody.x;
    bBar.y = mBody.y + mBody.height – bBar.height;
    bBar.width = mBody.width;
    //left blue bar
    lBar.x = mBody.x;
    lBar.y = mBody.y;
    lBar.height = mBody.height;
    //right blue bar
    rBar.x = mBody.x+mBody.width;
    rBar.y = mBody.y;
    rBar.height = mBody.height;
    //red x close button
    x_close.x = blueLow.width – 25.2;
    x_close.y = 5;
    //text block
    msgTxt.multiline = true;
    msgTxt.wordWrap = true;
    msgTxt.defaultTextFormat = bodyTxtFormat;
    msgTxt.mouseEnabled = false;
    msgTxt.x = mBody.x+10;
    msgTxt.y = mBody.y+10;

    var availHeight:Number = msgTxt.height;
    var vScrollBar:Boolean = needVScroll();

    // Size and move the scrollBars
    if (vScrollBar) {
    _verticalScrollBar.visible = true;
    _verticalScrollBar.x = msgTxt.width+5;
    _verticalScrollBar.y = msgTxt.y;
    _verticalScrollBar.height = availHeight;
    _verticalScrollBar.visible = true;
    _verticalScrollBar.enabled = enabled;
    msgTxt.width = mBody.width – 20 – _verticalScrollBar.width;
    msgTxt.height = mBody.height – 40;
    } else {
    _verticalScrollBar.visible = false;
    msgTxt.width = mBody.width – 20;
    msgTxt.height = mBody.height – 40;
    //msgTxt.autoSize = TextFieldAutoSize.CENTER;
    msgTxt.defaultTextFormat = bodyTxtFormat;
    }
    //Title Text Block
    var titleTxt:TextField = new TextField();
    addChild(titleTxt);
    titleTxt.defaultTextFormat = titleTxtFormat;
    titleTxt.mouseEnabled = false;
    titleTxt.x = 1.8;
    titleTxt.y = 4.0;
    titleTxt.width = blueLow.width – x_close.width – 25.2;
    if (titletext != “”) {
    titleTxt.htmlText = ““+titletext+”“;
    titleTxt.defaultTextFormat = titleTxtFormat;
    } else {
    titleTxt.text = “”;
    titleTxt.defaultTextFormat = titleTxtFormat;
    }
    //choice button
    var newBtn:choicebtn = new choicebtn();
    windowMC.addChild(newBtn);
    choiceBtnMC = new MovieClip();
    choiceBtnMC = newBtn;
    choiceBtnMC.x = (mBody.width/2) – (choiceBtnMC.width/2);
    choiceBtnMC.y = mBody.height;
    choiceBtnMC.choiceTxt.text = btnTxt;
    choiceBtnMC.mouseChildren = false;
    choiceBtnMC.addEventListener(MouseEvent.ROLL_OVER, mouseOverHandler);
    choiceBtnMC.addEventListener(MouseEvent.ROLL_OUT, mouseOutHandler);
    choiceBtnMC.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
    //Red X Button
    closeBtn = new MovieClip();
    closeBtn = x_close;
    closeBtn.mouseChildren = false;
    closeBtn.addEventListener(MouseEvent.ROLL_OVER, mouseOverHandler);
    closeBtn.addEventListener(MouseEvent.ROLL_OUT, mouseOutHandler);
    closeBtn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
    //}
    blueHigh.addEventListener(MouseEvent.MOUSE_DOWN, windowStartDrag);
    blueLow.addEventListener(MouseEvent.MOUSE_DOWN, windowStartDrag);
    lCorner.addEventListener(MouseEvent.MOUSE_DOWN, windowStartDrag);
    rCorner.addEventListener(MouseEvent.MOUSE_DOWN, windowStartDrag);
    blueHigh.addEventListener(MouseEvent.MOUSE_UP, windowStopDrag);
    blueLow.addEventListener(MouseEvent.MOUSE_UP, windowStopDrag);
    lCorner.addEventListener(MouseEvent.MOUSE_UP, windowStopDrag);
    rCorner.addEventListener(MouseEvent.MOUSE_UP, windowStopDrag);
    }
    windowMC.x = (stage.stageWidth-bodyWidth)/2;
    windowMC.y = (stage.stageHeight-bodyHeight)/2;
    windowMC.swapChildren(msgTxt, mBody);
    windowMC.swapChildren(msgTxt, _verticalScrollBar);

    updateScrollBars();

    addEventListener(Event.ENTER_FRAME, delayedLayoutUpdate, false, 0, true);
    }

    protected function delayedLayoutUpdate(event:Event):void {
    if (textHasChanged) {
    textHasChanged = false;
    drawLayout();
    return;
    }
    removeEventListener(Event.ENTER_FRAME, delayedLayoutUpdate);
    }

    protected function updateScrollBars() {
    _verticalScrollBar.update();
    _verticalScrollBar.enabled = enabled;
    _verticalScrollBar.drawNow();
    }

    protected function needVScroll():Boolean {
    if (windowMC._verticalScrollPolicy == ScrollPolicy.OFF) { return false; }
    if (windowMC._verticalScrollPolicy == ScrollPolicy.ON) { return true; }
    return (msgTxt.maxScrollV > 1);
    }

    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //my functions
    private function mouseOverHandler(evt:Event):void {
    evt.target.gotoAndStop(2);
    }
    private function mouseOutHandler(evt:Event):void {
    evt.target.gotoAndStop(1);
    }
    private function mouseDownHandler(evt:Event):void {
    evt.target.gotoAndStop(3);
    evt.target.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
    }
    private function mouseUpHandler(evt:Event):void {
    evt.target.gotoAndStop(1);
    stage.removeChild(windowMC);
    stage.removeChild(backDrop);
    }
    private function closeHandler(evt:Event):void {
    stage.removeChild(windowMC);
    stage.removeChild(backDrop);
    }//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    private function windowStartDrag(evt:Event):void {
    evt.target.parent.startDrag();
    }
    private function windowStopDrag(evt:Event):void {
    evt.target.parent.stopDrag();
    }
    //end my functions
    }
    }

  8. Hello Saumya
    I have developed a component in Flash CS3 which uses Button, TextArea and TextInput component of Flash CS3. My problem is When I deploy (paste my component in Components folder); with my component it also shows those three (Button, TextInput and TextArea) components. Could you please tell me a workaround so that those three components are not displayed.

    Looking forward to your response.


    Chetan Sachdev

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

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


    Chetan Sachdev

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

  12. the link to the files is down.
    having those files would be appreciated.
    thanks for this tutorial.

    do you know of any video tutorial covering this?

  13. Hi,
    I am a complete newbie to the Flash development world.I wanted to know if you can convert.fla files to .swc files (using the flash professional cs5).If not,is there any other tools which does the conversion.
    Any response would be of immense help and greatly appreciated.

    1. hi venky,
      i would appreciate if you can start a little on flash development front.
      Well, coming to the SWC thing, its basically might be a compiled clip or code. the FLA is an open format. So the point is the output will be either a SWF or SWC. In Flash CS5, publish settings there is an option to publish to SWC. If you just want the output of an FLA to be a SWC.
      Thats just the brief, hope that helps you in someway.

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