Exploding bitmaps

[temeraire]

Hi,

 

I'm new to the forum and am delighted to have discovered Greensock!

 

I'm trying to explode a bunch of bitmaps. By that I don't mean explode each one; rather, I have an array of them and I want each item in the array to move outward from the center. They're actually words, but because this is going to end up on a mobile device, I'm using bitmaps with hardware acceleration instead of sprites. So what I've done is created an array of word objects (of type object), each of which has a "bitmap" property, and each bitmap is located at the same position as the word from which it is taken.

 

So, for instance, to access the x property of an object in the array, I use arrWordObjects.bitmap.x

 

I'm trying to take these word bitmaps and have them move outward from the center of the stage.

I tried TweenMax.allTo(arrWordObjects.bitmap ,1, {x:200}); //just using x:200 as a test to see if I could get them to move.

 

But the error I get is in TweenMax line 871: var l:int = targets.length; -- it's showing targets as null.

 

How would I do this?

 

Thanks!

[GreenSock]

TweenMax.allTo()'s first parameter must be an array, but it looks like you're passing in a Bitmap object. If you're just trying to tween one thing, you'd use to() instead of allTo(), like:

 

TweenMax.to(arrWordObjects.bitmap ,1, {x:200});

 

As far as animating things out like an explosion from a particular spot, you might want to look at the code example in the words explosion SplitTextField demo at http://www.greensock.com/tweenlite/#plugins and there's a somewhat related tutorial that might be helpful at

[Carl]

here is just another example of a bunch of stuff tweening:

 

http://www.snorkl.tv/2011/04/fun-and-qu ... ster-bomb/

 

this example usese timelinemax so that the animation can be easily paused and reversed.

 

------

 

keep in mind allTo tweens many things TO the same place. since all your objects are starting in the center and going somewhere else... you may be more interested in allFrom. you could manage your effect with a single allFrom assuming all the items are on the stage where you want them to end.

 

c

[temeraire]

Thanks, guys.

 

Since I want them all to end up in different places, it seems to me that what I have to do is this: I know the center point of the textfield (which is called explodeOrigin in your splitTextField example). And I know the x and y position of each word/bitmap. So I can draw a line from the center to that x,y point. I can then get the angle formed by that line. If I choose a point off the stage, but in line with that line, t hen that should be my destination point for each word (that is, a different destination point for each word, emanating out from the center.) I don't know what the AS3 trig is to define that point for each item, but does that sound like the correct approach?

 

-- David

[Carl]

yeah that sounds pretty good.

 

you could also use Physics2D (see example in plugin explorer) to apply a velocity and angle to each item. This will save you from calculating an end value. perhaps you can just give them enough velocity to move "far enough".

[temeraire]

Hi,

 

The explosion itself is working fine, based on a clickhandler:

                       var obj:Object;
                       var finished : int = 0; 
		for each(obj in arrWordObjects)
		{				
                              var angle:Number = Math.atan2(obj.bitmap.y-centerY, obj.bitmap.x - centerX);
			var dist:Number = -2000;  //this just gets everything offscreen nicely
			var destX:Number = obj.bitmap.x  + dist * Math.cos(angle);
			var destY:Number = obj.bitmap.y  + dist * Math.sin(angle);
			TweenLite.to(obj.bitmap,2,{x:destX, y:destY});
			if(++finished == arrWordObjects.length){
		                flyInRewrites();
				return;
			}

 

I can't use onComplete, because I'm calling TweenLite.to() in a loop. So that last conditional works, calling the next function only if the for-each loop has completed. I know it's being called (with a trace statement) but it doesn't seem to work

 

What I'm doing is flying in new text, in place of the original. So, I've done the exact same thing to position textfield2's bitmaps outside of the visible stage to start with. Then, I call flyInRewrites:

 

		var obj:Object;
		for each(obj in arrRewrittenWordObjects)
		{
                          //sample trace statements showing that the starting points are out of view, 
                          //and the destination points are where they should be:
                          //obj.bitmap.x, obj.bitmap.y = 1895.5,813.1     obj.X, obj.Y = 2,2  
                         //obj.bitmap.x, obj.bitmap.y = 1888.65,850.6    obj.X, obj.Y = 12,2
			TweenLite.to(obj.bitmap,.5,{x:obj.X, y:obj.Y});
		}

 

But I see nothing -- nothing's flying in. Any idea why?

 

Thanks!

 

David