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 [...]
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 the browser window, the content is allowed to run off screen. The flash scrollbar allows viewing all content.
By using a custom URL for every project and page in the flash site, the site becomes searchable for Google and allows direct linking to a specific project, for example: http://www.bureaublauwgeel.nl/#/werk/website-en-shop-dutchspirit
Tracking pageviews from flash allows the use of Google Analytics.
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
The folks at Bureau Blauwgeel have put together a very cool trailer of the Copenhagen Live Video project that we did together! Watch it here:
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…
Last week the Copenhagen video player has gone live. The player shows live video reports filmed by the youth delegation of VROM (Dutch ministry). The player shows live video streams being broadcast from mobile phone video cameras. Reporters don’t have to upload anything at all, they just switch on their phone camera and the video appears on the website. Older video reports get added to the archives automatically.
Through the website www.volgkopenhagenlive.nl numerous reports have been streamed, giving visitors a personal look behind the scenes of the conference.
Apart from the Live video, the flash player includes a youtube channel viewer. This viewer analyses a youtube channel by converting a youtube RSS feed. Then, using the new youtube AS3 API, the player is able to load videos from a specific youtube user.
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.
