February 2008

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

ActionScript 2.0

Comments Off

Permalink

How the Economy Will Affect Learning 2.0 in 2008 (and probably 2009)

Have you looked at the Stock Market lately? You don’t have to be in the United States to appreciate the situation. We’re in for a bumpy ride. It may not be the end-of-days scenario that noted economists, politicos and pundits predict, but it’s obvious to me here in Chicago that the market is going to be turbulent, which is undoubtedly going to affect what people, organizations and governments spend money on — and that’s going to affect corporate, academic and government budgets… and as far as it impacts corporate budgets, it’s definitely going to impact me and my work. Here’s how I see it rolling.

How solid are those plans for upgrading your LMS? Chances are you won’t unless there are technical reasons that make it an imperative. It might have been difficult last year to make the business case to upgrade a piece of enterprise software last year when the market was still good, but this year with the coffers tightening, dropping another couple hundred thousand (or a couple of million depending on your scale) is just not likely. Big ticket items like LMSs and LCMSs are probably going to be on=hold for acquisition unless you can show without a doubt how what you buy will a) save the organization a ton of cash in other ways, thus reducing costs overall; and/or b) improve productivity in measurable ways, thus reducing your operating costs overall.

In fact, let’s make that the common theme for this post. See, when budgets are just the “normal” kind of tight for learning, education and training, you have the opportunity for doing small Research and Development projects (not like there’s lots of official time for those, but you can fly some pet projects under the radar until you’re ready to show them off). When there’s a promise that next month will be another record breaking milestone, you can get that expansion or that new acquisition through a little easier. But when times get tight, you need to really be concerned about the bottom line — but you also need to focus on infrastructure. You want to be able to do more with less — but you also don’t want the people or the services you rely on to get destroyed in the process of running lean.

Your budget was probably set in stone (concrete, maybe?) before the start of this year. Use it to train your people in a variety of needed skills so that an Instructional Designer or a Content Developer can do a lot more than they could before. Use it to upgrade the authoring tools you use. Use it develop those reusable templates you’re going to need next year.

If your organization hasn’t gone mobile yet, you’re likely not going to in the next two years. Keep reading what other organizations are doing with mobile, because discussing and designing the future is very important — but not as important as being able to squeeze the most value you can right now.

If I was to weigh in on how we’d spend what money we have this year, I’d advise the following:

Definitely

  • Transition our main authoring tool to something collaborative.
  • Upgrade our simulation capturing tool to make sure it’s as robust and stable as it can be.
  • Invent or Acquire a means to manage media assets, learning objectives, competencies and how content maps to and with these things.
  • Pick up some media software (Flash, maybe something for digital video)
  • Code for custom E-Learning content (for those custom jobs or content upgrades from years ago that all of the sudden just stop working)
  • Train the tech savvy on Flash, HTML and JavaScript; train the Instructional Design-savvy on Graphic Design principles. Train everyone on curriculum development, project management and personal productivity skills, because when organizations make due with less, that usually means people who do — do more.

Maybe

  • Upgrade hardware to mobile equipment to go to where the internal client is
  • Push out collaborative authoring tools to Subject Matter Experts.

I’d welcome any questions or input on this topic, because I think we’re going to see a shift similar to what the commercial sector saw in 2002 and 2003 when the dot-com bubble burst. For government, this will be the first time in a very long time experiencing this. For you folks in the acaedmic sector, this is old hat to you :)

Productivity
Strategy

Comments (1)

Permalink