Making Of

The creation of our new Sevenedge website took us a lot of blood, sweat, tears and some heavy designing and carefully considered coding. That's why we like to provide a behind the scenes insight of our award winning Sevenedge Interactive Media website. Below you can see some highlights from the creation process in detail. Hopefully this will inspire or help you along your own webprojects. Enjoy...

Draft concept design tests

During the drafting period we tried to embrace the feeling of strange worlds colliding on the edge of creativity. We aimed to create a unique webexpercience for our visitors. It took us a lot of rough designs to find the right mood and a perfect balance between black and white.

Liquid Simulations

We've used some liquid simulations throughout several parts of the website. These liquid simulations are created and animated in 3D. With these blobs we gave the online experience an extra edgy twitch.

Shoot em up critters

On the Services-page we've developed a simple shoot em up. Point your cursor at the critters, aim and shoot as many as you can. It's as simple as that. The critters are created and animated in 3D.

AS Prototypes

Glass Transition

The glass transition exists of 3 parts:

• 1. The 3D mouse, which causes the glass to break
• 2. The glass shard objects, which simulate the burst animation
• 3. The content, which is masked

How it works:
When the transition starts, 2 bitmapdata objects are created. One which holds a snapshot of the start of the transition (what you are looking at now) and one which holds a snapshot of the next content (which you will be looking at when the transition ends). The next content is masked and placed on stage. This mask is empty, so you can’t see the next content yet.

The first snapshot is now an interactive glass shard object on the stage (a Flash Shape), which can be broken when clicked on. When it is clicked, it will remove itself from the stage and create more glass shards (Flash Shapes). To create a glass shard, we used some mathematical vector logic which allows us to create smaller pieces (glass shards) when clicked on. The smaller pieces are then placed on the stage with a tweened 3D perspective effect (using the Flash 10 3D render engine), to simulate the burst effect.

While this is happening, the framework is preparing the next content to be loaded and placed on stage. The glass shards follow the progress of this preparation (preloading). When this preparation is 100% done, all glass shards move back to their original position. This is the original position from where the burst for the particular piece commenced (where you clicked the mouse). When a glass shard enters its original position again, it is removed from stage and drawn into a bigger shape which is used to mask the next content.

So when the transition starts, the new content is placed on stage with an empty mask on it, but after a while the mask gets filled with the shapes of glass shards. In the end the mask will be fully filled and the new content will be fully visible.

Jellyfish

The Sevenedge 3.0 Contact page contains animated jellyfishes. These jellyfishes are rendered real-time. The rendering is simple. A jellyfish is basically a shape object with lines drawn onto it. The lines are drawn (curveTo method) with some simple mathematical sine and cosine formulas which make the jellyfish ‘swim’.

You can see the original lines of this ‘jellyfish shapes’ at the left side of the demo. To make it look like a smooth jellyfish, we applied some simple colortransform and blur filters to the bitmapdata object. The result of this can be seen on the right side of the demo.

Fishes & reflecting planes

The Sevenedge 3.0 Contact page also contains a Papervision3D scene for rendering the fishes and floating planes.

The fishes are 2 Papervision3D Plane Primitives lying on each other. We altered the geometry vertices of the planes so the fish won’t look flat. When moving the mouse, you are actually moving a virtual object in 3D space, which the 3D fishes will swim to. The tail of the fishes moves while swimming, this is also done by altering the fish’s plane vertices.

The plane at the back is also a Papervision3D Plane with a EnvMapMaterial attached to it. This EnvMapMaterial does all the reflection magic. We only need to give this material a bitmapdata object, in which we draw the background and the fishes. You can see the bitmapdata output at the top left.