Oggi vedremo come utilizzare le classi di Papervision 3D 2.0 Interactivity utilizzando Adobe Flash CS3 per creare un cubo tridimensionale

Avremo la possibilità di ruotare il cubo con il puntatore del mouse o cambiare la veste grafica delle sei facce

Download Flash Player

L’esempio originale ci mostra come utilizzare le classi di Papervision 3D 2.0 con la possibilità di interagire con l’applicazione, in questo caso tramite un url.

Nel scaricare i file originali ho notato che purtroppo l’applicazione forse è stata scritta con delle classi meno recenti di Papervision, infatti non funzionava.

Quindi non è stato possibile mantenere questa interattività (si cercherà di implementarla prima possibile) dopo le varie mdofiche.

Questo è il codice per utilizzare le classi Papervision 3D 2.0

import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
import org.papervision3d.core.proto.*;

var container:Sprite = new Sprite();
container.x = stage.stageWidth * 0.5;
container.y = stage.stageHeight * 0.5;
addChild (container);

var scene:Scene3D = new Scene3D(container);
var camera:Camera3D = new Camera3D(null, 11, 100);

var materials:Array = [];
for (var i:uint=1; i<=6; i++){
materials.push(new MovieMaterial(new (getDefinitionByName("face"+i) as Class)()));
materials[uint(i-1)].smooth = true;
materials[uint(i-1)].animated = true;
}

var cube:Cube = new Cube(new MaterialsList({front:materials[0], back:materials[1], right:materials[2], left:materials[3], top:materials[4], bottom:materials[5]}), 200, 200, 200, 10, 10, 10);
scene.addChild (cube);

addEventListener (Event.ENTER_FRAME, loop);
function loop (e:Event):void {
var xDist:Number = mouseX - stage.stageWidth * 0.5;
var yDist:Number = mouseY - stage.stageHeight * 0.5;
cube.rotationY -= xDist * 0.05;
cube.rotationX += -yDist * 0.05;
scene.renderCamera (camera);
}

Un ringraziamento speciale a and80 per aver corretto le classi di Papervision3D

Scarica il sorgente
Guarda il VideoTutorial

Fonte [The Flash Bblog]

Author

Sono un Creative Strategist con più di 10 anni di esperienza in strategie digitali. Il mio ruolo di Stratega consiste nell’ideare e sviluppare concept creativi per progetti multicanale, individuando le attivazioni e dinamiche di Marketing da applicare attraverso un approccio strategico.

18 Commenti

  1. Guglielmo

    Ciao Julius, vorrei sapere una cosa, ma come faccio a cambiare le immagini di ogni faccia?

    Grazie!

  2. Nel file sorgente trovi tutte le facce, non eccedere di dimensioni

    per ora puoi cambiare solo il contenuto…

    Controlla anche in libreria

  3. Come si fa, se si può fare, inserire questa animazione in un sito flash? Grazie!

  4. @luke: ciao

    bè questo esempio non ti aiuta molto, anche se il progetto che mi hai segnalato è sempre in AS3 e utilizza classi 3d Papervision..

    se trovo qualcosa faccio un articolo

    @Sara: ciao

    devi utilizzare una funzione in AS3 per caricare un swf esterno

  5. federichissima

    ciao julius, un altro fantastico lavoro! volevo chiederti perchè non è possibile utilizzare il file swf che esporto. ho modificato le facce del cubo e ho esportato l’swf.ma quando lo importo dentro uno stage di un altro file non succede nulla. come mai? grazie in anticipo, buona serata!

  6. Ciao Julius, grande come sempre!
    Senti, ho aggiustato il problema dell’interattività nel cubo.
    In effetti ci ho studiato un pò sopra, perchè ho dovuto rifare un pò tutto il codice.
    Cmq le parti più importanti sono queste:

    //definizione dei materiali delle varie facce e attivazione interattività
    fronteMaterial.interactive = true;
    fronteMaterial.name = “frontale”;
    dietroMaterial.interactive = true;
    dietroMaterial.name = “dietro”;
    sinistraMaterial.interactive = true;
    ………

    //realizzazione del Cubo coi nuovi materiali
    cubo = new Cube(new MaterialsList( {
    front: fronteMaterial,
    back: dietroMaterial,
    left: sinistraMaterial,
    right: destraMaterial,
    top: sopraMaterial,
    bottom: sottoMaterial
    } ), 100, 100, 100, 3, 3, 3);

    //creazione listener che intercettano il Click sulla faccia
    private function onPresss(e:InteractiveScene3DEvent):void {
    switch(e.face3d.material.name) {
    …..

    ovviamente non posso inserire tutto il codice ;-) non si capirebbe niente.
    ma l’ho inserito nel mio blog.
    BYYYYYE

  7. Mi sono messo a studiare papervision3D, ma non riesco a capire se sia possibile e/o come sia possibile cambiare il materiale del cubo (o anche solo di una faccia) una volta che il cubo sia già stato creato.

    Hai idea di come si possa fare?

  8. Ciao..scusa l’imperdonabile ignoranza, ma come faccio a dare un urlo ad ogni faccia?
    Grazie mille anticipatamente

  9. Puglisi Riccardo

    Ciao Giulio,
    spero posso darti del tu dato che siamo quasi coetani nonchè tu abbia un anno + di me..
    ti scrivo xk nn so + cm ringranziarti
    perchè l’ottimo lavoro che fai x tutti quelli che navigano nella confusione della rete
    e alla fine trovano sempre delle giuste informazioni munite di tutorial e video che spiegano in modo semplicissimo
    la qualsiasi dei tuoi studi..
    grazi a te ho conosciuto la realtà amplificata e molto altro…così da approfondirli nel mio mondo di arte
    detto questo ti ringrazio ancora e mi chiedevo se potevo condividere i miei saperi con te in qualche modo x darti una mano
    sarebbe tropp chiedere il tuo contatto però so che potrei apprendere molto da una amicizia cm la tua e sicuramente
    poterti far conoscere cose che non sai
    per attivare quel mondo di condivisione e unione che si stava perdendo ma che piano piano internet innalzandosi come democrazia moderna e belva in continua evoluzione sta cercando di liberarci
    detto questo nn volevo farti xere altro tempo ma spero che mi risp a quest’e-mai xk t volevo parlare di alcuni progetti che avevo in mente sia sulla rete che ne condividere e tu mi sembri al xsona + azzeccata e sopratutt xk m fai tropp simpatia e denoto tutt l’aiuto che cerchi di dar al prox
    continua così…….

  10. Grazie per le belle parole, sentiamoci in privato via mail per i progetti su cui mi devi chiedere consigli ;) ciao

  11. Ciao Julius, come posso aggiungere un bagliore esterno o un’ombra intorno al cubo come nella demo che vedo qui sul tuo sito? Ho provato ad aggiungere un bagliore alle facce ma non si vede… forse perchè è esterno all’area consentita? Ho provato a mettere 210 210 210 come dimensioni ma non si vede comunque…
    Complimenti per tutti i tuoi tutorial!

Commenti