1. Code
  2. Flash

Exclusive Freebie: The Piecemaker XML Gallery


It's April 1st! Whilst I wouldn't suggest you take everything on the tuts+ sites seriously today, this post is no joke. Today sees the beginning of monthly Exclusive Freebies - high quality files (website templates, galleries, media players, icon sets..) created exclusively for Activetuts+ readers!

To kick us off in style, here's the awesome Piecemaker gallery created by Björn from Modularweb. Besides the freebie, you'll find extensive documentation and a tut explaining the native 3D features of Flash CS4. Over to you, Björn..

Update: You can now grab the latest version: The Piecemaker 2 to take advantage of some brilliant additions, including the WordPress plugin!

The Piecemaker

The Piecemaker, a 3D Flash image rotator gallery in the purest sense of the word. It’s Open Source, so feel free to download it, use it in any project you like, learn from it, modify it and improve it if you can. We’d love to see what you do with it. Of course that’s no binding condition, but we’d love to showcase your work on the official Piecemaker website.

The Idea

The idea of the gallery was probably born when I first saw the CU3ER image rotator by the brilliant Stefan Kovac implemented in a website. I was particularly fascinated by the effect of slicing an image up into pieces, turning the elements and recreating a new image from them.

From that day on I was thinking about creating a gallery concentrating on such an effect and playing with it. With just a few variables this effect becomes extremely versatile. The Piecemaker uses the mighty Tweener engine from Caurina, which makes it support plenty of tween types for the transitions, such as Cubic, Bounce or Elastic.

There are loads of possibilities for customizing the gallery, so go ahead, download it and start playing!

Creating a Turning Cube

In this tutorial you'll learn how to create a turning cube with the native 3D engine of Flash CS4. A turning cube, such as this, is one of the core elements of the Piecemaker image rotator gallery.

This step-by-step tutorial will cover some of the basic issues when working with the native Flash 3D engine, focusing particularly on the difference between depth in terms of the z-axis and depth of the display list.

This is a preview of what we're aiming for within this quick tutorial:

Step 1: A Simple Cube

We start by creating a simple cube with no movement at all.

Step 2: Adding Movement

In this step we add a listener to create the turning movement. The following code is added below the code of the previous step:

Step 3: The Depth Issue

This is already looking pretty much the way we want it. However, the discrepancy between depth on the z-axis and depth in terms of the order of the display list has not been touched yet.

To visualize this issue we assign different colors to the different sides of the cube. To assign different colors we create a color array and assign colors based on this array within the for loop.

Step 4: Analyzing the Issue

What we find is that the sides keep their order on the display list. The red side, which is on top of the list, is never hidden by any other side, even if it's turned to the back of the cube. The blue side on the bottom of the display list is always hidden by the other sides, even when the turning movement brings it in front of all the others.

Obviously we are talking about two different kinds of depth here. The depth created by the native Flash 3D engine is more of a pseudo 3D effect. All the changes of the z property or the rotationX, rotationY, rotationZ, etc. only cause perspective deformation of the object, but they do not create a real 3D space.

After all, the application is still 2D. This forces us to control the display list manually to basically fake the 3D space. We need an automatism to check which side is in front at which point of the movement.

To literally divide the problem in two, we can create another element of the cube - a side, which is always in front of the others. In this case this would be the left side. Therefore we keep the cube code as it is and simply add the following code directly after the for loop.

Now we need to control only two sides at a time instead of four, as the two others are always hidden by the left side. We still need the automatism for these two sides though. The following swf shows you where we are now!

Step 5: Swapping the Sides Around

To manage the order of the sides on the display list, we need to swap them around constantly. To keep track of the sides, we give each side a name to be referenced, when the indexes are changed.

That's it for now. Here's the result:

Step 6: And Finally

Here's the full code for you to check out:


The native Flash 3D functionality provides us with some quite handy features to create basic 3D effects with no effort while keeping the file size to a minimum. But when we start digging a bit deeper and try to create some more complex 3D scenes or effects, we soon discover its boundaries.

A turning cube can be made with a bit of hassle, a more complex environment such as the Piecemaker gallery causes some serious headaches, as the display list has to be monitored and updated constantly. It is possible, obviously, but I'd doubt that it makes sense to try solving more complex tasks this way.

Personally I love 3D applications and the native 3D is a great way to get started in Flash 3D. We have to be clear, though, about where it makes sense to use it - and where it doesn't. It's brilliant for creating simple effects without increasing the file size. For more complex tasks we'll have to admit that it's not feasible, as it is, after all, just a pseudo effect. This is where "real" 3D engines such as Papervision3D should come into play.

Thanks for reading, I hope you enjoyed the tut and have fun with the Piecemaker gallery!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.