Goal
In classical platformers, like Super Mario Bros., the goal is to get to the end of each level without dying.  For our pre-school audience it’s the immediate goals that are most important. The real payoff is in all the little animations, actions and treasure found as you explore. Trigger a tune as you run past Aztec sculptures, pop the bubbles floating through Japan, or fall on your bum when you slip on a puddle in Venice.

Multiple Paths through the World
We built a more guided game experience for younger kids, so that players, if they so wish, could press and hold in one direction and still manage to get to the end.  Along the way, they would still be able to ride a boat, slide down hills, or pop into the clouds.  More skilled players however could be more adventurous, breaking away from this path, and find those hidden areas, filled with treasure.

Creating an amusement park feel
In each of the worlds, we tried to create a series of moments.  These moments could be sliding down a mountain, steering a raft, riding a Ferris wheel, or even just triggering a series of musical notes.  For children, these moments are what made the games fun, and like an amusement park, kids would want to re-play these moments over and over again.  For each of these sections, we had to make sure there was always something that could take you back to the top of the slide, or allow for the animations/sounds to be re-triggered.

Context is King: Driving Animations
Justin can perform around ten unique actions.  Unfortunately we needed to keep the controls simple for our pre-schoolers.  Unlike AAA console games, where the player has a button for each of the character’s actions, we had two; run and jump.  To accomplish the feeling of mastery over the character, we triggered appropriate actions when they contextually made sense.  For example, when running down a steep hill, we would make Justin automatically slide, or when crossing a clothesline, make him automatically shimmy or zipline across.  To the player, they would still just press the one directional button, but the context would trigger the visual variety.

A few weeks ago Justin Time Online launched on DisneyJunior.ca/fr, coinciding with the french premier of the amazing television series created and produced by GURU studios.  The centrepiece of the online property is a platformer adventure game, that allows kids to play as Justin, as they explore the vivid worlds of Venice, Japan, and the Aztec jungle.  Kids are given complete control of the character and are able to run, jump, slide, and swing through these worlds as they collect unique treasures.  Speaking on the show’s themes of teamwork and friendship, Justin is accompanied by his trusty sidekick Squidgy, who helps him get to those hard to reach places, and Olive, who acts as a guide throughout these worlds.

The zinc Roe team comes from a very diverse background in terms of education and work experience. We value portfolio and personality above all other considerations. Show us what you’ve built. Tell us how you built it and why.

Candidates must have:
• Hands-on experience with game development using Adobe ActionScript.
• Solid understanding of fundamental programming concepts.
• Experience working with audio and visual assets.
• Appreciation of interactive design principles and web standards and best practices.
• Good verbal and written communication skills.
• Passion for producing solid, well-crafted code.

Experience with box2d, iOS development, and game theory and design are all desirable but not required. We promise a rewarding job working on creative projects for kids. This is a full-time position based out of our office in downtown Toronto.

zinc Roe is an award-winning studio specializing in creating engaging websites, games and activities for kids and youth. Our goal is to raise the bar for quality interactive media for children. Our clients include Teletoon, Playhouse Disney Canada, 2010 Winter Olympics, and the Toronto Public Library. Take some time to browse our portfolio and learn about the kind of work we do. As long as you have enthusiasm and a sound technical foundation we are happy to provide opportunities for the right candidate to pick up specific skills.

Please send a résumé including details of recent projects to jobs *at* zincroe.com. Do not call. No recruiters please.

Setting scaleX to -1 on a display object

Of course, you can easily place the video object back to where it was by compensating for the flip and adding the video object’s width to it’s current x value. While this solution works for most applications, there is one annoying thing about this method. If you ever want to move the video object around the stage or play with it’s scaleX value, there’s going to be a lot of compensating going on and it can get messy quick depending on the complexity of your application.

So to make it easier, here’s a class that extends the Video object and adds a “flipped” property. I don’t think I need to explain what the property does, but the class overrides the x and scaleX properties of Video so that it takes care of all the positioning when flipping the display object. Check out the demo [webcam required]:

Even when flipped, the x property always references the left side of the video object and the scaleX remains the same. Here’s the source: MirrorDemo.zip

I’ve had my share of experiences with the Ontario college system. I taught Flash programming at Centennial College and George Brown and I’ve given workshops at SUNY Buffalo, Red River College and Seneca@York.

As an employer I’ve also hired my share of Flash programmers. And I can assure you competent Flash coders are few and far between. The same could be said for people with a non-superficial understanding of CSS, JS, standards compliance and interface design.

Every year Ontario colleges turn out hundreds of grads. I’ve interviewed many and I’ve reviewed applications for internships from dozens of them. After ten years in this business I’ve hired exactly one graduate of a new media Ontario college system.

So what’s wrong? Let’s review a few of the many ways College’s in Ontario are failing.

Failing to teach students what they need to learn, not what they want to learn.

College programs seem eagre to provide students with programs sound fun and easy. Guess what? Programming is hard. It’s extremely hard.

I can safely say that the courses that made me were the ones that took my smart ass brain and put it through the wringer (that would be second year multi-variable calculus) or took my to a place well outside my comfort zone (that would have to be philosophy). Did I want to take those courses? No. But those were the courses that taught me to work hard and yes – how to deal with failure. I came through them a smarter, more confident and a more mature person.

Struggling through these courses also re-inforced something my dad instilled in me. “Just break it down to first principals” he would say. By which he meant take the problem and strip away the cruft until you get to the crux of it. What I discovered is that, although each discipline has it’s own terminology they are based on similar ideas and problems. Which leads me to…

Failing to teach first principals.

I taught one group of college students who were close to graduation. The lesson was supposed to be about manipulating media in Flash. After a few minutes I realized the students didn’t really understand the difference between vector and bitmap art, RAM vs hard drive storage, or lossless vs lossy compression. I was dumbfounded. I tossed my lesson plan out the window and gave a rapid-fire class in digital media first principals.

The great thing about these basic principals is that they don’t change over time. Learning Flash MX programming was only ever going to be useful to these students for a couple of years. Which leads me to…

Failing to adapt.

For better or for worse colleges don’t do change well. If nothing else, our industry is about keeping up with (and indeed pushing) change. Technologies and tools evolve rapidly. Many college instructors have been working inside that system for many years. I met my share of college instructors struggling to teach software that they had never used professionally and barely had a grasp of. The solution is to bring in more working professionals to teach the specialized skills like Action Script programming and for full-time instructors to focus on first principals and professional standards. Which leads me to…

Failing to teach professional practice.

Our industry is a wonderfully fractured, multi-faceted mess. People bounce from freelancing to small business to big business and back again. Graduates need to understand the fundamentals of doing business. Basic proposal writing, pitching, prototyping, interview skills, strategies for dealing with difficult clients and colleagues, contracting, pricing, getting paid and how not to f*** up your career before it starts.

I have to admit, I didn’t expect it to be so easy to create a simple chat application using the service. But if you’ve ever played around with streaming anything in flash, the process is the same. Just to explain it quickly, you have to create a NetConnection instance that connects to the stratus service (rtmfp://stratus.adobe.com/[YOUR_DEVELOPER_KEY]). After a successful connection you will receive a unique id. You also need to create two NetStream instances, one for sending data and the other for receiving. Listeners added to these two streams will get invoked each time data is sent/received.

Here’s what I managed to put together in almost no time:

To start chatting, exchange id’s with the person you want to chat with (through im or email, or if you’re lonely you can just open this page in a seperate window), paste their id in the “FRIEND’S ID” input and hit connect, both users must do this. Once you’re connected to each other, chat away!

Soo…why do I need to use this awesome chat application if i have to communicate my id through some other way? Well, first, this is just a demo of the Stratus service. And second, in a real world chat application, the id exchange should take place through some back-end code, maybe based on the user’s email address or something.

Unlike Flash Media Server or other similar technologies, RTMFP has very low latency making it ideal for use in video/audio chat, multiuser gaming, and other applications that are dependent on fast communication between multiple users.

Here’s a couple resources which I found really helpful:

Video tutorial: http://www.flashrealtime.com/tuts/p2p-in-flash.html

Text tutorial: http://www.insideria.com/2009/07/getting-started-with-adobe-str.html

This is probably one of the bigger projects I had the opportunity to work on here at Zinc Roe, and I must say, it was an awesome experience. Not only did I learn more about code performance and optimization, I also learned that the word “Taiko” means “drum” in japanese!!!

Since a lot of the things that were done behind the scenes for this game were new to me, I decided to do a write up going through some coding challenges we had for creating the game.

Over at my blog post, you’ll read about how we dealt with the big bitmaps, managing multiple swf files, and different ways to display video with flash.

So let’s go! NEXT STOP => Carlo’s Blog!

Most of us can easily recognise a Disney animated film when we see one, as well as a “Looney” toon, a Pixar piece, and for you old school folks – the lovable Hanna Barbera characters. They all have a distinctive look to them that makes them globally iconic. These styles have been adopted and enjoyed by millions world-wide.
There are so many categories and sub-categories. Below is a very broad overview of the most popular to date. (Please click on the links for further viewing!)

3D computer graphics are all the rage nowadays (and hence a bit of a thorn in one’s side as an animator who prefers the classical 2D way of doing things). The life-like three dimensional feel in these animated films bridge us between flat cartoon animation and live action cinema. Below is a film by my dear friend Kim Leow. This is her final film in college and took her about 5-6 months to do from scratch.

Some other links that you maybe interested in:

Oktapodi

Burning Safari

I grew up watching Disney and Don Bluth (The Secret of NIMH, The Land Before Time) films like countless others. These traditionally animated, 2D features are still going strong today.

But how are they made? I though I would include an interesting clip which explains all, taking the classic ‘Beauty and the Beast’ as an example.

Also check out one of Disney’s newer shorts. Its very nice, but rather bittersweet.

Another popular style we see nowadays is the very flat, graphic, cut-out, paper doll style.

One strong example is Nina Paley’s ‘Sita Sings the Blues‘.

The rest of this film is on youtube (in HD!). And if you like it, check the website out to follow the creator’s journey through the making of. Usually this kind of look in an animated film is done with software like Flash. South Park is another example of the cut-out paper look.

Another look that is developed with software like Flash, and has a similar flat graphic appeal, is being used heavily in Saturday morning cartoon shows nowadays. Popular examples  are the Fresh TV produced ’6Teen’ and Warner Brothers ‘Johnny Test’. This look is also popular in video games. The much successful ‘Castle Crashers’ for the Xbox is a prime example. Dan Paladin, the artist and animator behind the game, shows us here how he works his magic:

Rhotoscoping or cell-painting are similar techniques where you take live action footage and you literally trace or paint over it to give it a more illustrative feel. ‘Waking Life’, ‘Waltz with Bashir’ and ‘A Scanner Darkly’ are prime examples of this sort of animation. Did you know that Disney’s ‘Snow White’ or the dance sequence at the end of ‘Sleeping Beauty’ both used this technique? The highly popular iTune commercials are a very simple example:

Stop-motion animation is a very fun form of animation, especially for those who enjoy crafts and toys. Tim Burton uses this form quite a bit. His ‘Nightmare before Christmas’ is a classic, and the recent ‘Coroline’ is a big favourite this year. This technique incorporates the use of a camera, taking snap shots of an object as it moves – where each shot represents a frame of animation. The music video below not only uses stop-motion, but also shows us how its done!

Claymation is a form of stop-motion animation that specifically uses clay or sculpy to create the objects involved. Nick Park’s ‘Creature Comforts‘ is a wonderful example.

Taking the basic squash and stretch principles of animation and literally stretching it out of proportion, you have the aptly named style of Rubber hose animation. Incidentally this style was the first to set the standard of animation in North America.  This is where the likes of Looney Tunes characters like Bugs Bunny, Ren and Stimpy, and Hanna Barbera toons take their cue from. The originals like Felix the Cat were treated more like rubber dolls, with flowy, stretchy limbs. Below take a trip back in time with Flip the Frog in this black and white rubber hose classic.

If you or your children watch Cartoon Network then I am sure that you have heard of Dexter’s Laborotory. The creator of this show, Genndy Tartakovsky went on to make ‘Samurai Jack‘, noted for its highly stylised, outline-free, and super detailed look. It has a very cinematic style, which caught the attention of Star Wars creator George Lucas, who then asked Tartakovsky to make the animated Clone Wars. Personally I think Samurai Jack’s look and colour schemes remind of me Disney’s Sleeping Beauty, though the latter is not as stylised.

However, intense detail is not always the key to a successful animated film. Even simple stick figures can tell a good story. Don Hertzfeldt proves just this in his academy award nominated short ‘Everything Will Be OK‘. Quite possibly my favourite animated short ever, by Cube, also adopts this method of minimalistic animation:

But how could we continue this article without mentioning the Japanese culture of Anime that took the world by storm? The large sparkly eyes…the sharp, pointy, two dimensional noses? From Astro Boy to America’s answer to anime – Avatar: The Last Airbender, this style has become quite a phenomenon. Incidentally both films mentioned, have live action films coming out very soon! I remember renting my first anime cartoon on VHS when I was really small, and I think its still probably my favourite to date – ‘My Neighbour Totoro‘ by Studio Ghibli. Sadly this is just a link to the trailer. Rent it on a rainy day. Its very cute!

The National Film Board of Canada (NFB) is a giant hub for experimental animation. I would highly recommend taking a trip to their building in Toronto and pouring through their library of animated films. Sand animation is a great example. Using sand to etch out beautiful drawings frame by frame, Caroline Leaf created “The Owl Who Married A Goose“. That must have been such hard work! Flashlight animation is another example. This can be done easily as long as you have a camera and a small source of light like a cell phone or a flashlight. Wait till its completely dark outside, or do this in a dark room at home. Using a slow shutter speed setting, one just draws an image in the air with the flashlight while they have someone take a picture of it. And voila, you will have a drawing completely etched with light! Of course, actually making consecutive drawings to create motion is a little more complicated. But you get the hang of it eventually, and its quite fun. Sprint did a neat commercial using flashlight animation. The third installment in the experimental series is chalk animation. Below is a wonderful clip by Blu.

Apologies if I have missed something crucial. I have tended to pick clips that have impacted me, above others. There are a lot of visual art styles of animation out there, that belong in the categories similar to those that I have mentioned, or fall into grey areas in between. I have tried to pick examples that were more on the obscure side without compromising quality (obscurity usually comes with its reasons after all); in the hopes that my wonderful Zincroe audience would be entertained by something new, and learn new things in the process!

Camera.activityLevel

The most basic way to detect activity through a webcam in flash is by accessing the Camera object’s activityLevel property. This returns a number from 0 to 100, depending on how much activity is going on. While useful in simple applications, this doesn’t give us a way to check for specific gestures or a way to check a specific section of the video for activity.

BitmapData.getPixel()

A popular way to detect motion is by using the BitmapData object in flash. By taking “snapshots” of the video coming in from the webcam constantly (using either Event.ENTER_FRAME, or the Timer object), we end up with frames that we can compare by looping through each pixel and checking to see which has changed. This technique is useful for checking which areas of the video has activity. We can use it to interact with buttons or other display objects by simply waving our hand over it. Though it can be very intensive (specially when working with video that has large dimensions), it is one of the best and most reliable way to detect motion in flash.

Augmented Reality & Marker Tracking

As mentioned earlier, another option is to use saqoosha’s FLARToolkit. If you haven’t played with it before, you should definitely check it out…after reading my blog post to the end, of course. From what I understand (and correct me if I’m wrong), this neat library also uses the BitmapData object to take stills of the video from the webcam. It then manipulates the bitmaps in order to detect and extract the position of a marker in 3D space. You can then use flash 3D libraries like Papervision to apply those coordinates to a 3D object and display it on top of the marker as if it’s a physical object. This method requires the user to print out a specific symbol and display it in front of a webcam. The wicked thing about FLARToolkit is that it doesn’t restrict you to using just Papervision, you can use Away3D or no 3D at all!

Though it comes packaged with Papervision and Away3D, with a bit of “code spelunking”, you can strip out the 3D stuff and gain access to the marker’s x,y, and z properties. By doing this, you end up with a basic marker tracking library which you can use for pretty much anything your nerdy heart desires. In my case, my nerdy heart and I created a very basic game where you have to catch falling apples using only simple vector MovieClips. Check it out below:

Download Source

Moving MovieClips with your hand (or other limbs) using the webcam

Now after playing with the BitmapData motion detection and the FLARToolkit, I went on a mission. A mission to find/figure out a way to interact with display objects on the stage using the webcam, BUT without using markers. After a bit of searching, I was able to find this demo on youtube which is close to what I want but with more control over the display object’s reaction.

Using what I’ve learned, and some inspiration from the youtube demo, I threw a quick example together as a learning exercise for myself. By checking for activity where our “box” movieclip is located, we can check which side has the most activity and move the box in the proper direction as if it’s a physical box you can push around. Though it’s not perfect and could DEFINITELY use some more code optimization, I was very satisfied with the result.

Download Source

AS3 Real-Time Face Detection

Another technique worth mentioning is face detection in flash. Here’s a snippet taken from Mario Klingemann’s blog about the subject:

“Yesterday Seb-Lee Delisle pointed us via Twitter to this great example of a Flash based real-time face detection. It turns out that already more than half a year ago Ohtsuka Masakazu had been porting the face detection part of OpenCV to AS3 and added the source code to the Spark project – which is like a Actionscript candy box full of surprises.”

He then explains how it works and how to optimize it, it’s a good read for those interested in the subject.

So there you have it, we went from detecting basic general webcam activity in flash to complex face detection algorithms. Big kudos to the folks mentioned in this post as they’ve put in many hours coding in order for the rest of us to create awesome and engaging content with ease.

http://sxsw.com/peoples-choice