LozengeButton in AS3

Posted on Friday 4 November 2005


OK, so I grabbed a few minutes over lunch today to try a few button tests just to see what I could knock together without having to read too much documentation :P

Well here are the results:

ACTIONSCRIPT:
  1. package {
  2.     import flash.display.MovieClip;
  3.     import com.flashgen.examples.LozengeButton;
  4.  
  5.     [SWF(width="100", height="50", backgroundColor="#DFEEEF")]
  6.     public class AS3LozengeButton extends MovieClip
  7.     {
  8.         private var _button  :LozengeButton;
  9.        
  10.         // This it the default constructor for this 'main' class
  11.         public function AS3LozengeButton()
  12.         {
  13.             // instantiate the displayObject class
  14.             _button = new LozengeButton();
  15.            
  16.             // set the _button x & y position
  17.             _button.y = 10;
  18.             _button.x = 10;
  19.            
  20.             // finally add it to the DisplayObjectContainer.
  21.             addChild(_button);
  22.         }
  23.     }
  24. }

The code above is the default 'main' class from my AS3 project, as you can see it imports two classes - MovieClip (this is required for this class to compile) and my "quick" LozengeButton class.

ACTIONSCRIPT:
  1. package com.flashgen.examples {
  2.     import flash.display.DisplayObject;
  3.     import flash.display.Shape;
  4.     import flash.display.Sprite;
  5.     import flash.display.TextField;
  6.     import flash.display.SimpleButton;
  7.     import flash.text.*;
  8.  
  9.     public class LozengeButton extends Sprite {
  10.        
  11.         private var _button   :SimpleButton;
  12.        
  13.         public function LozengeButton() {
  14.             _button = new GenericLozengeButton();
  15.             addChild(_button);
  16.         }
  17.     }
  18.    
  19.     private class GenericLozengeButton extends SimpleButton
  20.     {
  21.         private var _upColor        :uint = 0xCCCCCC;
  22.         private var _overColor    :uint = 0x999999;
  23.         private var _downColor    :uint = 0x333333;
  24.         private var _width      :uint = 80;
  25.         private var _height         :uint = 22;
  26.         private var _radius   :uint = 6;
  27.        
  28.         public function GenericLozengeButton() {
  29.            
  30.             downState = new ButtonState(_downColor, _width, _height, _radius);
  31.             overState = new ButtonState(_overColor, _width, _height, _radius);
  32.             upState = new ButtonState(_upColor, _width, _height, _radius);
  33.             hitTestState = new ButtonState(_upColor, _width, _height, _radius);
  34.             useHandCursor = true;
  35.         }
  36.     }
  37.  
  38.     private class ButtonState extends Shape {
  39.        
  40.         private var _bgColor        :uint;
  41.         private var _width      :uint;
  42.         private var _height         :uint;
  43.         private var _radius   :uint;
  44.         private var _borderSize  :uint    = 2;
  45.         private var _borderColor    :uint   = 0x666666;
  46.  
  47.         public function ButtonState(bgColor:uint, width:uint, height:uint, radius:uint) {
  48.             this._bgColor   = bgColor;
  49.             this._width     = width;
  50.             this._height    = height;
  51.             this._radius    = radius
  52.             draw();
  53.         }
  54.  
  55.         private function draw():Void {
  56.             graphics.beginFill(_bgColor);
  57.             graphics.lineStyle(_borderSize, _borderColor);
  58.             graphics.drawRoundRect(0, 0, _width, _height, _radius);
  59.             graphics.endFill();
  60.         }
  61.     }
  62. }

Have a play and any questions just post them below :)

License

This work is published under a CC-GNU LGPL.



3 Comments for 'LozengeButton in AS3'

  1.  
    November 22, 2005 | 2:49 pm
     

    […] Flash gen puts out a nice AS 3 example class, and suffers some nasty down time thanks to Eclipse […]

  2.  
    January 11, 2008 | 7:50 pm
     

    Awesome.. can we get a preview too?

  3.  
    January 16, 2008 | 6:17 pm
     

    @Lawrence, I’ll dig out the code and post up some previews over the weekend :)



Leave a comment

(required)

(required)


Information for comment users
Line and paragraph breaks are implemented automatically. Your e-mail address is never displayed. Please consider what you're posting.

Use the buttons below to customise your comment.

Comments are moderated so please only submit once


RSS feed for comments on this post | TrackBack URI