Using 3D and Video with Caurina Tween in Flash Cs4
In this sample, full-commented, we'll use the FlashPlayer 10 3D features to display a list of Video Thumbnails enabling the Mouse Click Event to enlarge them changing their z and rotationY properties.
We'll use Caurina Tween to perform 3d animations, so download them and copy the caurina package in your project folder before test this sample (they are not included inside the source files)
IMPORTANT NOTE: 3D topic is really complex! This is only an introduction to this world and this VideoGallery needs a lot of improvements to be used in a real scenario.
To this URL the flash file with the final result (click on VideoThumbs to display 3D animations):
CREATE THE FLASH FILE
First of all we create a new Flash ActionScript 3.0 document (setting Flash Player 10 in the Publish Setting menu).
Create a new MovieClip with an FLVPlayBack component inside (with istance name videoFLB) and link the movieclip to the VideoThumb.as class.
See image below

We'll use Caurina Tween to perform 3d animations, so download them and copy the caurina package in your project folder before test this sample (they are not included inside the source files)
IMPORTANT NOTE: 3D topic is really complex! This is only an introduction to this world and this VideoGallery needs a lot of improvements to be used in a real scenario.
To this URL the flash file with the final result (click on VideoThumbs to display 3D animations):
CREATE THE FLASH FILE
First of all we create a new Flash ActionScript 3.0 document (setting Flash Player 10 in the Publish Setting menu).
Create a new MovieClip with an FLVPlayBack component inside (with istance name videoFLB) and link the movieclip to the VideoThumb.as class.
See image below

// FLASH DOCUMENT CLASS
package {
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.MouseEvent;
import caurina.transitions.*
import flash.display.DisplayObject;
public class VideoMain extends Sprite
{
// Horizontal Gap between Video Thumbs
private const HORIZONTAL_GAP:uint = 50;
// Total of VideoThumbs to show
private const VIDEO_TOTAL:uint = 6;
// Thumbnails original Y position
private const Y_POS:uint = 125;
// Thumbnails original Z position
private const Z_POS:uint = 550;
public function VideoMain()
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
// Create video thumbs
for (var i:uint = 0; i < VIDEO_TOTAL; i++) {
// Create a new VideoThumb istance
var thumb:VideoThumb = new VideoThumb();
// Save original Index VideoThumb
thumb.originalIndex = i;
// Set Thumb Position (x, y, z)
thumb.x = thumb.originalX = HORIZONTAL_GAP * i
thumb.y = Y_POS
thumb.z = Z_POS;
// Set Thumb Rotation
thumb.rotationY = -90;
thumb.addEventListener(MouseEvent.CLICK, onClick)
thumb.buttonMode = true;
addChild(thumb)
}
}
/**
* Click Video MovieClip
*/
private function onClick(event:MouseEvent):void
{
// If clicked videoThumb is already opened
if(event.currentTarget.isOpened) {
// Back to the original position
Tweener.addTween(event.currentTarget, {
rotationY: -90 ,
x: event.currentTarget.originalX,
y: Y_POS,
z: Z_POS,
time:0.5,
transition:"easeInOutSine",
onComplete: event.currentTarget.videoFLB.stop()});
// Set depth to the original Position
this.swapChildrenAt(getChildIndex(event.currentTarget as DisplayObject), event.currentTarget.originalIndex)
} else {
// Enlarge Video and PLay it when animation is completed
Tweener.addTween(event.currentTarget, {
rotationY: 0 ,
x: 230,
y: 200,
z: 0,
rotationY: 0,
time:0.5,
transition:"easeInOutSine",
onComplete: event.currentTarget.videoFLB.play()});
// Bring to Front
this.swapChildrenAt(event.currentTarget.originalIndex, this.numChildren -1 )
}
// Change isOpened Status (to always know if a thumb is opened )
event.currentTarget.isOpened = !event.currentTarget.isOpened;
}
}
}
// VideoThumb.as Class
package {
import flash.display.MovieClip;
public class VideoThumb extends MovieClip
{
private var _originalIndex:Number ;
private var _originalX:Number ;
private var _isOpened:Boolean = false;
/**
* Constructor
*/
public function VideoThumb(){}
/**
* Original Index position (usefull to know the Thumb depth)
*/
public function set originalIndex(val:Number):void {
_originalIndex = val;
}
public function get originalX():Number {
return _originalX ;
}
/**
* Original x position (usefull to position Thumb to the original Position)
*/
public function set originalX(val:Number):void {
_originalX = val;
}
public function get originalIndex():Number {
return _originalIndex ;
}
/**
* If the VideoThumb is opened or not
*/
public function set isOpened(val:Boolean):void {
_isOpened = val;
}
public function get isOpened():Boolean {
return _isOpened ;
}
}
}




