For the last year and a half at Rain I’ve been working on Studio J, Close To My Heart‘s flagship online scrapbooking application. It’s been quite a ride but the result is really quite revolutionary.

Here’s how it works. Hop onto Studio J. You don’t even need an account. You can log in anonymously on the left side of the login page. Once the application opens, create a project. Upload some photos. Choose the kit (set of papers) you would like to use. Choose the pattern (orientation of papers). Choose from a few pre-designed mixes that will get you started out with a great-looking scrapbook spread. Now drop in photos, brads, clasps, ribbons, and stickers. Distress or swap papers at will. Add some text. The amount of customization possible for each of these elements really is amazing and Close To My Heart did their best to make it a powerful experience. Once your spread is complete, you can order a copy that will be printed using CTMH’s super-high-quality printing process and materials and it will be shipped to your door.

I know it may sound like a sales pitch, but I really do think is a fantastic application of technology and CTMH put a lot of focus on giving customers what they want. It was really fun to work on an app that gives users so much control. To read a very fair review of Studio J, check out this article by Craft Critique.

The Juicy Details

You know how much I just loooove to talk about scrapbooking. But oh how I love to talk tech so much more. Here are some interesting tech aspects of Studio J particularly related to the frontend since that’s the portion with which I’m most acquainted:

For the most part, StudioJ is developed in Flex for the frontend and PHP on the backend. The backend and assets are hosted on Amazon’s cloud infrastructure. This provided some unique challenges but resulted in big scalability benefits. For speed, some assets like user photos are uploaded directly to the cloud which requires an ActionScript Amazon API adapter and a little trickery for integration with the rest of the backend.

To store a user’s spread data to be later edited and printed, we utilize SVG. Every element on the spread in ActionScript has a counterpart element in an SVG document. This translation and all the rotating, scaling, panning, colorizing, and other editing tools are provided by our in-house Rain SVG library. This to me is the most powerful and distinctive part of the app.

To improve the user experience, we developed a queuing and caching system. It allows us to cache assets (re-use the same bitmap data in multiple parts of the app and avoid Flex image item renderer flickering issues), prioritize HTTP requests (make sure whatever the user is viewing gets top priority), and even trigger timeouts and/or retry requests. I talked in-depth about this system at the 360|Flex conference and Adobe is adding a similar system to the new Spark image component in Flex 4.5.

The new Text Layout Framework was used in providing text editing functionality on user spreads. This got a little tricky when loading fonts at runtime. It got even trickier when consolidating the undo history for multiple text flows into the spread’s overall undo/redo system. Then we integrated custom support for sizing text to a container.

We used modules to reduce some of the initial app size and provide some domain logic distinction. We added image editing tools so you don’t have to drop into Photoshop to make some simple tweaks to your photos. And the list goes on.

In the end, it’s an ambitious application and I’m glad I could contribute. We have a lot of ideas for additional features and improvements and wish the best for its success. Now go try it out and let me know what you think!

Suppose we create a simple product designer containing a single rectangle. The user can rotate, scale, position, and color the rectangle. The rectangle will then be printed in spectacular fashion on the customer’s very own poster. So, Jim hops into the application and moves the rectangle to the center of the poster, doubles its size, colors it blue, then rotates it 45 degrees. He then saves his design.

How is Jim’s design saved? That is, how is Jim’s design described in such a way that (1) he can later re-open it and continue modifying his rectangle and (2) a printing shop can print his poster at virtually any size without degrading its quality?

The most common way to save an image is by using a raster format such as gif or jpg. While there are very good use cases for such formats, this is not one of them. A raster format describes an image by using a grid of pixels with each pixel carrying a color value. For example, the pixel at 1, 1 is red; the pixel at 1, 2 is green; and so on. Put all the pixels together and your eye sees an image.

Raster images don’t fulfill our requirements for a couple reasons. First, raster images have no knowledge of internal elements. It doesn’t store information about which pixels belong to a rectangle and which belong to a circle. An application may be able to analyze the pixels and make a good guess, but because the “grid of pixels” is only two-dimensional, once elements begin to overlap and become more complex even guessing turns impossible. This would greatly restrict the ability for our application to re-load a user’s work for further editing.

Second, because raster images are a grid of pixels with each pixel carrying a color value, the image cannot scale to an arbitrary size without loss of apparent quality, otherwise known as pixelation. To illustrate, imagine an image one inch wide that has 300 pixels on the first row of the pixel grid. You later decide you would like to print the image at two inches wide instead of one inch wide. The 300 pixels now must be spread across an area twice as wide as the original. While the image is made larger, no additional detail is available for the added area. The human eye begins to notice this extrapolation of data resulting in a loss of apparent quality.

So how do we store the data then? We use a vector format. Rather than storing image data in a pixel grid, vector graphics store data by using points, lines, curves, and shapes. Because the descriptors are all based on mathematics, the image can be enlarged to an infinite size without loss of quality. Likewise, a certain knowledge of the design’s individual elements is retained and can be used when loading a design for further editing. Below is a graphical comparison of vector and raster (bitmap) art:

In 1999, a group of industry leaders collaborated to make a vector specification called Scalable Vector Graphics (SVG). Although other vector formats existed previously, they each carried various restrictions or encumbrances. SVG was designed as a lightweight, open standard that could easily be used amongst a variety of applications on a variety of platforms. Design and printing applications could easily store and exchange vector design information.

While SVG is a great format for storing design data, users still need an environment where they can interact with design elements and have all the functionality of a full application. Using Flex, Rain is able to leverage both the ubiquitous Flash player browser plugin for interactivity and SVG for persistent storage. Rain has developed a library which translates what users see in the browser to a SVG file stored on the server. If users wish to continue editing their design, the SVG can be loaded back into the product designer. When the user is ready to order, the SVG document can then be shipped off to the printer.

While that might seem impressive, the real power of Rain’s SVG library comes from the complementary tools built to empower clients and their users. For starters, users can rotate, scale, crop, pan, color, add text, mask, draw, and drag-and-drop. Clients can guide users by specifying specific areas to drag-and-drop photos, enabling or disabling certain tools for individual elements or types of elements, and providing pre-built design templates.

Because the library is our own, we can tweak it as necessary. We understand that every product designer is unique and carries its own set of business rules and capabilities. We have experience implementing product designers for a wide variety of products from logos to shirts to sports trading cards to keychains. Dream away and we’ll make it happen, cap’n.