Flash Tutorials

This is a sweet way to simulate flying through a 3d stack of images. You have to wait a few seconds for all 3 images to load. It uses very little processing power, and it’s fairly easy to understand. It uses this magic formula: scale = focalLength / (focalLength + z). My code here is very well commented, so I’ll let it do the talking. If you have any questions, just throw them in a comment.

Btw, the images are pulled from Flickr, from a very talented photographer.

//Declaring the URL, the Loader, and the XML variables
var xmlURL:URLRequest = new URLRequest("images.xml");
var xmlLoader:URLLoader = new URLLoader();
var xml:XML;

//Declares the image array
var imageArray:Array = new Array();

//Declares the variables needed for the 3D effect
//Try playing around with the value of these variables to make it look different
var focalLength:int = 50;
var distance:int = 0;
var distanceBetweenImages:int = 100;

//Telling the loader to load the URL
xmlLoader.load(xmlURL);

//Enter Frame event listener
addEventListener(Event.ENTER_FRAME, onEnterFrame);

//Detects when the loader has finished loading the data
xmlLoader.addEventListener(Event.COMPLETE, parseXML);

//converts the loaded data into XML
function parseXML(e:Event):void
{
   xml = new XML(e.target.data);
   displayImages();
}

function displayImages():void
{
   for (var k in xml.image)
   {
       //declares the movieclip that the image will be in
       var imageMC:MovieClip = new MovieClip();

       //gets the URL for the image
       var imageURL:URLRequest = new URLRequest(xml.image[k]);

       //declares the loader and loads the image
       var imageLoader:Loader = new Loader();
       imageLoader.load(imageURL);

       //adds the image to the movieclip
       imageMC.addChild(imageLoader);

       //adds the image movieclip to the stage, and puts the image at the bottom of the image stack,
       //but above the background rectangle with the gradient, you will have to change this number
       //based on what you want to have behind your stack of images
       addChildAt(imageMC, 1);

       //puts the image movieclip at a position
       imageMC.x = 18;
       imageMC.y = 20;

       //adds the image movieclip to the array of images
       imageArray.push(imageMC);
   }
}

function onEnterFrame(e:Event):void
{
   //creates the distance from the screen to the first image in the stack of images
   //you can make this react to a scroll bar, or a slider, or anything you want
   //making it react to the mouse is just for this tutorials demonstrational purposes
   distance = (stage.stageWidth - stage.mouseX) - 200;

   //loops through the image array
   for (var k in imageArray)
   {
       //puts the spacing between the images
       var z:int = distanceBetweenImages * k;

       //figures out the scale
       var scale:Number = focalLength / (focalLength + (z + distance));

       //puts limits on the scale, based on how the scale is computed
       //it is possible for it to be negative, we don't want that
       //makes the image invisible after it gets realls close
       if (scale > 1.2)
       {
           imageArray[k].visible = false;

       } else if (scale < 0)
       {
           scale = 0;
       } else
       {
           imageArray[k].visible = true;
       }

       //applies the scale to the image
       imageArray[k].scaleX = scale;
       imageArray[k].scaleY = scale;

       //makes the image alpha the same as the scale, to add to the effect
       imageArray[k].alpha = scale;

       //places the image at the center of the screen
       imageArray[k].x = (stage.stageWidth / 2) - (imageArray[k].width / 2);
       imageArray[k].y = (stage.stageHeight / 2) - (imageArray[k].height / 2);
   }
}

Getting Started

For this demo application, we’ve used the latest version of papervision3d with the code name GreatWhite.
First of all, we need to include the papervision3d stuff.

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.utils.MaterialsList;

These are all the classes we need for our application. The Camera3D class enables you to focus on a 3d object and zoom to it. Scene3D is a container that holds all 3d objects. The Viewport will be added to the main stage and is like a video screen that shows the result. Another important class is the BasicRenderEngine which renders all the objects from the scene with the current camera settings and outputs the result to the viewport. Papervision comes with different types of objects, but for our example we’ll only need the cube. And finally there are the materials which can be set to the objects. This is how papervision basically works.

Then we to set some constants for the sound channel

const CHANNELS_PER_DIRECTION:int= 256;
const CUBES_PER_CHANNEL:int  = 8;
const CHANNEL_STEPS:int   = Math.floor(CHANNELS_PER_DIRECTION / CUBES_PER_CHANNEL);

Next thing to do is to set the papervision variables

var viewport:Viewport3D;
var scene:Scene3D;
var camera:Camera3D;
var cube:Cube;
var renderer:BasicRenderEngine;

To keep a reference of each cube, we need to create 2 arrays. For each sound channel (left, right)

var cubesLeftChannel:Array  = new Array();
var cubesRightChannel:Array  = new Array();

At the end, we want to swing our camera from left to right and vice versa. To know in which direction we’re currently moving, we need to set a flag:

var bolAnimationForward:Boolean  = true;

The next part is the same as in the previous tutorial. We create a new sound object and a url request for requesting the mp3 file. SndBytes will hold the current spectrum data.

var sndObject:Sound   = new Sound();
var reqObject:URLRequest   = new URLRequest("so-deep.ram2000.mp3");
var sndBytes:ByteArray   = new ByteArray();

So, the next step will be the initializing of our 3d stuff, then loading the soundfile and finally creating the render loop.
First of all, we create a new viewport and add it to the stage. The third parameter tells the viewport to use the whole width and height of the swf file for displaying the 3d objects.

viewport = new Viewport3D(0, 0, true);
addChild(viewport);

Then we create a new basic render engine and a scene which holds the 3d objects

renderer = new BasicRenderEngine();
scene = new Scene3D();

Our cubes will need a material. We create a blue one for cubes that are displaying the left channel and a green material for the other ones. You can easily change the colors for each side using hex values.

var blueMaterial:MaterialsList = new MaterialsList(
{
front:  new ColorMaterial(0x0066FF),
back:   new ColorMaterial(0x0066FF),
right:  new ColorMaterial(0x0046B0),
left:   new ColorMaterial(0x0046B0),
top:    new ColorMaterial(0x1171FF),
bottom: new ColorMaterial(0x1171FF)
}
);

var greenMaterial:MaterialsList = new MaterialsList(
{
front:  new ColorMaterial(0x00CC00),
back:   new ColorMaterial(0x00CC00),
right:  new ColorMaterial(0x009F00),
left:   new ColorMaterial(0x009F00),
top:    new ColorMaterial(0x00CC00),
bottom: new ColorMaterial(0x00CC00)
}
);

Now we need to create the cubes for the left channel, position them correctly on the x-axis, keep a reference in the array and add them to the scene

for(var i = 0; i < cube =" new" x =" i"> 
The same procedure for the cubes standing for the right channel but with the green material and we place them between the green ones.
 
for(i = 0; i < cube =" new" x =" (i"> 
Finally we create a new camera, set the target to the cube in the middle, adjust the zoom and move the start position a bit to the upper left
 
camera = new Camera3D();
camera.zoom = 11;
camera.target = cubesRightChannel[CUBES_PER_CHANNEL / 2 - 1] as Cube;
camera.x -= 400;
camera.y += 300;
 
Now we’re finished with creating all the necessary 3d stuff. Next thing to do is loading a sample mp3 file which is quite easy. We just load the url request we’ve created bevore and play the file.
 
sndObject.load(reqObject);
sndObject.play();
 
The only thing left to do is the render loop. This loop will be executed on enter frame, in our case 60 times per second. First, we compute the spectrum and put the result in the defined byte array.
 
SoundMixer.computeSpectrum(sndBytes);
 
Then we set the right position for the byte array pointer, read the float value and assign it to the current cube scaleY value. Like this, the cubes will be resized according to the spectrum. After the end of the first loop, we repeat the procedure for the right channel cubes
 
for(var i = 0; i < cube =" cubesLeftChannel[i]" position =" CHANNEL_STEPS" scaley ="  sndBytes.readFloat();" i =" 0;" mycube =" cubesRightChannel[i]" position =" 1024" scaley =" sndBytes.readFloat();"> 
To swing our camera a bit, we increase and decrease it’s x value
 
if(bolAnimationForward) {
camera.x += 4;
if(camera.x > 800)
bolAnimationForward = false;
} else {
camera.x -= 4;
if(camera.x < -400)   bolAnimationForward = true; } 
 
And now we need to tell the render engine to render the current scene, camera and viewport
 
renderer.renderScene(scene, camera, viewport);
 
That was already the whole trick. You can also try rendering other materials and different objects. These were just the basics about papervision3d. We hope you enjoyed reading this tutorial. Any feedbacks and questions are welcome.
 
In the final you will get this:
 
 
Full code with comments
 
// Import Papervision3D
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.utils.MaterialsList;

// constants
const CHANNELS_PER_DIRECTION:int= 256;
const CUBES_PER_CHANNEL:int  = 8;
const CHANNEL_STEPS:int   = Math.floor(CHANNELS_PER_DIRECTION / CUBES_PER_CHANNEL);

// papervision vars
var viewport:Viewport3D;
var scene:Scene3D;
var camera:Camera3D;
var cube:Cube;
var renderer:BasicRenderEngine;

// arrays holding references to cubes for each channel
var cubesLeftChannel:Array  = new Array();
var cubesRightChannel:Array  = new Array();
// animation flag
var bolAnimationForward:Boolean = true;

// sound vars
var sndObject:Sound    = new Sound();
var reqObject:URLRequest   = new URLRequest("so-deep.ram2000.mp3");
var sndBytes:ByteArray   = new ByteArray();

// INIT
function init():void {
init3D();
initSound();
// add event listener for render loop
addEventListener(Event.ENTER_FRAME, renderLoop);
}

// init3d
function init3D():void {
// Create viewport
viewport = new Viewport3D(0, 0, true);
// add viewport to stage
addChild(viewport);

// create basic render engine
renderer = new BasicRenderEngine();

// Create scene
scene = new Scene3D();

// blue cube material
var blueMaterial:MaterialsList = new MaterialsList(
{
 front:  new ColorMaterial(0x0066FF),
 back:   new ColorMaterial(0x0066FF),
 right:  new ColorMaterial(0x0046B0),
 left:   new ColorMaterial(0x0046B0),
 top:    new ColorMaterial(0x1171FF),
 bottom: new ColorMaterial(0x1171FF)
}
);

// green cube material
var greenMaterial:MaterialsList = new MaterialsList(
{
 front:  new ColorMaterial(0x00CC00),
 back:   new ColorMaterial(0x00CC00),
 right:  new ColorMaterial(0x009F00),
 left:   new ColorMaterial(0x009F00),
 top:    new ColorMaterial(0x00CC00),
 bottom: new ColorMaterial(0x00CC00)
}
);

// create cubes for left channel
for(var i = 0; i < cube =" new" x =" i" i =" 0;" cube =" new" x =" (i" camera =" new" zoom =" 11;" target =" cubesRightChannel[CUBES_PER_CHANNEL" i =" 0;" cube =" cubesLeftChannel[i]" position =" CHANNEL_STEPS" scaley ="  sndBytes.readFloat();" i =" 0;" mycube =" cubesRightChannel[i]" position =" 1024" scaley =" sndBytes.readFloat();"> 800)
 bolAnimationForward = false;
} else {
camera.x -= 4;
if(camera.x < -400)    bolAnimationForward = true;  }   // render current scene  renderer.renderScene(scene, camera, viewport); }  init();  

Source Files Download

In this tutorial we will create an Interactive 3D environment. Images first appear in a 3D wall and then on click randomly expand out. The camera then zooms through space to the clicked image. An image can be flipped over to reveal image information.

Introduction

This tutorial uses the Flash Framer space3D component. The space3D component is an ActionScript 3.0 plug-in for Adobe Flash that makes it easy to create a random photo gallery in a few easy steps. Our developers have done the hard work so you don’t have too.

Step 1

Once you have downloaded and installed the space3D component, Launch Flash and open a new ActionScript 3.0 document. Save the document with any name you like.

Step 2

Open the components panel. Window > Components
You will now see a component set called FlashFramer.
Open up that set and you will find the space3D component.

Drag and drop the component onto the stage and align it.
I’m using the stage size of 700x510 pixels. I will also size the component to 700x510 to fit the stage.

Set the frames per second (fps) to 20 fps for smoother animation.

Step 3

Now lets load some images. I’m using twenty five images of space scenes.
Put your photos in the same directory as your Flash file in a folder named images.

Step 4

Jump back over to Flash.
Click on the space3D component to select it and open the Components Inspector panel.
Window > Component Inspector
Double click on the Image List value field.

A Dialog box will popup.
Click on the plus button to add an image with a title and description.
Repeat this until you have all your images entered.

You can also use XML file to control every parameter of the space3D component.
See the documentation that came packaged with the component or download it here.

Preview you file. File > Publish Preview > Flash

You now have a fully working dynamic photo gallery.

Step 5

You can either use the space3D component out of the box or modify and skin it to your liking.

space3D comes built with tons of parameters to customize your gallery. Such as: xml, spacing, margin, border size and color, reflection, transition, show arrows, back flip, and camera movement.
These setting are found in the Component Inspector in Flash.

Play around with these setting until you get the look you want.

Step 6

You can also skin the component elements to your liking.
Skinning the space3D component is so easy. Just double click on the component in Flash. It will open all the skinnable elements. Double click on the element you want to modify and begin customizing. Once you done just click on scene 1 to return to the main timeline and preview your work.
File > Publish Preview > Flash

Final Customized Gallery

Conclusion