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 );