Actionscript 3 Designer Toolkit

I recently saw a video of Microsoft’s upcoming Mobile 7 phone interface and, surpirisingly, was impressed with its bold 2D graphics – no 3D bevelled edges, no gradations, no faux glass reflective surfaces.  The MsgPanel_RIGHT class is my interpretation of a 2D graphic approach to the interface.

Two arrays, titleProps and msgProps define the content and appearance of the main title and the message revealed.  (For descriptions of each of the array elements see the documentation within the MsgPanel_RIGHT class itself.)

The class itself is comprised of 4 basic layers:  the background layer which contains the main title and message, a masking layer which hides/reveals the message, a mouse intercept layer with MOUSE_OVER and MOUSE_OUT event listeners attached and, finally, a masking layer for the mouse layer. The initial positions of the background and mouse layers is to left while the 2 masking layers are aligned to the right.  A MOUSE_OVER event fires the tweening to the right of the background and mouse intercept layers simultaneously – a MOUSE_OUT event tweens them back to their original position.  The 2 masking layer positions are fixed.  By relocating the initial positions of the layer and changing the tweening directions, versions that open to the left, up and down can be constructed.

import com.dtk.MsgPanel_RIGHT;
 
// init parameters
var bgColor:uint     = 0x009966;  // panel background color
var bgInitWidth:uint = 160;       // initial width of background
var bgHeight:uint    = 200;       // height of background
 
// array of main title properties
var titleProps:Array = new Array( );
titleProps.push( { titleText : 'about', titleXOffset : 4, titleYOffset : 8, 
		   titleFont : 'Times New Roman', titleSize : 64, 
		   titleColor : 0xffffff, titleAlign : 'LEFT', titleLeading : 0 } );
 
// message exposed when background is expanded
var msgText:String = 'Welcome to the <b>Actionscript 3 Designers Toolkit</b> website where new interface objects are introduced weekly.';
 
// // array of message text properties
var tabProps:Array = new Array( );
tabProps.push( { msgPadding: 10, msgWidth : 300, msgXOffset : 8, 
		 msgYOffset : 6, msgFont : 'Verdana', msgSize : 22, 
		 msgColor : 0xffffff, msgAlign : 'LEFT', msgLeading : 4 } );
 
// create new instance                                  
var mp:MsgPanel_RIGHT = new MsgPanel_RIGHT( bgInitWidth, bgHeight, bgColor, titleProps, msgText, tabProps );
mp.x = 10;
mp.y = 20;
addChild( mp );

Download files: MsgPanel.zip (48)