PicLens in Flash con Papervision3D 2.0: parte II

Questa volta (vedi Piclens in Flash con Papervision3D 2.0) pubblico il codice (PicLens.as), ho dovuto rivedere alcune parti di codice, allineandomi così agli ultimi rilasci di Papervision3D 2.0 Great White ed ho eseguito alcuni aggiustamenti e aggiunte. Ho inserito in questa demo anche una serie di Knob, manopole, per modificare runtime alcuni parametri.

Simulazione del moto PicLens

Per avvicinarmi il più possibile al movimento orizzontale di PicLens originale, ho usato un piccolo stratagemma inserendo un “non visibile” DisplayObject3D come target per la camera:

1
2
3
__fooTarget = new DisplayObject3D();
...
__bv.cameraAsCamera3D.target = __fooTarget;

In pratica la camera punta sempre il DisplayObject3D posto dietro la serie di immmagini. Quando la camera si muove (con un movimento accelerato/inerziale) anche il DisplayObject3D la segue, ma con un leggero ritardo. Questo mi ha permesso di rendere l’effetto di moto morbido e del tutto simile a quello realizzato su PicLens originale:

1
2
__bv.cameraAsCamera3D.x += (( __slider.Value - __bv.cameraAsCamera3D.x)/10)/2.2;
__fooTarget.x += (( __slider.Value - __fooTarget.x)/5)/2.2;

Non ho utilizzato nessun Tween, ma una più semplice e performante funzione:

1
posizione += ((posizionefinale - posizione)/accelerazione)/inerzia;

Nel demo è possibile modificare alcuni parametri: focus, zoom e target. Quest’ultimo è la posizione del DisplayObject3D rispetto alle 99 immagini! Modificando questa posizione si noteranno cambiamenti nel movimento dell’intera scena.
Focus e Zoom sono invece proprietà dell’ambiente Papervision3D.

Interazione

Provate a cliccare sulle immagini… ;)

14 commenti a: “ ”

  1. 03 lug, 2008 Oliver Semrau:

    Projekt: Het groente en fruit lab…

    Für die Louis Bonduelle Fondation wurde ein kindgerechtes Informationsportal auf der Basis von Adobe Flash produziert. Aufgabe war es, den Kindern die Vorteile und geheimen Superkräfte von Früchten und Gemüse spielerisch näher zu bringen. Zusamme…

  2. 15 set, 2008 MairoN001:

    Ciao ho analizzato il tuo esempio di gallery stile piclens e devo dire che mi è piaciuto molto, non sono ancora ai tuoi livelli ma sto studiando e sono diversi giorni che mi sbatto la testa su come passare un filtro ad una singola img.
    Ti posto un pezzo del mio code per spiegarmi meglio

    ALL’INTERNO DELI CICLO DOVE DISPONI LA GRIGLIA CON LE IMG INSERISCO:

    1
    photo1.addEventListener( InteractiveScene3DEvent.OBJECT_OVER, fnc_ObjRlOver)

    e poi mi creo la seguente funzione

    1
    2
    3
    4
    function fnc_ObjRlOver (e:InteractiveScene3DEvent):void {
    new Tween(e.displayObject3D, 'z', Strong.easeOut, e.displayObject3D.z, -10, 1, true);
    e.sprite.filters = [new GlowFilter(0xffffff, 0.60, 10,10,2,1)];
    }

    in questo modo vorrei che al rollOver della singola IMG si ILLUMINI ….
    solo che cosi il filtro viene assegnato a tutte le img ma se metto e.displayObject3D mi da errore

    cercando in giro su un esempio ho trovato che Papervision usa InteractiveSceneManager per assegnare un filtro ad un evento Over… sapresti consigliarmi su come impostarlo all’interno del tuo esempio ?
    in quanto a me continua a dare errore ?

    Grazie infinite

    RispondiQuota
  3. 15 set, 2008 Giovambattista Fazioli:

    @MairoN001: Hai fatto tutto bene! Devi solo aggiungere una riga quando crei gli oggetti. In pratica quando inizializzi l’oggetto temporaneo photo1, nel loop di creazione, prima del addEventLister() aggiungi:

    photo1.useOwnContainer = true;

    Nell’evento fnc_ObjRlOver usa invece:

    e.displayObject3D.filters = [ new GlowFilter(0xffffff, 0.6, 10,10,2,1) ];

    e tutto funzionerà! :P

    RispondiQuota
  4. 16 set, 2008 MairoN001:

    Grazie infinite per la risposta funziona perfettamente solo che inserendo “useOwnContainer ”
    viene disabiliato il Click.

    Ho visto in giro che lavora sulla r577 ma non sulla 578+

    La release che uso io è la Great White del 09 Settembre 9th, 2008.

    vedro di documentarmi se trovo una soluzione nel frattempo te ne sarei grato se sapresti dirmi qualcosa in più al riguardo.

    Comunque sia grazie ancora per la risposta.

    RispondiQuota
  5. 16 set, 2008 MairoN001:

    Ok ho trovato una mezza soluzione adesso funziona il click ma non il Double Click =)
    posto la mia momentanea soluzione cosi se dovesse essere utile a qualkun’altro può tranquillamente leggere.
    Da quello che ho visto in giro su papervision per poter applicare dei filtri a delle primitive bisogna utilizzare le Viewport layers. Posto il Code magari è più facile da capire ;)
    NEL PACKAGE :

    import org.papervision3d.view.layer.ViewportLayer;

    NELLA CLASSE :

    private var layer:ViewportLayer;

    NELLA FUNZIONE : initObjects

    1
    2
    3
    4
    var photo1:Plane= new Plane( __matarray[i], THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT, 0, 0);
    __BasicVw.scene.addChild(photo1);
    layer = __BasicVw.viewport.getChildLayer(photo1, true);
    photo1.addEventListener( InteractiveScene3DEvent.OBJECT_OVER, fnc_ObjRlOver)

    NELLA FUNZIONE : fnc_ObjRlOver

    1
    e.displayObject3D.container.filters = [new GlowFilter(0xffffff, 0.60, 10,10,2,1)];

    Spero che questo code possa essere utile anche ad altri lo posto perkè io ho perso 3 giorni per scoprire come mettere un filtro su un plane in PVS3D con questa soluzione funziona anche il click ma non il Double cercherò di capire il perchè e se lo scopro posto… in tanto ancora grazie per il consiglio senza quel incentivo chi sa quanto tempo avrei perso ancora XD

    RispondiQuota
  6. 16 set, 2008 Giovambattista Fazioli:

    @MairoN001: ottima segnalazione! Vedremo cosa esce fuori :) Tu comunque hai installato l’ultima versione di Papervision3D ? Perchè hanno rilasciato ufficialmente la 2.0, togliendola dal branch di beta.

    RispondiQuota
  7. 16 set, 2008 MairoN001:

    Uso Tortoise e ogni giorno riuppo tutto ;)

    RispondiQuota
  8. 16 set, 2008 Giovambattista Fazioli:

    @MairoN001: perfetto!! Era proprio quello che volevo sapere! Anch’io uso Tortoise SVN :) e prima di inizare a sviluppare faccio un bel “Aggiorna” :P

    RispondiQuota
  9. 16 set, 2008 MairoN001:

    devo dire che tortoise è un software davvero utile e mi sa che per un paio di giorni ti torturero con delle domande relative alla gallery =)

    Continuando ad analizzare la gallery non ho potuto fare a meno di notare che nel ciclo le Img partono da 4.. penso che sia dovuto a qualke ciclo interno a Papervision3D o sbaglio? sapresti dirmi il motivo ?

    thk u

    RispondiQuota
  10. 17 set, 2008 Giovambattista Fazioli:

    @MairoN001: dove esattamente hai visto questo cliclo for da 4?

    RispondiQuota
  11. 17 set, 2008 MairoN001:

    Funzione : initObject
    ciclo : 

    for(var i=0; i < __thnumber; i++)

    il ciclo procede in modo regolare ma i piani cominciano con “id4″ invece che “0″
    me ne sono accorto eseguendo un trace dentro questo for

    trace("ID PLANE = "+__bv.scene.getChildByName(String(i)))

    dopo aver assegnato le photo ai piani
    i primi 4 trace sono null o_0”

    RispondiQuota
  12. 17 set, 2008 MairoN001:

    altro consiglio per chi volesse lavorare sulla gallery sempre seguendo l’esempio di piclens:
    al momento in cui si clikka su un img la photo si ingradisce, ma se precedentemente ne fosse stata cliccata un altra quelle non selezionate dovrebbero tornare alla posizione originale, cosi da far vedere sempre ingrandita solo quella selezionata, da qui in poi ho avuto qualke problema per questo ho controllato e studiato come si creano i plane e la loro disposizione in fatti per poter ricreare il gioketto avanti e indietro delle foto ho dovuto creare un listener sul click come da esempio :

    FUNZIONE initObject :

    1
    e.displayObject3D.addEventListener( InteractiveScene3DEvent.OBJECT_CLICK, fnc_ObjClk)

    FUNZIONE : fnc_ObjClk

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var obj_select = e.displayObject3D.id;
    var k:Number=0;
    var allThb = THUMBNAIL_NUMBER + 4; // HACK PER PLANE SU PV3D CHE PARTONO DA 4
           
    for (k=4; k &lt; allThb; k++) // IN QUESTO MODO I PRIMI 4 VUOTI LI SALTA
    {
        if(obj_select != k)
        {
            var Any:Plane =  __bv.scene.getChildByName(String(k)) as Plane;
            new Tween(Any, 'z', Strong.easeOut, Any.z, 0 , 1, true);
        }
    }

    Spero che possa esservi utile =)

    RispondiQuota
  13. 17 set, 2008 Giovambattista Fazioli:

    @MairoN001: per quanto riguarda il ciclo è dovuto ai livelli di profondità legati a Papervision, nulla di rilevante ai fine del funzionamento del codice :P

    RispondiQuota
  14. 08 mar, 2009 デフラグツール。 | kots blog:

    [...] PicLens in Flash con Papervision3D 2.0: parte II http://www.undolog.com/2008/06/17/piclens-in-flash-con-papervision3d-20-parte-ii/ [...]

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
                   <code></code> // blocco generico
                   [cc_actionscript][/cc_actionscript] // Actionscript
                   [cc_actionscript3][/cc_actionscript3] // Actionscript 3
                   [cc_css][/cc_css] // CSS Style Sheet
                   [cc_html][/cc_html] // HTML
                   [cc_js][/cc_js] // Javascript
                   [cc_objc][/cc_objc] // Objective-C
                   [cc_php][/cc_objc] // PHP
                   [cc_sql][/cc_sql] // SQL