Category Archives: AS3

2011 in Retrospect

I am Repetitive
In my two previous end of year posts, the first sentence tells that I had a strange year. Mostly due to the transition to freelance and all that entails. This year I was fully prepared for how weird freelancing is and was ready to rock and roll the highs and lows. So suffice it to say, I embrace the “strange”. 2011 was an amazing year!




Witches! …no… sorry… Watches!
Scott Wilk of Wilk Watchworks approached me at the tail end of 2010 about collaborating on some watches. In 2011, the two watches I’d designed came to reality!

On the left is the Tron-inspired watch and on the right, the Rounders-inspired watch. Available from Scott’s Cargoh shop.

Scott’s just ordered cases for my next three watches and I am super excited.




Working in Rarified AIR
At the beginning of the year I was asked by the superb folk at Invivo to build a desktop AIR application that could take communication from an iPad as a sales tool. The answer, of course, was “sure!” To be fair, I’d never built an AIR application before, nor communicated with an iOS device, but whatever, right? With a little finagling and a socket server, we did just that.

Invivo seemed to like the work because shortly after they asked me to make another desktop app. This time, it was a quiz show with two states; one on one moderated and team-play. Once again the ask was to communicate with iOS devices. This time the devices would be 7 iPod touches and an iPad. Using a socket server, the communication was one-sided (the iPods only broadcasting, not listening) Anyway, this was another challenging, super-cool project.




Making a Movie… ?
I spoke at the 10-year FiTC in Toronto. (The Influxis Voodoo Lounge, to be specific). I was announcing my intention of making a documentary about the roots of inspiration in the digital industry. I’d called it, brazenly, Influential – The Age of Digital

Seems that, once again, I think HUGE while having small capabilities. Here’re some observations as I mosey along, slowly.

  • I don’t know how to make a movie/documentary
  • I don’t have money to make a movie/documentary
  • I seriously misjudged my ability to pull contributions
  • In the meantime, check out this awesome doc released recently. AND IT’S FREE! PressPausePlay It’s worth the watch. I promise.




    I am NOT an Activist
    On July 16th, my 4 yr-old son (4 at that time) asked me to write a letter to the Mayor of Toronto, Rob Ford, to tell him:

    The response was so overwhelmingly positive, I told my pal, John Breton, to register the URL, Dear Mayor Ford and work up a little database and form for people to write letters to the mayor. It took off from there. The super cool Amber MacArthur mentioned us in a Globe and Mail post and John was interviewed on CBC’s Metro Morning! There’s a facebook page with some lively discussion and you can still write a letter to the mayor. It appears he won’t read them although we’ve offered him access to write responses to his taxpaying residents.

    Whatever, it’s been an interesting experience.



    Displacer’d

    My friend, Michael Morton, is a musician who goes by the name Displacer. He approached me about doing live visuals for his performances. I’ve already blogged about it, but man, it’s been a trip. I cannot wait to do this again with Mike.

    http://www.youtube.com/watch?v=ay6nLicfErw




    A Ring for September

    I was approached by my good friend, Spencer Saunders, about helping his company, Juice Agency, out on a worthwhile cause: Septembering, an effort to raise funds for Trillium Childhood Cancer Support Center. The project is now offline, but it was a great project and allowed me to play with Box2D a little.




    AIRing out my differences

    My last major project for 2011 was an AIR application for MacLaren McCann and HP. An interactive screensaver that allowed users to get a pretty look at the new notebooks on offer from HP.




    I also renovated my kitchen this year (honestly it’s still in progress, embarrassingly, but it’s almost done.)




    Rhymes with Sleeve

    Most importantly, my wife, Libs gave birth to our beautiful daughter Niamh Ava on October 17th.




    There was a lot more work I did during the year, but I just have no energy to list it all. If you’re a client reading this, I love you. If you’re a potential client reading this, I want to love you. Wait… that sounded wrong… unless, you know, you’re into it… koff…

    Influential – The Update

    Online submissions via webcam are now being accepted! This is a big step for the documentary as it goes from theoretical to actual.




    There are some minor notes to make. Be sure to verify your microphone is being picked up. After agreeing to let the site access your camera and mic, do a test recording. As simple as hitting Record, saying a few words and clicking Finish. Once you’ve verified your mic is being recorded, hit Retake and do your actual recording. Otherwise you can specify which mic is being accessed. (thank you to @puremvc for the heads up)

    On the submission form, I am using a very large database for location. Consequently, when you choose a Country, then a Region, the amount of cities returned could be quite large and take a while for you to find yours. I will be implementing a filtering system into the form so you can type a couple of letters in to narrow the cities list down some. (thank you to @mykola for the suggestion)

    Lastly, I will be adding an upload feature so you can use saved video files. Hopefully this won’t take too long to implement as I am sure some of you in the video industry would want to make your own superclean, pretty submissions. In the meantime, you can email hugh [at] influentialmovie [dot] com and I can submit on your behalf, if that’s the case.

    No end of thanks to Influxis for the continuing support!

    Please spread the word and let’s get as many people submitting as possible!

    Invivo FlickApp

    Although I haven’t posted in a couple of months, it’s not because I haven’t been busy. I’ve actually been overwhelmed by work, thankfully. It has a negative effect on personal work but it does pay the bills. One project last month was unfortunately for a proof of concept and I am not allowed to blog about it. That’s a shame, as I was quite proud of the final product.

    On the other hand, I simultaneously worked on something I’d never done before; an AIR app running on a touchscreen. An AIR app that would be controlled by an HTML5 app running on an iPad! That’s right. Somewhere, Steve Jobs had a pleasure shiver run up his back. This was to be a slide presentation sales aid. The salesperson would be able to flick the slide from their iPad to the big screen, all nonchalantly, and continue their pitch on the touchscreen. Seeing this work for the first time was super cool.

    This was an incredible learning experience. It was no surprise to my client that I had never written an AIR app before. Partly because I didn’t tell them I’d never written an AIR app before. Koff. Sorry, guys.

    I’d love to get into the nitty gritty of this project, but I’m sort of under the gun time-wise on another project. I want to speak to a couple of things:

    1. We used a socket server to do the cross-app communication. Until I was able to get into the actual environment, I used a XML socket server in the form of Oscar and controlled it from my iPhone using TouchOSC. This was thanks to Dr. Woohoo who had used something similar for a project. These two things gave me a leg up in building my app. I am very thankful to have so many knowledgable friends.

    2. There are minor, but distinct, differences between XML socket servers and socket servers. Christian Cantrell has some really informative posts on how to implement a socket server. I highly recommend checking them out.

    3. Be completely aware of what your client wants and try to write your app so it does more than it should, not less. It’s easy to scale back on functionality by simply not using it. It’s far more difficult to add functionality to a nearly-finished app.

    4. Version your app when you create it. It makes it easier when you overwrite it on install.

    5. Educate your client on aspect ratios. The iPad version is 4×3, while the touchscreen version is 16×9. That means two differently-similar designs.

    Onsite, at the conference, the tech took a short video. I would have liked something a little more expansive and better framed, but beggars can’t be choosers.

    I’m currently working on another AIR app. Well, technically, two AIR apps using iPod touches and the Oscar socket server. Very exciting! If there are questions, please feel free to ask them, I’m not unavailable.

    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.

    The Social Network Moviesinhaiku

    A little while ago, I’d done a regular-sized print of the Trigger Street production 21. The producer, Dana Brunetti, wanted to know if I’d be into making a larger version. While I’m all for copying myself, I thought maybe he might like one done for the release of their latest film, The Social Network. Fortunately for me, Dana’s a really great guy and his response was “Go for it.”

    After watching the movie (worth seeing, btw), I sat down to think about what I really wanted to make.I’ve never done a large format print. The more I looked into large format printmaking, the more I realized my skills weren’t up to the task. But I do know a thing or two about digital work.

    Once I decided I’d pursue a digital route I started thinking about what, visually, I wanted. I looked at some production shots of the movie on the site and thought, “That would make a good background.” or “That’s an interesting composition.” Then I listened intently to the soundtrack by Trent Reznor and Atticus Finch. Then looking at both a picture of Jesse Eisenberg and listening to one track (On We March), then glancing over at the IMDB cast list, a light bulb went off.

    Immediately I started considering HYPE, the framework developed by two good friends of mine, Joshua Davis and Branden Hall. I made a list what I wanted to do and checked off the list what HYPE could do easily versus what I could easily.

    ME. Create some XML files with main cast list, secondary cast list and main production
    ME. Load XML, parse it into an array
    HYPE. Attach a bitmap as a source for pixel data using PixelColorist
    HYPE. Create a BitmapCanvas 4 times the size of my original.
    HYPE. Load and start an MP3
    HYPE. Start a loop/rhythm to do something
    ME. Pick a random position on the x-axis
    ME. Pick a position on the y-axis based on the song’s position
    HYPE. Use SoundAnalyzer.getOctave to tell me how big to make my text in that x-position
    HYPE. Use PixelColorist to tell me what colour to make that text in the bitmap.
    HYPE. Copy that text into the huge BitmapCanvas
    ME. When the song is finished, stop everything.
    HYPE. Encode the BitmapCanvas into a targa format.
    HYPE. Save the encoded BitmapCanvas targa file.

    Look at that list. A 2:1 ratio of what I didn’t need to figure out because HYPE was there. When we get into discussion about patterns and frameworks, we get caught up on deviation. If you use MVC, that’s all you can use, for instance. I argue that you can use what you want, I’ve always believed that. HYPE, in case it escaped your notice, is built for exactly that kind of mentality. All I wanted was a few classes. But without those classes, I would have been stuck trying to build this from scratch.

    Suffice it to say, I finished the prints. Thanks to some added help from the inimitable Branden Hall the images saved out HUGE just fine.

    Title: Zuckerberg
    Line 1: From geek to elite.
    Audio: On We March
    Text Content: Primary cast
    Source Image: Jesse Eisenberg head

    Title: Robe Walk
    Line 2: Friends counted, friends discounted.
    Audio: In Motion
    Text Content: Full cast
    Source Image: Eisenberg walking in robe

    Title: Fingers Drum
    Line 3: When percent matters.
    Audio: Carbon Prevails
    Text Content: Production credits
    Source Image: Hands under table

    Due to the fact that this is a commission only four copies were printed. Thank you so much, Dana, for the opportunity. I hope you love your prints!

    Particle by GalaxyGoo

    Near the end of 2009 I was asked to participate in the GalaxyGoo flash-a-thon themed “Particle”. I had just begun experimenting with an Orbit class and Hype and felt like I had a little something to contribute.

    Kristin Henry, the founder of GalaxyGoo, brought several copies of the printed book to Flashbelt. I am so stoked to see my work in print!

    Thanks again to Kristin for the opportunity! The book can be purchased here

    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.

    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.

    TattooCapture Update

    Here’s the skinny on TattooCapture. I called myself out at Flash on the Beach, then Sheridan College, a FlashinTO user group meeting and finally Seneca College, for being a procrastinating chump (see my presentation 10 Best Excuses to NOT do Amazing Work)

    Currently the site is still incomplete. I’ve spent quite a bit of time on it and have stricken plenty of items off my to do list but there are many many more items remaining.


    image scaled roughly 50%

    As you can see in the screengrab above I have a lot done. The design of the site is rough and will remain so until I can convince one of the many talented designers I know to make it pretty. But as Chris Pelsor has said “Get version 1 done and worry about the rest after”.

    What’s working;

      Age verification
      Registration and account creation
      Login
      Account update (for facebook, twitter, etc)
      Avatar creation (using a webcam or uploaded image)
      Gallery creation
      Image creation (using a webcam or uploaded image)
      Adding images to a gallery
      Viewing galleries
      Viewing images
      A development notes window
      An instructions window

    What isn’t working (yet);

      Viewing updated user info
      Viewing specific users
      Search in any form
      The actual mechanism for a tattoocapture (take one image, put it on another, save)
      Add friend functionality
      Verify friend functionality
      Send in-site messages
      Ratings on images
      And much, much, sigh, much more

    Anyway, I know the amount of egg on the face one wears when they commit to specific launch dates and can’t make it. I’m relatively embarassed, but considering what’s been accomplished so far, I can safely say I’ve done a lot.

    Never fear, this is not the end. It’s simply an update so you all know I didn’t just stop. I’m really excited with the progress. If you want to play with the site as is, send me an email

    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