A3D CoverFlow图片展示效果
特别鸣谢：帅帅の楠瓜 分享这样的好文章
文章出自：帅帅の楠瓜
A3D CoverFlow 图像展示效果：
作者：ssnangua 发布于：2011-9-12 17:45 Monday
这是一个类似 iTunes 的 CoverFlow 的效果，图片一字排开，某张图片被点击后滑出放大，顺畅而动感。另外，也可以通过滚动鼠标滚轮快速地切换图片。
这个例子的重点在图片要分成三部分处理：
1. 所选图片：角度为0（rotationZ=0）。移到舞台中间（x=0），并放大（减小y值）
2. 所选图片左边的图片：角度为正值（rotationZ>0）。根据与所选图片深度（index）的差值确定x值大小，差值越大，x值越小
3. 所选图片右边的图片：角度为负值（rotationZ<0）。根据与所选图片深度（index）的差值确定x值大小，差值越大，x值越大
package
{
import alternativa.engine3d.containers.ConflictContainer;
import alternativa.engine3d.core.Camera3D;
import alternativa.engine3d.core.View;
import alternativa.engine3d.materials.TextureMaterial;
import alternativa.engine3d.loaders.MaterialLoader;
import alternativa.engine3d.loaders.events.LoaderEvent;
import alternativa.engine3d.core.Object3DContainer;
import alternativa.engine3d.core.Object3D;
import alternativa.engine3d.core.MouseEvent3D;
import alternativa.engine3d.primitives.Plane;
import alternativa.engine3d.controllers.SimpleObjectController;
import gs.TweenLite;
import flash.display.*;
import flash.text.TextField;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.*
import flash.system.LoaderContext;
import flash.filters.BlurFilter;
/**
* Alternativa3D 7.8.0
* CoverFlow 图像展示效果
* @author www.ssnangua.com
*/
[SWF(backgroundColor="#CCCCCC", frameRate="100", width="980", height="470")]
public class CoverFlow extends Sprite
{
private var rootContainer:ConflictContainer = new ConflictContainer(); //3D根容器
private var camera:Camera3D = new Camera3D(); //3D摄像机
private var view:View; //视窗
private var imageNum:uint = 11; // 图片总数
private var radius:Number = 600; // 图片分布范围半径
private var imageLoadedNum:uint = 0; // 已加载图片数
private var loadProgressTxt:TextField; // 显示加载进度的文本
private var imageContainer:Object3DContainer; // 图片容器
private var materials:Vector.<TextureMaterial>; // 存放材质的数组
private var selectIndex:uint = 0; // 目前所选 Plane 序号
public function CoverFlow():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event=null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
stage.scaleMode = "exactFit";
// 三维环境
view = new View(stage.stageWidth, stage.stageHeight);
view.hideLogo();
camera.view = view;
camera.y = -1200;
camera.rotationX = -90 * Math.PI / 180;
addChild(view);
rootContainer.addChild(camera);
// 平面容器
imageContainer = new Object3DContainer();
rootContainer.addChild(imageContainer);
// 加载进度显示
loadProgressTxt = new TextField();
loadProgressTxt.autoSize = "left";
stage.addChild(loadProgressTxt);
// 材质
materials = new Vector.<TextureMaterial>;
for(var i:int=0; i<imageNum; i++) {
var mat:TextureMaterial = new TextureMaterial();
mat.diffuseMapURL = "images/" + String(i) + ".jpg";
//mat.diffuseMapURL = "http://i1112.photobucket.com/albums/k483/ssnangua/pictureShow/" + String(i+1) + ".jpg";
materials.push(mat);
}
var context:LoaderContext = new LoaderContext(true);
var matLoader:MaterialLoader = new MaterialLoader();
matLoader.load(materials,context);
// 加载进度
matLoader.addEventListener(LoaderEvent.PART_COMPLETE, matLoading);
// 材质加载完成添加图片
matLoader.addEventListener(Event.COMPLETE, matLoadComplete);
// 渲染
addEventListener(Event.ENTER_FRAME, onRender);
}
// 渲染
private function onRender(e:Event):void
{
camera.render();
}
// 监测材质加载进度
private function matLoading(e:LoaderEvent):void {
imageLoadedNum ++;
loadProgressTxt.text = "Loading : " + imageLoadedNum + " / " + imageNum;
loadProgressTxt.x = (stage.stageWidth - loadProgressTxt.width) / 2;
loadProgressTxt.y = (stage.stageHeight - loadProgressTxt.height) / 2;
}
// 材质加载完成 创建平面
private function matLoadComplete(e:Event):void
{
stage.removeChild(loadProgressTxt);
for(var i:int=0; i<imageNum; i++) {
// 图片
var plane:Plane = new Plane(200,150);
plane.setMaterialToAllFaces(materials[i]);
imageContainer.addChild(plane);
plane.useHandCursor = true;
plane.rotationX = Math.PI / 2; // 将平面立起来
plane.addEventListener(MouseEvent3D.CLICK, selectPlane);
// 影子
var shadow:Plane = new Plane(200,150);
shadow.setMaterialToAllFaces(new TextureMaterial(reflect(materials[i].texture)));
imageContainer.addChild(shadow);
shadow.filters = [new BlurFilter()];
shadow.rotationX = Math.PI / 2;
shadow.z = -150;
}
// 初始化 跳到第6张图片
shiftToPlane(10);
// 添加舞台滚轮事件
stage.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheel);
}
// 点击平面变大 并移到舞台中间
private function selectPlane(e:MouseEvent3D):void {
shiftToPlane(imageContainer.getChildIndex(e.currentTarget as Plane));
}
// 舞台鼠标滚轮事件
private function mouseWheel(e:MouseEvent):void {
if(e.delta < 0) {
if (selectIndex < (imageNum-1)*2) shiftToPlane(selectIndex + 2);
} else {
if (selectIndex > 0) shiftToPlane(selectIndex - 2);
}
}
// 跳到指定 Plane
private function shiftToPlane(id:uint):void {
selectIndex = id;
var planeTemp1:Plane;
var planeTemp2:Plane;
var dis:int;
for(var i:uint=0; i<imageContainer.numChildren; i+=2) {
planeTemp1 = imageContainer.getChildAt(i) as Plane; //平面
planeTemp2 = imageContainer.getChildAt(i+1) as Plane; //影子
dis = i-id;
// 当前平面
if(i==id) {
TweenLite.to(planeTemp1, 0.5, {
x : 0,
y : -750,
rotationZ : 0
});
TweenLite.to(planeTemp2, 0.5, {
x : 0,
y : -750,
rotationZ : 0
});
}
// 当前平面左边的图片
else if(i<id) {
TweenLite.to(planeTemp1, 0.5, {
x : dis * 70 - 180,
y : 0,
rotationZ : 60 * Math.PI/180
});
TweenLite.to(planeTemp2, 0.5, {
x : dis * 70 - 180,
y : 0,
rotationZ : 60 * Math.PI/180
});
}
// 当前平面右边的图片
else {
TweenLite.to(planeTemp1, 0.5, {
x : dis * 70 + 180,
y : 0,
rotationZ : -60 * Math.PI/180
});
TweenLite.to(planeTemp2, 0.5, {
x : dis * 70 + 180,
y : 0,
rotationZ : -60 * Math.PI/180
});
}
}
}
// 倒影
/**
* pTarget : 需要被透明度渐变的 BitmapData
* pRatioFade : 开始渐变的透明度 值在[0,1]间
* pRatioEndFade: 结束渐变的透明度 值在[0,1]间
* _numMidLoc : 开始渐变的位置 值在[0,1]间
* 返回 : 透明度渐变后的 BitmapData
*/
private function reflect(pTarget:BitmapData, pRatioFade:Number = .6, pRatioEndFade:Number = 0, _numMidLoc:Number = .4 ):BitmapData
{
var _resultBmp :BitmapData = new BitmapData(pTarget.width, pTarget.height, true, 0);
var _matSkew :Matrix = new Matrix(1, 0, 0, -1, 0, pTarget.height);
var _recDraw :Rectangle = new Rectangle(0, 0, pTarget.width, pTarget.height);
var _potSkew :Point = _matSkew.transformPoint(new Point(0, pTarget.height));
_matSkew.tx = _potSkew.x * -1;
_matSkew.ty = (_potSkew.y - pTarget.height) * -1;
_resultBmp.draw(pTarget, _matSkew, null, null, _recDraw, true);
var _gradientShape:Shape = new Shape();
var _fillType :String = GradientType.LINEAR;
var _colorsArr :Array = [0, 0 , 0];
var _alphasArr :Array = [pRatioFade, (pRatioFade - pRatioEndFade) / 2, pRatioEndFade];
var _ratiosArr :Array = [0, 0xFF * _numMidLoc, 0xFF];
var _gradientMat :Matrix = new Matrix();
var _spreadMethod :String = SpreadMethod.PAD;
_gradientMat.createGradientBox(pTarget.width, pTarget.height / 2, Math.PI / 2);
_gradientShape.graphics.beginGradientFill(_fillType, _colorsArr, _alphasArr, _ratiosArr, _gradientMat, _spreadMethod)
_gradientShape.graphics.drawRect(0, 0, pTarget.width, pTarget.height);
_gradientShape.graphics.endFill();
_resultBmp.draw(_gradientShape, null, null, BlendMode.ALPHA);
_gradientShape = null;
return _resultBmp
}
}
}