June 9, 2010
Animating advanced outlines

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.





May 14, 2010
Drawing in 3d

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.





May 12, 2010
VplusA website launched


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





May 11, 2010
3D interactive cube


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





April 28, 2010
Perfect gradients in Flash

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





April 6, 2010
Update

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.





February 7, 2010
What’s next?

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).





February 4, 2010
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.

Here are three examples:

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





January 22, 2010
Distortion Engine version 1

distort
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.





January 2, 2010
Small bending experiment

I just want to share this little experiment with you. I have been looking for an easy way to use as3dmod to bend materials with a “lighter” 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 (wish for) a lighter version easy to use in normal 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 example swf below is about 12 kb including the TweenLite engine, and it compiles a LOT faster than my projects involving Papervision and Away3D.

Source will be up soon – it’s not rocket science, but maybe you can use it for something! The example is build by 32 segments – which is a lot more than I would usually do with 3d engines, but here it seems to work fine.

I still recommend as3dmod and the real 3d engines for serious 3d Flash work – they perform really well and offers a lot of posibilities.

Take a look here