Little tricks to rotate images in Flex
11 Comments so far
Leave a comment
February 7, 2008, 5:34 pm
Filed under: Flex | Tags: rotate component, rotate image, rotation actionscript, rotation flex, tricks flex
Filed under: Flex | Tags: rotate component, rotate image, rotation actionscript, rotation flex, tricks flex
My last project is an Image manipulator made with Flex and AIR, so I guide a user to manipulate (rotation, resizing…) an image, choosen from own computer, with a wizard.
When I was at Rotation step, I said: “and now?!”.
Infact if you use rotation property of an Image component it rotates in 0,0, but there is a little trick to rotate an image or component with origin in the middle.
If you use Rotate effect, you can decide which is the origin point, so if you write:
var rotEff:Rotate = new Rotate(); //img is the ID of Image component in MXML file rotEff.target = img; rotEff.originX = img.width/2; rotEff.originY = img.height/2; rotEff.duration = 1500; rotEff.angleFrom = img.rotation; rotEff.angleTo = img.rotation + 90; rotEff.play();
With those script you can rotate an image or component in the middle.
That’s a little trick!
Enjoy
11 Comments so far
Leave a comment
Leave a comment
Line and paragraph breaks automatic, HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>






That’s awesome
Comment by Tony Fendall February 7, 2008 @ 8:57 pmNice one! Thanks for sharing. I might use it for the next template for my photoblog. Keep up the good work!
Comment by xistense February 8, 2008 @ 2:07 ami’m sorry but…what is flex?And MXML file?
Comment by Rizki Akmanda February 28, 2008 @ 3:53 pmFlex is the BIG brother of Flash and you can use it to make Rich Internet Application.
MXML is the language that you write to create Flex files or better MXML files because the extension is .mxml
You can find more info at:http://www.adobe.com/products/flex/?promoid=BPDEQ
If you have any questions please write an email at: luca[@]mart3[.]org
Enjoy
Comment by lucamezzalira February 29, 2008 @ 1:04 amwow, this is exactly what i was looking for. thanks! haha can’t believe it was that simple
Comment by GP November 11, 2008 @ 6:42 amyah…it’s a trick but it has bugs..
Comment by flexyGurl November 13, 2008 @ 9:55 ami am making some effects including rotate effects for my project.. but there’s a bug.
Although it rotates, the image keeps running anywhere from screen. I don’t know how to solve this.Any ideas?Please help. I used your code. but it does the same with mine…thanks in advance..:)
you can solve this problem if you disable rotation until to the first one is finish and launch another one after finish the previous
Comment by lucamezzalira November 13, 2008 @ 10:35 amHi,
Comment by Arnaud November 21, 2008 @ 1:31 pmWould you have another tip about the resize that the rotation seems to involve ?
I’m building a new component and this is the last issue I’m facing : when the image is rotated inside the component, its size is changed and then, the container is also resized.
Fixing the w and h of the updateDisplayList() of the container ?
Thank you for this – saved me some time.
Comment by Topper February 2, 2010 @ 12:43 pmDo I need Flex Builder 4 for this? Or do I need to import any library? For me it’s complianing that the variable type (or , data type) is not found. I am new to Flex (I am actually a low-leve software developer) — today I wrote my first Flex program.
Comment by Noor Amin May 16, 2010 @ 5:49 amNo, you need Flex 3 only.
Comment by lucamezzalira May 16, 2010 @ 10:47 pmRotate class is in Flex effects package