Additional Work Samples

Misc. Personal Projects (present)

I have been promoting my own advancement of web knowledge with several personal projects in between freelance work. Here are some recent projects:

• Watermelon Flip Portfolio - designed and developed my current portfolio in ActionScript 3.0 which was inspired by the menus of Portal 2 and the simplicity of About.me. Each tile dynamically renders a determined portion of two target DisplayObjects for the front and backface. The tiles are sorted into diagonal rows and flipped in sequence which creates a neat cascading effect. I also use Adobe's pixelate filter I modified in PixelBender, and animate with my custom tween class. All projects in the portfolio are defined in XML.
• ChristopherBaileyStewart.me - Designed and developed an experimental HTML5 audio website with JavaScript and jQuery. I use jQuery to load JSON data which stores song information like title, .mp3 urls (and .ogg urls for Firefox & Opera). I had to learn the hard way that to use .ogg in Firefox online with GoDaddy hosting you have to include a ".htaccess" file with parameter "AddType audio/ogg .ogg".
• eBook Reader Experiment - experimental JavaScript reader loads entire book in JSON data with jQuery and displays a page-by-page experience with HTML5 audio. Each page may have multiple frames in which new audio and text overlays occur with an image that scales and/or shifts position in the viewport for effect.
• Swangin Bros JukeBox - designed and developed an ActionScript 3.0 audio player for artist The Swangin Bros that used JavaScript/Flash bridging which allowed HTML links on a page to load additional playlists in the player. I added my custom vertical touch-scrolling interactivity which allows long vertical lists to scroll with kinetics and spring-back easing similar to how modern touch-screens function.

Cali Freelance Samples (2009-2010)

NOTE: Each of these four work samples are under NDA (Non-Disclosure Agreement) and I am limited on what I can say about them.

- Built touch-screen multi-media GUI for an in-flight entertainment device using ActionScript 3.0. The interface featured several horizontal sliders all defined by XML that interacted by both touch and arrow buttons. The GUI allowed users to navigate media such as movies, tv shows, games and music, select one, and view information about it and play clips of each. Long pieces of vertical information could be touch-scrolled with my custom VerticalTouchScroller class which turns any DisplayObject into an interactive object that behaves much like information does on any modern touch-screen device.

- Built touch-screen multi-media GUI demo for another in-flight entertainment device using ActionScript 3.0 and timeline animation. This demo focused on mockup animations, but also featured complex code used to allow interactive touch-screen scrolling of horizontal and vertical multi-media information.

- Created an interactive shopping cart GUI in ActionScript 3.0 that allowed users to add parts to a base product. Each product was defined in XML including price, description & image url. Slick ghosting animations guided the user's eye from the part they just added to their shopping cart. The cart's viewport scrolled to reveal the new part as well as Yellow Fade Technique which boosted the User Experience.

- Built interactive product imager for prominent camera company with ActionScript 3.0. XML was used to define 40+ additional parts that could be added/removed via drag and drop. The product, along with any user-added parts, could be rotated at four pre-rendered 3D angles. Flash's Shared Object feature was used to store the user-added parts combination, and upon return rebuilt the display where the user left off.

After Effects Animation Reel (2005-2011)

Reel - my short After Effects animation reel.

I've been animating in some form for many years. In my reel you will see my ability to use animation concepts such as weight, volume, easing and timing.

Touch-Slide (2007-present)

After watching the original iPhone commercial back in 2007 I was deeply inspired to recreate its photo browsing experience in Flash. Touch-Slide has become the most complicated widget I have ever made, and is easily one of my favorite achievements in ActionScript 3.0 thus far.

The complexity of this widget is disguised at first, because it appears so simple, but 3,600+ lines of code might help convince you otherwise. Once you start to flip through the images with a simple slide gesture, arrow keying or mouse-wheeling it will start to spoil you. You won't want to navigate anything by clicking again. It's rare to find interactivity like this on the web in Flash and this makes me proud that I have achieved this first on the web.

• Touch-Slide Classic Gallery - a customizeable version I sell for $29.
• Touch-Slide Polaroidz - a stylized version that loads photos into Polaroid frames and adds bit of random rotation.
• Touch-Slide Mini - a older, but free version that loads Flickr albums, and is embeddable, try it!
• Words Card Slider - a word/phonics version for my mom so she could teach her students.
• Touch-Slide Air - a version for Adobe AIR that can load photos using the native file chooser.

ONEsite Video Player (2008)

A versatile, resizeable ActionScript 3.0 widget I made while at ONEsite which they featured on many of their client pages. It went full-screen, was embeddable, and allowed user ratings via communicating with JavaScript/Flash bridging. It could also receive calls from JavaScript to load and play additional videos in succession. Certain features could be turned off or hidden alltogether such as ratings and the title bar.

NOTE: If you "view source" on any of these pages and search for "tofPlayer" you can see that it was named after me :)

Below are some of the sites that ONEsite features the player:

• Club.KS95.com (this implementation is fully featured) (see middle right of page)
• LivingInHD.com (one of Panasonic's many pages with video)
• CavFanatic.com (this is their video section. click any video to view the player)

Capcom-unity Menu (2008)

Capcom, a leading video game developer, provided ONEsite with graphics for this Flash menu system for their fan community site, and I programmed it in ActionScript 3.0. Once the page loads you should note the slick easing and motion blur of the rollover graphic. Cmd-click (Ctrl-Click PC) the "login" button to initiate the Tester's login which enables more functionality.
Capcom-unity.com

Cleveland Cavaliers User-Activity Widget (2008)

This was a skinnable "user-activity" widget for ONEsite that posts the last several things that the user has done. The widget makes a service call that returns XML data of the user's recent activity and the widget outputs as many as will fit in the designated space.

Below is an example from user "Joe Gabriele":
CavFanatic.com (see "I Am A Cav Fanatic" widget at bottom right)

More ONEsite Widgets (2008)

NOTE: Several widgets I made for ONEsite were never used, unfortunately, but some are available upon request.

• Drawrings - ONEsite widget that functions almost exactly like the Graffiti app on Facebook which is a drawing app with replay ability and draggable timeline slider.
• Video List - ONEsite widget that calls a service which populates it with video thumbnails, clicking them triggers JavaScript which can then control the Video Player widget (see above).
• Mini Portfolio - ONEsite widget that uses XML to load 5 thumbnails, clicking them transitions a larger image using displacement mapping and color offset dynamic animation.
• Uploader - Widget for users to upload photos to a ONEsite network.
• Sign-up Form - Widget that allows new users to create an acount on a ONEsite social network.
• Slide Show - ONEsite widget that takes a user's photos and creates a slide show with the "Ken Burns Effect".
• Video Thumbnail Capture - Widget that allows a ONEsite user to capture any frame in their uploaded video to create a thumbnail for it.

My Old Portfolios (2004 - 2010)

• Folio 2010 - i went with a pretty basic layout with some fancy springy rotational tweening. I also implemented a sweet PixelBender 'pixelate' filter.
• Folio 2009 - i used Flash's relatively new native 3D properties to tilt graphics and Touch-Slide.
• Folio 2004 - my academic portfolio for my senior year of Oklahoma State University.