Glossy buttons in pure as3 code


I’ve been playing with the drawing classes, experimenting gradients and blending modes, and so I put together a small (basic) as3 class that generates a glossy button with pure code – no library assets.

You can download the class here.

The class constructor expects only 3 parameters:
@param rad = Width of button
@param darkColor = The color in top area, more dominant
@param lightColor = The color in the bottom area

* you can then place it anywhere, and use method setCaption(cap:String) to place a label on the button, though this is a very basic implementation of text handling, I focused on drawing..

Let me know if you liked it : )

21 thoughts on “Glossy buttons in pure as3 code”

  1. Hello!

    Can you show me how to handle press event on this button?

    rg = new RoundGlossy(30, 20, 30);
    rg.x = 100;
    rg.y = 100;
    //how to handle onButPress?

    sorry I am newbe in actionscript (

  2. Hey Victor, using the class should be something like this:

    var blue:RoundGlossy = new RoundGlossy(30, 0x006699, 0x00FFFF);
    blue.x = 100;
    blue.y = 100;
    blue.setCaption(“GO”);
    this.addChild(blue);

    In order to add behavior you can simply add your function in the class instead of: ‘// do something’..

    Good luck!

  3. yes, i do so

    rg = new RoundGlossy(30, 20, 30);
    rg.x = 100;
    rg.y = 100;

    rg.setCaption(“test”);
    //rg.addEventListener(onButPress, onButPress); //what we need to do here to handle onButPress?
    addChild(rg);

    public function onPutPress():void
    {
    trace(“onButPress”);
    }

  4. Hey Paul, implementing the class should be something like this:

    var blue:RoundGlossy = new RoundGlossy(30, 0×006699, 0x00FFFF);
    blue.x = 100;
    blue.y = 100;
    blue.setCaption(“GO”);
    blue.addEventListener(MouseEvent.CLICK, clickHandler);
    addChild(blue);

    Good luck!

  5. Hi

    Thanks for the help everyone. I am afraid that I am still lost. In AS2 you had a single .fla file. In AS3 you have an .fla file which references the Class file and you have to set the reference in Publish Settings. This is the first place I get stuck. Usually the class file is right next to the .fla and you simply place its name in the Publish Settings dialogue. This Glossy Buttons class is inside other folders and when I try I get the reference wrong every time. Also if I get the reference right will it give me glossy buttons when I test or must I add code (I think in the package) as suggested by adi ? Perhaps someone could post a zip file in which they have set it up to work. Then I could learn by studying how they did it.

    Thanks

    Paul

    1. Hey Paul, make sure you import the class like this:

      1. Add this to your document class:

      import com.adifeiwel.custom_ui.RoundGlossy;

      2. Place the ‘com’ folder next to the .fla.

      3. In Flash: File > Publish Settings > ActionScript 3.0 Settings > Source path: click Browse button and select the ‘com’ folder.

      4. Continue as in my last answer.

      Good luck.

  6. This is my document class

    package
    {
    import flash.display.MovieClip;
    import com.adifeiwel.custom_ui.RoundGlossy;

    public class Main extends MovieClip
    {
    var blue:RoundGlossy = new RoundGlossy(30, 0×006699, 0x00FFFF);

    public function Main()
    {
    blue.x = 100;
    blue.y = 100;
    blue.setCaption(“GO”);
    blue.addEventListener(MouseEvent.CLICK, clickHandler);
    addChild(blue);

    }

    }
    }

    I am getting the following error messages all associated with line 9;

    C:\Flash AS3\Glossy Buttons\adi\Main.as, Line 9 1093: Syntax error.

    C:\Flash AS3\Glossy Buttons\adi\Main.as, Line 9 1084: Syntax error: expecting rightparen before 006699.

    where line 9 is the line;

    var blue:RoundGlossy = new RoundGlossy(30, 0×006699, 0x00FFFF);

    Did everything you suggested as far as I know.

    Any ideas ?

  7. Sorry !

    Sorted that out but then got the following errors;

    C:\Flash AS3\Glossy Buttons\adi\Main.as, Line 19 1120: Access of undefined property MouseEvent.

    and

    C:\Flash AS3\Glossy Buttons\adi\Main.as, Line 19 1120: Access of undefined property clickHandler.

    Managed to sort the first error out by adding;

    import flash.events.MouseEvent

    to Main.as

    But still getting the error about the clickHandler

    Paul

    1. Hey Paul, we’re getting there!

      ‘clickHandler’ should be a function handling the click event, you can add something like this:

      private function clickHandler(ev:MouseEvent):void
      {
      // do something?
      }

      This should clear the error, but now you have to think what it should do..

  8. Hi adi

    OK – So I needed to add a function which would be executed on clicking the button. my bad ! So I added a simple trace command and it WORKS !!

    A beasutiful blue shiny button which traces out “Hello” on clicking.

    Thanks for a VERY usefull bit of AS3 code here. Those buttons look fantastic.

    So I take it that your instructions;

    1. Add this to your document class:

    import com.adifeiwel.custom_ui.RoundGlossy;

    2. Place the ‘com’ folder next to the .fla.

    3. In Flash: File > Publish Settings > ActionScript 3.0 Settings > Source path: click Browse button and select the ‘com’ folder.

    Are a way to import a class into a project ? I have not seen it done before.

    Will now play with this and see how to change button colours and sizes etc.

    Thanks a million for your patience.

    regards

    Paul

  9. Hey Paul, happy to hear you got it working :)

    I didn’t implement any behavior reacting to mouse events, though there are listeners defined and also empty handler functions there, waiting just for that.

    Feel free to add your own, any behavior you add in the class (in RoundGlossy.as) will affect all instances of the glossy button, any listener-function you attach to a specific instance (in Main.as) will affect only that instance. And you can combine, add over/out effects to ALL instances & define a unique click listener to each instance.

    A.

  10. Thanks adi.

    I did see what I thought were a few behaviour reacting listeners in the class so will experiment with it.

    Must say these buttons are REALLY cool !

    Paul

  11. By way of experiment I changed lines 263 to 273 in the class to;

    private function onButPress(ev:Event):void
    {

    _typo.textColor = 0xCCCCCC;

    }
    private function onButUp(ev:Event):void
    {
    _typo.textColor = 0x000000;
    }

    The effect is that on clicking the button the button text changes colour while on releasing the button the text returns to its original colour. This creates a blink-like effect in the button and lets the user know it was clicked. Fairly simple – sure there are better ways to do it. Anyway GREAT !

    Will try to see if I can rather remove the drop shadow to create the impression of depressing the button.

    Paul

  12. If we re-define the drop shadow in line 90 as

    var myShade = new DropShadowFilter(myShadeDist,85,0×020202,0.5,myShadeBlur,myShadeBlur,5,5);

    (I have changed the last 2 parameters from 1,1 to 5,5);

    Then write lines 263 to 273 as

    //////////////////////////////////////////

    private function onButPress(ev:Event):void
    {
    _typo.textColor = 0xCCCCCC;
    // apply New shade / bevel filter:
    var myShadeBlur = _rd/8;
    var myShadeDist = _rd/12;
    var myBevelBlur = _rd / 6;
    var myShade = new DropShadowFilter(myShadeDist,85,0×020202,0.5,myShadeBlur,myShadeBlur,0,0);
    var myBevel = new BevelFilter(3,325,0×000000,.3,0x000000,.3,myBevelBlur,myBevelBlur,1,2,”outer”,false);
    _glossBut.filters = [myShade, myBevel];

    ///////////////////////////////////
    }
    private function onButUp(ev:Event):void
    {
    _typo.textColor = 0x000000;

    // apply original shade / bevel filter:
    var myShadeBlur = _rd/8;
    var myShadeDist = _rd/12;
    var myBevelBlur = _rd / 6;
    var myShade = new DropShadowFilter(myShadeDist,85,0×020202,0.5,myShadeBlur,myShadeBlur,5,5);
    var myBevel = new BevelFilter(3,325,0×000000,.3,0x000000,.3,myBevelBlur,myBevelBlur,1,2,”outer”,false);
    _glossBut.filters = [myShade, myBevel];

    }

    ///////////////////////

    Then together with the changte in text colour it creates a VERY noticeable change in appearance on the button clearly indicating which button was pressed.

    I am sure there are more elegent ways to achieve the same effect but still – not bad for a Newbie !

    Paul

    p.s. I will leave you in peace now. Go Well!!

Leave a Reply

Your email address will not be published. Required fields are marked *