Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha
Accepted Solution

Rotating objects

Hi guys,

 

I tried this for some hours today and am now desperate enough to ask...

In a project I need to rotate an image (not animated) around it's center. According to the web there are several Actionscript3-ways, but not a single one worked for me.

 

Here's my basic code:

 

var cInner:Image = new Image;
	cInner.setImage('inner.png');
	cInner.setSize(470,470);
	cInner.setPosition(50,50);
	cont3Container.addChild(cInner); // cont3Container is used for layout purposes

 

 

Try I

 

cInner.rotationZ = 10;

 

If any of the parameters rotationX/Y/Z are set, the image disappears magically - altough the AIR debugger still shows cInner's correct position and size.

 

Try II

 

cInner.rotation = 10;

 

It works "somehow", but deforms my image (skew) and moves it to other (x,y) coordinates.

 

Try III

Using the method I found here (creating a seperate transition matrix). I get the same result as in Try II: a deformed image.

 

Try IV

A friend of mine told me it would be wise to wrap my image in a new MovieClip and rotate the whole clip ("the 'ol Flash way of doing things"). But I failed creating this special kind of container:

 

mov = new MovieClip();
	mov.width = 470;
	mov.height = 470;
	mov.x = 50;
	mov.y = 50;
	addChild(mov); // or added to cont3Container - makes no difference
	
/* ... */

mov.addChild(cInner);

It does not show up - AIR debugger tells me, that mov's width is 0 (zero).

 

 

I think I need an expert now. Who can help? Ugly workarounds are highly appreciated. :smileywink:

- - -
My approved apps @ App World
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Rotating objects

Odd.  Have you tried adding the image to a Sprite and then try rotating the Sprite?

Please use plain text.
Developer
biggerCC
Posts: 270
Registered: ‎12-13-2010
My Device: PlayBook 16GB, BB10 Dev Alpha

Re: Rotating objects

Sprites behave the same way:

 

 

var spr:Sprite = new Sprite();
	spr.width = 470;
	spr.height = 470;
	spr.x = 450;
	spr.y = 150;
	spr.addChild(cInner);
	addChild(spr);

	trace(spr.width);

 I suppose trace should return 470. Insted it returns 0 and I have no clue why...

 

- - -
My approved apps @ App World
Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Rotating objects

@biggerCC: the reason for the invalid width read out is because that read out is before the image is actually loaded. it takes time for the Image object to load the image from the file system. the code you have runs "instantly" so it prints it out to you before the load is complete. you have two options, to get a correct read out, you have to either add an event listener and listen for the Event.COMPLETE event on the image and then retreieve and the widths and heights or you can use an embedded image and it'll work for you without needing an event listener because the image is "preloaded" into your application.

 

as for the rotation, i've never tried but seems really interesting. im gonna have to try it out. good luck!

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
Developer
jffurlan
Posts: 1,003
Registered: ‎01-16-2011
My Device: PlayBook (sim)

Re: Rotating objects

[ Edited ]

Could it be that you have to embed the image similar to rotating labels?

 

EDIT: JRab beat me to it lol

- If you like my response/post, or it helped you find an answer you were looking for, please provide a Kudo - white star to the bottom right of this post. -
- Please use the search bar at the top, or check out the PlayBook FAQ's for help getting started -
- Hockey DrillBook -
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Rotating objects

No, fonts are different in terms of rotation.  There is absolutely no reason why an image cannot be rotated once it has been loaded.

Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Rotating objects

[ Edited ]

hey biggerCC,

 

i managed to get a circular object rotated as expected. it takes some doing though. the concept of rotation is a little different because i think AS3 takes the point of origin of a sprite and rotates it there, however we wish it would rotate based on a midpoint.

 

the solution to that is to use a matrix as you had previously discovered. i found the following website and ran through its code and pumped out my own based on it. so all credit goes to this website:

 

http://www.8bitrocket.com/2007/10/30/Actionscript-3-Tutorial-BitmapData-rotation-with-a-matrix/

 

as for the code, here it is:

 

ImageTest.as:

 

 

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	
	import qnx.ui.buttons.LabelButton;
	import qnx.ui.display.Image;
	
	[SWF(height="600", width="1024", frameRate="30", backgroundColor="#BBBBBB")]
	public class ImageTest extends Sprite
	{
		[Embed(source="images/BallNumber.png")]
		private var myEmbeddedImage:Class;
		
		private var myBitmap:Bitmap;
		private var myImage:Image;
		private var myBtn:LabelButton;
		
		private var rotationObjectData:Object;
		
		
		public function ImageTest()
		{
			super();
			
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			/**
			 * Setup your bitmap image
			 **/
			
			myBitmap = new myEmbeddedImage();
			
			/**
			 * setup your rotation object data
			 * i found its best to keep it all organized
			 * to one object just as the original website had it
			 **/
			
			rotationObjectData = new Object();
			
			/* setup the orignal data to we are working with by grabbing the bitmap data */
			rotationObjectData.sourceBitmapData = myBitmap.bitmapData;
			
			/* set up the bitmap data that we are going to modify constantly keeping the original intact */
			rotationObjectData.displayBitmapData = new BitmapData(myBitmap.width, myBitmap.height, true, 0xFFFFFFFF);
			
			/* we copy the original data to the modifiable data */
			rotationObjectData.displayBitmapData.copyPixels(rotationObjectData.sourceBitmapData, new Rectangle(0,0,myBitmap.width, myBitmap.height), new Point(0,0));
			
			
			rotationObjectData.rotation = 0;
			
			/**
			 * Set up your image object
			 **/
				
			myImage = new Image();
			
			/* set the original image the user sees to the source bitmap data */
			myImage.setImage(rotationObjectData.sourceBitmapData);
			myImage.setPosition(100,100);
			
			addChild(myImage);
			
			/**
			 * setup your button to rotate with
			 **/
			
			myBtn = new LabelButton();
			
			myBtn.label = "Rotate";
			myBtn.setSize(150,52);
			myBtn.setPosition(700,300);
			
			myBtn.addEventListener(MouseEvent.CLICK, onClick);
			
			addChild(myBtn);
			
		}
		
		private function onClick(e:MouseEvent):void
		{
			/**
			 * this is where it gets hairy
			 **/
			
			/* set the rotation increase from its previous number */
			rotationObjectData.rotation += 18;
			
			var degrees:int = rotationObjectData.rotation;
			
			/* the rotation value is in radians so we need to convert our degrees to radians */
			var angle_in_radians:Number = Math.PI * 2 * (degrees / 360);
			
			/**
			 * Setup the rotation matrix
			 **/
			
			var rotationMatrix:Matrix = new Matrix();
			
			/* all this transform the rotation matrix so we can have our bitmap data transformed later */
			rotationMatrix.translate(-(myBitmap.width / 2),-(myBitmap.height / 2));
			rotationMatrix.rotate(angle_in_radians);
			rotationMatrix.translate((myBitmap.width / 2),(myBitmap.height / 2));
			
			/**
			 * using the rotation matrix, we create our rotated bitmap (finally)
			 **/
			
			var matrixImage:BitmapData = new BitmapData(myBitmap.width, myBitmap.width, true, 0x00000000);
			
			/* based on the original image, we create the new rotated image using its bitmap data */
			matrixImage.draw(rotationObjectData.sourceBitmapData, rotationMatrix);
			
			/* we set our modifiable displayBitmapData property to the new image */
			rotationObjectData.displayBitmapData = matrixImage;
			
			/**
			 * Set the new image after rotation
			 **/
			
			myImage.setImage(rotationObjectData.displayBitmapData);
		}
	}
}

 

 

I've included comments as much as i could to explain it. if you need further explanation, please let me know. i've also attached the image i used for the testing. also you may notice i used an embedded image. it makes things a whole lot easier and its quick (no need to load from the file system). you can changet he embed path to anything you want without changing the rest of the code and the same rotation will apply.

 

hope that helps. was pretty fun. good luck!

 

@jffurian: sorry :smileywink:

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.
Regular Contributor
Rossman
Posts: 51
Registered: ‎02-02-2011
My Device: Not Specified

Re: Rotating objects

Problem is likely that you have to offset the child (your image) within the container to get the rotation you want.

 

 

 

var spr:Sprite = new Sprite();

//this will make sure that spr 0,0 coords are the centre of your img
cInner.x = -( cInner.width / 2 );
cInner.y = -( cInner.height / 2 );

// we have to add have the width and height again to make it look like its in the same spot
spr.x = 450 + (cInner.width/2);
spr.y = 150 + (cInner.height/2);
spr.addChild(cInner);
addChild(spr);

// then!
spr.rotation += 45; // or however much you want

 

HTH

Please use plain text.
Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Rotating objects

Just happens I encountered this issue today and did a lot of the same research. I was lucky enough to stumble over the Rotator class, which totally solved my problem, is small and simple, and even works nicely with Tweener.

 

The basic problem seems to be that image rotation works on a "registration point" at the upper left corner of the image.  This means it will rotate, but not around its own centre, so it can easily "vanish" as you've seen.


Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Rotating objects

[ Edited ]

@peter: does seem pretty simple. i gotta admit i spent a good five minutes playing around with the demo on that page haha. i have such an addictive personality :smileyvery-happy:

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Please use plain text.