Little tricks to rotate images in 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

Published by

luca mezzalira

Being associated with the industry since 2004, I have lent my expertise predominantly in the solution architecture field. I have gained accolades for revolutionising the scalability of frontend architectures with micro-frontends, from increasing the efficiency of workflows, to delivering quality in products. My colleagues know me as an excellent communicator who believes in using an interactive approach for understanding and solving problems of varied scopes. I helped DAZN becoming a global streaming platform in just 5 years, now as Principal Architect at AWS, I'm helping our customers in the media and entertainment space to deliver cost-effective and scalable cloud solutions. Moreover, I'm sharing with the community the best practices to develop cloud-native architectures solving technical and organizational challenges. My core industry knowledge has been instrumental in resolving complex architectural and integration challenges. Working within the scopes of a plethora of technical roles such as tech lead, solutions architect and CTO, I have developed a precise understanding of various technicalities which has helped me in maximizing value of my company and products in my current leadership roles.

17 thoughts on “Little tricks to rotate images in Flex”

  5. yah…it’s a trick but it has bugs..
    i 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..:)

    Reply

  7. Hi,
    Would 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 ?

    Reply

  9. Do 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.

    Reply

  11. Very nice work, before visit that page i am working on custom class to rotate a custom component with moving from its center.

    Tahanks very much!
    Tahir Alvi

    Reply

  12. I want to have the following effect –

    I have an image. When i click that image, it should get selected. Once that image gets selected it should have the same rotation effect as that of the rotation effect in MS powerpoint.

    Is it possible in Flex Builder 3?

    Please help me fast. It is urgent.

    Reply

Leave a comment