What does a perfect blend of PHP, AJAX, Flash and a very capable developer get you? One of the best examples of rich internet application (RIA) programming on the Web.

Active Media Architects (Headquartered in St. Clair Shores, Michigan) built MyKleenexTissue.com for global giant Kimberly-Clark Corporation (NYSE: KMB) and their Kleenex brand team. The Website gives customers the ability to completely design and individualize their own Kleenex Ovals cartons and order them online. Built around the Web firm's Activa Canvas, a Rich Internet Application that lets users design in freeform through their browser, and its Activa Commerce professional ecommerce system, the Website presents customers with a virtual, freeform design canvas with which they can literally design unique labels for Kleenex. Each design can be previewed in rotating, interactive 3D around the oval-shaped carton before ordering. Designs can also be saved to a customer's account, allowing them to return at a later time to continue with the design. The Website lets you choose from dozens of background images, add digital photos, frames, clip art and text and freeform design within the pre-proportioned canvas area. Customers can even deliver their ovals to multiple locations, making it easy to send gifts.

"One of the challenges with giving customers this much control is making the experience intuitive and friendly," said the project's director at Active Media Architects. "To completely individualize and order an oval Kleenex box online is a big technical challenge. Add on top of that the enormous scale of the project and you have a lot of work to do."

Other challenges included a short time frame for launching the Website and therefore, a short development and QA period, However, since Active Media Architects had already developed their Activa Canvas, they were able to spend more time on tailoring and customizing the application to fit the unique needs of the Kleenex team's product and Website.

Active Media Architects started developing the Website in mid-2006. "Fortunately, when the client contacted us, we were able to demonstrate how our software worked and they were sold," he said.

Truth be told, a lot of sleepless nights were spent developing this project. The development team at Active Media Architects worked 12-18 hour days plus weekends for almost 3-weeks to meet the client's deadline. Fortunately for everyone there, the company provided a few sponsored dinners and catered breakfast and lunch for the last week and a half leading up to the launch.

Platform and browser compatibility was a big focus for Active Media Architects. They wanted to be sure everyone had a chance to access the Website without limiting them by their choice of operating system or Web browser. This meant an exhaustive testing and quality assurance period where they relied on real customer feedback while using every platform combination imaginable, made up of combinations of Windows (XP, Vista), Mac OS X and Linux, and Internet Explorer (6, 7), Firefox and Safari.

The Website was built using a number of popular and trusted programs and technologies, with a great amount of open source products and software at the core of the site. Here's a short list:

• Red Hat Enterprise Linux
• Apache Web Server
• MySQL Enterprise
• PHP 5
• Activa Framework
• Activa Canvas
• Zend Platform
• Adobe Flash
• Macromedia Director

The developer's Activa Framework, which began its development in 2001, takes full advantage of PHP 5's Object Oriented features to allow for a very modular, stable, and maintainable application. The modular nature of the Activa Framework made for more efficient testing of individual modules as they were developed, rather then waiting for a usable application to begin testing. While not a full replacement for final site testing, this did make it easier to catch problems in the code before they became part of the application's foundation.

Zend Platform was a good decision because of two key featuers - Session Clustering and PHP Intelligence. Session Clustering allowed the developer to make the application easily scalable across multiple servers, which was important to maintain the availability expected of this project. PHP Intelligence took care of monitoring the application for faults and error reporting. While Active Media Architects considered developing both of these features into the application themselves, using the Zend Platform freed up a lot of time to work on other key pieces, and allowed them to put all of its resources towards building out the core functionality.

Using MySQL Enterprise was an obvious choice for several reasons. First, the ability of the MySQL server to scale across multiple servers with little adaptation meant Active Media Architects could insure a high availability for the site. Second, the community support for MySQL insures that if a problem does come up, the developer would have the resources available to get it resolved quickly. Finally, MySQL Enterprise offered the assurance that they had the most reliable and secure build of MySQL available at all times - even after launch.

Developing Activa Canvas

Long before MyKleenexTissue.com was even on the drawing board, Active Media Architects developed their Activa Canvas application. When considering the requirements the developer set for the application and what it would need to fulfill, it became apparent that they would need to utilize Adobe Flash for the central canvas piece. Flash was essential to deliver the seamless and fluid user experience they wanted. They also had some challenges in that they required that much of the interface lay inside of HTML and CSS rather than entirely in Flash. The code would instead surround the Flash-based canvas area. To accomplish this, they used Flash 8's ExternalInterface class to communicate with javascript within the Web page, enabily them to utilize their considerable library of AJAX techniques in conjunction with Flash.

The Activa Canvas application stores designs using Active Media Architects' internally developed XML format. When a user saves a copy of a design produced within the application, they use ActionScript they wrote to generate XML. They then take advantage of Flash's ability to upload the XML (detailing the size, content, images, text, alignment, placement, etc.) to one of their application servers. The challenge was transforming this XML description into something usable by a printer. The obvious format choice here was a PDF, but this conversion to PDF would need to take place server-side. By building up a customized version of the excellent and free FPDF Library for PHP, they were able to develop a very stable and flexible engine to build PDF documents from the Activa Canvas XML.

Developing MyKleenexTissue.com

When Kimberly-Clark came into the picture with the MyKleenexTissue.com idea, the project's first major technical hurdle also ended up being one of the most exciting pieces of the final project - the rotating, interactive 3D preview. Active Media Architects wanted a way for users of the site to see how their designs would look when wrapped around the Kleenex Oval carton so they could make any necessary adjustments - before ordering.

The commercial offerings for 3D Flash wouldn't work because of the dynamic texturing and speed considerations. So, they began investigating the possibility of developing a custom 3D engine of their own. But because Flash wouldn't have access to the computer's 3D hardware, using Flash in this manner proved to be too slow. They needed to look outside of Flash for an answer, and that answer was an obvious one - using Adobe Shockwave.

With this solution, the developers were able to convert the Kleenex Oval CAD designs and utilize them in a Shockwave movie. Now, when a user wanted to preview their design, they could offer them a unique, interactive 3D view.

They used Flash 8's BitmapData class to capture a snapshot of the design and upload it to the server which would then be retrieved by Shockwave. The result was a very acceptable build and render time for a majority of users and of course, a great looking, semi-realistic representation of the custom oval carton with which the user could easily interact.

Another big consideration was the enormous scope and scale of the project. Currently available for customers in the United States, the site will also be available in Canada and the United Kingdom, and possibly more countries and regions, soon. The Website and application had to be robust enough to handle the thousands of expected users. This affected the infrastructure of the server environment that they built to handle the application. They had to ensure their would be enough processing power and enough storage space to hold massive amounts of media files including high resolution PDF's, JPG's and PNG's.

One other thing that might not be immediatly apparent when visiting and using the Website. They are actually producing a print-ready label directly to the printer - true Web to print. In addition, they are delivering for print the actual full color packing slip that gets shipped with each order. It really is an end-to-end solution and a completely automated setup.

The End Result

• Runaway success with customers and positive exposure from the media.
• Freedom to personalize the design of decorative Kleenex Oval tissue boxes.
• Preview designs in life-like, interactive 360-degree 3D.
• Automated processing of orders, content checking and moderation system, and delivery for print.
• Near-identical cross-browser, cross-platform experience.
• Modular high-availability server architecture and application design is easily scalable.