Aspire - Product Designer

Aspire has revolutionized the way youth sporting pictures are taken.  Providing a green screen allows the players and the parents to design their own posters, shirts, and even trading cards.  At Rain I was the primary Flex developer for Aspire’s product designer.  The designer allows users to design custom posters, shirts, trading cards, team pictures, blankets, and other products.

After being in beta since July 2008, we released the major release of Aspire in September, 2009.

Aspire’s business model is unique.  Aspire does a photo shoot, uploads the green screen photos, autogenerates all products for each player, and then sends the player an email letting them know their account is ready.  The user can then login and customize their own products.

Aspire was featured in an Adobe Max Keynote by RainInteractive ’s Andrew Howlett (32 min). Keynote: http://bit.ly/BAmiI

“Trading cards are a top seller! Nowhere else on the planet can one design and order a trading card this way! We greatly appreciate the awesome tool you have created.” – Chris from Aspire

Aspire - Poster Designer

Photo Scaled 200% inside ImageWell. 50 dpi.

Custom book builders are great rich internet applications that we’ve made at Rain. One core component of custom book builders is allowing users to upload their own photos. The most common user error is uploading and using a photo that cannot be printed at a high quality print resolution. It is our job to let the user know if the image he or she has selected for a particular ImageWell (a rectangle where a photo can be placed) can be printed.

Basics of printing

Printers print according to dpi (dots per inch). Say a 1200 px x 1800 px image is printed onto a 4″ x 6″ sheet of paper. The dpi would then be:

• width: 1200 px / 4 inches = 300 dpi
• height: 1800 px / 6 inches = 300 dpi

Print resolutions can vary anywhere from 150 dpi (low/medium quality) to 300 dpi (high quality) and up.

Our Example

First we need to define two variables:

1. Final print resolution dpi
2. Warning dpi

For this example we will use a final print resolution of 300 dpi and we will show a warning if the image resolution is lower than 200 dpi. The user has uploaded a low resolution 400 x 500 photo to our photo book application. The user has placed the photo into an ImageWell that is 1200 x 1200 (square). Then the user scales the image to 200% which crops the photo and lowers the dpi.

Note: By selecting a final print resolution of 300 dpi, this means that the 1200 x 1200 ImageWell is equal to a 4 inch by 4 inch square when printed. If you do not understand this, please reread it until you do.

User Photo

ImageWell

Photo Scaled 200% inside ImageWell. 50 dpi.

What the user does

When the user places the 400 x 500 photo into our 1200 x 1200 ImageWell, the image is scaled by 3x to fit the width of the ImageWell resulting in an actual image width of 1200 x 1500.

The user then scales the image inside the ImageWell to 200% (not the ImageWell itself) resulting in an actual image width of 2400 x 3000. This also crops the photo.

How to calculate the Image Resolution

We now need to figure out how much of our image is actually being displayed inside the ImageWell. For width, we will take a ratio of the ImageWell’s width comparative to the actual image width. imageWell.width / image.width or 1200 / 2400 = 50%. For height, 1200 / 3000 = 40%

Now we need to see how many pixels of our original photo we will be using when we print the photo in the ImageWell. Let’s see what 50% of the original uploaded image’s width is. 50% x 400 px = 200 px. For height, 40% x 500 = 200 px.

So the user essentially wants to crop out a 200 x 200 square out of our photo and put it into a 1200 x 1200 ImageWell. Some red flags should be going off in your head. 200 / 1200 = 16.67% of the print resolution.

So to calculate the dpi of the cropped and scaled image, we multiply 16.67% x 300 dpi (final print resolution) which equals 50 dpi. Clearly we can see that 50 dpi is lower than our warning dpi of 200 and we should display a warning message to the user letting them know that the image cannot be printed.

Here is the logic implemented in Flex Actionscript 3.0. This code sample handles image rotation, cropping, and scaling. Special thanks to Aaron Hardy for helping with the implementation of this code.

Note: This code sample is within an extended version of ImageWell.as which is part of Rain’s SVG parsing library. Simply copying and pasting this code into your application will not work. This code is provided for you to learn from and as evidence that the logic works in an actual project. If you wish to use this code, you will need to implement logic and modify variables to get it to work in your application.


/**
* Check image resolution to ensure it meets minimum image resolution requirements.
* If image resolution is too low, call showWarningDisplay()
*
* @see ConfigVO printPixelsPerInch for print resolution which is 300 dpi
* @see ConfigVO printPixelsPerInchMinimum for minimum print resolution which is 200 dpi
*/
protected function checkImageResolution(e:Event = null):void
{
// Please Note: PhotoVO (photo) is the photo on the server
// image refers to the photo that has been loaded into this image well
// I only refer to width to simplify. Height is also accounted for.
//
// -----------------------
// Example:
// A 400 x 500 PhotoVO put into a 1200 x 1200 ImageWell then scaled to 200%
// 1) The image is scaled by 3x to fit into the ImageWell resulting in an image with
// size 1200 x 1500. The image is then scaled 200% to 2400 x 3000.
// unrotatedImageBounds will give us these numbers and account for
// scaling and rotation.
// 2) wellWidthToImageWidth tells us what percentage of the PhotoVO width will actually
// be put into the ImageWell for print. i.e. 1200 / 2400 = 50%
// 3) photoWidthInImageWell tells us how much of the PhotoVO's width will be put into
// the image well for print. i.e. 400 * 50% = 200 px;
// 4) widthDpiScale tells us what percentage the photo width is relative to the
// ImageWell width. i.e. 200 / 1200 = 16.7%
// 5) dpiScale is the minimum value of widthDpiScale and heightDpiScale. i.e. 16.7%
// 6) dpi is then determined by multiplying imageScale * config.printPixelsPerInch
// i.e. 16.7% * 300 = 50 dpi
// Config from Model
var config:ConfigVO = AppModel.instance.config;
// Get the Actual Image Bounds width and height even if the image is rotated and scaled
var unrotatedImageBounds:Rectangle = image.displayObject.getBounds(image.displayObject);
unrotatedImageBounds.width *= Math.abs(image.displayObject.scaleX);
unrotatedImageBounds.height *= Math.abs(image.displayObject.scaleY);
var wellWidthToImageWidth:Number = width / unrotatedImageBounds.width;
var wellHeightToImageHeight:Number = height / unrotatedImageBounds.height;
var photoWidthInImageWell:Number = photoVO.width * wellWidthToImageWidth;
var photoHeightInImageWell:Number = photoVO.height * wellHeightToImageHeight;
var widthDpiScale:Number = photoWidthInImageWell / width;
var heightDpiScale:Number = photoHeightInImageWell / height;
// Calculate dpi in terms of Config's printPixelsPerInch
var dpiScale:Number = Math.min(widthDpiScale, heightDpiScale);
var dpi:Number = Math.round(config.printPixelsPerInch * dpiScale);
// Show warning appropriately if dpi does not meet minimum dpi requirement
if (dpi < config.printPixelsPerInchMinimum)
{
showWarningDisplay(true);
}
else
{
showWarningDisplay(false);
}
}


What is FXG?
“FXG 1.0 describes an XML-based graphics interchange format for the Flash Platform. FXG contains high-level graphical and text primitives that can be used to create, group, transform and visually modify basic vector and bitmap shapes. The FXG rendering model follows very closely the Flash Player 10 rendering model and exposes all graphics capabilities of the Flash platform as well as offering expandable support to accommodate future capabilities of the Flash Player. The specification below dives into the technical details governing every element of FXG 1.0.”

FXG Specification:
FXG Specification Link

Blog Posts:
Mike Chamber Blog Post – Why Adobe Chose FXG Over SVG

Mark Ander’s Blog Post – Flash On The Beach – FXG & SVG

How to start playing with FXG:

1. Get Flex Builder 4 source and use it in Flex Builder 3: Download Nightly Build
2. How to
   • http://livedocs.adobe.com/flex/3/html/help.html?content=build_6.html#162812
   • http://blog.vivisectingmedia.com/2008/08/binding-source-for-flex-4-in-flex-builder-3/

Finally a file format that Adobe can share across its programs that can easily be written and displayed.

Update 13-Oct-2008 – I originally stated that Adobe was no longer continuing SVG support, when really they are discontinuing support for the Adobe SVG viewer.  This article can be found here: Adobe Discontinues Support for SVG Viewer

Adobe Student Rep for RIA

Yesterday I was welcomed as an Adobe Student Rep for Rich Internet Applications. I am excited to get the Flex community going at BYU and educating other students about what Adobe Flex is and what an RIA is. Since I do this for work, I find it is easy to share my passion and my love for it with others.

I created a user group for BYU students. If you are a BYU student, join the group and enjoy the perks of being a member. You do not need to be an active Flex developer to join, you just need to be interested in what Flex is. I will be hosting an event this semester to get things kicked off.

Adobe Flex

Flex 3

Flex 2

Flex Builder

My buddy Bryce Barrand found that Orem is the Flex Capitol of Utah

My buddy John Anderson discovered that Utah is also #1 in search for web technologies such as PHP, CakePHP, MySQL, and Linux.

PHP

CakePHP

MySQL

Linux

Utah is definately one of the tech capitols of the United States.

Overall I found the test to be challenging. I wouldn’t take it without sufficient preparation. Here are my Flex 2 study preparation tips:

1. Attest – provides practice tests and quizzes. Some questions on the official test came from the questions found on these practice tests.
2. Lynda Free 7 Day Trial
3. Flex 2 Advanced: Using Data Services - a must because the average flex developer hasn’t used RemoteObjects or WebServices very much and the test is roughly 30% on these topics.
4. Flex 2 Beyond the Basics – great review of advanced flex topics.
5. Flex 2 Essential Training – great review of basic flex topics.

Obviously use the flex documentation as a reference over concepts that you are unfamiliar with.

Topics founds on the test that I rarely used include: IViewCursor, Flex Data Services.

Good luck.

We are creating an RIA that needs the ability to scale down a large SVG to a web editor and then scale it back out for a print-ready SVG. Flex would take a 300 px font, convert it to a 127 px font, and then scale it down. This caused our textfields to be very small and inconsistent.

To solve this, you require two things.

1. Crossdomain Policy
2. Local Apache Web Server

Regardless if this is a bug, the host server still needs a crossdomain policy at the root of the domain. Here’s an example crossdomain.xml policy.

The next problem is that you cannot load external compiled swfs from a
document root (c:/my documents/flex projects/myProject/myProject.html) until the bug is fixed.

PC Users:
What I did is installed easyphp. Next, I set up an alias in easyphp. Right click on the ‘easyphp’ icon in the taskbar -> administration. I set the alias to my bin folder of my project so that when I access the url http://127.0.0.1/myProject/myProject.html it loads up my bin directory. Also in my debug settings in flex I set the default debug and run path to launch as http://127.0.0.1/myProject/myProject.html.

Now my css/style swfs are loading great remotely. The only downside is having to run easyphp on top of everything just to load in my external compiled font swfs.

Mac Users:
Thanks to Bryce Barrand

• go to system preferences
• click on sharing
• click on “web sharing” (this will turn on the automatically installed version of apache)
• edit apache’s httpd.conf file (should be found at disk/private/etc/apache2/httpd.conf)
• Find the line that says /Directory>
• Just after that, add an Alias for each project that you want to test such as this:

  Alias /nameOfAlias /pathToYourFlexBinFolder

• Set your directory node attribute to “/pathToYourFlexBinFolder”. Set the directory node value to:

  Options Indexes FollowSymLinks MultiViews
  AllowOverride None
  Order allow,deny
  Allow from all

• Restart the webserver by unchecking and rechecking the “web sharing” checkbox

should be good to go after this. you can see the results by going to http://localhost/nameOfAlias in your browser

On April 26, Adobe announced strategic plans to move the development of Flex to an open source model.

Adobe is announcing plans to open source Flex under the Mozilla Public License (MPL). This includes not only the source to the ActionScript components from the Flex SDK, which have been available in source code form with the SDK since Flex 2 was released, but also includes the Java source code for the ActionScript and MXML compilers, the ActionScript debugger and the core ActionScript libraries from the SDK. The Flex SDK includes all of the components needed to create Flex applications that run in any browser – on Mac OS X, Windows, and Linux and on now on the desktop using “Apolloâ€?.