Flash will officially support multi touch. That's great news. The quick mock ups that I made for a possible three finger navigation up there might not be anything special, in fact I don't even think that the three finger solution is a good one. But just the fact that I felt like quickly putting this together illustrates one of my strongest beliefs: Inspiration for anything can come from anywhere.
For me, both movies and computer games are regularly a huge inspiration for my daily work. Game interfaces of course have to be pleasing to the eye, but at the same time they have to be easy to understand and efficient to use and navigate, otherwise players won't be able to concentrate on the actual game. A bad interface means the players won't perform well and the game experience will be frustrating. That is why some of the most innovative interface design solutions originate from game design.
The same thing goes for movies. Looking at how the ways we interact with technology changed drastically in relatively short time (two finger scaling - like on the iPhone - was unheard of only a few years ago) a movie can quickly look dated if the technology, including the interfaces, aren't up to date with the latest developments in the real world. So if a director wants to create the illusion of a futuristic environment, interface design will play a huge role in that as well. Everyone who saw the movie 'Minority Report' will remember the convincing interface that Tom Cruise was using. So convincing in fact, that some of those ideas displayed in this movie are already/or will be adapted to real world technology (sliding a piece of data off the screen to transfer it to a portable device for example). The question "What came first, the egg or the chicken" of course works for interfaces in movies too. But it's irrelevant at the same time: Even if the futuristic movie interface was based on existing 'real' research, I personally didn't know about it at that point in time. So despite the possibility of existing research it was the movie that inspired me and made me think about how to implement those ideas and bring them to a further level.
Today I saw 'district 9' (a really good movie btw) and in many scenes of the movie, you see an alien interact with alien technology / alien interfaces. While much of the interaction actually looked an awful lot like the interface from 'Minority Report', there was one moment that made a huge impression on me... The alien had some sort of circle on the screen, and with three fingers tentacles it then moved, scaled and rotated the circle. Wait what? Rotated a circle sounds pointless, but yeah: what was a simple 2D circle at first, turned into a rotating 3D circular globe animation (similar to a 3D star map) through a certain interaction with three touch points. Even though that particular scene lasted maybe even less than one second, it made me think about how we could bring the typical iPhone navigation with two fingers to the next level and how the use of three fingers makes sense because of three dimensional space...
So to answer the question that the title brings up: You know that you work in the interactive field, when you leave a movie and while everyone around you talks about whether they liked the movie or not, you think about interface design and start preparing some quick mock ups in your head...
Puma got a nice mention in Rob Ford’s Adobe Edge column:
Related Link:
http://www.adobe.com/newsletters/edge/june2009/articles/article3/
While I was working on the "National Grid Floe" project (yes, that was last year! come on I'm slowly catching up with my posts.) I was facing the problem, that I had to place a massive amount of differently sized elements in a certain area on the site, with the problem being that the elements were not supposed to overlap with each other. A very basic approach - that's actually used more often than you would think - is to just place an object at a random place and test if it overlaps with any other object. If it does, place it somewhere else and test again, if it does not overlap with anything move on to placing the next object. As you can see this procedure is highly inefficient. Since you're working with randomly generated positions, it could easily happen that you place the object at the same position over and over again, wasting a lot of performance on something completely useless. The more objects you are placing, the more likely it is that this method makes your computer freeze and the browser crash. Since "National Grid Floe"'s community works with a ton of "user bubbles" that are not supposed to overlap each other I had to find a way to get an available spot on the first placement, otherwise the site would run into massive performance problems...
My solution works with a simple two-dimensional array. I create a grid of many rectangles and store in the array which of the rectangles are still available. Whenever I am about to place an object I look at the object's size and figure out how many rectangles next to each other in the grid I will need for this object and search for the nearest empty blob of free rectangles, big enough for the object. Since I keep checking each cell until I found a place for the object, the worst case scenario for repeated calculations with my system would be the amount of cells in the grid. That is still quite a few recursions but definitely beats the possibility of infinity with the common basic method. I created this solution in around a day or two, because I was under a really tight deadline back then and couldn't afford to research if there are even more efficient methods, but my class proved to be more than fast enough for what I needed it for.
I was invited to speak for firstborn at the FITC conference that took place from April 25th - 28th at the Hilton Hotel in Toronto, Canada. Not only has it been my first time in Canada, it was also my first time as a speaker at a conference. Damn. It's been quite a while since I've been as nervous. Together with Eric I ended up sitting in front of around 300 people, giving a presentation at a conference that had some of the biggest names in the industry in the lineup (Joshua Davis - who also designed the header image you see above, Mario Klingemann, Alec Cove, Lee Brimelow, etc.) ...
The overall theme of our presentation was "Dimension Wars - Bridging the Gap between 2D and 3D in Flash". We structured our presentation from simple to complicated, so we started with fairly easy ways to fake 3D in Flash and throughout the presentation the techniques became more complex. Each chapter featured a different demo, showcasing some of firstborn's recent work.
http://www.jensfischer.us/demos/throwFish/
The first demo was from the National Grid Floe project. We showed how to use interactive video- and image-layers together with tweening and scaling, to achieve the perception of interaction in 3D space even tho it's technically a 2D environment.
http://www.firstbornmultimedia.com/websites/casestudy/Puma%20Lift/
Our next example was taken from the PUMA L.i.f.t. case study. For this project the teaser site made use of Bitmap Distortion and After Effects Motion Tracking to distort the content according to the background video, so that the content looks like it's on the cardboard that the girl in the video is holding.
http://www.wildridexm.com/
The third example was the XM Wild Ride website. We used this website to explain the basic functionality of a simple 3D engine.
http://www.firstbornmultimedia.com/#/our-portfolio/1047/case-study/
There's no presentation about Flash and 3D without at least a honorary mention of Papervision. This chapter of our presentation covered that, but the main focus instead of explaining what Papervision is and how it works was the problem solving needed when working in a 3D engine like Papervision. We showed some nice little tricks to achieve the effects and visuals you have in mind, despite all the technological restrictions (i.e. fighting performance issues due to polygon amount).
http://www.firstbornmultimedia.com/websites/casestudy/M%26M/
After having shown "fake" and "real" 3D, it was time to show a combination of both. The M&M's website used the FIVe3D engine for many things, in combination with scaling and moving simple video clips to create the feeling of a 3D environment.
http://www.jensfischer.us/demos/five3DRibbon/
Our last chapter "Don't forget about your vectors" summed up many of the points we had made before. There's not the one, perfect solution that works for each project, it's always best to look at the problem first and then find a specific solution for that. If the task at hand can be solved with vector graphics, FIVe3D is an extremely powerful tool, outperforming Papervision and the new native 3D features that come with Flash 10.
We don't have any slides for this presentation since it was mainly about showing demos - some are even missing in this list since they're not online yet or simply too small to be mentioned. If you want to know more details or have questions you can comment here, but I definitely would recommend to simply come to one of our next presentations. It was the first one both for Eric and me and there are tons of things I would do different/better now and that's exactly why I definitely want to do it again. The audience gave us a solid 8.92 out of 10, which is not bad for a first presentation in my opinion. In order for you to make your own opinion, I'll update this post as soon as the FITC team has the video online.
Related Links:
http://www.fitc.ca
http://www.bigspaceship.com/blog/labs/fitc-toronto-2009-linkdump/
Quite some time ago I wrote an article for the FWA about internship programs... If you haven't read it yet, go check it out...
Related Link:
http://www.thefwa.com/?app=articles&id=123
As usual, I'm running a little behind with the blog entries. I've been busy in the past month(s), but it was well worth it; on April 21st the site I've been working on for Puma has won the FWA SOTD award. For this project firstborn teamed up with droga5 and created an interactive video experience in which the user can weigh the new Puma shoe against everyday objects. Our goal was simply to show (not tell) in a funny and interesting way how light the shoe is. I was the Lead Developer for this project, but was also involved in the video shoot (for example experimenting with different shooting and "stitching" styles in the very beginning of the project). Next to the main site I also developed the teaser site and the "Pullback" banner execution - you can see both in the case study in firstborn's portfolio.
Related Links:
http://lift.puma.com
http://www.firstbornmultimedia.com/#/our-portfolio/1056/case-study/
For one of firstborn's current project pitches, I made a little demo that showcases the combined usage of Papervision 3D and the Google Maps API. You can enter any location you want, into the textfield (i.e. "Germany", "10005 USA", "Wall St. New York", etc.) and as soon as you click the button, the little orange indicator hovering over the globe moves to the location you just entered...
Related Link:
http://www.jensfischer.us/demos/globeLocation
A little while ago, I was playing around with Augmented Reality in Flash for a possible project at firstborn, using the extremely handy open source code library FlarToolkit. To see my little demo, you'll need to have a webcam installed and print out the pdf with the tracker. Enjoy.
Related Link:
http://www.jensfischer.us/demos/augmentedReality/
I recently stumbled up a code library named "marilena" that allows me to use basic face tracking in Flash. Here you can see a first, quick demo, which obviously has to be improved a lot, but it works fine as a proof of concept. Tracking the head's rotation or the correct position of the eyes isn't supported yet, which would be a next step for me, towards an improved version of this experiment.
Related Link:
http://www.jensfischer.us/demos/faceTracking/
Here's a demo I made, showcasing a little interactive video in Flash. The whole thing is controlled by an XML that you can use to "stitch" video sequences together as you wish. The demo also shows, which video asset is loaded and unloaded at which time... The camerawork was done by Will Russel (firstborn's studio producer) and the model was Susanna (our intern from Hyper Island).
Related Link:
http://www.jensfischer.us/demos/interactiveVideo/