AS3: Vectors doesnt rezise when i resize my MovieClip

Question

I have bit of a strange problem. In have a MovieClip i resize, but the vector graphic doesn't resize with it. It's a Movieclip in my library that i'm linking to and when I insert it on my stage, it resizes just fine.

I have exported the MovieClip as an AS Object called: TabTemplate and the i extend it in a class called Tab.

I set some text in the textfield defined in it and the resize the tab accordingly. but the graphic doesnt follow :(

I'm not used to AS3's ways of doing things, so there might be something i've missed.

Here's the class code:

package mypackage {
    import flash.display.MovieClip;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;

    public class Tab extends TabTemplate {
        function Tab() {
        }

        /*** Getters/Setters ***/
        public function set text( value:String ):void {
            this.tabname.wordWrap = false;
            this.tabname.autoSize = TextFieldAutoSize.LEFT;
            this.tabname.text = value;
            this.tabname.y = (this.mcMask.height - this.tabname.textHeight) /2;
            this.tabname.x = this.tabname.y;
            this.width = this.tabname.width + (this.tabname.x *2);

            // I want to avoide to resize this after resizing the MovieClip
            //this.mcMask.width = this.width; 
        }

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

There is actually two issues going on here:

1) The textWidth isn't return the correct number. I have some shadow on the text and i don't know if that screws anything up. But otherwise I'm just using Regular Arial.

2) The mask of the 'Tab' + it's vector background isn't resizing when I'm resizing the MovieClip, like it does in Flash it self.

@weltraumpirat: I've tried your trick for reading the textWidth, but it just returns the same number, so that didn't help unfortunately. @heartcodes: your suggestion might work, but it's the thing i wanted to avoid. — Tokimon
Sounds to me like there is something wrong with your TabTemplate. Can you post its code and/or a link to an SWF that demonstrates your problem? — weltraumpirat
@weltraumpirat: TabTmplate is actually just a precreated MovieClip, that i export as a class TabTemplate from the library, there is nothing more to it actually. I then just extend it with the Tab class. So basically it should just be a MovieClip with predefined content i extend. — Tokimon

weltraumpirat weltraumpirat · Accepted Answer · 2011-03-20T18:04:29

Something must have obviously gone wrong with your TabTemplate. Maybe it is better to start from scratch.

I have set up a class that does not extend TabTemplate, but has an instance of it as a member. This way, you'll get to separate the text and the graphics, but should be able to make the clip resize as a whole, instead of resizing its parts separately.

Two things are important for this to work:

You will have to remove the textfield from TabTemplate. It will be generated dynamically. If you want to use embedded fonts, you'll have to take care of embedding the font style and setting the TextFormat; I did not put any such code in there.
You cannot use 9-slice-scaling with vector masks. If you have a mask that requires 9-slice-scaling, you will need to change the way your graphics are set up, or create a drawing mechanism in ActionScript (for example, if you want rounded corners) that refreshes when the text has been set.

Here's the code:

package mypackage {
    import flash.display.MovieClip;
    import flash.text.TextField;
    import flash.text.TextFieldType;
    import flash.text.TextFieldAutoSize;

    public class Tab extends MovieClip {
        private var background : TabTemplate = new TabTemplate();
        private var tabname : TextField = new TextField ();

        public function set text( value:String ):void {
            tabname.type = TextFieldType.DYNAMIC;
            tabname.multiline = tabname.wordWrap = false;
            tabname.autoSize = TextFieldAutoSize.LEFT;
            tabname.text = value;
            tabname.y = (background.height - tabname.textHeight) *.5;
            tabname.x = tabname.y;
            addChild (tabname);

            background.width = tabname.width + (tabname.x *2);
            addChildAt (background, 0);
        }

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

See if this works for you. If not, let me know if you get any error messages, and let's go on from there.

AS3: Vectors doesnt rezise when i resize my MovieClip

2 Answers