AS3 Dynamic XML Buttons Size and Placement with Masking

  • AmieCutie
  • Newbie
  • Newbie
  • User avatar
  • Posts: 12

Post 3+ Months Ago

So let me try and make this as simple and easy to follow as possible. Pretty much what I am doing is making an XML menu for a website. Each button has a background and and over-state background. The backgrounds are 9 sliced scaled movie clips, well the over-state background is set up to mask an animation movie clip that is larger than any button will be. The mask is 9 slice scaled and is always the same size as the regular background. These backgrounds are x-scaled in a function in the Button .as. The title passed in through the XML determines the width. All of this so far works perfectly.

Now a navigation movie clip processes and adds all of the button movie clips based on the amount of nodes in the XML, this also sets the X and Y coordinates as well as sets a "spacer" between the buttons. Here is my problem, every time the function runs to create a new button, it sets the x value at:

Code: [ Select ]
button.x = this.width;


This is great if I don't use the mask though. What happens since the movie clip I am masking in the over-state background is wider than the buttons are is that there is wayyy to large of a gap. When each button is added, actionscript sees the width of the button with everything in it, masked or not. So I've tried a for-loop in the button creating function to increment a number variable from 0 - the max number of buttons in the XML. I then want to set the x value to:

Code: [ Select ]
button.x = (button.background.width * i);


This is the background of the button that has the correct width that actionscript should be using. By multiplying it by the i variable, it should move the x right with every button. Unfortunately it's not working.

Does anyone have any suggestions on how to accomplish this?

- Amie
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • AmieCutie
  • Newbie
  • Newbie
  • User avatar
  • Posts: 12

Post 3+ Months Ago

So I've found out that this is a common issue by searching around. I have found some stuff that's a little closer to a solution.
http://moock .org/blog/archives/000292.html
http://studio.barliesque .com/blog/2008/10/the-trouble-with-getbounds/

I've tried both examples but they both just seem to resize the movieclip that I mask to the mask's width, which is not what I want. I want the whole button to be seen as wide as the visible area in the display list in actionscript but without resizing the masked content. Below are parts of my code, each with both examples. They both give the same results currently.

Code: [ Select ]
        // Colin Moock Example
        private function createButton():void {
            
            // Here is some actionscript I don't need to add for this purpose, it added the text from XML and it sizes the mask and the background based on the text width.
            
            // Create the mask
            overGraphics.blueWater.mask = overGraphics.btnMaskContainer;
            
            // Sets the width of the blueWater movie clip to the width of the visable masked area
            overGraphics.blueWater.width = getVisibleWidth(overGraphics.blueWater);
            
        }
        
        private function getVisibleWidth (o:DisplayObject):Number {
         var bitmapDataSize:int = 2000;
         var bounds:Rectangle;
         var bitmapData:BitmapData = new BitmapData(bitmapDataSize,
                               bitmapDataSize,
                               true,
                               0);
         bitmapData.draw(o);
         bounds = bitmapData.getColorBoundsRect( 0xFF000000, 0x00000000, false );
         bitmapData.dispose();
         return bounds.x + bounds.width;
        }
  1.         // Colin Moock Example
  2.         private function createButton():void {
  3.             
  4.             // Here is some actionscript I don't need to add for this purpose, it added the text from XML and it sizes the mask and the background based on the text width.
  5.             
  6.             // Create the mask
  7.             overGraphics.blueWater.mask = overGraphics.btnMaskContainer;
  8.             
  9.             // Sets the width of the blueWater movie clip to the width of the visable masked area
  10.             overGraphics.blueWater.width = getVisibleWidth(overGraphics.blueWater);
  11.             
  12.         }
  13.         
  14.         private function getVisibleWidth (o:DisplayObject):Number {
  15.          var bitmapDataSize:int = 2000;
  16.          var bounds:Rectangle;
  17.          var bitmapData:BitmapData = new BitmapData(bitmapDataSize,
  18.                                bitmapDataSize,
  19.                                true,
  20.                                0);
  21.          bitmapData.draw(o);
  22.          bounds = bitmapData.getColorBoundsRect( 0xFF000000, 0x00000000, false );
  23.          bitmapData.dispose();
  24.          return bounds.x + bounds.width;
  25.         }


Code: [ Select ]
        // Barliesque Example
        private function createButton():void {
            
            // Here is some actionscript I don't need to add for this purpose, it added the text from XML and it sizes the mask and the background based on the text width.
            
            // Create the mask
            overGraphics.blueWater.mask = overGraphics.btnMaskContainer;
            
            // Sets the width of the blueWater movie clip to the width of the visable masked area
            var v:Rectangle = getVisibility(overGraphics);
            overGraphics.blueWater.width = v.width;
            
        }
        
        private function getVisibility(obj:DisplayObject):Rectangle {
    
            var vis:Rectangle;
            
            if (obj.parent == null) return new Rectangle();
            
            if (obj is DisplayObjectContainer) {
                vis = getChildVisibility(obj, obj.parent);
            } else {
                vis = obj.getBounds(obj.parent);
            }
            
            // Is the DisplayObject masked?
            if (obj.mask != null) {
                vis = vis.intersection(obj.mask.getBounds(obj.parent));
            }
            
            return vis;
        }
            
        private function getChildVisibility(obj:*, target:DisplayObjectContainer):Rectangle {
            
            var vis:Rectangle = new Rectangle();
            var child:DisplayObject;
            var childRect:Rectangle;
            var i:uint;
            
            for (i = 1; i <= obj.numChildren; i++) {
                child = obj.getChildAt(i-1);
                
                if (child != null) {
                    if (child.visible) {
                        if (child is DisplayObjectContainer) {
                            childRect = getChildVisibility(child, target);
                        } else {
                            childRect = child.getBounds(target);
                        }
                        if (child.mask != null) {
                            childRect = childRect.intersection(child.mask.getBounds(target));
                        }
                        vis = vis.union(childRect);
                    }
                }
            }
            return vis;
        }
  1.         // Barliesque Example
  2.         private function createButton():void {
  3.             
  4.             // Here is some actionscript I don't need to add for this purpose, it added the text from XML and it sizes the mask and the background based on the text width.
  5.             
  6.             // Create the mask
  7.             overGraphics.blueWater.mask = overGraphics.btnMaskContainer;
  8.             
  9.             // Sets the width of the blueWater movie clip to the width of the visable masked area
  10.             var v:Rectangle = getVisibility(overGraphics);
  11.             overGraphics.blueWater.width = v.width;
  12.             
  13.         }
  14.         
  15.         private function getVisibility(obj:DisplayObject):Rectangle {
  16.     
  17.             var vis:Rectangle;
  18.             
  19.             if (obj.parent == null) return new Rectangle();
  20.             
  21.             if (obj is DisplayObjectContainer) {
  22.                 vis = getChildVisibility(obj, obj.parent);
  23.             } else {
  24.                 vis = obj.getBounds(obj.parent);
  25.             }
  26.             
  27.             // Is the DisplayObject masked?
  28.             if (obj.mask != null) {
  29.                 vis = vis.intersection(obj.mask.getBounds(obj.parent));
  30.             }
  31.             
  32.             return vis;
  33.         }
  34.             
  35.         private function getChildVisibility(obj:*, target:DisplayObjectContainer):Rectangle {
  36.             
  37.             var vis:Rectangle = new Rectangle();
  38.             var child:DisplayObject;
  39.             var childRect:Rectangle;
  40.             var i:uint;
  41.             
  42.             for (i = 1; i <= obj.numChildren; i++) {
  43.                 child = obj.getChildAt(i-1);
  44.                 
  45.                 if (child != null) {
  46.                     if (child.visible) {
  47.                         if (child is DisplayObjectContainer) {
  48.                             childRect = getChildVisibility(child, target);
  49.                         } else {
  50.                             childRect = child.getBounds(target);
  51.                         }
  52.                         if (child.mask != null) {
  53.                             childRect = childRect.intersection(child.mask.getBounds(target));
  54.                         }
  55.                         vis = vis.union(childRect);
  56.                     }
  57.                 }
  58.             }
  59.             return vis;
  60.         }
  • sherma
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 127

Post 3+ Months Ago

I wish I could help, but I'm currently working through my first XML menu... very basic and all script, no images, components, etc. I'm actually using a tutorial and it works great except that every link opens in a new browser/window. There is no "_blank" anywhere in the code and since I suck at as3, I can't find where it needs to be changed.

I hope someone comes along to help you soon.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 14 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.