How can I rotate an image in iAd by clicking on a button?

Question

I wan't to create a iBooks Author Widget with an image (asset, protractor) that will rotate when I click a button (object).
The rotation angle must be adjustable by a TextField.
Please help me with this, my JavaScripts skills let me a bit down on this...
With Regards, Tom
So, the protractor (in dutch Geodriehoek) must rotate as I click on the button.

Answer 1

Hey Tom,
In addition to the spin action, you can use a bit of javascript to apply a transform to any object on a page to set an arbitrary angle and doing it within a transition, you can smoothly animate the rotation.
Given a page with an object subclassed from view - like your ImageView - and a couple of buttons, you can trap the button taps and within the onViewActivate code look at the current transform (rotation) value of the object and increment it by plus or minus 1 to rotate in either direction.
The increment button would have something like:
this.onViewActivate = function (event) {
          // Code here for the "Activated" event.
     // myView is the outlet name of the object on the page I want to rotate
   var myView = this.viewController.outlets.view;
   var newValue = null;
     // see if the object has any transform (rotation) to begin with
    if (myView._transform == "none") {
        newValue = "rotateZ(0deg)";
    else {
          // parse the existing transform to get the current value
        var start = myView._transform.indexOf('(') + 1 ;
        var end = myView._transform.indexOf('deg)');
        var value = myView._transform.substring(start,end);
          // increment the value
        newValue =  "rotateZ(" + ++value + "deg)";
   var myAngleTransition = new iAd.Transition({
        target : myView,
        properties : ['transform'],
        from : [myView._transform],
        to : [newValue],
        duration : [1.5]
    myAngleTransition.start();
and the decrement button would have the same code with "++value" changed to "--value".  This sample steps by 1 as well but you can add smaller values to value if you want finer control/
There's probably many more elegant ways to do this but this works none the less.
Cheers,
-Mark