Tag Archives: Flash 10

How to correct 3-D projection on stage resize

The problem:
You’re using Flash 10′s native 3-D API and notice the projection goes a little skewiff when resizing the window.

The solution:
You need to reset the stage’s projection centre on stage resize, like so…

 

Embed tag gotchas in Flex SDK 4

In moving to compiling projects with the new Flex SDK 4, I noticed a couple of gotchas to do with the EMBED metatag that I thought I’d share:

Runtime Shared Libraries
If you wish to embed assets in your SWF with the EMBED metatag, so you can manage and update things easily, there’s an extra compiler parameter you must add, in order for your project to compile properly:

--static-link-runtime-shared-libraries=true

This is already added as a new default parameter in FlashDevelop projects. But if you’re planning to build projects from outside a similar IDE, you must add this to your compiler string. Otherwise, the compiler will think you have uninitialised constants and warn you so.

Embedding Fonts
Using the EMBED metatag, or even better runtime loading, for fonts is the sensible way forward. The amount of projects I’ve seen where you need to build from an FLA file full of fonts, which you need to hunt down and install is crazy. With Flex SDK 4, you’ll need to add an extra attribute to your embed tag for fonts, called ‘embedAsCFF’:

[AS]
[Embed(source='myfont.ttf', fontName='MY_FONT', fontWeight='regular', unicodeRange='U+0020-U+0040,U+0041-U+005A', mimeType='application/x-font', embedAsCFF='false')]
public static const MY_FONT :Class;
[/AS]

Happy compiling!

BBC A History of the World

A History of the World

I just finished a new project, called ‘A History of the World in 100 Objects‘, it’s a joint venture between BBC Radio 4 and the British Museum to chart human history in a new way. I developed the concept for the 3-D object explorer with the guys at GT/VML and built it using Flash 10′s native 3-D capabilities. Users are able to explorer objects from throughout human history in a potentially inifitely expanding 3-D time tunnel and even make history by uploading their own objects.

Here’s some footage of the 3-D explorer:

The main challenge facing the development of the 3-D explorer was to build something capable of handling up to 10,000 objects, loading in their images and displaying it all in glorious 3-D… all without crashing the user’s browser. Every object or filter set accessible within the explorer can be bookmarked, shared, or navigated with the browser back/forward buttons. For added accessibility, the explorer’s 3-D view itself can be navigated with the keyboard, mouse wheel or the on-screen controls.

I built the application strictly to optimise performance and memory management, while ensuring maximum stability. Coding techniques such as object pooling, typed arrays, load queueing, render deferral and the flyweight design pattern were used to maximise performance and minimise memory usage.

CoolIris type thing in 30 lines


[AS]
package { // Piclens type thing in 30 lines (FP10+) Liam O’Donnell – spikything.com
import flash.display.Sprite;
import flash.events.Event;
public class Main extends Sprite {
private var container :Sprite;
private var imageGrid :Sprite;
private var images :Array = [];
public function Main():void {
container = addChild(new Sprite()) as Sprite;
imageGrid = container.addChild(new Sprite()) as Sprite;
for (var i:uint = 0; i < 200; i++) images.push(getItem(i));
images.sortOn(“z”, Array.NUMERIC | Array.DESCENDING);
for each (var item:Sprite in images) imageGrid.addChild(item);
addEventListener(Event.ENTER_FRAME, update);
}
private function getItem(index:uint):Sprite {
var item:Sprite = new Sprite();
item.x = -(200 / 3) * 210 / 2 + (index / 3) * 210;
item.y = (index % 3) * 160 – 40;
item.z = 100 + Math.random() * 2000;
item.graphics.beginFill(Math.random() * 0xffffff);
item.graphics.drawRect(0, 0, 200, 150);
return item;
}
private function update(e:Event):void {
imageGrid.x += ((stage.stageWidth / 2) – mouseX) * .2;
container.rotationY = ((stage.stageWidth / 2) – mouseX) * .2;
}
}
}
[/AS]

Flash 10 Matrix3D demo

I quickly cobbled together this little demo using the new native 3D transforms in Flash 10. Alongside the regular transform.matrix property, DisplayObjects now have a transform.matrix3D property, which controls its appearance in 3-D space. It’s pretty easy to play with in Flash CS4, without any coding knowledge – I can’t wait to see a version of GTA built using this :)

Quick as a Flash 10

Flash Player 10 is here...Flash Player 10 is finally here! But does it live up to the hype? Previous major releases of Flash Player have each brought with them significant improvements in performance or added functionality. This time around, the guys at Adobe have been tinkering with a few exciting (and a few somewhat drier) enhancements, including: native 3-D transform APIs, new custom ‘Pixel Bender’ filters, dynamic sound generation, hardware accelerated graphics and new video capabilities.

Personally, because I’m always looking for new things that enable us to create innovative and engaging user experiences, I’m a little less excited about new features such as support for right-to-left languages or new audio codecs. But at least there are people out there filling in the gaps, pushing Flash beyond its perceived limits and developing things we can actually use to create edifying experiences, such as papervision, box2d, etc.

Any new features though, even if they aren’t quite as ‘cool’ as the previous additions of webcam or socket server access, are ultimately a good thing. Let’s just hope everyone keeps pushing in the right direction and uses Flash to beautify the web, not just make it more clunky – Shockwave people take note.