Click and Drag 360 View

Posted by Pete Shand in Actionscript, Flash

.MPO to Anaglphic or Stereo Pair JPG

Posted by Pete Shand in Actionscript, Flash, Photography

I recently bought the new Fujifilm FinePix W3, it a nutshell its a camera with stereoscopic lenses (see below) which means you can shoot 3d photography and hd footage. It doesn’t stop there though, on the back of the camera you have a 3.5-inch glasses free 3d display. Without a doubt the coolest gadget I’ve ever bought.

Fujifilm FinePix W3

One thing that surprised me was the format in which the W3 saves stereoscopic images, the file extension is called .mpo and I can’t say I’ve ever heard of it. I was expecting it would save as a stereo pair .jpg or .jps which would be easier to view and edit on a regular computer display.

It turns out there are a few programs out there that will convert .mpo to .jpg, but not that many. So i decided to look into the possibility of converting in actionscript. Because the .mpo format is basically multiple jpgs saved within the one file it turned out to be pretty straight forward. Building on Thibault Imbert’s work on jpg decoding I simply wrote a few classes to parse the .mpo into separate jpg byteArrays and then output the result as a stereo pair or a anaglyphic image.

Performance vs filesize vs fidelity

Posted by Pete Shand in 3D Flash, Actionscript, Online Advertising

Performance, file-size and visual/audio fidelity is something every designer and developer should consider when creating content for the web. I can remember when I first started using flash it was all about doing as many cool and complicated on-screen concoctions as possible, regardless if the frame rate slowed to a crawl. However as I and the platform as a whole has matured I’ve found myself considering and weighing up the above to get the most out of every experience I fashion.

This post looks at a recent project of mine, which at face value appears quite simple, however behind the scenes there were a number of hurdles that needed to be overcome before the finish line.

you can view the final advertisement here (turn the sound on!)

So the basic idea was to have hundreds of coffee beans sitting in the leader-board banner at the top of the screen and an Espresso cup sitting in an MPU banner bottom right. When the user interacts with either banner the beans would begin to fall down, get ground up and coffee would pour into the espresso cup. Once this animation finished the user would be prompted to pick their favorite type of coffee, which would then transition the MPU banner to the users selection. Sounds easy enough right… Well yes… and no. The main problem with this campaign is that it was for McDonalds, they expects the finest visual aesthetics however we have very limited file-size and processing power to play with.

I first concentrated on creating a realistic looking bean. Seeing as the geometry involved is quite simple I decided to go ahead and make a 3d model of half a coffee bean. Then simply used Away3D to load it into flash.

Now rendering one 3D bean is all fine and dandy, however when you get up into the hundreds things start to slow down… like really slow down! can’t wait for the new upcoming low-level 3D API Mole Hill. Anyways for the time being the solution to this is pretty straight forward, all I did was load the model once and then take a Bitmapdata snapshot every 5 degrees when required, then each bean display object simply pulls and displays the relevant Bitmapdata snapshot.

The next challenge was to decide how these beans were going to animate. I wanted to make it as realistic as possible. The obvious choice would be to utilize one of the many as3 physic engines out there. I decided to go with box2d, however ran into problems almost immediately. The first issue was of course performance, as soon as I added more than say 40 to 50 objects everything really started to slow down (and I’m on a pretty fast computer). The second issue was that it was adding about 300kb to the file-size.

So how can I get rid of these performance and file-size issues while still keeping the resulting animation… Simple, get rid of the engine in the final swf. I created a new fla that setup a physic scene and recorded the position and rotation of each bean every frame (see above). This swf ran slow as hell (about 1-2 frames per second) however this didn’t matter as long as all the information was being captured. I then filtered the data, compressed it into a ByteArray and saved it as a data file ready to be embedded in the final swf.

This allowed me to simply embed this data file in the final swf, uncompress the data and animate all the beans without actually publishing with a physics engine. This approach resulted in a saving of 266kbs and a swf that played back easily at the target frame-rate.

I will post a second part to this post covering the MPU.
Stay tuned.

Trace Event

Posted by Pete Shand in Actionscript

It would be great to add a way to track trace events.

when testing flash within the browser its nice to be able to see the trace output. currently there are ways to do this with plugins for firefox or air apps from De MonsterDebugger, but sometime your testing on someone elses computer who don’t have these programs installed. if we had the above event we could simply read a class that shows a debug panel when you input some key combo.

1
2
3
4
5

stage.addEventListener(TraceEvent.UPDATE, OnTrace);
function OnTrace(event:TraceEvent):void
{
     textField.text = event.trace
}

if you’d like to see this event added to actionscript please visit the below URLs and add your support:

http://bit.ly/aEKFK9

Circle Preloader

Posted by Pete Shand in Actionscript

Here’s a nice little circle pre-loader class created recently. All you really need to do is add it to the stage and then update its percent value (between 0 and 1) on a ProgressEvent or whatever event you want really. There are also two optional values that you can set in the constructer which relate to the colour of the loader.

You can download the source here

1
2
3
4
5
6
7
8
9
10
11
12
13

import flash.events.ProgressEvent;
import net.peteshand.utils.CirclePercentLoader;
 
var circlePercentLoader:CirclePercentLoader = new CirclePercentLoader(0xAAAAAA, 0x666666);
circlePercentLoader.x = stage.stageWidth/2;
circlePercentLoader.y = stage.stageHeight/2;
addChild(circlePercentLoader);
 
loaderInfo.addEventListener(ProgressEvent.PROGRESS, OnProgress);
function OnProgress(event:ProgressEvent):void
{
     circlePercentLoader.percent = loaderInfo.bytesLoaded/loaderInfo.bytesTotal;
}

Reverse Video Playback

Posted by Pete Shand in Actionscript, Video

If you’re at all familiar with video within flash you’ll know that there is no built in functionality to play a video in reverse. The reason for this is quite simple. When a video is encoded regardless of the codec or the wrapper format some frames are keyframes (iFrames) and other are in-between frames (pFrames or bFrames). Basically the in-between frames need data from other frames, which are usually sequentially before them, so if the video is played in reverse each time an in-between frame is encountered data will potentially be missing.

You could make every frame a key-frame to get around this, however this would result in huge file size.

Another approach that can work in some cases is to take a bitmapdata capture of each frame as the video plays, save them to a Vector and then once this process has been completed you can jump to any frame within the Vector regardless of if the original frame was a key-frame or not, or even play through the Vector in reverse.

The movie above demonstrate this method, source files can be download from here.

The downside to this approach is that each frame that is placed in the Vector has to be saved into memory, so if the video is really long in length, or has large dimensions this may slow performance significantly, so keep this in mind. The other downside is that you have to play through the video to capture each frame before you can play it in reverse, I guess it really depends on your project as to if this is going to be an issue.

The above example is lacking buffer checking, so if the video starts buffering half way through playback the reverse sequence will capture this. This could be fixed pretty easily by putting in an “if buffering don’t capture” statement, but I don’t really need it for what I’m doing. For a more solid solution you’d also probably want to use a timer rather than enter frame.