[AS3] gridded MC buttons with click actions from Object and Array

[bootiteq]

How to make MC buttons with click actions from an Object Array and organize them into a grid.
I couldn't find a simple example of how to do this with AS3 so I made one to share. Please let me know if there is a better way to do this.

Paste This Into A Flash Frame



var tX:Number = 0;
var tY:Number = 0;
var tWidth:Number = 100;
var tHeight:Number = 100;
var tSpacing:Number = 5;
var tAmountThumbsWide:Number = 3;

var _items:Array = new Array();
_items.push ({thumb:"3d_game_.jpg", full:"3d_game.jpg"});
_items.push ({thumb:"bottega_contact_.jpg", full:"bottega_contact.jpg"});
_items.push ({thumb:"bottega_events_.jpg", full:"bottega_events.jpg"});
_items.push ({thumb:"bottega_winelist_.jpg", full:"bottega_winelist.jpg"});
_items.push ({thumb:"circa_cocktails_.jpg", full:"circa_cocktails.jpg"});
_items.push ({thumb:"3d_game_.jpg", full:"3d_game.jpg"});
_items.push ({thumb:"bottega_contact_.jpg", full:"bottega_contact.jpg"});
_items.push ({thumb:"bottega_events_.jpg", full:"bottega_events.jpg"});
_items.push ({thumb:"bottega_winelist_.jpg", full:"bottega_winelist.jpg"});
_items.push ({thumb:"circa_cocktails_.jpg", full:"circa_cocktails.jpg"});

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

for (var i = 0; i<_items.length; i++) {
createButton (tWidth, tHeight, "btn"+String(i), i);
}

function createButton (w:Number, h:Number, nam:String, i:Number):void {
//---------------------------------- create an MC
this.nam = new MovieClip();
//---------------------------------- create a thumb backing
var sh:Shape = new Shape();
sh.graphics.beginFill (0x333333,1);
sh.graphics.drawRect (0, 0, w, h);
sh.graphics.endFill ();
//---------------------------------- stick thumb backing into the MC
this.nam.addChild (sh);
//---------------------------------- Layout this MC on a grid
if(i%tAmountThumbsWide==0 && i != 0){
tY+=(h+tSpacing);
}
this.nam.x = ((i%tAmountThumbsWide)*(w+tSpacing));
this.nam.y = tY;
//---------------------------------- Add vars to MC
this.nam.name = nam;
this.nam.thumb = _items[i].thumb;
this.nam.full = _items[i].full;
//---------------------------------- Give MC cursor
this.nam.buttonMode = true;
//---------------------------------- Add MC to whatever MC "this" is
addChildAt (this.nam, 0);
//---------------------------------- Add MC to current position
this.nam.addEventListener (MouseEvent.MOUSE_DOWN, clicked);
this.nam.addEventListener (MouseEvent.MOUSE_OVER, over);
this.nam.addEventListener (MouseEvent.MOUSE_OUT, out);
}

function clicked (e:MouseEvent):void {
trace (" ");
trace ("btns name: ", e.target.name);
trace ("btns parents name: ", e.target.parent.name);
trace ("thumb: ", e.target.thumb);
trace ("full: ", e.target.full);
}

function over (e:MouseEvent):void {
e.target.alpha=0.5;
}

function out (e:MouseEvent):void {
e.target.alpha=1;
}

[minthu]

This is very good example and easy to understand. Thanks for sharing!

You can also use this code for grid layout.


this.nam.x = i % tAmountThumbsWide * (w+tSpacing);
this.nam.y = Math.floor(i / tAmountThumbsWide) * (h+tSpacing);

[bootiteq]

You can also use this code for grid layout. Thanks for that I dig the fact it only takes up 2 lines.

Here is another version which builds on the first one by loading images from XML.

The XML file ( you will need to change the "thumbUrl" to something else )


<?xml version="1.0" encoding="utf-8"?>
<videos>
<vid>
<videoUrl>images/irinox_intro2.flv</videoUrl>
<thumbUrl>images/comme_intro_.jpg</thumbUrl>
<videoTitle><![CDATA[HEADING]]></videoTitle>
<videoDescription><![CDATA[<b>Some dummy HTML text goes here</b>]]></videoDescription>
</vid>

<vid>
<videoUrl>images/irinox.flv</videoUrl>
<thumbUrl>images/comme_gallery_.jpg</thumbUrl>
<videoTitle><![CDATA[HEADING]]></videoTitle>
<videoDescription><![CDATA[<b>Some dummy HTML text goes here</b>]]></videoDescription>
</vid>

<vid>
<videoUrl>images/little_gallery_2.flv</videoUrl>
<thumbUrl>images/circa_menu_.jpg</thumbUrl>
<videoTitle><![CDATA[HEADING]]></videoTitle>
<videoDescription><![CDATA[<b>Some dummy HTML text goes here</b>]]></videoDescription>
</vid>

<vid>
<videoUrl>images/ratatouille.flv</videoUrl>
<thumbUrl>images/comme_gallery_.jpg</thumbUrl>
<videoTitle><![CDATA[HEADING]]></videoTitle>
<videoDescription><![CDATA[<b>Some dummy HTML text goes here</b>]]></videoDescription>
</vid>

<vid>
<videoUrl>images/video.flv</videoUrl>
<thumbUrl>images/circa_menu_.jpg</thumbUrl>
<videoTitle><![CDATA[HEADING]]></videoTitle>
<videoDescription><![CDATA[<b>Some dummy HTML text goes here</b>]]></videoDescription>
</vid>


</videos>




Here is the Actionscript:


var tX:Number = 0;
var tY:Number = 0;
var tWidth:Number = 85;
var tHeight:Number = 85;
var tSpacing:Number = 5;
var tAmountThumbsWide:Number = 3;
var _items:Array = new Array();
//////////////////////////////////////////////////////////
// LOAD XML AND INIT WHEN DONE LOADING
//////////////////////////////////////////////////////////
var myXML:XML = new XML();
var XML_URL:String = "videos.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener ("complete", xmlLoaded);
function xmlLoaded (event:Event):void {
var myXML:XML = XML(myLoader.data);
for (var i = 0; i<myXML.vid.length(); i++) {
var videoUrl = myXML.vid[i].videoUrl;
var videoThumbUrl = myXML.vid[i].thumbUrl;
var videoTitle = myXML.vid[i].videoTitle;
var videoDescription = myXML.vid[i].videoDescription;

// add XML loaded values into an Object and stick that Object into an Array
_items.push ({vid:videoUrl, thumb:videoThumbUrl, vidTitle:videoTitle, vidDesc:videoDescription});
}
// done loading its now safe to build the thumbs
init ();
}
////////////////////////////////////////////////////////////

function init ():void {
for (var i = 0; i<_items.length; i++) {
createButton (tWidth, tHeight, "btn"+String(i), i);
}
function createButton (w:Number, h:Number, nam:String, i:Number):void {
//---------------------------------- create an MC
this.nam = new MovieClip();
//---------------------------------- Layout this MC on a grid (thanks minthu)
this.nam.x = i % tAmountThumbsWide * (w+tSpacing);
this.nam.y = Math.floor(i / tAmountThumbsWide) * (h+tSpacing);
//---------------------------------- create a thumb backing using a function which returns the sprite reference
var s:Sprite = addThumbBacking(w,h);
// add that sprite reference to our this.nam movieClip
this.nam.addChild (s);
//---------------------------------- load thumb
loadThumb (this.nam, _items[i].thumb);
//---------------------------------- Add vars to MC
this.nam.bg = s;
this.nam.name = nam;
this.nam.vid = _items[i].vid;
this.nam.thumb = _items[i].thumb;
this.nam.vidTitle = _items[i].vidTitle;
this.nam.vidDesc = _items[i].vidDesc;
//---------------------------------- Give MC cursor
this.nam.buttonMode = true;
//---------------------------------- disallow the bitmap to affect mouse
this.nam.mouseChildren = false;
//---------------------------------- Add MC to whatever MC "this" is
addChildAt (this.nam, 0);
//---------------------------------- Add MC interactivity - will be active before thumb image is loaded
this.nam.addEventListener (MouseEvent.MOUSE_DOWN, clicked);
this.nam.addEventListener (MouseEvent.MOUSE_OVER, over);
this.nam.addEventListener (MouseEvent.MOUSE_OUT, out);
}
function clicked (e:MouseEvent):void {
trace ("-------------------");
trace ("btns name: ", e.target.name);
trace ("btns parents name: ", e.target.parent.name);
trace ("vid: ", e.target.vid);
trace ("thumb: ", e.target.thumb);
trace ("vidTitle: ", e.target.vidTitle);
trace ("vidDesc: ", e.target.vidDesc);
trace ("bg: "+e.target.bg.name);
// NB: this var is set after the pic is loaded it will generate an error if you click before
trace ("pic: "+e.target.pic.name);
}
function over (e:MouseEvent):void {
e.target.pic.alpha = 0.5;
}
function out (e:MouseEvent):void {
e.target.pic.alpha = 1;
}
}
function addThumbBacking (w:Number, h:Number):Sprite {
var sp:Sprite = new Sprite;
var sh:Shape = new Shape();
sh.graphics.beginFill (0x333333,1);
sh.graphics.drawRect (0, 0, w, h);
sh.graphics.endFill ();
//---------------------------- add the shape to the sprite we just created
sp.addChild (sh);
//---------------------------- return the sprite reference
return sp;
}
function loadThumb (mc:MovieClip, thumbUrl:String):void {
var loader:Loader = new Loader();
//--------------------------- add this loader to the mc it will be contained in
mc.addChild (loader);
var req:URLRequest = new URLRequest(thumbUrl);
loader.load (req);
//--------------------------- check when we're done loading
loader.contentLoaderInfo.addEventListener (Event.INIT, initHandler);
function initHandler (e:Event):void {
var im:Object = loader.content;
//----------------------- before we move stuff make it invisible
im.alpha = 0;
im.x = 5;
im.y = 5;
//----------------------- add this images reference as a var to the containing mc (once it has loaded)
im.parent.parent.pic = im;
//------- ok done show it
im.alpha = 1;
}
}

[jensou]

This is real nice. Thanks for sharing.

[pixi]

Been trawling the web for a few days now on a simple grid source for use in a campaign, where user can click on grid items (like Battleships) and send vars to a Dbase. thanks a lot guys, will definately have a fiddle and post finished code back in this thread.

Schweet.
Pix

[bootiteq]

Glad to help