As entertainment moves accross sceens and infiltrates our lives and different points, we as designers, advertisers, and content creators are constantly striving to find new ways to extend the message. Mobile has allowed us to occupy even the smallest pockets of time in peoples hectic lives. The Internet has allowed us to widen the story, and provide details to the most granular level. Fans of the show LOST can attest to that fact. Digital television, Hulu, Tivo, Boxee, and AppleTV have given us the power to reschedule the broadcast to fit into our lives.

Technology continues to grow faster than ever, and our ability to deliver this content has increased 100 times over in the past decade online. For the better half of 2009 I spent my days and night working with an incredible team at POKE New York on a project for 19 Entertainment. The idea was to transfer the Reality TV concept successfully to the Internet. The challenge was... How the f*ck are we going to do this? I mean how do you stream HD quailty video from every angle in the house that TV producer would want to see, how do you rig up all the mics to capture every conversation... In short, how do you make a physical house in Hollywood an all digital, always on 24/7 model for the tech house of the future?

I will not bore you with tons of documentation, facts, and strategies... that would be like soooo 2009.. Instead read the next few sentences as an overview, then I suggest you just take a trip over the the site. It is a shining model of how to distribute content, work in major brand sponsors, and convert an audience into a following.

Three CDNs drive data delivery through a 150 MB pipe out of the house, and there’s also a wireless microwave backup system. The 56 H.264 cameras, which are located in plain sight all around the property (including, yes, the bathrooms) are recording at 500 kbps and 1 mbps to allow for differences in user connections. The entire filming process is strictly digital, flowing directly from the cameras to the estimated 13-15 servers in place to store up to 40 terabytes of footage. If I Can Dream is also notable for being the first series on Hulu available internationally.

Swing over to http://ificandream.com  or hit up the house on twitter @IICDHouse

You asked, we listened!  We've extended the deadline for video entries for the Women At FITC contest to this Friday, March 5th.

So, how do you get your ticket?
Simple. Tell us with a VIDEO or a Flash Movie why attending FITC Toronto 2010 would be important to you! Tell us your story, why would attending would make a difference? Then, on March 5th we will select the top 50, and give out free tickets! Its that easy!

The official rules and all details can be seen at http://fitc.ca/women

Here are some of the awesome entries that we've received so far.

Bent Stamnes has been a demoscener since 1989, mainly doing music and graphics for countless productions for many different demoscene groups and platforms. He has been the main organizer for several popular demoscene events, and in 2004 he co-authored the book "Demoscene: The Art of Real-Time".

Bent has served as senior editor for the digital magazine ZINE since 2007. In October 2007, he traveled to San Francisco to host demoscene outreach panels with NVIDIA, Pixar, Adobe and ILM. In August of 2008, he took part in organizing the biggest demoscene event on US soil: NVScene, hosted by NVIDIA.

Recently, he founded displayhack.org, a website and community dedicated to showcasing (and competing in) short real-time VFX challenges. He also maintains his own website and portfolio at Transistor Bass. He'll be presenting Scene.org Awards: The Best Real-Time Graphic Demos of 2009 at FITC Toronto 2010 in April.

Buy Tickets to FITC Toronto | More Info About FITC Toronto
Get 10% off your ticket by using code: fitcblog

"It'd be boring if it were too easy"... is my favourite quote. It sums up my approach to life and work, and this is exactly what I said at my FITC Amsterdam session on Tuesday. 

I further went on to ask "wouldn't you rather get new challenges and learn new stuff rather than building the same apps over and over again?". The audience were stunned by my question. Or at least they all went very quiet. They may have just been falling asleep. 

Of course it's scary doing new things in new projects every time. And it's risky. But unless you take that risk how will you ever become better at what you do? 

I got a mail yesterday from someone in the audience who said : 

"...in my experience, most projects don't offer (m)any challenges. For the majority of my projects I already know how to solve all the issues before I start. And you are right, that is really boring. I am really interested in tips/advice on how to get projects that offer a challenge. I am all ears ;)."

So here are my tips for stretching yourself and integrating that back into the workplace. 

Playtime

If you're stagnating in your cubicle you need to kick-start things, and this means extra curricular projects, which means working outside of work. But that's OK, because it's not work, it's play. And if you get good enough at playing people will eventually start paying you to play, and then you'll never have to work another day in your life (to misquote a famous quote variously attributed to Edison, Socrates and Winston Churchill amongst others). 

Personal buildable projects

\

Find things that interest you, an d usually it's best if they're buildable projects. If you have crazy ambitious ideas you probably will struggle to dedicate the necessary time to finish them. So find simple things. Sometimes they can be the most fun! Like my legoizer app, that only took 20 minutes to make. Or my 3D Lunar Lander, that was only a day or two, which looks complicated but there were only one or two things that I didn't know how to do. It was buildable within the time available. 

I usually find that there's a point in a project, usually a couple of days into it, that it suddenly gets difficult. The initial enthusiasm wears off and it's just a bit of a slog. You want to make the "slog" part of the project as minimal as possible. If you can get through this to the finish then that's when the joy comes back! You will feel pride in your work, and then you can publish it. 

Pulling your pants down in public

Once it's done, share it on your blog and show it to your colleagues and bosses. If they're receptive to new ideas, then you can be sure they'll take your new skills and make use of them. And if they're not, then you can use all the experience and blog posts to get a new job.

It can be scary to post about your stuff, and that's normal. But stare this fear in the face. Don't just post the swf - post the source code too. It can feel a little like pulling your pants down in public but don't let this stop you.

This is what I started doing a few years ago, and now my blog is quite popular. If your work is good, people will show their appreciation. If it's not so good then people will let you know - and by doing so you'll learn a new technique. 

Recently I had this exact experience a few times when posting about ElectroServer - something I knew little about at first. By posting about my learning process, commenters on my blog told me about better solutions. 

So at best you'll get appreciation and at worst you'll learn some new stuff. 

Our skill is the ability to learn

It seems like nowadays it's not enough to be a "Flash programmer", even Flash changes enough to make us learn new skills all the time. So to be really good at our jobs it's not enough to be an expert in one technology. 

Our skill has to be the ability to learn new technology. 

And once you start focusing on that, things start to get fun. Just look at the new tools we have to play with! Not just Flash and it's new target devices, but also Unity3D, iPhone/Mac development, OpenFrameworks, Processing, or even new back end systems like Django and Ruby on Rails. Or what about multi-player stuff like ElectroServer and FMS? 

And I find that the more different technology I try, the more of an insight I get into new ways to do things, which in turn makes me better at Flash. 

Warning

I should just warn you - learning new stuff and playing is great at home, but when you find that you're promising new things to clients that you really don't know how to do, that can be very risky. 

So how do you manage that? Well you can cost it in for starters. You can also make sure that your workflow is as optimised as possible (but we'll save that for another post). And of course if you've done some experiments in your own time, you'll have a greater insight into what you're doing. 

Summary 

It's such an exciting time and we're truly living in a period of digital enlightenment. So let's enjoy the process of play, discovery and learning, and then perhaps the constant change won't seem nearly as scary. 

Seb Lee-Delisle is founding partner and CTO at BAFTA award winning digital agency Plug-in Media. He specialises in Flash games, physics and 3D and is one of the developers of Papervision3D.

The following was originally posted on the StruckAxiom blog on 2/2/10.

Today’s Site of the Day [editor's note: 2/2/10] on FWA is none other than the recently unleashed LEGOCLICK.com, designed and developed by the dudes and lady-dudes of Struck/Axiom in association with Pereira & O’Dell. (If you haven’t seen it yet, you should check it out.) To mark the occasion, we’d like to share a technical peak behind the curtain of one of the more popular features of the site – removing a block of content.

A word about perspective:

Early on, we considered different possibilities for how the LEGO bricks and the environment could be achieved technically. We thought about using one of the Flash 3D engines, and discussed solutions as exotic as using a server-side AIR app to render our objects as FLVs, but ultimately decided that we wouldn’t be able to achieve the performance or the visual polish that we demand of ourselves.

So, in a move that would send my college drawing professor into hysterics, we decided that visual polish and a stylized sense of depth were more important than “correct perspective.” That’s why everything has a bit of perspective to suggest depth, but the visuals don’t have consistent vanishing points, nor do they shift in perspective as they move relative to the viewer.

A word about the feature:

Removing a block of content is hardly an integral part of the site. However, it represented something very vital to both the LEGO brand and the site – fun. After all, who among us never built something only to smash it apart? (Or at very least, had a beloved creation subjected to the wrath of a brother or sister?)

Phase 1: The bricks

Creation and layout

When a block wall is broken apart, we’re switching from one large graphic of the block wall to many individual images, which each represent a brick. The correct number of bricks is created and positioned to fill in the block wall. (We decided to leave out the 1×2s that fill the edges on alternating rows – in the end, they won’t be missed in the flurry of movement.) In keeping with our intentional disregard for correct perspect ive, each brick has the same beginning perspective.

Movin’ them bricks

To make the bricks move, we need to give them some velocity. We start with a startingVelocity, which is random (within a range), and split it between x, y, and z – the amount of the total velocity that z gets is determined by its distance from the center of the block wall, and the remainder is split between x and y, according to the angle the block is from the center. While _xVel and _yVel will move the block in x and y, _zVel will affect the block’s pseudoZ property, which will affect its scale, making it appear to move outwards.

Each block is listening for ENTER_FRAME events. Every frame, each block calls the update() function, which moves the block according to its velocities, and then adds a gravity constant onto the y velocity. The update() function is separated from the event handler so that it can be called independently – when the explosion is started, the blocks nearest the center call update() twice automatically, and the blocks slightly further out call it once, to give the illusion of being blown apart from the center. When the block is sufficiently offstage, the event listener is removed and an event is dispatched to have the block’s parent remove it.

private function enterFrameHandler(e:Event):void

{

     update();

     if(y > stage.stageHeight*1.5)

     {

          removeEventListener(Event.ENTER_FRAME,enterFrameHandler);

          dispatchEvent(new ExplodeBrickEvent(
ExplodeBrickEvent.EXPLODE_BRICK_OFFSCREEN));

     }

}

private function update():void

{

     x += _xVel;

     y += _yVel;

     pseudoZ += _zVel;

     _yVel += GRAVITY;

}

public function set pseudoZ(value:Number):void

{

     _z = value;

     _asset.scaleX = _asset.scaleY = _scaleAdjust * value/7500;

}

public function get pseudoZ():Number

{

     return _z;

}

Give it a spin

Now that the pieces are moving correctly, it’s time to make them appear to spin. To achieve this effect, we went back into Cinema4D and created 5 different sequences of our 3d block spinning in various directions. Each block is randomly assigned one of these sequences to play through as it falls.

We noticed that in all of the chaos of the initial explosion, the eye missed most of the spinning. In order to save on file size / load time (since every additional frame is an additional png, meaning X kilobytes and Z load time), we changed the timeline of our spin sequences so that the sequence waited for the initial flurry of motion to complete before resuming its spin.

Phase 2: Putting content on the bricks

Capturing and chopping content

Using AS3’s BitmapData functionality, we’re able to take the state of objects and draw them into a bitmap. To get the content we want, we’re turning off the block background (switching visibility to false), capturing the bitmap data (BitmapData.draw()), and then turning the block background back on (until the wall is ready to explode of course – see Phase 1: Creation and Layout). Actually, we’re capturing a bunch of small bitmap datas – one for each block that we’re creating, capturing only the content that should go on that block. Then we send it on to the block that we’re creating for the beginning of the explosion.

var bitmapData:BitmapData = new BitmapData(BLOCK_WIDTH,
BLOCK_HEIGHT,true,0×000000);

var matrix:Matrix = new Matrix();

matrix.translate( -DisplayObject(_blockArray[i]).x, 
-DisplayObject(_blockArray[i]).y );

bitmapData.draw(Sprite(blockWall),matrix);

IExplodeBlock(_blockArray[i]).setFace(bitmapData);

Distorting the content to fit the face

As the blocks spin and tumble out of frame, we want the content on the face of them to move with the block. Since we’ve captured that bitmap data, we can actually use the DistortImage class, developed by the evil geniuses at Sandy3D.

DistortImage takes bitmapData and distorts it using corner pinning – you tell each corner where it should be positioned, and the image is stretched, squashed and distorted to fit those corners.

So how do we know where the corners are? Some good old-fashioned Flash production work. In our Flash MovieClip, we have four movie clips, one for each corner, that are invisible (they are semi-transparent here, for demonstration purposes). On every frame, we position them on each appropriate corner of the graphic.

So, when we explode the wall into blocks, on every frame we are distorting the image to fit the corners, as they’re positioned on that frame.

Which brings us to a special consideration – some of the spin sequences result in the front face rotating away so that it’s unseen – what do we do in those cases? We simply place all for corners in the exact same location – like 0,0 – and check for it in our code. If the corners are positioned identically, we just had the graphics that we’re mapping to the face.

public function setFace(bitmapData:BitmapData):void
{
     _asset.scaleX = _asset.scaleY = _scaleAdjust;
     _faceDistortion = new DistortImage( bitmapData.width, bitmapData.height, 3, 3);
     _faceBitmap = new Bitmap( bitmapData, PixelSnapping.NEVER, false);
     addChild(_faceShape);
     _faceDistortion.setTransform( _faceShape.graphics, 
_faceBitmap.bitmapData, getCornerTL(), getCornerTR(), getCornerBR(), getCornerBL());
}


private function update():void
{
     if(getCornerBL().x != getCornerTR().x || getCornerBL().y != getCornerTR().y)
     {
          _faceShape.graphics.clear();
          _faceDistortion.setTransform( _faceShape.graphics, 
_faceBitmap.bitmapData, getCornerTL(), getCornerTR(), getCornerBR(), getCornerBL());
     }
     else
     {
          _faceShape.visible = false;
     }

     x += _xVel;
     y += _yVel;
     pseudoZ += _zVel;
     _yVel += GRAVITY;
}

public function getCornerTR():Point
{
     return new Point( _asset.cornerTR.x*_asset.scaleX, 
_asset.cornerTR.y*_asset.scaleY );
}

public function getCornerTL():Point
{
     return new Point( _asset.cornerTL.x*_asset.scaleX, 
_asset.cornerTL.y*_asset.scaleY );
}

public function getCornerBR():Point
{
     return new Point( _asset.cornerBR.x*_asset.scaleX, 
_asset.cornerBR.y*_asset.scaleY );
}

public function getCornerBL():Point
{
     return new Point( _asset.cornerBL.x*_asset.scaleX, 
_asset.cornerBL.y*_asset.scaleY );
}

Processing the distortion

This was all well and good, except for one small thing – it was totally overtaxing the processor, chugging like mad. It quickly became clear that it wouldn’t look smooth on even the best of computers. We did not give up hope, however – we figured that we could find a point to pause for a moment, run each frame of distortion that we would need, and save each as a bitmap. That way, instead of manipulating a bitmap every frame, with all of the smushing and interpolating of p ixels that required, we could just swap a bitmap in and out.

To do this, we needed to capture those corner positions from the MovieClip. As soon as the movie clip assets are loaded in – we’re loading those separately, by the way, so that the site can get up and running without all those extra images to loa d – we run a timer, on each timer event advancing the MovieClip a frame and recording corner positions for each sequence into static arrays.

Now that we have all that information stored, we can go through the whole process again – splitting the wall into blocks, sending it a chunk of BitmapData, and assigning it a sequence. We use a timer to progress through all the different frames, using the corner information stored in the static arrays to distort the BitmapData and then save it as a new bitmap into an array.

Once every block is done distorting and storing its sequence of bitmaps, the explosion occurs – the blocks move outward and begin to spin, and the bitmaps are swapped out to show the correct distortion for each frame.

Phase 3: The minifigure

A word about the minifig

The minifig is an instantly recognizable part of the LEGO brand, so what better way to inject some more fun into the site than having a minifig with a jetpack flying around? Better yet, why not have the minifig be the impetus behind breaking the wall apart? The programming isn’t super complex, but we’ll cover it quickly here.

Jetting around

When a block is selected, the minifig is positioned offstage – using a bit of random logic (if (Math.random() » .5)) to determine which side of the screen to place him on. Another bit of random logic determines whether the minifig will fly directly behind the block, or whether it will fly around the front of the blocks first. The motion is handled by Tweener, using bezier points to create smooth curves. If the minifig is flying directly, he is immediately swapped from a container sprite that sits above the block walls to one that sits below them – if flying around, he gets swapped at the midpoint of his flight.

Do the twist

The minifig wouldn’t look that great if he was just facing straight ahead all the time, so the team created a sequence of renders of him rotating side-to-side. Armed with these frames, we built an enterframe handler into the minifigure class. Every frame, we compared the current x position to the x position in the previous frame. Based on that difference, the minifig is rotated, and the image sequence goes to the appropriate position.

var targetRotation:Number;
if((x - _previous.x) < 30 && (x - _previous.x) > -30 )
{
     targetRotation = (x - _previous.x);
}
else if ((x - _previous.x) »= 30)
{
     targetRotation = 30;
}
else
{
     targetRotation = -30;
}
_asset.rotation = (targetRotation - _asset.rotation)*.25 
+ _asset.rotation;


if(_twist)
{
     var targetFrame:int = Math.round(13 - _asset.rotation/2.5);
     targetFrame = Math.min(targetFrame, 24);
     targetFrame = Math.max(targetFrame, 1);
     _asset.gotoAndStop(targetFrame);
}

_previous.x = x;
_previous.y = y;

Break on through

Once the minifig is behind the block wall, we run the pre-processing for the explosion, rendering out all of the distorted bitmaps for the explosion. As soon as all the pieces are ready, the minifig plays through one of three “break through” sequences – randomly chosen – and the block explosion goes off. Once all the blocks are offscreen, the minifig gets sent back offscreen using Tweener.

And that’s it!

In a nutshell, that’s how our team pulled off the explosion effect – fully realized through a combination of 3d work, Flash production, and AS3. Hope it was educational – now go play with the site some more!

In anticipation of FITC Amsterdam, our good friends at Mighty Design out of Toronto have built the FITC Spliffr, and we love it! Its all about getting inspired - virtually.

We love it so much, we want to give a pair of ticket to FITC Toronto 2010 to the best photo taken and entered. So go 'get inspired' and enter your photo into the gallery! Entries close on March 15th, so enter soon! To see all the entries so far, visit the Gallery!

The following was originally posted on the StruckAxiom blog on 1/14/10 by Matt Anderson.

Like any good children of the 80s, we love LEGOs. So when our friends at Pereira & O’Dell hollered at us with a couple LEGO projects (the LEGO Photo iPhone app and LEGO CL!CK site), we didn’t hesitate. Coming into the studio to work/play with LEGOs all day—physically and virtually—has been ridiculously inspiring.

Now that the results of a few (okay, more than a few) late nights are alive and kicking on the Interweb, we’re predictably giddy about the positive response. LEGO Photo is the #5 Free App in the iTunes Store as of today. Good (and incredibly smart) people from Fast Company, Mashable, KRonikle (the Kidrobot blog!), app.itize.us and WIRED have all had nice things to say about the projects.

So. Download the app. Get inspired on the site. And… please upload your LEGO-fied photos to the Flickr group we just discovered.

Please be careful. LEGOfying an already-LEGOfied image may disrupt the balance of the space-time continuum.

Ralph Hauwert is a Dutch Flash Platform expert, focused on creating new and innovative appliances for the Web. He works as a freelance consultant and developer of rich Internet experiences, using such technologies as Papervision3D, ActionScript, and AIR. As an industry recognized leader in the field of Flash 3D, and a well-known figure within the Flash Open Source movement, he spends a lot of his "play time" on such projects as Papervision3D and Rhonda Forever, the 3D sketching application project created by Amit Pitaru and James Paterson. 

With more then a decade of experience on the Flash Platform, Ralph is a frequent speaker at technology and design-centric events such as Adobe Live, FITC, Flash on the Beach, Multimania, and user group gatherings. As a former core member of the Papervision3D team, together with Carlos Ulloa and John Grden, Ralph has also conducted workshops exploring the relatively new field of Flash 3D. Ralph is also a proud ambassador for the Dutch Adobe usergroup. He blogs at Unit Zero One, and can be followed on Twitter at @unitzeroone.

Lately he has been working on such project as the Anne Frank virtual house, commisioned by LBi Lost Boys and the Anne Frank Foundation. For this project, Ralph has built a custom 3D engine from the ground up, to help create an online experience of the Anne Frank house in realtime 3D quality previously unseen on the Flash Platform. 

Ralph is presenting "UnitZeroOne : Skunkworks" at FITC Toronto 2010. In this session Ralph will explore and reveal his journeys into creating real-time graphics with code. With all new and shiny tips&tricks from his "graphics coding black book". A session packed with information on 2D and 3D graphics programming with a personal narrative, promises to be a fun trip through the works and mind of UnitZeroOne.

Buy Tickets to FITC Toronto | More Info About FITC Toronto
Get 10% off your ticket by using code: fitcblog

The New Ways of Interaction Channel  on Vimeo is an interesting and inspiring collection of projects about newer ways of human and physical interaction, and is curated and hosted by Jens Franke.

The channel features interactive installations and systems with a strong focus on technologies such as multi touch, tangible and gestural interfaces, augmented reality and physical computing. We absolutely live for these new communication platforms at my studio. I love that digital/Interactive media has been moving further and further from more traditional models and platforms like computers. Once detached from the confines of a keyboard and a mouse, the user experience becomes infinitely more engaging and natural.

Back in December, I posted about some progress on the Synesthesizer, a software-based synthesizer that translates pictures into music, with synesthesia-inspired metaphors.

I'd been planning to get the Synesthesizer into some decent shape for my talk, Hearing Pictures, at FITC Amsterdam, next Monday, February 22nd. But, I have to admit, I sorta hit a wall. I just wasn't getting the results with the Synesthesizer that I wanted.

So I started over -- working on a new software-based musical instrument from scratch. And the results were better than expected.

Her name is Synthia, she's the first musical instrument that we're releasing out of Almer/Blank Labs, and she's all rarin' to go -- but I won't let her come out for another 132 and a half hours.

I will debut Synthia, during Hearing Pictures. If you're planning to be at FITC Amsterdam, then you will most definitely not want to miss this presentation @ 4PM in Shaffyyzaal on Day 1, Monday, February 22nd. 

And, after my talk, a Synthia installation will be running in the exhibit hall for the remainder of the conference.

Share and enjoy!

-r