Patrick Matte » Flash

Animation test – zoom blur from space to Earth surface with Google Maps and Flash

Patrick Matte — Sat, 13 Aug 2011 00:38:01 +0000

Click to open SWF

Following up on my previous blog post, I made some animation tests for moving on the globe from one location to another.

After you get to Los Angeles, use the search box to go to any other location.

I used Away3D 3.x and a motion blur filter that I found in Adobe’s Pixel Bender Library. It actually took a lot of work to make this look good.

Download the source files.

Simulating Google Earth with the Google Maps API for Flash

Patrick Matte — Mon, 16 May 2011 23:03:41 +0000

I made some research on how to simulate Google Earth in Flash for a recent project at TBWA\Chiat\Day. Unfortunately the schedule was too tight and a freelancer was called in to build the module which in the end only used the regular google maps top view. But I wanted to share my research anyway.

Click to open SWF

The tricky thing is that the grid in Google Maps is square and as you can see in the background, the latitude is not distributed evenly. So you can’t simply take the square map and put it on a sphere or it will appear very distorted. What you need to do is find the latitude/longitude of the 4 vertices of every face on the sphere and then use the method fromLatLngToViewPort which returns the Point on the map that corresponds to that latitude and longitude. Once you have all four points, you can draw that particular section of the map and use it as a material for the face. One thing worth mentioning is also that for some reason, the satellite view only has map available from 85 degrees to -85 degrees of latitude, so you have to patch the top and bottom of the sphere manually.

Maybe I’ll revisit this at a later time and make it possible zoom in on the map.

Download the source files.

OSX genie-like effects with Flash and Papervision3D

Patrick Matte — Fri, 20 Aug 2010 00:34:22 +0000

I made a nice little transition effect this week that’s a bit similar to the genie effect on OSX. It’s basically just made with a Papervision3D plane and tweens for every vertices composing the plane. Open the swf and play with all the different easing equations to create a different look and feel.

Click to open SWF

Download the source files.

Reproducing the Labuat brushstroke effect…

Patrick Matte — Fri, 05 Mar 2010 00:40:29 +0000

This week i had a stint at trying to reproduce the brushstroke effect as seen on the famous labuat website, winner of the FWA’s 2009 people’s choice award. The tricky part was getting that same smoothness in the curves but i’m pretty happy with the results i got so far. For kicks, i also added some animation and velocity to the brushstroke.

Click to open SWF

Download the source files.

It was a nice continuation from the previous work i did on the 25 lines of code contest. I’m gonna thinker a little bit more with the code and post more advanced experiments later on.

Playing with constraints in AS3 with the physics engine APE.

Patrick Matte — Fri, 05 Feb 2010 23:52:03 +0000

Playing with a physics engine is so much fun. Be careful not to drag the cube too fast or it might break out.

Click to open SWF

Download the source.

Some generative art for our “25 lines of code” contest at TBWA\Chiat\Day. I won at unanimity!

Patrick Matte — Sun, 26 Jul 2009 02:44:35 +0000

The rules of the contest were simple, create the most awesome program in just 25 lines of code. The timing was pefect for me as i wasn’t too busy for the last two days before the deadline and i was able to work on a few entries.

Click to open SWF

This one nailed it. I’m still surprised how many things i was able to cram into 25 lines! I have a 3D engine in there that converts 3D points to 2D points in 3 lines of code! And the routine also changes the color of the lines, records arrays of points to create the trails that gets thinner as time increases. Also notice the velocity on each point that make the trail move along.

Download source fla

I’m definitely happy with the first one but there’s another entry that i did which i also like.

Click to open SWF

For that one I got the inspiration from a demo i saw last week, and i thought to myself, “hey i can do this in 25 lines of code” so i did it. Some images it creates look a lot like those spacy tracy desktop backgrounds of Windows Vista and OSX.

Download source fla

My posts at Blitz Labs

Patrick Matte — Tue, 23 Jun 2009 22:12:26 +0000

Just wanted to quickly make a link to a few articles I wrote on the Blitz Labs over the two years and a half that I spent there. There’s a nice one on a Polar Coordinates filter for flash 9.

Click to open my posts at Blitz Labs

Simulating liquid with actionscript 3 and physics engine APE.

Patrick Matte — Tue, 16 Jun 2009 07:08:00 +0000

I created a quick prototype of a realtime liquid simulation for a project over at Chiat a couple weeks ago. The result might not be very realistic, a little cartoony you might say, but it’s definitely fun to play with (any program that features real-time physics just fascinates me). I made a quick demo to show you how it’s done.

Click to open SWF

I quickly looked at some reviews to make my choice on the physics engine i would use and APE seemed to be the simplest one. It was pretty simple indeed as i was able to put up my original demo in a single day. It was a little tricky to create the physics bottle that would hold the particles. The easiest way i found was to put movieclips on stage in the shape of the bottle and loop through each pieces and create a corresponding APE RectangleParticule. The tricky part is that when you rotate a movieclip in flash, the height and width of the clip changes, so i had to nest a movieclip within to be able to read the correct height and width of the particle.

Download the source