A while ago (like, almost a year ago) we were working on a project for Holden at VJ that used a bunch of custom made high quality video renders to show off each of the vehicles.
For the most part the videos were used as intro’s and outro’s to each of the sections, and all was going pretty smoothly, but then we hit the task of having to create a 360 fly-through. The usual approach we use for 360’s didn’t really work so I had to try a bunch of different things. Here is a quick run-through of what I tried.
Bitmaps
The first approach I tried was to use an array of bitmaps. Well, actually, a Vector of BitmapDatas that was being used to update a Bitmap instance on stage.
The benefit of this approach was that it was smooth. Super smooth. It was soooo smooth, and I was pretty much going to leave it there until I realised the file size. All the images combined were huge and it was infeasible to download them all in one hit. I even tried placing them into a MovieClip in a FLA and then Blitting them (so I could use Flash to play with all the compression settings) but there just wasn’t a good balance between image quality and file size.
Video to Bitmap Sequence
My next attempt was to compress the sequence into a video and then attempt to blit it – the idea being that the video would have better compression, but then I could get the benefit of the bitmap approach.
This seemed like it would be the best of two worlds, and seemed to work pretty well, but then I realised the CPU overhead of crunching the video. With the video that we were using, there was about 10~12 sec delay before you could actually do anything. On some non-awesome machine it would even start to hit the 15sec timeout thingy.
I even tried to stagger the loading, but the delay was just too much and really broke the user experience.
Video Sequence
Finally, I tried the straight video approach. At first I didn’t think this was going to work because videos generally don’t really like to play backwards. I could drag it forwards ok, but as soon as you started to seek frames in reverse order, it all just ground to a halt.
It took a fair bit of experimenting with the Media Encoder and some scripting but eventually I found a happy medium that seemed to work pretty well. I won’t bore you with all the details, but here are some of the main points I discovered:
- Use FLV format with a ON2 VP6 encoding – this seemed to be the only codec that would seek backwards with any type of speed
- Up the number of keyframes – the more you have the smoother it is, but the bigger the file-size will be
- In your code, when you are seeking to a particular time, make sure it is a different time to what you are already at (eg. Don’t seek 2 sec if you are already at 2sec) – I don’t know the exact reason, but by adding a simple check before I seeked the performance was increased dramatically
- Don’t allow dragging until the video has fully loaded (seems obvious, but I thought I should mention it)
That’s about it. Hopefully that will help some other fellow developers looking to spin stuff around.