Apple Internship - The Offer

Apple decided to offer me an internship this summer. I’m headed to Cupertino (San Jose), California from May 24 – Aug 20. I will be doing software development for them, more specifically Adobe Flash, Java, and iPhone development for their retail point of sale division. I was interviewed a total of 5 times, once on campus, two phone interviews, and two iChat video interviews. It was quite a process.

When the official offer came, it felt like I was opening my first iPod. The 3-fold pristine white offer with the Apple logo was exactly what you would expect from Apple.

Apple has an incredible company culture.  A fellow BYU MISM alumni stated “One year at Apple is like three years at any other company.” I’m interested to see first-hand what Apple’s internal processes are like.

Kellie will continue to work at KSL as a morning show producer and will be in California with me for 15 of the 90 days.  It will be tough not seeing her every day, but she will be coming out to visit almost every other weekend.

Working in Silicon Valley has always been on my to-do list, I can’t wait to see what it is like.

Download NoteSync Desktop

Follow NoteSync on Twitter

Fan NoteSync on Facebook

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);
}
}


Thanks to everyone that came to the Adobe Flex presentation at BYU.  It turned out great.  Many people learned what Flex can do and found solutions to ideas they had.  Thanks to Rain Interactive for sponsoring the event with Papa Johns Pizza.  Special thanks to the Web Startup Group for hosting the event.  They recorded my presentation and have my slides hosted on their site.

Adobe just produced Tour De Flex an AIR app that allows you to tour all of Flex’s features.  Great for those who are curious about what flex can do.  For developers, this tool is great because it allows you to actually see the code to produce the feature that is shown.

Adobe states that Tour De Flex has three primary features:

• Provide non-Flex developers with a good overview of what is possible in Flex in a “look and see” environment
• Provide Flex developers with an illustrated reference tool
• Provide commercial and non-commercial Flex developers a place to showcase their work

Check out the Tour De Flex Web Site

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.

Photoshop.com is the solution for online photo storage, photo back ups, and basic image editing in one location.  Photoshop.com hooks into all my facebook and flickr photos and allows me to make touch ups like remove red-eye.  Within minutes I had uploaded an album of pictures and had edited them.  I was then able to share this album with friends and make it public at http://satara.photoshop.com

Photoshop.com features:

• Photo Galleries
• 3D Carousel Photo Slideshows – They Look Amazing and will put a smile on your face.
• Photo Backup – Upload all your photos to one location. 2 GB for free account
• AIR Uploader – Desktop application that uploads your photos seamlessly
• Basic Photo Editing tools – rotate, crop, red-eye, adjust color, etc
• Syncs with Facebook, Flickr, Photobucket, and Picasa
• Embed Albums on web sites – like I have above

I highly recommend photoshop.com for all your online photoshopping needs.

Check out my Photoshop.com albums: Brady’s Photoshop.com Albums

This application allows you to create regular expressions and then test them on the fly. I highly recommend downloading this application for testing your regular expressions. I used this to successfully debug some regex parsing errors taking an SVG into flex.

Download RegEx Desktop AIR Application
Live Web Application