Rustoleum hired Vivid Ascent to make a microsite to promote a new product, Rustoleum Transformations, a treatment for cabinets and countertops. One of the features that Vivid Ascent wanted to include in the microsite, was an interactive tool to demonstrate combinations of different colors of the product. My job was to create this interactive tool based on functionality requirements and a design specification provided by Vivid Ascent. I was the sole developer of this tool and used ActionScript 3.0, php, and xml.

Click here to see the site

Rustoleum Cabinet Transformations Product Line Includes 70 Different Colors- combine that with 5 different colors in the Rustoleum Coutertop Transformations, that is 350 different combinations of products

To ensure the best look, the creative director at Vivid Ascent insisted that each example image was prepared in Photoshop. My biggest concern was file size, to keep this Flash tool lean, there could not be 350, or even 70 different full scale images in the library. So, the solution was to load images dynamically as needed.

Utilizes Browser History and Reload Buttons- when the page is shared, the recipient will receive a link that brings them to the page displaying the selection made by the sender

Everytime the user changes the selected swatches, the hash value of the url is updated to reflect the new selection. If the user pushes the back button in the browser, the last selection made will be displayed.

Functionality Requirements Included Ability to Print, Save and Email an image of the kitchen with selected product images applied

If the user clicks print, their OS will open a dialogue box with print options, if the user clicks Save, their browser will open a dialogue box that will ask whether they want to save the image or open the image. If they click email, a simple form will slide up, the image will be sent as an attachment to the email address specified.

Tools I used while working on this:

• Flash CS3
• FlashDevelop
• ActionScript 3.0
• PureMVC
• Caurina Tweener
• Bulkloader
• SWFAddress
• php
• GD graphics library
• SMTP / mailTo()
• JavaScript (framework independent)
• CSS

University of Michigan Health Systems wanted to move their site off of a homegrown Coldfusion CMS into something with more features. They chose to have Element 115 develop the site in Fatwire because we already have a lot of Fatwire code with features designed for a large Health-Care System like UMHS. I contributed all the CSS during development time. After the site was released to the public, the CSS was handed off to their internal developers. In addition to the CSS, I contributed a large amount of the JavaScript.

UMHS Home Page

During the Development of the Site, the team was also trying to improve the code base that is reused for other clients

I was able to take all JavaScript off of the page and place it into external files. When the site was released there was nothing like “onclick=func();” anywhere on the page. Even better, all JavaScript was in namespaces / objects similiar to the new code that others had been developing. I also created CSS sprites.

UMHS Requires Their Site to Meet Accessibility Requirements UMHS received a grant that required us to develop a website that was accessible

Developers at Element115 have spent years tweaking their code base to contain text equivalents for images, labels for lists and general good development for web standards. The HTML structure, particularly the order the content appears in the HTML is optimized to show content first, and utilities like the search bar and global navigation at the bottom, this way users with no CSS, screen readers or mobile devices will get the content first. A new feature that I contributed to the UMHS site was closer attention to CSS active states and focus states, and also tab-index. A user can easily navigate the site using the tab key. It is clear to the user what element has focus.

Find a Doctor History enabled Ajax application

One of my first projects at Element 115 was work on the JavaScript for Find a Doctor. The other front end developers worked hard to create this search application that uses Ajax to refresh only part of the page. A search can be filtered and the results will update without a full page refresh. There was a problem though, some clients did not like that fact that the back button would not work. I have made history enabled Flash sites before, so I said that I was up to the challenge of making the back button work.

Click here to experience this

Here is a little piece of the JavaScript that I am particularly proud of. My strategy was to keep all the name value pairs of all the form elements in the url behind the hash. We use the Prototype JavaScript library on these sites. To put the value in the url I use Form.serialize() to get name value pairs. When the new results come in, I need to make the values of the form elements match what is in the url. I was able to set the values of each form element, without hardcoding a single form element in the JavaScript. To do this, when the ajax oncomplete handler runs, this piece of JavaScript runs:

// hashParams is set to an object with name value pairs equal to the hash value of the url
var hashParams = SWFAddress.getValue().toQueryParams();
// loop through each input in the filter form
$('filter_form').select('input').each(function(element){
	// see if the object has this value
	if(hashParams[element.name]){
		// set the value of the form element equal to this
		element.value=hashParams[element.name];
	}
});

Tools I used while working on this:

• Eclipse / Aptana
• SVN
• JavaScript (prototype / script.aculo.us)
• CSS (sprites)
• JSP
• Photoshop CS4

The campaign has a reach of almost 300,000 contacts and is managed through the powerful marketing automation software Eloqua.

Gogo Inflight Internet Email

Eloqua Allows Contacts to be Placed in Different Groups to Target Each Individually Aircell offers different types of promotions to different contacts based on past purchases

There are many challenges involved with developing HTML emails. Design Specs were created by a local Interactive Marketing and Aircell was expecting the emails to look like the design spec across all email clients. Now, I thought developing for all the different web browsers was tough, this is an entirely different story.

When Creating HTML Emails it is important to make all the information accessible if the sender views the email without images.

Luckily the design studio understood this and created designs that made it possible to use text for the copy. If a recipient viewed the email with no images, they would still see all the copy, and also see all the links.

Gogo Inflight Landing Page

referer = ExternalInterface.call('eval', 'window.location.hostname');

Then you just concat the referer var onto the end of your URLrequests. Simple right? Not quite. See, the client was encouraging their associates to put the widget onto social networking sites and personal blogs. Well apparently many of these sites strip out the allowScriptAccess=’always’ param of the embed/object tags. So Flash Player would pop up a screen that says:

ActionScript Security Error 2060: Security sandbox violation: ExternalInterface caller http://www.whateverdomain.com/whatever.swf
cannot access

http://www.whateverotherdomain.com/

So, what’s the fix?

I was able to work around this by using a try/catch block. I caught the security error and ran a couple string.split()’s:

var referer:String;

try
{
referer = ExternalInterface.call('eval', 'window.location.hostname');
}
// We can get the domain name out of the Security Violation error message
catch (e:SecurityError)
{
trace(e);
// just run some string.split's and we got it
var splitter:Array = emessage.split('//');
if (splitter.length > 2)
{
var splitter2:Array = splitter[2].split('/');
referer = splitter2[0];
}
}

I pulled these controls into seperate components and used binding to get the data to “trickle” down into the controls. The Accordion had four different panes, each with a datagrid, and each had a different filter for the data. Easy, assign a filter function and call the refresh function on the accordion change event.

The problem that we ran into was that we were losing our selected item in the datagrid every time new poll results came in. What I found to be the best solution: Create a variable that holds the value of the selected index of the datagrid. Assign it when the change event is triggered. Then create a setter for the array collection and assign the selected index of the datagrid to the value of the variable that holds your selectedIndex.

Click through to see the code.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
show="initGrid()" width="100%">
<mx:Script>

<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.ListEvent;

/*
* Accessor here keeps the right index selected
*/
[Bindable]
public var _dataForAccordion:ArrayCollection = new ArrayCollection();

[Bindable]
public function set dataForAccordion(val:ArrayCollection):void
{
if (dataGrid != null ) {
this._dataForAccordion = val;
dataGrid.selectedIndex = this.selectedItem;
}
}
public function get dataForAccordion():ArrayCollection
{
return this._dataForAccordion;
}

/*
* Other vars
*/
private var selectedItem:int = 0;

/*
* This causes the first item in the datagrid to be selected
* when it is first displayed
*/
public function initGrid():void
{
dataGrid.selectedIndex = this.selectedItem;
}
/*
* This function commits a selection on a DataGird rollover
*/
private function handleRollOver(event:ListEvent):void
{
this.selectedItem = event.rowIndex;
event.target.selectedIndex = event.rowIndex;
}

]]>

</mx:Script>
<mx:DataGrid id="dataGrid" itemRollOver="handleRollOver(event)"
width="468" height="210" dataProvider="{_dataForAccordion}" >
<mx:columns>
<mx:DataGridColumn dataField="property1"
width="45" headerText="property1"/>

<mx:DataGridColumn dataField="property2"
width="45" headerText="property2"/>

<mx:DataGridColumn dataField="property3"
width="45" headerText="property3"/>

<mx:DataGridColumn dataField="property4"
width="45" headerText="property4"/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>

http://www.mymusicplayer.ericschleeper.com/

This is actually three swf’s that connect to the same AMFPHP gateway. One is a fairly secure login/account create page, one is the admin page, and the last is the actual player.
To see more and download some of the source code, keep reading

The login page connects to the gateway and checks the user name to the password. If there is a match, the password is encrypted into a session variable and the user’s email address is stored in a session variable and the admin page loads.

I created the admin page with the Flex 3 SDK and a sweet text editor called Flash Develop. Flash Develop is an open source project and it also makes a great editor for Flash projects because it has Visual Studio-esque intellisense. So there are less typing errors and I can immediately tell if a variable or method was not initialized properly or if it is out of scope. Even for my custom classes. Plus it imports classes as you type. This makes programming faster and easier.

Click here to download the source of the admin page

These are log in credentials with filler data:
email: jim@morrison.com
password: thedoors

The DB is normalized and relational, but fairly simple. A user has many songs and many playlists, but songs can be on multiple playlists so there is a play lists to songs table. Also, the HTML page contains an Iframe where the upload page is, and an AJAX (prototype.js) call to display the player. This makes it so the page never refreshes.
The actually player is kind of sort of simple. I am using MVC in a similar manor I have used in the past (See my code section). All that the embed code has is a Flash variable that holds the id of the playlist. The php contains a select statement with a join to return URL’s and Song Names based on the playlist number. The actual player is the place I have the most work remaining, it is a little bit buggy and could use better design elements and functionality. I also plan on making more players and the user can pick which player they would like to use.

http://www.cerquarivera.org/revamp

Also, I created a music mashup site that uses the MTV content API, the lyrics fly API, and Amazon Web Associates API. I got some design help from a friend and we are happy with what we made. I am using WordPress for about 50% of the backend. However I am completely overriding the admin page and creating posts from Flash. Unfortunately, I just found out that MTV decided to remove the part of their API that returns the embed code for the video. A few weeks ago I noticed that it wasn’t working right, then it was working right again. So I don’t know what the future of this site will be..

http://www.videodelite.com/

Also, I have been doing some spec work for a photographer. I created a php site with an admin page that uses flex. The page is fairly simple:

http://www.ericschleeper.com/visexpressdev/

but my admin page uses Flex with remoting to php and it even looks up maps on Google Maps API.

http://www.ericschleeper.com/visexpressdev/admin.html

To work on my design skills I made a “fake” gourmet food store:

http://www.gourmetfood.ericschleeper.com/

http://www.code.ericschleeper.com/

Click Here to See the Thread on kirupa.com

Anyways I thought I would post these classes here.

This is the Subject Class:

package
{
import flash.events.*;
public class Subject extends EventDispatcher
{
private var yourVariable:String;
public function getYourVariable():String
{
return yourVariable;
}
public function setYourVariable(newOne:String):void
{
yourVariable = newOne;
this.update();
}
protected function update():void
{
dispatchEvent(new Event(Event.CHANGE));
}
}
}

This is the Subscriber Class:

package
{
import flash.events.*;
public class Subscriber
{
private var variableHolder:VariableHolder;
private var theOneInTheHolder:String;
//this will take the VariableHolder as a parameter when instantiated
public function Subscriber(vHolder:VariableHolder)
{
this.variableHolder = vHolder;
}
public function update(event:Event = null):void
{
theOneInTheHolder = variableHolder.getYourVariable();
trace(theOneInTheHolder);
}
}
}

The next code is what goes on the timeline, After you build it the output will say:
new Variable
new Variable
new Variable2
new Variable2

import VariableHolder;
import ListensForEvent;

var theHolder:VariableHolder = new VariableHolder();

var listener1:ListensForEvent = new ListensForEvent(theHolder);
theHolder.addEventListener(Event.CHANGE, listener1.update);

var listener2:ListensForEvent = new ListensForEvent(theHolder);
theHolder.addEventListener(Event.CHANGE, listener2.update);

theHolder.setYourVariable(’new Variable’);
theHolder.setYourVariable(’new Variable2′);

package {
import flash.net.URLRequest;
import flash.media.*;
import flash.events.Event;

public class MusicPlayer
{
private var soundReq:URLRequest;
private var sound:Sound;
private var soundControl:SoundChannel;
private var isPlaying:Boolean;

private static var _instance:MusicPlayer;

public function MusicPlayer(pvt:PrivateClass)
{
}

public static function getInstance():MusicPlayer
{
if(MusicPlayer._instance == null)
{
MusicPlayer._instance = new MusicPlayer(new PrivateClass);
}
return MusicPlayer._instance;
}

public function startMusic():void
{
sound = new Sound();
soundReq = new URLRequest("sounds/song.mp3")
sound.load(soundReq);
soundControl = sound.play();
isPlaying = true;
soundControl.addEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);
}
public function handleClick():String
{
var pausePosition:int = soundControl.position;

if(isPlaying == true)
{
soundControl.stop();
isPlaying = false;
return 'play';
}
else
{
soundControl = sound.play(pausePosition);
soundControl.addEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);
isPlaying = true;
return 'pause';
}

}
private function soundCompleteHandler(e:Event):void
{
// this makes the song play again from the beginning
soundControl = sound.play(0);
soundControl.addEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);
isPlaying = true;
}

}
}

class PrivateClass
{
public function PrivateClass()
{
//trace('Music Player initialized');
}
}

To use this, all you need to do first is get it and start the music:
var musicPlayer:MusicPlayer;
musicPlayer = MusicPlayer.getInstance();
musicPlayer.startMusic();
And then from anywhere else you can get it by using:

var musicPlayer:MusicPlayer;
musicPlayer = MusicPlayer.getInstance();
var whatWillItDoNextTimeICallhandleClick:String = musicPlayer.handleClick();

You can use this code for your own personal growth and feel free to leave a comment!