Shiny Button Code

I promised actual Flash stuff on this blog, and now I start to make good on that promise. And no, this is not as clever as Philip Hutchinson’s SCORM Class(es), but give me a break! ActionScript 3 is kinda hard when you don’t touch Flash everyday.

Anyway, I took an approach of updating Luka Maras’ really nice code that makes buttons in that glassy “Web 2.0” style from its original code in ActionScript 2.0 to ActionScript 3.0.


Based only on this one experience, the good news for you if you want to upgrade your existing code to ActionScript 3.0: much of the foundation of the original ActionScript 2.0 code stayed in-tact. The bad news: figuring out how to convert the way you reference things in ActionScript 3.0 is a bit awkward when you’re used to working with AS2.0 and it took me a lot longer than I expected.

In some ways, upgrading my Asteroids code from ActionScript 1.0 might be easier than my experiments trying to do it in ActionScript 2.0, but… I need to budget a lot of time to accomplish that feat, I think.

Feel free to give this a try and if you have any questions or changes — if you have a way to improve or expand it, please share because I am always looking to improve (and I’m trying to get better about demonstrating that).

This code can actually go on the main timeline (I know, not cool for you OOP types, but I wanted to make it easy for people to just copy, paste and play). It assumes that you have a font (Verdana, in this case) in your library called “Verdana” that is exported to ActionScript.

I’ve made the attempt to have the font size increase or decrease relative to the height of the button.

import flash.geom.*;
import flash.display.*;

// FEEL FREE TO CHANGE THESE VALUES, AS THE REST OF THE CODE WILL ADAPT
var radius:int = 24; 		// The corners of your button
var btnW:int = 360; 		// Button Width
var btnH:int = 120; 		// Button Height
var colors:Array = [0xff0090, 0xff0000];	// The main gradient of your button
var strID:String = "Shiny Button";	// Button Label
var intX:int = 0;			// X-Position of your button's upper-left corner
var intY:int = 0;			// Y-Position of your button's upper-left corner

// PLAY WITH THESE AT YOUR RISK
var fillType:String = GradientType.LINEAR;
var alphas:Array = [100, 100];
var ratios:Array = [0, 245];

// TRY TO LEAVE EVERYTHING ELSE ALONE...
var matr:Matrix = new Matrix();
matr.createGradientBox( btnW, btnH, 90/180*Math.PI, 0, 0 );
var spreadMethod:String = SpreadMethod.PAD;

var myButton:MovieClip = new MovieClip();
this.addChild( myButton );

myButton.x = intX;
myButton.y = intY;

// BUTTON BACKGROUND
var buttonBkg:Sprite = new Sprite();
buttonBkg.graphics.lineStyle(0, 0xE88A41, 100, true, "none", "square", "round");
buttonBkg.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod );
buttonBkg.graphics.moveTo(radius, 0);
buttonBkg.graphics.lineTo((btnW-radius), 0);
buttonBkg.graphics.curveTo(btnW, 0, btnW, radius);
buttonBkg.graphics.lineTo(btnW, (btnH-radius));
buttonBkg.graphics.curveTo(btnW, btnH, (btnW-radius), btnH);
buttonBkg.graphics.lineTo(radius, btnH);
buttonBkg.graphics.curveTo(0, btnH, 0, (btnH-radius));
buttonBkg.graphics.lineTo(0, radius);
buttonBkg.graphics.curveTo(0, 0, radius, 0);
buttonBkg.graphics.endFill();

// ADD THE BUTTON BACKGROUND TO THE FANCY BUTTON ONLY AFTER IT'S READY
myButton.addChild( buttonBkg );

// THE SHINY GLASSY EFFECT
var shineRadius:Number = radius * 2 / 3;
var shineW:Number = btnW - ( 0.0333 * btnW );
var shineH:Number = btnH / 2 - ( 0.0667 * btnH );
var shineFillType:String = GradientType.LINEAR;
var shineColors:Array = [0xFFFFFF, 0xFFFFFF];
var shineAlphas:Array = [70, 0];
var shineRatios:Array = [0, 255];
var shineMatr:Matrix = new Matrix();
shineMatr.createGradientBox( shineW, shineH, 90/180*Math.PI, 0, 0 );
var shine:Sprite = new Sprite();
shine.x = ( 0.0333 * btnW ) / 2;
shine.y = ( 0.0667 * btnH ) / 2;
shine.graphics.lineStyle(0, 0xFFFFFF, 0);
shine.graphics.beginGradientFill(shineFillType, shineColors, shineAlphas, shineRatios, shineMatr, spreadMethod );
shine.graphics.moveTo(shineRadius, 0);
shine.graphics.lineTo((shineW-shineRadius), 0);
shine.graphics.curveTo(shineW, 0, shineW, shineRadius);
shine.graphics.lineTo(shineW, (shineH-shineRadius));
shine.graphics.curveTo(shineW, shineH, (shineW-shineRadius), shineH);
shine.graphics.lineTo(shineRadius, shineH);
shine.graphics.curveTo(0, shineH, 0, (shineH-shineRadius));
shine.graphics.lineTo(0, shineRadius);
shine.graphics.curveTo(0, 0, shineRadius, 0);
shine.graphics.endFill();

// ADD THE SHINY PART TO THE BUTTON ONLY AFTER IT'S BEEN GENERATED
myButton.addChild( shine );

// TEXT FORMAT FOR THE BUTTON LABEL
var myFormat:TextFormat = new TextFormat();
myFormat.align = "left";
myFormat.font = "Verdana";
myFormat.size = 12 * Math.round( 0.0125 * btnH );
myFormat.bold = true;
myFormat.color = 0xFFFFFF;

// THE BUTTON LABEL
var labelText:TextField = new TextField();
labelText.x = ( 0.0333 * btnW ) / 2;
labelText.y = ( 0.333 * btnH );
labelText.text = strID;
labelText.embedFonts = true;
labelText.selectable = false;
labelText.type = TextFieldType.DYNAMIC;
labelText.autoSize = TextFieldAutoSize.LEFT;
labelText.antiAliasType = "advanced";
labelText.setTextFormat( myFormat );

// ADD THE TEXTFIELD ONLY AFTER IT'S COMPLETE
myButton.addChild ( labelText );