It has been a good year!

WOW Just a couple of hours ago I wrote my last post and now another one! I was just redesigning my blog and adding new features when I saw my first post... it was written on 8.8.2009!!

So it's now an year of blogging. I didn't write a lot, but I surely enjoyed the posts I have created.

Let me tell you the truth. I have started this blog with the idea to be a technical blog mainly about flex, to learn new things, to share them with the readers and hopefully some of you learnt and started using new (good) things.

Just for the record I wanna put out brief statistics of my blog.

• 1990 - Absolute Unique Visitors
• 3989 - Pageviews
• 01:53 - Time on Site
• Keywords - Visits
  1. flex spring file upload - 35
  2. "flex 4" perspective projection - 33
  3. flex browsing directories - 30
  4. blazeds+upload files - 14
  5. flex custom layout - 13
  6. flex 4 custom layout - 12
  7. flex spring upload - 11
  8. spring flex file upload - 11
  9. flex upload - 9
  10. "springflex-server" - 8
• Oh yeah, and Flash Player versions (this should be interesting). From total visits 2606, only 64 (2.46%) didn't have flash player

Ok maybe you think this is not a lot of visits, but for me it is! It is very significant that almost all of the visits are purposeful, and the audience is just the one, for which the content of my site is.

I think I've succeeded with my plan and I have put up the foundations on which I will continue to build up knowledge.

I want to thank all of you that are supporting me by subscribing to my RSS, writing comments, writing me mails and of course taking the time to read one of my articles. Hope that I will continue with writing interesting stuff here

Man, It has been a good year!!

Animating the perspective projection of a DisplayObject

So as you probably know, in flex 3 we could animate objects only by their numerical properties. Which for most situations is enough, like positioning or resizing component. But sometimes you will want to animate a complex object, and in flex 4 that is possible using arbitrary type interpolation. You can see this great demo on the topic on adobe tv by Chet Haase. Mine example isn't nothing more special than his, I just decided to do it because I saw few people entering my blog wanting to see an example of using perspective projection other than in my previous post - custom flex 4 layout and because recently I had to do similar animation, but I have done it the "dirty" way (yeah I admit it), so I thought it is time to correct it.



The most important thing is our PPInterpolator and its method interpolate()

public function interpolate(fraction:Number, startValue:Object, endValue:Object):Object
{
    var startPP:PerspectiveProjection = startValue as PerspectiveProjection;
    var endPP:PerspectiveProjection = endValue as PerspectiveProjection;
    
    var currentPP:PerspectiveProjection = new PerspectiveProjection();
    currentPP.fieldOfView = startPP.fieldOfView + fraction * (endPP.fieldOfView - startPP.fieldOfView);
    currentPP.focalLength = startPP.focalLength + fraction * (endPP.focalLength - startPP.focalLength);
    
    var projectionCenterX:Number = startPP.projectionCenter.x + fraction * (endPP.projectionCenter.x - startPP.projectionCenter.x);
    var projectionCenterY:Number = startPP.projectionCenter.y + fraction * (endPP.projectionCenter.y - startPP.projectionCenter.y);
    
    currentPP.projectionCenter = new Point(projectionCenterX, projectionCenterY);
    
    return currentPP;
}

You see that we expect startValue and endValue to be instances of PerspectiveProjection and return a new instance based on these values as a value for the current moment of the animation.

The other thing is as just writing a normal animation, we are just setting the interpolator of the motion path to be the one we created and set the target of the animation the transform property of a group (it could be any other DisplayObject). Have a look at the valueFrom and valueTo, we are passing instances of PespectiveProjection

<fx:Declarations>
    <effects:PPInterpolator id="ppInterpolator"/>
    
    <s:Animate id="ppAnimate" target="{group.transform}" duration="3000" >
        <s:motionPaths>
            <fx:Script>
                <![CDATA[
                    import com.tgeorgiev.effects.PPInterpolator;
                ]]>
            </fx:Script>
            <s:SimpleMotionPath property="perspectiveProjection" valueFrom="{startPP}" valueTo="{endPP}" interpolator="{ppInterpolator}" />
        </s:motionPaths>
    </s:Animate>
</fx:Declarations>

The group that is the target of the animation just holds 3 images with different rotations and positions.

That's all, I suggest you play with the random animate button, for fun :)