I like to blog

I’m joining ACHTUNG!

admin — Wed, 11 Aug 2010 09:27:17 +0000

I’m proud to announce that I will be joining the team at ACHTUNG! in Amsterdam.

I have loved working freelance the past 1.5 years, but now it was time for something new and better.

ACHTUNG! is one of the absolute best digital agencies around, and I’m really excited about becoming a part of their amazing team.

Check out their work here
And follow them here

I will start fulltime at the end of august, which also means that I don’t accept new freelance projects.

Animating advanced outlines

admin — Wed, 09 Jun 2010 10:27:34 +0000

This is a small class I recently created for a project. Basically it makes you tween the “percents drawed” of an outline shape. 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/draw.

See an example here

Get the source class and example here

Tip: click the stage of the example and see how a shape (only the first shape in this example) can change the positions runtime.

You will of course need TweenLite to use my example.

Drawing in 3d

admin — Fri, 14 May 2010 15:48:11 +0000

Most Flash developers know of Five3D and Vectorvision – the 3d “engines” based on vector graphics. They gained a lot of popularity and for good reason. I have used them frequently, and I will continue using them on specific projects, they are awesome!
I just developed a small demo using my own 3d vector drawing tool – not nearly as large and useful as the others, but for small animations and really simple stuff, it’s a quick way to draw in 3d without using other libraries and without Flash converting everything to bitmaps. And it just feels nice to know what your code actually does.
To be honest, I tried using Matrix3D but ended up with a simple solution of using “local3DToGlobal” – which works great, but I suspect it being a bit slow – if anyone has insight on this please post a comment.

Check out this small demo with three objects inside.

In this demo I tried building a house – but as you can see there is no z sorting!

This demo has vector drawn text – using the same font classes as Fived3D/Vectorvision/Papervision

Shading can be applied easily, which is pretty cool for simple shapes.
It’s made really simple so it’s easy to use (and low in filesize of course), I’ll post the code soon when I get it cleaned up a bit.

VplusA website launched

admin — Wed, 12 May 2010 16:13:49 +0000

Today we finally launched the new website for the talented guys Nicolai Villads and Peter Ammentorp – aka. VplusA. Their site showcases their fantastic work, go have a look for yourself.

- Design by VplusA. Flash animations/development by me!

Take a look here

Beside that I have also been involved in the album cover design for Danish band Dreamville. I did art direction, Nicoline Graversen did the layout and illustrations and Morten Germund took the amazing photos.
Take a look here

3D interactive cube

admin — Tue, 11 May 2010 09:22:20 +0000

Some time ago I promised to share the source code behind some of the Kenneth Elgaard website. I have had some requests since then, and I’m sorry it took so long, but now I have the code ready!
The advantage in this solution (in my opinion) is the ability to utilize Flash Player 10 native 3d, instead of standard 3d engines. Not that Aways3D, Papervision etc. aren’t great, but for really simple stuff (like this), it’s nice to be in control of all the code, and of course not add extra kb. to the filesize. Another benefit is the ability to resize these 3d objects runtime, in this example the cube is always the same width/height as the entire stage – just like the website I did for Kenneth Elgaard. (Please notice though that the cube is pushed back on the z axis – that’s why it doesn’t fill out the screen!)
This example also uses simple shading on the sides.

Check this example out and try moving the cube around and scaling the browser window.
Download source here

Perfect gradients in Flash

admin — Wed, 28 Apr 2010 10:25:49 +0000

As most of you Flash developers most likely have experienced, Flash (and Photoshop for that matter) doesn’t create perfectly smoothed gradients!
The common trick is to apply a little noise in Photoshop (or similar) and save as an image.
The exact same idea was behind this “PerfectGradient” class. I simply wanted to be able to create gradient backgrounds with less banding and without loading a jpg/png.
Obviously this is not alway the best solution – sometimes you don’t want noise in the image and sometimes there is no banding problems with your colors – but for some cases, especially large background gradients, this could be very useful.

This class only supports rectangle gradients with two colors – either in linear or radial gradient style , but feel free to extend it. The syntax is easy, below is an example:

private var _linearBrightA:PerfectGradient = new PerfectGradient(500, 1000, 0xBBBBBB, 0xCCCCCC, Math.PI * .5, "linear", true, false, "lighten");

The parameters in the constructor are: width, height, color 1, color 2, gradient rotation, gradient style, use noise, use blur, blendmode for the noise and blur overlay.

Take a look here to see some different examples (click to switch between different examples). Every example has 3 PerfectGradients – one with only noise, one with both noise and blur, and one withoout any (clean gradient).

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

Download the example and class here

Update

admin — Tue, 06 Apr 2010 08:59:25 +0000

Hi, here’s just a brief update on what I have been up to lately and what’s to come soon.

Right now I’m working on a lawyer website for the Oklahoma based agency Quantus. It’s turning out great. I’m also finishing up a huge project for Human Design – a completely new complex website, of course with advanced deeplinking etc. This project is the latest utilizing my new framework.

I just finished developing and animating a banner for Zupa, for the Rock Cruise website. The challenge was animating the water in a realistic way, I think it turned out pretty good! I also just finished a new website for the talented guys at VplusA – it’s not online yet, but it’s coming soon.

A few weeks ago I also finished up designing an album cover for Dreamville together with Nicoline Graversen. We will be posting some pictures of the cover soon on her portfolio.

I also have the pleasure of being featured in a new book from Mao Mao Publications coming out in november. Thanks to Bjørn Djupvik for shooting some great photos of me and my office space for the book.

I was also very proud to see that I’m listed at Innovative Interactivity as one of 25 multimedia professionals to watch – thanks for that.

I’m also doing/finishing up projects for Designit, Infogalleri, Vidensbrønd, Wine and Surf, Kaare Viemose, What? and a few more – so it seems I have enough exciting work for some time to come.

That’s about it for now. I hope I can add some new posts to the blog soon – and also some of the source code I promised long ago.

What’s next?

admin — Sun, 07 Feb 2010 13:16:56 +0000

2010 is well on the way. I’m busy as always (and I’m very grateful for that), but I have had some time thinking about the future of interactive webdesign. I don’t want to comment on the whole Adobe (Flash) vs. Apple (Ipad) battle, I just wish they will work things out ’cause I’m a huge fan of both!

Below are a few things I personally think will be the “next big thing” or at least something we will start seing a whole lot more of in 2010.

1: Interactive video.
Recently I saw this amazing 360 degress interactive video. I must say I was amazed, so if you haven’t seen this yet, here’s your chance: http://www.immersivemedia.com/haiti/
Another cool use of this (made with Flash) is this interactive music video made by Barcinski and JeanJean
And another cool website with interactive videos: Wrangler Blue Bell.

2. Multi touch websites and applications.
I have already had the pleasure of developing Flash applications for muti touch screens (with Infogalleri). This is something that will soon be much easier when Adobe releases the CS5 collection. Multi touch events are now handled inside Flash just like mouse events etc. so I think we will be seing a lot of portfolios and creative websites using this as the main navigation – imagine for instance a photographer’s portfolio in which each image can be enlarged with two fingers (just like the Iphone). See a demo made by Lee Brimelow here
Obviously this is only possible if the user has a touch screen, Appe Magic Mouse or something similar.

3. Iphone and Ipad applications.
The release of CS5 will also boost the production of Iphone apps enormously. I think we will see a lot more Flash designers and developers putting time and effort into this relatively new media.

4. Augmented reality
It’s been around for a while, but I’m sure we will continue to see a lot more of this when it becomes more “mainstream”. Personally I’m no huge fan, because often it requires the users/visitors to print something (or buy a catalogue), and I still know of people without webcams! But hey, it’s fun so I wouldn’t mind doing a project with this.
A great example of augmented reality can be seen here.

5. Social media
Again this is nothing new, but for the last year I haven’t had one single project meeting without someone saying “and we want Twitter too…”!!! Many companies still don’t know what this whole concept is about and how they can (or should) use it. I’m no wizz at this at all, but I think the use of Twitter and Facebook is only the beginning of social media integration with classic website content. Surely we will also start seing a lot more Facobook applications, just like the ones here.

6. HTML5.
Someone has named this the “Flash killer” which obviously is a bit of an exaggeration. But HTML5 is another great tool, which probably, within a few years, will make the internet an even more interesting and “rich” place to be. Read more about this here.

7. Unity 3D.
I while ago I thought 3D in Flash was the coolest thing in the whole world. Then I discovered Unity…
I’m sure we will be seing a lot more games made with Unity in the near future. 3D in Flash is not dead at all, but for games I think Unity really is taking over the market.

8. Physics and inverse kinematics.
CS5 will add even more tools to this area of game and web development. So far Physics Engines have been pretty hard to use and understand, which is also one of the reasons why we haven’t seen a lot of websites using this. Box2d and JigLib have been around for a while, but they are difficult to use unless you are an advanced developer (correct me if I’m wrong).

Piecharts and circles

admin — Thu, 04 Feb 2010 14:06:59 +0000

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.

Here are three examples:

Using a circle mask for image transitions
Multiple piechart animations simultaneously
Advanced version with a gradient applied

The class looks like this:

public class circle extends Sprite

        {

                private var _radius:Number;

                private var _startAngle:Number;

                private var _endAngle:Number;

                private var _radian:Number = Math.PI / 180;

                

                public function circle(_f:Number, _l:Number, _r:Number)

                {

                        _startAngle = _f;

                        _endAngle = _l;

                        _radius = _r;

                        draw();

                }

                

                public function set endAngle(_a:Number):void

                {

                        _endAngle = _a;

                        draw();

                }

                

                public function get endAngle():Number

                {

                        return _endAngle;

                }

                

                private function draw() : void

                {

                        graphics.clear();

                        graphics.beginFill(0x000000);

                        var _angle:int = _startAngle;

                        while(_angle < _endAngle + 1){

                                graphics.lineTo(_radius * Math.cos(_angle * _radian), _radius * Math.sin(_angle * _radian));

                                _angle++;

                        }

                        graphics.endFill();

                 }

        }

And this is how it can be used:

var _c:circle = new circle(0, 0, 200); //start, end, radius

addChild(_c);

                        

//Tween the end angle value

TweenLite.to(_c, 2, {endAngle:360, ease:Cubic.easeInOut});

You need Tweenlite to do the example above!

Distortion Engine version 1

admin — Fri, 22 Jan 2010 14:51:57 +0000

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 today 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 these examples 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, below are examples of each:

Cubic noise
Distort
Noise
Perlin noise
RGB distort (split effect)

Click here to download the files with a small example

The basic syntax is as simple as this:

DistortEngine.init("rgbDistort", _distortionTarget, {horizontal:true, vertical:true, rotation:true, transparent:true});



TweenMax.to(this, 1, {_power:0, ease:Quad.easeInOut, bezierThrough:[{_power:4}], onUpdate:distort, onComplete:removeDistortion});



private function removeDistortion():void

{

DistortEngine.remove(_distortionTarget);

}



private function distort():void

{

DistortEngine.distort(_distortionTarget, _power);

}

I don’t really have time (or motivation) for writing a documentation, but it should be really easy for an actionscript developer to use this and also adjust some specific properties for the filters/distortions.

NB: The example uses TweenMax, download it here!