Deconstruckt » Create

He’s Definitely a Hotspot

upto12 — Wed, 10 Mar 2010 20:45:35 +0000

After a couple months of hard work, the PDX crew was proud to put the finishing touches on a beautiful, immersive, brand-focused site for Newcastle Brown Ale (big shouts to our friends at Vitrorobertson and TWC). As the site went live, we were reminded of something we had almost forgotten (but not quite): Our very own Patrick Marzullo (aka Tricky, Trickster, Scrap of Man) is featured quite prominently just below the Opening Acts hotspot on the Record Store page.

You see, the hired talent just wasn’t up to our rigorous standards. We needed someone who could look at records and swig beer like a champion… and, well, Patrick rose to the occasion. Check out the entire Newcastle experience HERE. And check out the entire Patrick Marzullo experience HERE.

Bustin’ Bricks: Behind the Scenes

mzungu — Wed, 03 Feb 2010 00:07:27 +0000

Today’s Site of the Day 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 perspective, 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.

var zRatio:Number = (maxDistance - distance)/maxDistance;
_zVel = zRatio * startingVelocity;
_xVel = Math.cos(angle) * (startingVelocity - _zVel);
_yVel = Math.sin(angle) * (startingVelocity - _zVel);

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 pixels 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 load – 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!

Go Ahead, Push Our Buttons.

Kyality — Mon, 01 Feb 2010 21:52:23 +0000

StruckAxiom just finished the branding and digital design for Utah’s first digital conference called PushButton Summit 2010. This event will be Utah’s premiere digital media summit for animation, gaming, mobile distribution, interactive and entertainment. It’s a two-day event and is intended to bring together world-class industry and technology leaders, entrepreneurs, students and executives to discuss the latest in what’s pushing the creation and use of digital media. We just finished this teaser thanks to the talents of our own Tosh Brown as well as Bob Zagorskis.

Enjoy and better yet, come to SLC and check out the big event!

LEGO! LEGO! LEGO!

upto12 — Thu, 14 Jan 2010 19:22:54 +0000

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. You can see some of the early results of the collection here:

Created with Admarket’s flickrSLiDR.

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

Hello. (Part 9)

upto12 — Thu, 03 Dec 2009 17:43:46 +0000

Part 9? Really? This is getting a little out of control. But, as long as there are talented people to profile (and as long as your ravenous appetite for clever quips and ridiculous links remains insatiable), the beat goes on.

Dylan Smith. Interactive. @dylansm. PDX.
Our mothers taught us that if we didn’t have something nice to say about someone, we shouldn’t say anything at all. Dylan… well… uhmmm… Dylan is… uh… hmmm… Aw, c’mon, Dylan! You know it’s not true. We have lots of nice things to say about you. We just can’t really say them right now. Not while the HR folks are looking over our shoulders. Are we serious? Actually, yes. Very serious.

Andy Smith. Lots of Things. LA.
A California native, Andy is a vintage car aficionado who dreams of one day buying a classic muscle car and heading for a weekend in Vegas. You know, just like those one dudes. Andy enjoys cooking (while his wife fixes the leaky faucet!), movies and anything written by James Ellroy. But lately, he’s been tackling the works of Dr. Seuss with his kids, Ben and Josie.

Leslie Roberts. Producer. SLC.
What does Leslie love? Plants. Flowers. Dancing during staff meetings. Adventures. Christmas presents. Fishing. Fresh air. Songs. Poems. Books. Paintings. Small animals. Large animals. Bright copper kettles. Warm woolen mittens. Brown paper packages all tied up with string. Who does Leslie love? You. F’reals. She loves you.

Jonathan Minori. Interactive. @minoflow. SLC.
One day, Jonathan Minori will direct a music video. Hopefully, it’s something like THIS and not something like THIS. Although, if it were something like THIS blended with something like THIS, my head would probably explode from sheer awesomeness. In the meantime, Jon lives on powder, owns BKnowlden in triathlons and designs pretty things for the internets.

Daniel Conner. SLC.
Mr. Conner won the Struck Fantasy Football Championship last year. He was a merciless trash-talker. He let no one forget his victory. This year, the gods of nerd football have evened the score and the DPC currently resides in the basement of the league. You know what they say about karma… Anyway, Dan’s not a complete lost cause. He likes to fish Henry’s Fork in Island Park, ID and he (supposedly) graduated from Thunderbird (THE American Graduate School of International Management). I guess we’ll believe him… but that school sounds totally made up to me.

Melissa Crespo. @this_melis. SLC. (Honorary Induction)
While the UofU soccer standout has returned to an institution of higher learning and no longer sits, meets and eats with us—she said something on her last day that we’ll probably never forget: “Good things come from following the rules, but nothing great.” Well said, Mojo. Well. Said. (Cue swelling strings… and here we go with the slow clap… Clap… Clap… Clap… And, BOOM, thunderous applause!)

MLS CHAMPIONS!!!

upto12 — Thu, 26 Nov 2009 17:30:21 +0000

Sunday night our beloved RSL faced the evil Landon Donovan, David Beckham’s shark-jumping hair and the rest of the LA Galaxy. We watched. We prayed. Our hearts pounded as if we had swallowed a fistful of ephedra. After 120 minutes and seven rounds of penalty kicks, our boys triumphed. And, while they were the underdogs on paper, they were the best squad on the pitch that night. Beckerman controlled the flow of the match. Rimando was a typical beast in the pipes. And Robbie Findlay just kept attacking until a small crack appeared for the equalizer.

So, with the Anschutz Trophy resting safely at the foot of the Rockies, now’s as good a time as any to show off a couple print ads we delivered earlier this year for XanGo (RSL’s jersey-front sponsor) and RSL. At the beginning of the season, these executions might have felt aggressive… Now, they just feel right.

Big congrats (again) to all our friends at RSL! Let’s do it again next year!

(If you haven’t experienced the intensity of the PK shootout, do yourself a favor and WATCH IT HERE. There’s nothing better than watching Landon Donovan blast a PK over the crossbar…)

What’s Interactive?

upto12 — Tue, 24 Nov 2009 20:54:54 +0000

Today at noon, the folks behind Avatar released something they’re calling an Interactive Trailer. Intrigued by the the word “interactive,” I downloaded and installed the Adobe Air application. There’s no doubt that the movie looks amazing (and it should, James Cameron has spent practically the whole decade obsessing over every detail), but I’m a bit confused about what, exactly, makes this trailer “interactive.”

I suppose we all have our own thoughts about what “interactive” means. Quite simply, I think it means that the user’s action should create a unique and variable experience—and I don’t believe that’s the result of the Avatar Interactive Trailer. Everyone has the same basic experience: Watch the trailer then click a thumbnail to watch additional video content. The user doesn’t actually interact with the video, just around it, above it or below it.

After fiddling with it for 20 minutes or so, I don’t get it. I don’t see how this application is any different from a standard movie website that offers a series of videos. So, I have questions: Why build this as an Adobe Air application? What does “interactive” mean these days? Does just clicking to watch additional content constitute an “interactive” user experience?

In this case, ”interactive” just seems like the wrong label—especially when it comes to video content. The bar has already been set high by truly interactive video pieces like Arcade Fire’s Neon Bible and Cold War Kids’ I’ve Seen Enough. And the Avatar Interactive Trailer certainly doesn’t live up to that standard.

Agree? Disagree? Let’s hear it.

Hello. (Part 8)

upto12 — Tue, 03 Nov 2009 20:25:10 +0000

Hey, everybody. You’ve missed these posts. I know you have. You won’t admit it, but your inability to articulate your feelings doesn’t diminish the emotion at all. You’re working on it with your therapist, right? Well, okay then, that’s good enough for me.

Eric Honan. Interactive. @erichonan. PDX.
Eric makes art for free and then gives it away

. To people he doesn’t know. He just puts it in a box or an envelope and sends it off. He also has the best-groomed beard in Portland—which, given all the scraggly, unkempt half-beards up here, isn’t really that tough. But still, his beard is fantastic.

Bobbie DaLuz. Account Services. SLC.
Bobbie didn’t want to tell us anything about herself. She only wanted to talk about other people. She’s the one who told us that Peder farts on airplanes, that Phil wears a beanie to tame his spiky hair, that Kyle hates dogs and that Susan’s nickname is “Mama Kat.” All of this talking, I suppose, also tells us a lot about Bobbie.

Spencer Taggart. Business. SLC.
From 9am to 6pm, Spencer is all business—lunch meetings, golf, hanging his MBA diploma in prominent places, monitoring the stock exchange, taking phone calls on his bluetooth headset, looking at spreadsheets. But when dude leaves the office, it’s all rock all the time. When you see him cranking the Bon Jovi or dropping a karaoke hammer on “More Than Words,” just know that he’ll respond to any of the following monikers: Dudacious, Bro, Curly Sue, Fro, Spence-a-mania, Magnum, Hot Tamale, Mr. America, Studly, Superdude, Tagman, Spence Dogg, Megatron, Sputnik, Froth, Manimal and Boomer.

Matt Manes. Design. SLC.
Matt is a Taurus. He loves tomatoes and black-capped chickadees. And they love him back. Really, they do. We all do.

Tami DeGracie. Business. @mebabydoll Father’s Lion hd Sister Act film

. SLC.
As the master of finances, Tami is a mathematical genius. For example, she (now) knows that one (1) boy bunny + one (1) not-boy bunny = 72 baby bunnies. Other things you need to know about Tami: She listens to Christmas music in July. She’s addicted to Mtn. Dew. She forces her husband and three sons to watch beauty pageants but never realizes that they’re asleep during the costumes, talents and evening gowns but WIDE awake for the swimsuits.

Why? Because We Like You!

Kyality — Tue, 20 Oct 2009 18:51:31 +0000

download Get Rich Quick

Located within the historic Presidio district of San Francisco, The Walt Disney Family Museum takes an intimate look at the man’s roots and the studio’s role in modern animation. Obviously, we jumped when they engaged us to create an immersive brand experience for the museum’s retail store.

Don Juan DeMarco video

Our goal: Create a fundamental and nostalgic look at the iconic Disney style and brand. In our exploration of the Disney origins, we worked closely with the Mary Blair estate. Blair, one of The Walt Disney Company’s most memorable artists, produced striking

buy The Strange Love of Martha Ivers concept art Man on Fire divx

for such films as Alice in Wonderland, Peter Pan The Big Picture rip and Cinderella.

By deconstructing traditional Disney art as well as Blair’s work, we honed in on pieces of iconic imagery on which we could hinge an immersive experience. The result is a mixture of patterns, prints and characters that explore the essence of Disney. If you’re passing through the Bay Area and love Disney, design and/or creativity in general (and, really, who doesn’t love all three?), plan a stop at the Presidio. See you real soon…

The Unbearable Lightness of Being rip

Seven Stages of Exhaustion.

mofo — Tue, 20 Oct 2009 09:17:47 +0000

It’s no secret here in the Broadway office that Matt Austin and I have been working around the clock to nail some pretty tight deadlines…

What struxiomers didn’t know is that, much like grief, some projects bring about 7 emotional stages to work through. Over the last 7 days, as I’ve been here around the clock, these stages have manifest themselves at my desk… perhaps you’ve noticed them…

::1 Shock / Disbelief…. (Mon. night / Tues. morning)

::2 Denial…. (Tues. night / Wed. morning)

::3 Bargaining…. (Wed. night / Thurs. morning)

::4 Guilt…. (Thurs. night/ Fri. morning)

::5 Anger…. (Fri. night - Sun. morning)

::6 Depression…. (Sun. night / Mon. morning)

::7 Acceptance / Hope…. (Mon. night / Tues. morning)

So, as the final few renders are chugging away, I thought I’d take the time to document the progression of my insanity. Clearly, I’ve accepted it.

Romeo + Juliet movie

Death Ship download