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

Viewing Word Documents with Flex

Recently I have started a very interesting project and part of the project is to be able to display .pdf and .doc files in a flex application.

[Source: www.sudafrica.it/documenti%20calcio%202010/Zakumi.doc ]


[Source: http://www.primussoccer.com/Zakumi.pdf]


For the pdf I had luck finding this great tool FlexPaper. The idea behind it was to convert the pdf to swf using PDF2SWF from SWFTools so for every page of the PDF document you had a frame in the swf.
FlexPaper does a great job for viewing .pdf documents, but what about .doc?
Well I guess the solution had to be pretty much the same - convert the doc to swf and display it with FlexPaper. Unfortunately I could not find any good doc to swf converter.

So I asked myself why not just convert the Word document to Adobe Reader document and then do the same what I am doing for .pdf documents (convert them to .swf and view them with FlexPaper). That seemed like the straight-forward solution. Converting .doc to .pdf (and other various formats) is really easy with OpenOffice and it comes for Windows, Linux and Mac OS. When you open your document you just have to click File and Export as PDF.

After that we start PDF2SWF from the command-line with the corresponding options

However if you want to make this process programmatically in a headless mode here is the solution. There is this Java library called JODConverter that relies on OpenOffice that comes here for the help.
So here is how to convert Word documents to Adobe Reader documents programmatically with Java

public static File convertToPDF(File file){
  String oldFilePath = file.getAbsolutePath();
  //change the extension to .pdf
  String newFilePath = oldFilePath.substring(0, oldFilePath.lastIndexOf(".")) + ".pdf";
  
  OfficeManager officeManager = new DefaultOfficeManagerConfiguration().buildOfficeManager();
    officeManager.start();

    OfficeDocumentConverter converter = new OfficeDocumentConverter(officeManager);
    File newFile = new File(newFilePath);
    converter.convert(file, newFile);
    
    officeManager.stop();
    
    return newFile;
}

After we are done with this, we have to convert the pdf to swf

private static File convertToSWF(File file) throws IOException{
    String oldFilePath = file.getAbsolutePath();
    //change the extension to .swf
    String newFilePath = oldFilePath.substring(0, oldFilePath.lastIndexOf(".")) + ".swf";
    
    //calling pdf2swf to convert our file.pdf to file.swf

    String[] command = { "pdf2swf", file.getAbsolutePath(), "-o", newFilePath, "-f",
            "-T 10", "-t", "-G"};
    
    Process p = Runtime.getRuntime().exec(command);
    
    BufferedReader in = new BufferedReader(new InputStreamReader(p.getInputStream()));  
    String line = null;  
    while ((line = in.readLine()) != null) {  
        log.info(line);  
    } 
    
    return new File(newFilePath);
}

This is my workaround for viewing Word Documents with Flex, maybe you have a better solution? I'd love to hear it.