Sunday, January 22, 2012

Creating a Flex AIR Screenshot app: Part 1

Today I am starting a new series dedicated to creating a new web screenshot tool using Flex AIR.

When a web developer is creating a website, and if the said developer cares about the userbase that will view the site, he has to think about how his site will look on different resolution monitors.

According to W3C statistics, most common computer screen resolutions are 1024x768, 1280x1024, 1280x800, 1366x768 and some others - obviously, the same site viewed on these monitors would look different. To test how exactly it would look on different resolutions, the developer would have to manually capture screenshots of the site in different resolutions and compare them to see what's different. The results can also be then given to the employer, to show that the site looks good on different screens.

Here's some screenshost of my WIP site in 3 different resolutions. You can see that even though the sizes are different, this doesn't affect the content in any way and displays properly everywhere:

1024x768

1280x800

1680x1050

The process of taking screenshots can be really time consuming, especially when there are so many resolutions to test. The developer would have to take screenshots, import them into an image editor like Photoshop, and so on - or, he could use a tool that does all this for the developer in seconds. That's the application we're going to create.

The program works like this - the developer launches the software, then loads a local HTML file or a webpage on the internet using a built-in web browser, sets what resolutions he wants to test the site on (he can choose multiple) and then export them as picture files.

Moreover, we'll add more useful screenshot-related features to the program, such as selecting a specific area in the site (basically crop an area) and export it as an image, or view and save the site in its full length without having to scroll and take screenshot segments individually and then "glue" them together in Photoshop, getting a picture like this in result:



This tutorial series will be a step-by-step guide on how to create an AIR application with all these features. The final product will be a free open source program called Kirshot, that you can edit and add your own features to.

I am using the latest version of FlashDevelop, with Flex 4 and AIR SDK - all of those are free tools. It is not necessary for you to use these tools too, but, if you don't want to have any difficulties with following my process, you might want to use FD - this is due to the project directory layout it creates and which I find pretty easy to use. It also makes the process of compiling and testing easier.

And that's it for introduction - I will start working on it and show you how to do it starting from the next part!

Thanks for reading!

No comments:

Post a Comment