Category Archives: freelance

My PlayBook Experience

As I posted before, I attended the PlayBook introduction in Toronto.

Free PlayBook? Yes, please!

The main draw of course is the offer of a free PlayBook for an approved app in the BlackBerry app store for the PlayBook.

As it so happens, I also have been pursuing a personal project for the past year, Moviesinhaiku. This seemed like a good fit for a tablet app.

There are a lot of great resources on how to get started with developing for the PlayBook, so I won’t touch on that too much. What I’d like is to go over some features of my specific app and some decision-making involved in making those features work.

Without further ado.
(note: all images resized from original screen size)

What should a Movieinhaiku look like?

The first problem I wanted solved was how I wanted to display my haikus. I didn’t want anything too elaborate because;
A) I couldn’t guarantee performance
B) They’re haikus about movies. How elaborate do they need to be?

I have been keeping an updated XML file handy on the moviesinhaiku test site. Each haiku looks like this;

<haiku answer='True Grit'>
<imdb year='2010'>tt1403865</imdb>
<haiku_text><![CDATA[A man with true grit.<br/>Girl hires. Catch father's killer.<br/>Vengeance costs in time.]]></haiku_text>
</haiku>

The Moviesinhaiku logo is essentially two rectangles, black stacked on white. Made sense to simply continue that for the haiku “cards”

I don’t want to discount the ease or difficulty in using XML and Flash. I’ve been using the exact same class for a long time now MainImporter for importing pretty much everything. But I’m not really going to get into parsing XML.

One thing I decided to try that was new to me was use the Dictionary class. It seemed like a great tool to store all my haikus. I’ll be completely honest in admitting that I don’t get it entirely, but it’s primarily a set of keys. So I created my Dictionary and pushed in all the haikus created so I could reference them whenever I wanted.


haikuDict = new Dictionary;
for each(var haikuXMLnode:XML in haikuXML..haiku){
   var haiku:Haiku = new Haiku(haikuXMLnode);
   haikuHolder.addHaiku(haiku);
   haikuDict[haikuCount] = haiku;
   haikuCount++;
}

Haikus on screen

Once I had my haikus in the dictionary, I wanted to scatter them around. The easiest way I could think to do that was to use the Orbit class I’d written for the Particle book for GalaxyGoo. Throw a little random into the mix and you get a nice, little random orbital display.

Third party services

I wanted to try and give more information than just the title of the movie so, as can be seen in the XML node above, I copied the IMDB identifier for each movie. A friend of mine did some quick searching and located The MovieDB. I applied for an API key and got to work. I set up two classes to get the information from teh interwebz to my app.

The first class I called APIcontrol and in essence just holds my API information; key, listing url and some static constants. The API results can be returned in XML and JSON. I’d never used JSON before and once again decided I’d be better off learning something new than just staying in my comfort zone. The first thing I needed was the as3corelib from Mike Chambers housed at github.
Specifically, I needed one class for one function call

import com.adobe.serialization.json.JSON;
var jsonObj:Object = JSON.decode(event.target.data);

Once again, how to work with JSON is all over the lazy web so I’m not going to get into it. It’s pretty easy and I think I’ll use it more.

The second class I wrote was called ImdbWindow. Technically, I should have called it TmdbWindow, I suppose. However, I didn’t and don’t like living in regret. ImdbWindow grabbed all the information from APIcontrol and created a window using; the movie poster, the synopsis, the array of genres and the release date. Example below. One thing that was very important I’d taken from a post by Christian Cantrell about scaling your images for mobile. Please read it as it’s important.

Filtering

Something I thought really mattered when I started was filtering. I liked the idea of the person using the device being able to view the haikus based on release or by title. In addition, I wanted to be able to give that same person the ability to search by text. There are a few things to consider when doing this so let’s see if I can break it down.

1. When alphabetizing, remember that a lot of movies start with “The”, “A” and “An”. When I store my haikus, each one stores an alphabetical version of their title. Writing a getter/setter for an alphabetic version of the title is as simple as;

public function set alphabetic($str:String):void{
   var tmpStr:String;
   if
($str.toLowerCase().indexOf("the ")==0){
      tmpStr = $str.substr(4,$str.length);
   }else if($str.toLowerCase().indexOf("a ")==0){
      tmpStr = $str.substr(2,$str.length);
   }else if($str.toLowerCase().indexOf("an ")==0){
      tmpStr = $str.substr(3,$str.length);
   }else{
      tmpStr = $str;
   }
   haikuAlphaTitle = tmpStr;
}

As you can see, I do a substring check at the beginning of the title for my little culprits and create a string that has those removed. This way, when I’m alphabetizing, they’ll make sense. The getter, of course, is just a getter, returning the alphabetic title.

Now how does one alphabetically sort? Using arrays and the sortOn method, of course!

I have two separate sortOn functions; Year and Title.

private function sortOnYear(firstHaiku:Haiku, secondHaiku:Haiku):Number {
   var aYear:Number = firstHaiku.year;
   var bYear:Number = secondHaiku.year;
   if(aYear > bYear) {
      return 1;
   } else if(aYear < bYear) {       return -1;
   } else {
      return 0;
   }
}
private function sortOnTitle(firstHaiku:Haiku, secondHaiku:Haiku):Number {
   var aAlphabet:String = firstHaiku.alphabetic;
   var bAlphabet:String = secondHaiku.alphabetic;
   if(aAlphabet > bAlphabet) {
      return 1;
   } else if(aAlphabet < bAlphabet) {       return -1;
   } else {
      return 0;
   }
}


(sorting in action)

As can be seen from the above image, the search by title is also active. This ended up being pretty easy. Since all the haikus are in the Dictionary, I was able to just set up an onChanged event with the textField. Then I compare the searched term with the haiku’s title. If there’s a match, I add the haiku to the displayList

private function onSearchHandler(evt:Event):void{
   while (mainHolder.numChildren) {mainHolder.removeChildAt(0); }
   haikuHolder = new HaikuLayout;
   haikuHolder.addEventListener(HaikuEvents.ADD_SCROLLBAR,addScroll);
   haikuHolder.startXposition = stage.stageWidth*.5;
   haikuHolder.startYposition = stage.stageHeight*.5;
   for (var key:Object in haikuDict) {
      // iterates through each object key
      var haiku:Haiku = haikuDict[key] as Haiku;
      var titleStr:String = haiku.title.toLowerCase();
      if(titleStr.indexOf(evt.target.searchStr) != -1){
         haikuHolder.addHaiku(haiku);
      }
   }
   haikuHolder.initLayout();
   mainHolder.addChild(haikuHolder);
}

Of course, no matter how close I thought I got to finishing, something would intercede and remind me that the worst thing you can be is your own boss. Especially when it’s a personal project. More especially when you’re not too busy with client work. Most especially when you like a challenge.

Just as I figured I was nearly done, Matt Fabb tweeted;

@wheniwas19 Looks like a v1 app to me! That said feature request: hide the title. ‘Cause it’s fun guessing the movie just from the haiku.

Which should surprise no-one that knows me I glommed on to like a barnacle to a ship (weird metaphor). So i felt like Matt was right, people should be able to treat this like a quiz! Well, that doesn’t bring me entirely back to the drawing board. So I decided to give it a shot.

Building a quiz

First things first, let people type in their answer or give them multiple choice? According to my friend, Drew, “Don’t give anyone too much to input. Your margin for error increases. Which is true. Unless I wanted to create a massive dictionary full of spelling options, I’d be shooting myself in the foot. So multiple choice it is. Simple enough, I suppose.

My solution is about as smart as I get. I have a list of titles provided by the xml. A huge list of titles. Why not pick four titles at random from the list and use 3 of them as alternates in the multiple choice. How would one do that, you ask? Lucky for you, I know how one does that.

Random numbers that don’t repeat

For some reason, for as long as I can recall, I have been building little functions that make non-repeating random number generators. I have my little RandomRange class so I add this function to it.

public static function nonRepeat(max:Number, num:Number):Array{
   var tempArray:Array = [];
   for (var i:int = 0; i < max && num > 0; ++i) {
      if (Math.floor(Math.random() * max - i) < num) {          tempArray.push(i + 1);
         num--;
      }
   }
   return tempArray;
}

This is easily called using var randomArr:Array = RandomRange.nonRepeat(titles.length,4);

So here I have an array with four random titles. Now I want to make sure none of the four titles are the answer. Don’t want to double up, right?

var answerCount:Number = 0;
var answersArrArray = [];
for(var i:int=0;i < randomArr.length;i++){    if(titles[randomArr[i]] != answerTitleStr){
       answersArr[answerCount] = new QuizAnswer(titles[randomArr[i]],answerWidthNum);
      answerCount++;
   }
}

Now I definitely have an array of four answers that are randomly pulled from all the titles in my xml and are not the answer. But I do, absolutely want the correct answer in the four. So I pop it into a random position in the answersArr array.

var realAnswer:QuizAnswer = new QuizAnswer(answerTitleStr);
answersArr[RandomRange.retrieveRandom(0,3)] = realAnswer;

Then all I need to do is build my quiz. As you noticed, I have a class called QuizAnswer that’s basically a textField with a black background that dispatches an event when clicked. If it’s the wrong answer, the textField is dimmed and the MouseEvent is removed. Process of elimination.

Once the quiz is answered, the process of pinging the Movie DB occurs again. I added in the option of seeing the haikus with or without titles and that’s how the whole app loads.

It ain’t over ’til it’s over

Just as I thought I was out, Matt Fabb pulled me back in with his innocuous question:

@wheniwas19 I don’t want to add more work for you, but I assume MoviesInHaiku app links to your Etsy shop?

Long story short, yes. I did. After Matt asked, but whatever.

So that’s it. Maybe not the most informative PlayBook post, but there is some thought to what I do. I have submitted the app at a cost of $1.99 to perhaps recoup some of the cost of building one of these things entirely on my own and on my own dime. I hope it’s approved, I hope people buy it and I hope they like it. I’m sure if they don’t I’ll hear about it.

My 2010 In Review

2010 was a strange year for me.

Freelance
Unintentionally I did less client work than I should have. When I started working on a portfolio, I had to wonder how I managed to pay my mortgage with how little work I did. Heck, I even griped about not working in April. You know that feeling that maybe it’s you? Yeah…

Moviesinhaiku – Watches, Prints, You know…
On the other side of things my self-directed personal project, Moviesinhaiku, started taking off. I was given some interesting opportunities involving my love of movies and haiku.

Firstly, Scott Wilk invited me to design a watch! That’s pretty much the coolest thing ever. I cannot wait for it to be finished. And I think we’ll continue the collaboration as I enjoy designing watches. I can’t vouch for Scott, but I am totally into it. And if anyone else wants me to design a timepiece, hellz ya is all I can say to that.


The casing from render to silver casting


The face from render to silver casting

I’ve been working on the second watch for a little while now. Very excited about that.

Secondly, Dana Brunetti from Trigger Street asked me to design a larger version of one of my prints and I opted for doing a brand-new triptych of their latest production, The Social Network. My first commission, as it were. Very exciting! Anyone wants a custom Moviesinhaiku original, let me know, I am down.


The Social Network tripych

Public Speaking
I was also truly lucky to speak 3 times this year at events. The Flashbelt conference, Flashonthebeach and FiTC Edmonton. I wrote about them individually before, so let’s just say I really love public speaking and my intended session for 2011 ought to be awesome. So far my only confirmed speaking engagement is for FiTC Toronto. This should be an amazing conference and I am truly excited about it. Any other conference organizers want me to speak at their events, let me know, I simultaneously love and hate public speaking, but I am getting a knack for it.

The Future
What’s on the horizon for 2011? Man, I know one thing, I am going to be working on a documentary film I am calling Influential – The Age of Digital. I blogged recently on how to create a wordmark and that was meant as a teaser to this project. Stay tuned, I am crazy excited about this project.


My upcoming documentary film project

If you know something about the film industry, man I can use some help. So far, I am stoked to know that the fine folk at Influxis will be involved and potentially FiTC. I don’t want to speak out of turn, so I’ll leave it there. Anyone want to throw money into a totally interesting project for a production credit, you need to let me know. Or however that works. I am hoping to find out soon.

Finally, I quit smoking. Feel really good about that.

Why Moviesinhaiku?

I get mainly positive feedback on my work with Moviesinhaiku. However, very occasionally I have heard “I don’t get it.” As a justification, here are my 5 reasons for Moviesinhaiku:

5. As a freelancer, I experience downtime. It’s part of the employment cycle. When I have extra time, it’s better to occupy myself than to sit and play video games which give me nothing back.

4. I program in AS3. I have been animating or programming in Flash since 1999. Doesn’t that seem a long time to be doing one thing? With Moviesinhaiku, I can experiment, play, try new things and challenge myself.

3. As part of challenging myself, I have to admit something; typography scares me. It always has. I am a face your fears kind of guy. Therefore I am doing typographic treatments as an attempt to shake my fear of typography.

2. I graduated from Interpretive Illustration before I made the jump to digital. I went from painting every day to typing in what feels an instant. There’s an illustrator inside me screaming “Why code Hugh? WHY!!??!” So I am combining illustrations into the prints.

1. Why not? I love movies, it doesn’t hurt anyone (minus the people who’s delicate aesthetic sensibilities might be compromised) and if you don’t like Moviesinhaiku, they’re easily avoided. They’re not that popular. Yet.

So there you go. That’s why I do Moviesinhaiku. If you like any of the prints, I priced them so anyone could afford to enjoy them. If you have a specific movie you want done, email me: hugh [at] moviesinhaiku [dot] com If it’s a movie I like and know, I might take a crack at it. If it’s not but you present a compelling argument, I still might take a crack at it.

Flash on the Beach 2010

This was my second year speaking at Flash on the Beach. For six years, John Davey has consistently put on a great conference. His three days of speakers, pitches, networking and inspiration are a huge draw and I spend them in a heady mix of nerves and excitement.

The speakers
I’ve been told point blank that I’m fortunate to be a speaker. So true. I am truly lucky that organizers trust my mouth to fill seats. I get a ringside seat to the genius that is the other speakers. In no way can I be compared to the likes of Grant Skinner, Robert Hodgin or Stefan Sagmeister. I look up to these guys. The fact that I get a microphone and pace on stage too means nothing compared to having a quiet chat with some of my oldest (read: longest) heros. Some of whom I also count as close friends.

Something that is missing from the normal conference experience that I think John Davey has well grasped is the speakers are people; they typically don’t like talking about themselves and have the same insecurities as everyone else. Don’t get me wrong, speakers love talking about their work. Because they love their work. A speaker is a speaker because they are inspired by what they do. Their inspiration is our inspiration when they speak. Seeing Mario Klingemann get excited about a discovery is like watching a kid open a present on Christmas morning. It’s that kind of excitement that drives audience members to go out and “TRY”. But I digress. Get a speaker one on one with an attendee and that’s why you go to Flash on the Beach. At least in my experience. Nothing is better to me than speaking directly with attendees.

Flash on the beach is the one conference where you will see speakers lining the first few rows in session. We are as turned on by what other speakers say as the average conference-goer. It’s a testament to the quality of speakers at Flash on the Beach, myself notwithstanding. I see more sessions at Flash on the Beach than at any other conference and apologize to the speakers who’s session I might miss; I’m looking at you, Seb Lee-Delisle, Hoss Gifford, Brendan Dawes and Ralph Hauwert

My name-dropping is officially exhausted.

My Session
My official session was titled The Art of [Mis]Communication. However, after presenting at Flashbelt in June, I fine-tuned it and renamed it to Things I Learned in Preschool. I have been freelancing for a year and have unofficially become the child-shuttle due to proximity to preschool and kindergarten. In the last year, I have observed behaviour lessons and punishment that we as adults could truly learn from. So I made an effort to dial back the corp speak and dial up the kid speak. Hopefully those that attended my session understood what I hoping to get at.

Secondly, I added in a half-session on my side project; Movies in Haiku. I have been engrossed in this little project for over six months and just had to co-opt my session with it. I apologize if anyone thought I should not have. In my defence, I gave away an entire set of prints, cleverly hidden under the seats by my wife, Elizabeth. Seeing a roomful of people bend over to look under their seat then some come up triumphantly with a print just made me smile. I felt like Willy Wonka. A little. Without the big hat. The prints are for sale on my Etsy shop.

Summary
Thank you so much to John, his family, his volunteers and staff for making my stay in Brighton and my Flash on the Beach experience one to remember!

Nokia 5230 Nuron

The fine folks at OneMethod contacted me concerning their latest project for Nokia. An in-store tool for sales staff to showcase Nokia’s latest offering; the Nokia 5230 Nuron!

Note: all following images are scaled at least 50%

This was an interesting project for me. It included a multitude of items that needed to be coded; slideshows, quizzes, video integration (both in a video player and alpha video as transitions) and language localization (english and spanish). Like a lot of projects I get asked to participate in, this one had a very short timeline but looked so cool I just couldn’t say no.


Now that you’ve chosen a language, here’s where you are.


The first section: Touch


Single tiered content in the Play section


Dual tiered content – slideshow example in the Connect section


Dual tiered content – quiz example in the Play section

Something else I managed to sort out for this project was a colour-coding needed for each section. The loader, the titles, rollovers, pretty much anything that required a specific colour made use of the SectionColour class.

Oh yeah, and it’s my very first click for fullscreen piece as well. Not too bad at all.

Lastly, this was the first project where I used Grant Skinner’s GTween and GTweener. I have to say, it worked great. Not to mention that Grant made himself available to answer my questions. An admirable quality in a developer. Thanks, Grant. 😉

Note: this was an in-store only piece so I have it uploaded to my server for you to check out.

The Problem with Freelance

While the opportunity to work for a variety of companies is awesome, sometimes freelancing is a slightly harrowing experience. For instance, in one week I went from being booked on multiple projects until mid-july (awesome) to having each project pull out one at a time (harrowing). It’s not much fun, but I am spending some time on tattoocapture. We’ll see how far I can get with that.

In the meantime, hello? Bueller? Gimme some work, yo!

Pedigree Dentastix

In February, I was fortunate to be asked to build a site for the awesome agency, Proximity Toronto. Their client is Pedigree and the site is Dentastix.

Note: following images are scaled approx. 50%
dentastix site home page
Welcome to the Dentastix site!

dentastix site product selection
There are three dentastix sizes; small, medium and large. There needed to be a way to choose one of those sizes. In this instance, there are three!

dentastix site product size selected
Once a size is selected, a variety of informational elements are provided. The variety of packages available, list of ingredients of each package, plus caloric content, etc, etc.

dentastix site fetch section
There was a need to accommodate previously built content in the form of video segments of dogs fetching Dentastix bones.

This site gave me a chance to continue to hone my chops. There is an extensive amount of XML, as per my usual MO, thanks to needing to build this site in both french and english.

Thanks again to Proximity Toronto for this great opportunity.

wheniwas19 Year in Review

2009 has been one strange year.

January. Organic, where I was working as their Manager of Integrated Media, moved me from Creative to Technology. Like the Dude, I abide.

July. I was hired at henderson bas as their Director of New Media. Five weeks later, I quit and went freelance. A bad fit is a bad fit and I was a bad fit at henderson bas.

September. I spoke at Flash on the Beach in Brighton. I outlined what I considered the 10 Best Excuses to NOT do Amazing Work. I then went on to do the same presentation for Sheridan College, Seneca College and a mini-version for the monthly FlashinTO gathering.

December. I worked on a little thing for Galaxy Goo.

From July until now, I was/am working on Tattoocapture. As of this moment, it’s still in progress.

My first freelance project went live. Very Exciting.

The Estée Lauder site I worked on with many others in 2008, won some awards this year.

I’m looking forward to 2010. If 2009 is any indication, I’m in for some fun. I like working. If you have some work for me, email me at hugh [at] wheniwas19 [dot] com to get in touch!

2010 Subaru Legacy

Firstly, I have to thank Tribal DDB Toronto for the opportunity to work on this project. Their timely assignment firmly planted me in my new freelance role.


Welcome to the 2010 Subaru Legacy

This project had some challenges. Not the least of which was the fact that when I was pitched it, the art director (the effervescent Missy Kelley) involved said they wanted PaperVision 3D. Although I took a workshop on PV3D with the inimitable John Grden, I can honestly say I still know next to nothing about how to implement this powerful class set. It’s embarrassing to admit but I’ll live.

At any rate, here comes the fun part; all the cool stuff I put to use. Either new to me or a finessing of things I already know.


Starting the audio experience

1. Audio triggering. I used flv video (f4v, actually) for the audio. The audio is in binaural format. Meaning if you happen to be wearing headphones, the audio will wrap your head in true surround sound. It’s wicked cool. They want the image sets to appear based off timing in the audio. eg. the narrator is talking about the radio, the radio image ought to be front and center and the set that image is in ought to be the focus. To accomplish this, I used XML and a type of closed captioning. When using closed captioning, you can either set an event within the audio export or you can use XML with timecodes in it and look for these. I opted for the latter. A. because I couldn’t be sure the audio wasn’t going to change and I didn’t want to have to input all the new events in the audio. B. because I’m really familiar with XML.


No PaperVision 3D? No problem. Sort of.

2. Fake 3D. Since I didn’t know PV3D, I could use the 2.5D implemented in Flash 10 to allow for skewing and perspective. Therefore, when placing the images in their sets, I’d use a center point (locally, the 0,0 of the set) and randomly place the images around that point. Their distance from the center dictated the amount of perspective they would have. When that image becomes focused it swaps it’s perspective on the vertical axis. It’s a fairly good effect and easily set up.


Highlighting a feature.

3. Call outs. Now, having worked with auto minisites for pretty much my entire career, I know the four pinnacles of the industry; power, performance, comfort, safety. It never changes. Call it what you will, but those things are paramount. I think you can probably add cost in there now, but whatev. I used the image sets and XML to control callouts. If the callout existed (in the XML of an image) it popped open when that image was the focus.

4. swfObject loading issues. I blogged about this. Suffice it to say, thanks to Chris Pelsor and Stacey Mulcahy, this got sorted out.


Soundboard with downloadable MP3s

5. Downloading of files. There is a soundboard in this piece and the request to be able to download the MP3s came from on high. I’d never done that before, but it was fun to make happen.


En francais, s’il vous plait.

6. Localization. The request from a Canadian client was of course that this needed to be in french and english. I wanted to be able to easily access this portion by simply swapping a variable. eg. ?lang=fr (see french in action)

So that’s Subaru Legacy in a nutshell. I’m pretty proud of this piece. Thanks again to the crew at Tribal DDB Toronto for the opportunity!


That’s all she wrote