Nørreport is Denmark's only true underground station and the doorstep to the city.
Through almost 4 years, photographer Klaus Holsting documented Copenhagen's unnoticed inferno, day and night, summer and winter, before the city's main transport hub now changes forever.
The pictures can be experienced in the book Nørreport Station - which you can get a taste of, in this mobile/tablet application.

The application is produced with Bombay Flying Club, who directed the essay while I did the design and development.

The application displays some of Klaus Holstings fantastic pictures in a minimalistic and intuitive gallery, but also adds a little extra to the experience, by featuring an essay written and read by Søren Ulrik Thomsen. Go check it out for yourself at Norreport Station.

Within two weeks the iOS application has reached number 1 in the "Photo & Video" category and a top 10 position in the overall free iPad apps.

The application is created for both Android and iOS (both small, medium and large devices). Developed with Adobe AIR.

_Norreport Station

I recently promised to share my experience with Adobe Air for mobile and tablet development. Lately I have been doing a lot of this (actually this is my main work area at the moment) and I have gone from interested to confused to frustrated to impressed to "wow"... And my conclusion is that this approach to application development, is very interesting and powerful. We will be seing a lot of great applications and games built with Air in the near future.
The Air approach is very useful in terms of deploying easily to multiple platforms (such as Android, iOs, normal web etc.) and doing fast development compared to native languages. However you don't have full access to everything (phone vibrator, native UI controls etc.) and you must put in a lot of effort in optimizing your code and graphics. It is all about using the best tool for the job, as Lee Brimelow wisely puts it :-)

Tips for Air development:
- Run GPU mode. (I have found very few cases in which CPU mode was better).
- When running GPU mode, consider that everything should be bitmaps and don't try using filters runtime - they won't render!
- Keep you display list flat. Meaning avoid nesting movieclips inside movieclips inside movieclips...
- Consider using different stylesheet for text, this can come in handy when targetting old and new iPhones in which the resolution goes from 320x480 to 640x960.
- After loading assets, make them render instantly (check this out).
- Set StageQuality to "low".
- Test on your device regularly (Android is much faster for testing).
- Clean up (like any good developer always does) with removeEventListener, removeChild, mc = null etc.
- Avoid bubbling events by using mouseChildren, mouseEnabled and event.stopPropagation()
- Remember you are developing for touch interfaces. Button hitareas should be pretty big.
- Have some fun! Working on touch devices opens up a world of new oppertunities, go explore them and don't think "website"" or "mouse" limitations anymore.

Find more tips by following the links in the right side.

One of the really cool things I have found, which is not mentioned often, is the ability to use StageWebView to display html content in your Air application. I am using this for a new application, in which I am displaying a simple text page, which needs to scroll and be able to zoom in/out - the StageWebView is perfect for this, four lines of code and I have everything I need. And why don't I build the entire application with html then? Because there are a lot of different interactive stuff (such as multitouch gestures) in there, which would be much too complicated (and time consuming) to do with html/javascript!

I hope this helps and/or motivates you to dive into Air development. I have personally been very surprised to see how well this performs and how much fun it is.

_

I have been developing for touch- and multitouch screens for quite some time, and during the different projects I have collected and created many different utilites and small tricks.
I finally got around to cleaning up some of the code. The result is these easy-to-use-and-reuse "MT" and "MTkin" classes.

In details, this is what they do:
- The "MT" and "MTkin" class are extended Sprites, with multitouch enabled functionality. They can be moved, rotated and scaled. You can choose to disable rotation, enable smooth scaling (using TweenNano from Greensock) and you can set min/max scaling limits, so your objects don't get too big or small.
- You can also listen for "tap" events, which is the same as a traditional mouse click, however just listening for the MouseEvent.CLICK or the TouchEvent.TOUCH_TAP doesn't work like it should. The CLICK doesn't support more than one object being interacted with, but for a large multitouch and multi-user table, this isn't sufficient, all objects should be able to receive "tap" events regardless of the number of active touchpoints (or mouse cursors). And the TOUCH_TAP has a "bug" (in my opinion), because it dispatches the event even if an object has been moved/scaled/rotated and even if you hold down your finger/mouse for a long time - which obviously triggers many errors in your application.
- The "MTkin" also enables "throwing" the object - therefore the kinetic name! A user can do all the things above, but also throw the object in a direction. By changing an object's "weight" property, you can control how quickly it decreases its speed. Pretty nice!

All the matrix calculations are based on the great code written by Tim Kukulski (see more here) - though changed a little (these classes don't support disabling rotation, dispatching "tap" events, kinetics etc.).

The demo!
The demo above shows two different tests, running on both an iPad and the desktop. They have the exact same codebase. The iPad version is of course compiled for Adobe Air. The performance of this demo was outstanding on both an old iPhone, iPad 2 and my Android device (HTC Desire HD) - all three ran 60fps.
- Demo 1 shows a single object on the stage. The buttons in the right side toggles various parameters, such as rotation, smooth scaling and kinetics.
- Demo 2 shows multiple "MTkin" objects. These can be manipulated simultaneously.

Some time ago I realized that I needed an easy way to test touchevents on the desktop. Listening for gestures only allows for a maximum of two touchpoints, and testing on a Mac didn't allow me to use a real multi-touch display. So I created a simple class to dispatch these events (look for the green dots in the demo above, in the desktop version). You can simulate multiple touch points by holding down the "cmd" button.
This is also included in the source.

These multitouch and kinetic features were heavily used in my work with the Redia application for the National Gallery of Denmark. Ensuring that multiple users could interact with the table simultaneously. I also have a simple kinetic container (used for text etc.) which I will try to clean up as well and share with you.

How about a Javascript version?
Flash/Air isn't always the right solution, so of course much of this can also be achieved with javascript. The performance is pretty nice, even when running in mobile Safari.
Here's a test I did some time ago, it's only the kinetic features - not multitouch - so they don't scale or rotate, and you can only interact with one at a time. And here's an extended version, in which the objects bounce against each other (which is just my attempt to write a quick physics demo with javascript!).
If I have the time and need soon, I might add the multitouch functionality to this as well.
By the way, I also did this example with HTML5 drawing on the canvas (instead of moving objects with javascript) - didn't perform well at all...

Download the source and demo here at Google code. You also need the TweenNano classes, get them here and support the project here. The tweening library is only needed for the "smooth scaling", which you can easily remove from the classes if you feel like it!

The demo runs perfectly on the iPad in GPU mode. I have learned a lot recently about optimizing and building for mobiles and tablets, I will share some of this (and some projects) soon, I promise :-)

_

This year have been fantastic! More busy than ever on more great projects than ever. A big thank you to all the great people, agencies and clients I have had the pleasure of working with.
A few of the projects I have been working on recently are listed below, please check them out!

- Robert Kranenborg website
I developed this Flash site for Dutch agency Fox on the run. The site features the Dutch chef Robert Kranenborg in 360° pictures, allowing the user the give him a spin. All content is feeded from Twitter, Youtube, Moby (for images) and a custom CMS (design, concept and CMS by Fox on the run).

- Alter Ego microsite
Trojan Gorillas designed this Humanic campaign site, revealing what your "Alter Ego" shoe and celebrity is.
I developed and animated the microsite.

- Hop and Learn application
This is my second game for the Wisdom Well platform. The game is camera-tracked and projected on a floor, just like the Memory Game I produced earlier this year. The game is developed for Programdatateket in Denmark.

- And a lot more...
I have also built several e-learning applications, a few microsites, and a few mobile applications (not yet available in the app store) and I am working on two iPad applications! And be sure to check out the new video I just added to the National Gallery of Denmark multitouch case.

Have a merry xmas and see you in the new year.

_Robert Kranenborg

Some time ago I created a small class for animating custom shapes(outlines). Since then I realized that adding support for curves are actually not that hard. So, that's just what I did!

The class is still very easy to use, but gives you much more flexibility.
- The stroke (thickness, color etc.) is defined as a GraphicsStroke object, giving you complete control (and stuff like gradient line fills).
- Old code has been rewritten and optimized.
- YOU CAN NOW ANIMATE CURVES... this is really cool and suddenly makes this class work for much more than just an animated outline. For instance you can write small words with a pen, animate outlined logos and much more.

Check the demo above - click it to switch between different examples.

The cool thing is still that you don't have to be a coding genius, you just tween the percentage of the entire shape to render it!
Check out the old class for more explanation, or just go ahead and download the new class and some different examples (they are easy to understand). I also included a small tool to easily draw shapes and get the code for them. Have fun!

Download source here

_

I am happy to announce that today the mobile version of my website is "Mobile of the Day" at The Favourite Website Award.

Go check it out on your smartphone or tablet...

The interaction is really intuitive and simple - just swipe sideways to see my news and cases, and swipe vertical to see contact details and info.

"FWA is an industry recognised award program, established in 2000, showcasing projects which use cutting edge technology, together with inspirational ideas, that lead the way for future generations."

The site is built from scratch with HTML5 and javascript - using jQuery for the animations.

I am also proud and thankful to have been featured with my new website at Designlicks, Designcharts (#1), Spyline, Irie, Another Bookmark and more.

_The FWA

For the new Nordic Art exhibition at National Gallery of Denmark, Redia was asked to develop a 50 inch interactive table. I worked for them as lead Flash developer and animater on the entire user interface. The table is a horizontal multi-touch display supporting (almost) unlimited number of touch points.

The application is dynamic and displays some of the art from the exhibition along with videos, artist information and much more. Users can interact with the content from both sides of the table, and tracking cameras make sure the content is always near the users.

The application also has many different overviews of the art pieces. These are ordered by various parameters and shown in different grids.

The entire application is built on top of Redia's custom framework.
All content on the table can be rotated, zoomed and swiped(thrown) around as the user pleases. The interaction is incredibly intuitive and the application has a lot of intelligence built in (in terms of registering user positions, pan sound from videos, drag content from an opposite users thumbnail stack etc.)
Be sure to check Redia's website for more info and many other interesting projects. They also have a brief description of the installation here.

_National Gallery of Denmark

Redia asked me to develop and animate an application for the Danish Electronic Research Library (DEFF), showing realtime search queries from their libraries.

The application is basically a bunch of DNA strings visualizing various data about the search queries. Each circle in the DNA string represents a piece of information visualized by the radius of the circle. The data includes year, materials, common categories, searches per day etc.

The application is interactive, allowing users to explore the data, but it can also stand alone. When the application has been running without user input for a significant amount of time, small animations appear in order to attract attention and add some "life".

As most of Redia's solutions this one is also very flexible in terms of styling. The libraries can add as many skins to the application as they wish. Each skin defines colors for all elements in the application and the application also supports videos (new StageVideo support) and images as backgrounds.

Visit one of the DEFF libraries to see it in action, or check out the online demo (change skin with your keys "1", "2", "3" etc.).

_Read more about DEFF

Wisdom Well is an interactive floor for social and collectice learning through physical play and movement. The floor is basically a (very) big touch screen, tracking the users position.

Interactive Spaces asked me to design and develop the frontend of a new game for the floor. The game is a classic memory game with up to 4 teams and 36 bricks.

The gameplay is simple: on each turn a clock counts down a few seconds. Then the selected bricks (bricks with people standing on them) turn around and display their content. The content is defined backend by the school teacher, the pupils or whoever has created the game. The bricks can handle videos, images, sounds and text. When all matches are found, the game is over and a winner is displayed.

On a technical note, I recommend visiting www.vidensbroend.dk for more details about the Wisdom Well.

I designed the game and developed/animated the Flash frontend.
The game is currently running on Møllevangskolen in Aarhus, Denmark.

_Read more about the Wisdom Well

The internationally renowned photographer Linda Suhr commisioned Henrik Kastenskov and me to create a website promoting her new book "A Passion for Wine & Surf".
The book is about South African surfers, winemakers, cooks and their lifestyle. It includes recipes, personal stories and beautiful photography.

Henrik created 3 inspirational videos for the themes "The Food", "The Wine" and "The People" and asked me to design and develop the website surrounding them.

The website is a colorful invitation, and features many of Linda's fantastic photos. Users can also read about the author, download wallpapers and of course purchase the book.

The website has a dynamic xml backend and a Paypal connection for selling the book.
The website was awarded by Irie and Designlicks among more.

Mobile Version
I always advise my clients to have a small (but good looking) mobile optimized version of their website.
The mobile version of this website was awarded "Mobile of the Day" by the The Favourite Website Award.

_Wine and Surf

Danish photographer Kaare Viemose asked me to design a simplistic and pixel-perfect website for his online portfolio. Kaare shoots amazing pictures and he wanted them to be presented in a clean and yet interesting way.

The different galleries are easy to navigate, and include slideshow functionality, keyboard navigation, easy overviews and much more. The structure of the galleries varies depending on the content - enabling Kaare to add series as wells as single pictures.

The entire website is dynamic (xml backend) and extremely flexible, allowing Kaare to add and remove entire sections of the site, as well as adding galleries etc. And of course every picture has a unique link.

_Kaare Viemose

To promote the new Volkswagen Passat, Amsterdam based agency Achtung! concepted and designed this microsite. The Passat is the perfect home office for small and medium companies as well as salesmen. The car offers many different assists, which in the concept were translated into office assistants.

The website is basically an interactive brochure displaying the Passat and its different assists. Each chapter has different interactive elements, enabling the users to explore the car in their own way. For instance take a look at the engines chapter, in which users can rotate the small cardboard wheels in the side of the pages, to see different engines under the hood.

The entire brochure was developed to be as "real" as possible. The aim was to make it intuitive to interact with, and make it seem like a real printed brochure with interactive elements - like you would find in various children books.

I developed the entire Flash website for Achtung!. The page folding and 3D effects were created with Away3D and as3dmod, and the website has a dynamic xml backend.

_De Nieuwe Passat (requires Flash)

Glenn Kristensen, the owner of design company Human Design, asked me to create his new company website. Human Design develops concepts and designs for stores, branding, houses and interior. The company profile and logo is simplistic but organic. I tried emphasizing those same keywords on the website.

The Human Design logo, with floating molecules, were used as key element and as the main menu. In each subpage, the website is created within a single molecule.

The website is extremely flexible and complex - but the trick was to make it seem simple! Each design area has various information and project lists, and each project has pictures, videos, google maps, descriptions etc.

The website supports as many languages as Human Design wishes to add, and of course the entire website is deeplink enabled, so Human Design can send direct links to specific pictures and specific projects.

Besides working on the organic animations and simplicity of the design, I also gave much attention to the project pages. Each gallery supports fullscreen viewing, simple keyboard navigation and much more.

The website also includes newsletter sign-up and a dynamic xml backend, making it easy to update the website.

_Human Design

Clothes for children are fun. Children are fun! Why not make the websites for children clothing fun as well?

This was my approach to Laniel's new website for their three brands Jeff (boys), Maybee (girls) and Monday (confirmation clothes for boys). The website content is pretty standard, however the design and interaction is not.

The concept is to take the users into the small world of Laniel's clothes. All pictures on the website are displayed on interactive cubes with real physics (gravity, friction etc.) applied to them. This makes for a playful interactive experience, making it more fun for the children, as well as their parents, to see the different collections.

The website has a dynamic xml backend. The physics are created with JigLib (for the website) and Box2D (for the puzzle), in combination with a simple 3D engine I built to control the cubes.
A big thank you goes out to Devin Reimer for helping me customize JigLib.

Puzzle Game
After a successful launch, Laniel asked me to expand the concept further into a small game. We decided to keep the same atmosphere and style. The game is a pseudo 3D puzzle with physics applied. To spice up the game (and make it more challenging) rocks and bombs fall down occasionally. Each game has three rounds and the goal is to solve the puzzles faster than anyone else.

Every three months the winners are announced, highscores are reset and the pictures are updated to the new collections.

_Laniel Website

This is a small actionscript class I recently created for a project. Basically it enables you tween the "percents drawed" of an outlined shape (no curves are supported yet). The shape is simply defined by an array of points, so you could also draw simple lines with this!

The cool thing is that you don't have to be a math genius or animate many lines separately, you just tween the percentage of the entire shape to render it!

This class is used on many of my new projects, including my own site.
Check the demo above - click it to switch between three different examples.

Download source here

_

The Dutch newspaper De Volkskrant commissioned Bombay Flying Club to create the first ever online version of the annual Observatorium edition. BFC asked me to design and develop the website, with them directing and editing the photography and video for the site.

The website is a beautiful online photo experience, combining photography, videos, inspiration, history, personal stories and a lot of data. All focussed around the theme "The First Time".

6 different stories are told through photography and video, and the last section of the website is a huge mosaic. Users can explore the unique and dynamic 5940 images mosaic, which represents the amount of images De Volkskrant handles each and every day!

_Observatorium (requires Flash)

Kenneth Elgaard is a young Danish artist. The design and concept for his website was created with his art and graphic style in mind. I wanted to create a small world with some of the same elements used in his art pieces. The style is fresh, simple and elegant - like his art.

The concept included different ways of interacting in each section of the website. All interaction was based around the idea of dragging with your mouse.

In the galleries you navigate through the paintings and art by dragging horizontally. By dragging vertically you can adjust the zoom (the size) of the images. In this easy and intuitive way, the user is given complete control over the experience.

In the Curriculum Vitae section of the website, the user can browse the exhibitions by rotating the content. And finally in the news section the interaction is horizontal dragging to see older news.

The website is created without any use of 3D frameworks/engines, only utilizing the Flash Player 10 native 3D options (for the interactive cube). This was a great performance trick, which also made scaling content easier and faster.

The website has a full Umbraco backend developed by Lemur. This enables Kenneth to update everything on the website.

The site was awarded "Site of the day" at The Favourite Website Award December 19 2009.

_Kenneth Elgaard (requires Flash)

I have made a lot of different microsites, campaign sites and "just" small websites. Most of them are for agencies looking for a Flash developer and animator, but some of them have also been designed by me.

Humanic Alter Ego
Trojan Gorillas designed this Humanic campaign site, revealing what your "Alter Ego" shoe and celebrity is.
I developed and animated the microsite.

Danfoss
Simpatico designed this microsite for Danfoss as a part of the counterfeit products campaign. The website compares real Danfoss products with fake copies. Users can also submit tips about fake copies to Danfoss.
I developed and animated the entire website.

Shine Jeans
Webdanmark asked me to help them create a fresh and cool site for the Shine Jeans brand. From the dialogue with Webdanmark I concepted, designed and developed a site that lets users explore the jeans in an inspiring and intuitive way.
The website was a huge succes and has improved the brand awareness and identity of Shine Jeans.

VplusA
The talented, (Cannes Lions) awarded and hyped Danish guys Nicolai and Peter asked me to develop their portfolio. They designed everything, so the job for me was simple. A few nice animations and a dynamic site, enabling VplusA to show off their awesome work.

Blend
Among the many fashion websites I have produced is Blend. Openminded asked me to create concepts and prototypes (Flash animations) of the galleries. These are dynamical and support easy zoom in/out and sideways scrolling.

ID Denim
An old but good client of mine is ID Denim. I have designed and developed their last two websites, including the current version. Their site uses a traditional coverflow for the gallery, but also includes jeans guides, shops/distribution and more.

I-Sing
Good friend and vocal coach Stinne, asked me to help her create an online presence for her new company I-sing. The website is simple, but easy to remember and interact with. The identity, photography, design and development were all produced by me.

My Getaway In Audio
This is an old project, but still one of the websites I get most notice from. It's a band website for Danish act My Getaway In Audio. The band doesn't exist anymore (but the website is still online).
The site is build around the idea of the band drawing content for the user to see and interact with. Oh yeah, and I was the drummer in the band!

_Danfoss Counterfeit Products (requires Flash)

Developing for touch and multi-touch displays is extremely interesting and inspiring for a guy like me. With different companies, but Redia (formerly Infogalleri) in particular, I have been involved in a lot of educational and informal software projects. Below are a few of these.

H2Interaction
I was part of the Redia team working on this very big project, promoting Green Energy.
An entire house, on the island of Lolland, was designed and presented with various interactive installations.
My role was Flash (actionscript) development of the multi-touch table game, the camera tracked floor and wall games, as well as a standard touchscreen application, displaying a guestbook for the visitors of the house. I also did some of the designs.

HotMakeup - Interactive makeup application. Enabling users to apply makeup to their own facial image.
Wilhelm Freddie (exhibition on National Gallery of Denmark) - an application to show various videos, images and text about the artist Wilhelm Freddie.
Hikuins Blodhævn - A small touchscreen application as part of the interactive AudioMove drama.

I have also developed Redia applications for Københavns Kommunes Biblioteker, Visit Aarhus, Aarhus Universitet, Moesgård Museum and more.

_H2Interaction video

Below are some of the many lab/experiment posts I posted on my old blog, I cleaned them up a bit and have found source code for them all. Hope you like it :-)

3D Interactive Cube
For really simple 3D in Flash, it's sometimes nice to use the native Flash Player 3D instead of a large engine (like Papervision or Away). This is an example of the 3D cube I developed for Kenneth Elgaard's website, which received a FWA. It's very lightweight and it's easy to adjust shading etc.

Try the demo, and try resizing your browser, to see the cube scaling to fit.
Download source here

Perfect gradients in Flash
As most of you Flash developers probably have experienced, Flash (and Photoshop for that matter) doesn't create perfectly smoothed gradients!
The common trick is to apply a little noise to the image. But for runtime drawn graphics, this is obviously not so easy. So I created this simples class, to create gradient rectangles with less banding and without loading an image.
Obviously this is not always the better solution - sometimes you don't want noise in the image and sometimes there is no banding problems with your colors - but in some cases (especially large background gradients) this could be very useful.

The class only supports rectangle gradients with 2 colors - either in linear or radial gradient style, but feel free to extend it as you please.
Take a look at the demo (click to switch between different examples).
Every example has 3 PerfectGradients - 1 with only noise, 1 with both noise and blur, and 1 without any (clean gradient).

The banding issues are hard to see on small screen resolutions.
Download source here

Piecharts and circles
I have seen a lot of Flash developers struggling with the issue of drawing and animating piecharts. I recently developed this simple class to take care of this, so I hope it gives someone a helping hand.
It's really simple, just use a radius, start-angle and an end-angle. By tweening the end-angle value, you get an animated piechart - simple but nice!
Download source here

Distortion Engine version 1
Some time ago I developed some distortion classes in order to achieve an rgb split effect and some random perlin noise. I found out that a small "engine" for those purposes would sometimes be very useful (at least to me), so now I finally had time to wrap it up.
To call it an engine is maybe a bit overstated, actually it's just a quick way to set up different types of distortion and change the amount of distortion applied.

In the demos I have used it with TweenMax, and I have tweened the distortion value from 0 to 4 and back to 0 (you can apply any amount you want, 4 is just what I used).

The engine has 5 different distortion types: Cubic noise, Distort, Noise, Perlin noise and RGB distort (split effect).
Download source here

Small bending experiment
I have been looking for an easy way to use as3dmod to bend materials without using a large 3d engine. But as3dmod works only with the more advanced engines like Away3D and Papervision (and it works very well with them).

However I sometimes need (and wish for) a lighter version, which is easy to use in small projects, banners etc. and this is the purpose of my own "bend" modifier. It's really simple and can't do half of what as3dmod is capable of (it's not build with triangles but simply rows of squares!), so there's no twisting etc. but only a simple bend is possible.

The good thing from my point of view, and the reason I created this, is that it uses the native 3d in Flash Player. My demo is below 12 kb in size (including the TweenLite engine!).
Download source here

Webcam stream dynamically RGB splitted
I was inspired by a cool RGB splitting effect on an image I saw recently, but I figured it would look cool to have it be even more interactive. This led me to develop a small experiment.

It's a simple webcam stream which rgb splits the bitmapdata in 3d space according to the mouse position – just move around your mouse cursor and see.
Nothing crazy actionscript wise – but it looks cool, right?
Download source here

CurveTo experiment
This is my simple elastic line example. It's pretty basic, the trick is to use the curveTo function and to add the bounce/elastic feel which is all about math (of course).
Download source here

_