hey all,
i’m a noob and am having trouble wrapping my head around this. I have set up a series of hexagons in an array. on mouseover they all play the same animation (grow to 4x size) and on mouseout they bounce back to their original size. i’ve got that part of it working.
The problem arises when i try and put content (text etc…) inside each hexagon. for example i put some text inside of hexagon A and need it to do some other animation after/while hexagon A is doing it’s thing. i need to do this for each (9 total) hexagon and each one will have different content. i’m not sure how to do this in the most efficient way. Also, when i add something inside of a hexagon it messes up the hitstate and goes all crazy. so somehow i need to keep the hitstate just on the hexagon and NOT on the contents inside.
On a side note, whenever i try and add a glow or some other effect to an MC in button mode, the effect seems to screw up the hit state as well. any ideas?
Any help is greatly appreciated as this is for work and i’m a graphic designer on a deadline. thanks!
I hope this makes sense. Here is the code i’m working with right now:
(note: i’m using the greensock TimelineMax class)
import gs.*;
import gs.easing.*;
//build the junk into scene
function buildHex():void {
var buildHexTL:TimelineMax = new TimelineMax();
var addHexes:Array=[hexOrangeA,hexGreenA,hexOrangeB,hexOrangeC,hexGreenB,hexOrangeD,hexGreenC,hexOrangeE,hexOrangeF,hexOrangeG,hexGreenD,hexOrangeH,hexOrangeI,hexGreenE];
buildHexTL.append(TweenMax.from(hexMama, 0.5, {delay:1, alpha:0, ease:Linear.easeOut}));
buildHexTL.append(TimelineMax.allFrom(addHexes, 1, {delay:1, stagger:.2, scaleX:0, scaleY:0, ease:Back.easeOut}));
buildHexTL.append(TweenMax.to(this, 1, {onComplete:hexGlow}));
}
//make the hexes glow!
var hexGlowTL:TimelineMax = new TimelineMax();
var glowHexes:Array=[hexOrangeA,hexOrangeB,hexOrangeC,hexOrangeD,hexOrangeE,hexOrangeF,hexOrangeG,hexOrangeH,hexOrangeI];
hexGlowTL.stop();
//hexGlowTL.append(TimelineMax.allTo(glowHexes, 1, {glowFilter:{color:0xffffff, alpha:1, blurX:5, blurY:5, quality:3}}));
hexGlowTL.append(TimelineMax.allTo(glowHexes, 1, {colorMatrixFilter:{colorize:0xffffff, amount:0.5, brightness:1.5}}));
hexGlowTL.yoyo = true;
hexGlowTL.repeat = -1;
function hexGlow():void {
hexGlowTL.play();
}
//add hexes tp array
var diceArray:Array=[hexOrangeA,hexOrangeB,hexOrangeC,hexOrangeD,hexOrangeE,hexOrangeF,hexOrangeG,hexOrangeH,hexOrangeI];
//add listeners to all hexes
for (var i:Number = 0; i < diceArray.length; i++) {
diceArray*.id=i;
diceArray*.buttonMode=true;
diceArray*.useHandCursor=false;
diceArray*.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
diceArray*.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
}
//This is called when the mouse is over the button
function mouseOverHandler(event:MouseEvent):void {
//Get the button from the event
var hex:MovieClip=event.target as MovieClip;
var maxIndex:Number=this.numChildren-1;
//set up internal hex animations
if (event.target.id == 0) {
TweenMax.to(hex, 0.5, {delay:1, alpha:0, ease:Linear.easeOut});
trace (event.target.id)
}
//remove glow
//TweenMax.removeTween(glow:TweenMax):void
TimelineMax.allTo(glowHexes, 1, {colorMatrixFilter:{colorize:0xffffff, amount:0, brightness:1, overwrite:1}});
//TimelineMax.allTo(glowHexes, 1, {glowFilter:{color:0xffffff, alpha:0, blurX:0, blurY:0, quality:3, overwrite:1}});
hexGlowTL.stop();
//tween the ****er
this.setChildIndex(event.currentTarget as MovieClip, maxIndex);
TweenMax.to(hex, 0.3, {delay:0, scaleX:4, scaleY:4, ease:Back.easeOut});
;
}
//This is called when the mouse moves away from the button
function mouseOutHandler(event:MouseEvent):void {
//Get the button from the event
var hex:MovieClip=event.target as MovieClip;
//resume glow
hexGlowTL.play();
//tween the ****er
TweenMax.to(hex, 0.5, {delay:0, scaleX:1, scaleY:1, ease:Back.easeOut});
}
//call the hex function
buildHex();