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/
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/
I wrote this little Drawing-Api script in Actionscript 3 for my current project at firstborn. It's a slightly improved version of one of Mathieu's old experiments ("Liquid Form")... Drag around the black areas above with your mouse, to join or seperate the circles.
Based on an Actionscript 2 solution from "polygeek", I wrote this lightning effect in Actionscript 3. You can download the class here. Be aware that this is a first draft tho, so the class is far from properly commented. Apart from that it works fine and is a lot of fun to play around with.
-
Related Links:
http://polygeek.com
http://www.youtube.com/watch?v=j_ekugPKqFw
It is safe to say that nowadays nearly every single project here at firstborn contains Flash Video files (short: flv). Due to our success and experience, I think it is also safe to say that we are well-versed with web video and Flash Video in particular. Sadly, it is as well safe to say, that with each single project that we work on, we encounter new problems with that video format, even if it is simply the dark magic one has to perform, to achieve good filesize-to-quality ratios or a simple action like looping the video fluently without a millisecond of lag between the ending and recurring beginning.
Many of our former projects contain PNG image sequences, just so they can be looped smoothly, and therefore make our designers happy (read: make them stop getting on the developer's nerves). The downside of this technique is the much heavier filesize compared to an flv solution. This problem has been solved as of today. Imagine our surprise when we practically "stumbled" upon the solution of some major difficulties. The secret is the "keyframe interval" option when compressing the Flash Video. Usually you would try to set this to a slightly higher value, because this means smaller filesizes. In our case, the optimal (and embarrassingly obvious) solution would be to make it as small as possible though: "1 keyframe per frame"... This way the flv loops perfectly smooth and when embedded it in a MovieClip-Timeline in Flash, can - with the help of a little bit of code - finally be treated like a "real" regular MovieClip. I annouce the discovery of the holy grail: As long as they don't have sound, we can now change the playback speed of flvs and reverse (!!!) them. How cool is that.
I made 4 little demos, to illustrate what I'm talking about. Have a look at the different performances, as well as the filesizes:
http://www.jensfischer.us/demos/flvPlayback01
keyframe every 1 frame - video filesize with same settings 2,830 kb
http://www.jensfischer.us/demos/flvPlayback02
keyframe every 3 frames - video filesize with same settings 1,708 kb
http://www.jensfischer.us/demos/flvPlayback03
keyframe every 10 frame - video filesize with same settings 1,103 kb
http://www.jensfischer.us/demos/flvPlayback04
automatic keyframe setting - video filesize with same settings 900 kb
A few days ago I saw a YouTube video of a demo from "Moppi Productions" made in 2004. I knew this demo for a long time already and have been watching it repeatedly for years now - so I thought it's about time to try to reproduce this effect in actionscript 3 as an exercise. Flash is far from being the optimal solution for creating this kind of effect so I found myself spending most of the time on improving the performance of my initial script and had to compromise a lot. Anyways, check out what I've come up with after a few days of tinkering in my free time.
http://jensfischer.us/demos/flowerMouse/
After the background image loaded, click on the stage, hold your mouse button and drag it around for a while...
http://jensfischer.us/demos/flowerMusic/
It might take a few seconds to load, but this version features the flower generator synced to music with the computeSpectrum function. It is starting to look pretty harmonic, but definitely needs some fine tuning so it goes together with the beat better. I'll probably upload an updated version once I find some time to work on it a bit more.
-
Related Link: http://www.youtube.com/watch?v=PlWv_rVcVDA