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

lucamezzalira

I’m the VP of Architecture at DAZN with more than 15 years of experience, a Google Developer Expert on Web Technologies and the London Javascript community Manager I had the chance to work on cutting-edge projects for mobile, desktop, web, TVs, set top boxes and embedded devices. I am currently managing DAZN, a sports video platform based on the cloud with millions of users that are watching live and on-demand contents. I'm the author of Front-End Reactive Architectures published by APress: https://goo.gl/ywAmsx I think the best way to use any programming language is mastering their models, that’s why I spent a lot of time studying and researching on topics like OOP, Functional and Reactive programming. In my spare time, I wrote for national and international technical magazines and editors, I'm also a technical reviewer for APress, Packt Publishing, Pragmatic Bookshelf and O'Reilly. I was speaker at: O'Reilly media webinars, O'Reilly Software Architecture (San Francisco & London), O'Reilly Fluent (San Jose), O'Reilly Oscon (London), Google Developers Summit (Krakow), Google DevFest (London), Frontend Devs Love (Amsterdam), Voxxed Days (Belgrad & Bristol), JeffConf (Milan), International Javascript Conference (Munich & London), JS Poland (Warsaw), Code Europe (Wroclaw), JSDay (Verona), CybercomDev (Łódź), Jazoon Conference (Bern), JDays (Göteborg), Codemotion (Milan), FullStack Conference (London), React London UG (London), Scrum Gathering (Prague), Agile Cymru (Cardiff), Scotch on the rocks (Edinburgh & London), 360Max (San Francisco), PyCon (Florence), Lean Kanban Conference (London), Adobe Creative Suite CS 5.5 - Launch event (Milan), Mobile World Congress (Barcelona)

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

  1. 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..:)

  2. 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 ?

  3. 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.

  4. 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.

Leave a Reply to SPanks Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s