Papervision3D Tutorial XML Banner Rotator
Ciao a tutti ed eccoci con un nuovo tutorial della serie Papervision3d! Vedremo infatti come creare un Banner Rotator XML in Pv3d che potrete usare sia come header dei vostri siti Html o integrarlo direttamente in un template Flash AS3. Per tutti quelli che volessero qualche funzione in più disponibile una versione anche su FlashDen.net da non perdere.
Demo Preview
FlashDen.net Version
Se volete acquistare la versione completa, visionabile nel demo, ecco il link su FlashDen.net.
FlashDen.net: Papervision3D Banner Rotator
In questa versione avrete a disposizione i comandi per muovere lo slideshow avanti e indietro, il count che avverte quanti secondi mancano prima della prossima immagine, il testo descritttivo dell’immagine e tutti gli elementi dello stage per poterlo visualizzare in fullscreen.
Ecco la descrizione completa:
This is an XML driven, 3D banner rotator made in papervision that can show unlimited number of images/swf files with automatic and manual browsing.
Images with clickable redirecting link. You can change images and links with the XML file.
Features:
- Supported files: JPEG , PNG , GIF images and SWF .
- Automatic timer countdown picture browsing.
- Edit links and image of the each banner from the XML Source
File:
Fully editable Flash source in Flash CS3 with AS3 .
Well Commented Actionscript File with How to use instructions
Full Source – Tutorial
Visto che la sorgente è abbastanza lunga, anche se semplice e intuitiva mi limito a riportare qui il Main.as; passiamo infatti dal caricamento di un file xml, alla creazione dinamica di piani e materiali Pv3d, all’utiilizzo di loaders, timer e funzioni Tweener. In ogni modo se cercate il cuore del main,as guardate nella funzione “increment()”.
A vostra diposizione il download del pacchetto completo più in basso. Se ci sono problemi o non capite qualcosa fatemi sapere. Buon pv3d!
package {
//-------------------------------------------------------- IMPORT FLASH
import caurina.transitions.Tweener;
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.events.TimerEvent;
import flash.utils.Timer;
//--------------------------------------------------------- IMPORT PV3D
import org.papervision3d.view.Viewport3D;
import org.papervision3d.cameras.*;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.core.proto.CameraObject3D;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.events.InteractiveScene3DEvent;
//------------------------------------------------------------ TWEENERS
import gs.*;
import gs.easing.*;
//-----------------------------------------------------------------------
// MAIN CLASS
//-----------------------------------------------------------------------
public class Main extends Sprite {
//-------------------------------------------------------- PUBLIC VAR
public var viewport:Viewport3D;
public var renderer:BasicRenderEngine;
public var current_scene:Scene3D;
public var current_camera:CameraObject3D;
public var current_viewport:Viewport3D;
public var default_scene:Scene3D;
public var default_camera:Camera3D;
//-------------------------------------------------------- PRIVATE VAR
private var _myXml:XML;
private var _cont:DisplayObject3D=new DisplayObject3D();
private var _plane:Plane=new Plane();
private var _plane2:Plane=new Plane();
private var _imgLoader:Loader;
private var i:int;
private var _positionY:Number=0;
private var cameraRotation:Number = 0;
private var _myPreloader:myPreloader=new myPreloader();
private var _myTimer:Timer;
private var _first:Boolean= true;
//-----------------------------------------------------------------------
// MAIN
//-----------------------------------------------------------------------
public function Main(vpWidth:Number = 800, vpHeight:Number = 600):void {
initPapervision(0, 0);
init3d();
loadXml();
}
//-----------------------------------------------------------------------
// ON TIMER
//-----------------------------------------------------------------------
private function myTime():void {
_myTimer= new Timer(1000,4);
_myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
_myTimer.start();
}
// at time complete i don't want to see nothing
//and run the increment function to show the next image
private function onTimerComplete(event:TimerEvent) {
increment();
}
//-----------------------------------------------------------------------
// LOAD XML
//-----------------------------------------------------------------------
private function loadXml():void{
var _urlLoader:URLLoader=new URLLoader();
_urlLoader.load(new URLRequest("xml/images.xml"));
_urlLoader.addEventListener(Event.COMPLETE, onXmlComplete);
}
private function onXmlComplete(evt:Event):void{
_myXml=new XML(evt.target.data);
// when my xml is loaded i can load my first image and attach textual elements
loadMat();
}
//-----------------------------------------------------------------------
// LOAD MAT
//-----------------------------------------------------------------------
private function loadMat():void{
_imgLoader=new Loader();
_imgLoader.load(new URLRequest(_myXml.images[i].tmb));
_imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showImage);
_imgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
onPlaneProgress);
if (i % 2 == 0){
trace ("percentuale")
_cont.removeChild(_plane);
}
else{
_cont.removeChild(_plane2);
}
}
//-----------------------------------------------------------------------
// PLANE PROGRESS
//-----------------------------------------------------------------------
private function onPlaneProgress(evt:ProgressEvent):void{
addChild(_myPreloader);
_myPreloader.y=10;
_myPreloader.x=10;
}
//-----------------------------------------------------------------------
// SHOWIMAGES
//-----------------------------------------------------------------------
private function showImage(evt:Event):void{
removeChild(_myPreloader);
myTime();
var _mcMaterial:MovieClip= new MovieClip();
_mcMaterial.addChild(evt.target.content);
var _mat:MovieMaterial = new MovieMaterial(_mcMaterial, true, true, true);
_mat.smooth = true;
_mat.interactive =true;
if (_first==true){
init2d();
initEvents();
_first=false;
_cont.rotationY-=180;
_mcMaterial.alpha=0;
TweenMax.to(_mcMaterial, 2, {alpha: 1, ease:Quart.easeInOut });
_cont.rotationY = _positionY;
TweenMax.to(_cont, 2, {z: 0, ease:Quart.easeOut});
}
if (i % 2 == 0){
_plane= new Plane(_mat, evt.target.content.width, evt.target.content.height, 2);
_cont.addChild(_plane);
_plane.z=-1;
_plane.scaleX=1;
}
else{
_plane2= new Plane(_mat, evt.target.content.width, evt.target.content.height, 2);
_cont.addChild(_plane2);
_plane2.z=1;
_plane2.scaleX=-1;
}
TweenMax.to(_cont, 2, {rotationY: _positionY, ease:Quart.easeInOut });
}
//-----------------------------------------------------------------------
// INCREMENT - DECREMENT
//-----------------------------------------------------------------------
private function increment():void{
_positionY+=180;
if (i == _myXml.images.length()-1){ i=0; }
else {i++;}
loadMat();
}
//-----------------------------------------------------------------------
// INIT PV3D
//-----------------------------------------------------------------------
protected function initPapervision(vpWidth:Number, vpHeight:Number):void {
if (vpWidth == 0) {
viewport = new Viewport3D(stage.width, stage.height, true, true);
}else{
viewport = new Viewport3D(vpWidth, vpHeight, false, true);
}
addChild(viewport);
renderer = new BasicRenderEngine();
default_scene = new Scene3D();
default_camera = new Camera3D();
current_camera = default_camera;
current_scene = default_scene;
current_viewport = viewport;
current_camera.z -= 50;
current_camera.focus=100;
current_camera.zoom=10;
}
//-----------------------------------------------------------------------
// INIT 3D
//-----------------------------------------------------------------------
protected function init3d():void {
current_scene.addChild(_cont);
_cont.rotationY=0;
_cont.z= stage.stageWidth*10;
}
//-----------------------------------------------------------------------
// INIT 2D
//-----------------------------------------------------------------------
protected function init2d():void {
stage.frameRate = 31;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
}
//-----------------------------------------------------------------------
// INIT EVENT
//-----------------------------------------------------------------------
protected function initEvents():void {
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
//-----------------------------------------------------------------------
// INIT RENDER
//-----------------------------------------------------------------------
protected function processFrame():void {
// Process any movement or animation here.
}
protected function onEnterFrame( ThisEvent:Event ):void {
processFrame();
renderer.renderScene(current_scene, current_camera, current_viewport);
Tweener.addTween(current_camera, {x:(mouseX-stage.stageWidth/2)*cameraRotation,
y:(mouseY-stage.stageHeight/2)*cameraRotation, time:.5, transition:"linear"});
current_camera.target = _cont;
}
}
}
Conclusion & Download
Ecco fatto! Come detto se volete una versione dalle funzioni più avanzate potete andare direttamente su FlashDen.net ed acquistare il file, altrimenti aggingete le vostre azioni preferite e fatemi sapere se qualcosa non è chiaro! Alla prossima lezione…
Comments
No comments yet.