Me and the guys from Bureau BlauwGeel have been working together on their new website: http://www.bureaublauwgeel.nl
The CMS-based website uses video files to create a dynamic, living and breathing background.
Each menu item has a background image that slowly zooms in to keep that dynamic feel.
Although the background and interface always adjust to the size of [...]
One of my hobby projects is building a tourist map of Tokyo. I started out with displaying a RSS feed from Google Maps on my own hand-drawn map of Tokyo. Even though the Google Maps API now allows custom coloring of your map, I still think google’s maps are overpopulated with information and are visually not very inspiring.
Having the system in place for placing geo data on my own map, I realized it should be just as easy to display twitter messages, as long as they include geo data:
Retrieving twitter messages with geo data from http://search.twitter.com/ starts with including a geo location in your search parameters (in this case ‘tokyo’). Still, many twitter messages include geo data that only includes a town and no latitude/longitude information.
For this map, I retrieve 60 messages that were twittered in Tokyo, and then filter out all the messages that actually have a latitude/longitude. When using a map of an entire country you’d get a lot more twitter results so that’s going to be the next step in this project!
Check out the beta version here:
Another new exciting project I’m working on is the newspaper editor. This project is built for dutch newspapers (starting with the Leeuwarder Courant) who want to make their archived frontpages available and customizable.
The idea is that you select the newspaper frontpage of your favourite date (say your birthdate). You will be presented with the real vintage frontpage. You can then choose to order a print straight away, but it’s more fun to choose the second option: customize.
Start by placing a box on top of the newspaper image, and then choose to fill it with your own photo or text. After uploading your image, you can crop it and see the cropping result in realtime in your newspaper.
Selecting an image.
Cropping an image.
You can also create text boxes and save them to your newspaper. As with the image, you see your text editing work appear in realtime on your newspaper frontpage.
The last step is ordering your customized frontpage and hanging it above your couch!
Of course these few images don’t really do justice to the real project, you can try out the application for yourself at http://lc.eigenvoorpagina.nl
When searching around the web for a Caroussel (rotating images) I found that most existing caroussel components use linear animation and mostly aren’t clickable. To make a more versatile class I copied the basic rotation functions from an existing caroussel, I added the greensock tweening class and made the items clickable.
There’s still a small bug where the last item in the list rotates in the opposite direction! You can view the example here, and download the actionscript class here.
The 1st of january was a special day for Twitterfountain users since the new version of Twitterfountain went live.
The update incorporates:
A list of twitter messages on a slideshow background.
Single twitter message on a photostack background.
A popular effect these days is using a strong ‘depth of field’ effect in film and photography. The subject of the image is sharp, while the rest of the image is out of focus. I wondered if this effect could be simulated in actionscript without resorting to a 3D package like Away3D.
In this experiment I use a gradient alpha mask which masks a blurred version of the loaded image. It’s very simple but I guess it works!
Depth of field flash
The plant is out of focus
Depth of Field flash 2
The plant is in focus… sort of…
A displacement map is an age-old filter that’s been around since the first versions of Photoshop. When you use a displacement map in photoshop, you take a single image and project it onto another image. The black & white values of the first image are then used to “displace” the pixels in the second image.
The cool thing about flash is that you can apply these displacement maps not only on images, but on anything you have on the stage. This includes animations but also movies that can be manipulated by the user.
In this case I wanted to make editable text on a t-shirt look more like it’s really printed on the shirt.
View the working SWF example here!
The most amazing part (at least to me) is that this whole effect only takes three lines of code to implement:
var myImage = new MapImage(480,480);
var myDisplacement = new DisplacementMapFilter(myImage,new Point(0,0),1,2,30,30);
shirt_mc.filters=[myDisplacement];
To allow the user to save their creation as a JPG image, I used adobe’s JPEG encoder. I got this working very quickly thanks to this explanation by Henry Jones.
