Create a Dynamic Grid of Animated Buttons in AS3 [closed] - arrays

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm new to Flash and intermediate in HTML/CSS. I would like to create a grid of buttons that when you hover over them, they change color and show a linkable caption/tooltip on hover. I would also like this to be dynamic as possible as I will need a grid of 2000+ buttons/squares that may have to be updated from time to time.
Here is an example created with HTML/CSS and some JS
//<![CDATA[
$(window).load(function(){
// Create the tooltips only when document ready
$(document).ready(function () {
// This will automatically grab the 'title' attribute and replace
// the regular browser tooltips for all <a> elements with a title attribute!
$('a[title]').qtip();
});
});//]]>
I need to know the best way to build this in flash, and would really appreciate a barebones breakdown of the code/AS. I am somewhat new to flash and this is just way above my head.
Thanks in advance.

Answer 1

Ok, so you want grid of small bitmaps/shapes on stage. I would recommend bitmaps since they work better when you want to transform something - but if the grid will be standing still, then you can use Sprite filled with color. Below you can find a snippet complete example. You can compile it using mxmlc compiler or using Flash Develop||FDT, or connecting this file as a document class in Flash IDE.
It's the most efficient way I can imagine. We have only one Sprite and we color some parts of it depending on where our mouse is. Hope this helps.
package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
/**
* ...
* #author
*/
public class Main extends Sprite
{
private var color:int = 0xf2f2f2;
private var color1:int = 0xff000;//colors definition
private var size:int = 12;//size of our square
private var container:Sprite;//container definition
private var rows:int = 48;//number of rows
private var margin:int = 2;//margin on each side
private var count:int = 2000;//number of elements
private var totalspace:int = size + margin;
private var currentPoint:Point = new Point();
private var lastPoint:Point = null;
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
container = new Sprite();//define squares container;
container.graphics.beginFill(color);//define fill color;
var posX:int;
var posY:int;
for ( var i:int = 0; i < count; i++) {
posX = int(i % rows) * totalspace;//calculate x axis position based on modulo
posY = int(i / rows) * totalspace;//calculate y axis position
container.graphics.drawRect( posX, posY, size, size );//call drawRect method on graphics object.
}
addChild(container);//add container to stage - meaning it will be visible, because flash is rendering it.
container.buttonMode = true;//set mouse to button mode
container.addEventListener( MouseEvent.MOUSE_MOVE, onMM );
container.addEventListener( MouseEvent.ROLL_OUT, onMO );
//add eventListener for mouse move - so each time you move a mouse over container object it will trigger an event.
}
private function onMO(e:MouseEvent):void
{
currentPoint = null;
}
private function onMM(e:MouseEvent):void
{
if ( lastPoint == currentPoint ) {
//if moouse is on the same square exit this function
return;
}
//calculate x and y position of square we need to color
currentPoint = new Point( int( container.mouseX/totalspace ) * totalspace, int(container.mouseY/totalspace) * totalspace );
container.graphics.beginFill( color1 );
container.graphics.drawRect( currentPoint.x, currentPoint.y, size, size );
if ( lastPoint ) {
//if last point is present, make it grey, as for roll out
container.graphics.beginFill( color );
container.graphics.drawRect( lastPoint.x, lastPoint.y, size, size );
}
lastPoint = currentPoint;
}
}
}