• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Guida Effetto Time Machine con Actionscript

Ignazio96

Guru del Forum
User Legend
9 Marzo 2008
10.985
573
133
Perso nell'oblio
Miglior risposta
0
#1 Autore del topic
Per applicazioni 3D con poche funzionalità esistono dei motori, meno complessi e strutturati di PaverVision 3D 2.0 oppure Sandy3D engine, che sono più veloci in esecuzione come, per esempio, il pacchetto Novio Simple 3D che permette di gestire degli oggetti su di una superficie multipiano sufficiente a realizzare l’effetto Time Machine di Leopard, il sistema operativo di Mac.
Questo effetto vede un treno di contenuti visuali, uno dietro l’altro, distribuiti in profondità, permettendoci di avvicinarci o allontanarci ad ogni singolo contenuto, portandolo in primo piano e riposizionando gli altri. È dunque un effetto utilizzabile per gallerie di immagini o video e, volendo, integrabile con un menu che punta direttamente ai vari contenuti.
Per la stesura di questo articolo useremo come ambiente di sviluppo, Flash Builder 4.0.
Lo sviluppo

Per iniziare scarichiamo il pacchetto Novio Simple 3D dal sito e poi, premesso che l’esigenza è quella di creare una galleria dinamica che interfaccia un flusso dati XML, caricando immagini esterne, creiamo un ambiente di file system adeguato a questo scopo.



Creiamo ora una cartella immagini che chiameremo img, nella quale inseriremo tutte le immagini vogliamo mostrare, e una cartella xml ,nella quale metteremo il file items.xml che formatteremo nel seguente modo:


Codice:
[TABLE]
[TR]
[TD="class: code"]<?xml version="1.0" encoding="UTF-8"?>

    <ITEMS>
        <ITEM url="img/0.jpg"/>
        <ITEM url="img/1.jpg"/>
        <!-- ..e così via.. -->
    </ITEMS>
[/TD]
[/TR]
[/TABLE]
Ogni nodo ITEM rappresenta un’immagine e riporta l’attributo url.
Ora che il file system è pronto, avviamo lo sviluppo in AS3. Avviamo Flash Builder e creiamo un nuovo progetto Actionscript nominandolo TimeMachine e scegliamo dove salvarlo.
Figura 2 – Nuovo progetto in Flash Builder





Dopo che Flash Builder avrà creato la struttura delle cartelle, copiamo il pacchetto Novio scaricato dentro la cartella src in modo da poterlo importare in seguito.
TimeMachine.as è la classe principale, che interfaccia l’SWF. Specifichiamo al suo interno i settaggi di pubblicazione dell’SWF come la dimensione, colore dello sfondo e frame rate subito sotto gli import:



Codice:
[TABLE]
[TR]
[TD="class: code"][SWF(width="800",height="600",backgroundColor="0x000000",frameRate="24")]

[/TD]
[/TR]
[/TABLE]

Dentro un pacchetto app creiamo due classi che serviranno per il nostro applicativo: Gallery, che avrà funzione di manager degli oggetti sottoposti, e GalleryItem rappresentativa di questi ultimi.





Inziamo dalla classe pricipale, TimeMachine.as, e carichiamo in cache l’XML che ci servirà da sorgente dati per i vari caricamenti di immagini esterne.
Sviluppiamo una funzione loadData che richiameremo direttamente nel costruttore TimeMachine e definiamo che, a caricamento avvenuto, debba essere creato e aggiunto alla DisplayList un oggetto di tipo Gallery.



Codice:
[TABLE]
[TR]
[TD="class: code"]private function loadData():void{ 

    //carico i dati da xml
    var _xmlLoader:URLLoader = new URLLoader();
    _xmlLoader.addEventListener(Event.COMPLETE, onDataLoaded);
    _xmlLoader.load(new URLRequest("../xml/items.xml"));
}
 
private function onDataLoaded(e_:Event):void {          
    e_.target.removeEventListener(Event.COMPLETE, onDataLoaded);
    XML.ignoreWhitespace = true;
    var _xml:XML = new XML(e_.target.data);
 
    //creo oggetto galleria
    gallery = new Gallery(_xml.ITEM)

    gallery.x = 800/2
    gallery.y = 100
    //aggiungo l'oggetto alla DisplayList
    addChild(gallery)
}



[/TD]
[/TR]
[/TABLE]
Definiamo ora il comportamento di Gallery.as nella quale dovremo, analizzando l’XML caricato e proveniente da TimeMachine.as, istanziare gli oggetti GalleryItem.


Codice:
[TABLE]
[TR]
[TD="class: code"]public function Gallery(xmlList_:XMLList){

    //prelevo l'xml dal costruttore
    xmlList = xmlList_;
 
    //creo gli oggetti della gallery e li archivio in un array
    sceneObjects = [];
    for (var _i:uint = 0; _i < xmlList.length(); _i++){
        var _galleryItem:GalleryItem = new GalleryItem(xmlList[_i])
        //definisco la profondità dell'oggetto nella scena
        _galleryItem.zpos = _i * zOffset;
        sceneObjects.push(_galleryItem);
             
        //definisco la lunghezza del campo focale, ovvero la profondità della vista della mia camera
        var $focalLength:Number = 200;
        //creo una camera multipiano, classe messa a disposizione dal pacchetto Novio
        cameraView = new MultiplaneCamera(0, 0, 0, 0, $focalLength); 
        //do delle dimensioni alla camera creata in larghezza, altezza e profondità, 
        //per cui la camera mostrerà solo gli oggetti presenti all'interno di questi confini
        cameraView.setBounds(-1500, 800, 0, sceneObjects.length * $focalLength*2); 
         
        //creo un controller per la camera che, per questo esempio sfrutta l'interazione da tastiera con 
        //le frecce su e giù, ma per un'applicazione più complessa potrebbe vedere l'interazione da un menu per esempio
        cameraController = new CameraController(cameraView);
         
        //creao una scena, classe del pacchetto Novio, alla quale assegno la camera creata, 
        //il controller e tutti gli oggetti che voglio rappresentare nella scena stessa         
        scene = new MultiplaneScene(cameraView, cameraController, sceneObjects);
     
        //aggiungo la scena alla DisplayList    
        addChild(scene);
    }
}


[/TD]
[/TR]
[/TABLE]
Ora passiamo al comportamento di GalleryItem.as che dovrà caricare l'immagine esterna e esistere nella mia scena pseudo 3D. Per quest'ultimo motivo questa classe non estenderà semplicemente Sprite ma Figure, una classe del pacchetto Novio che è in pratica uno Sprite con l'attributo profondità.
[TABLE]
[TR]
[TD="class: code"]public class GalleryItem extends Figure
[/TD]
[/TR]
[/TABLE]


inoltre definiamo il metodo di caricamento dell'immagine e la sua visualizzazione una volta caricata. Affidiamo sempre il serverPath ad una variabile statica che centralizziamo in una classe di servizio Globals.as per elasticità dell'applicativo.


Codice:
[TABLE]
[TR]
[TD="class: code"]private function loadPic():void{

    //carico l'immagine creando prima la request e poi il loader cui darla in pasto
    loader = new Loader()
    var _rew:URLRequest = new URLRequest(Globals.serverPath + String(xmlData.@url))
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPicLoaded)
    loader.load(_rew)
}
 
//definisco cosa succede una volta caricata
private function onPicLoaded(e_:Event):void{
    loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onPicLoaded)
             
    //centro l'immagine spostandola in alto e a sinistra per le sue due metà
    loader.x = - loader.width/2
    loader.y = - loader.height/2
     
    //la aggiungo alla DisplayList          
    addChild(loader)
}
[/TD]
[/TR]
[/TABLE]

Con questo ultimo passaggio concludiamo la mostra Time Machine, invitandovi a visualizzare la demo.

Fonte: HTML.it
 
Shoutbox
  1. #KiK #KiK: CAFONE
  2. #KiK #KiK: ma come parla
  3. 404NotFound 404NotFound: figa
  4. topolino1958 topolino1958: Ragazzi dove posso postare un canale telegram per pubblicità?
  5. Cristoforo58 Cristoforo58: Sono vietati link esterni a Sciax2 in shoutbox, grazie.
  6. Mr_Joker Mr_Joker: vi ricordiamo che domani pomeriggio dalle 2-5pm "Sunake Hotel" apre le selezioni a diverse posizione staff.
  7. Forzaese23 Forzaese23: retro babbo
  8. #KiK #KiK: createlo amikoooo
  9. B bbhojjjj76: fake login habbo ne avete?
  10. N NeroWhite BO: Buonasera
  11. #Egzon14 #Egzon14: dunque possiamo definirli morti i retro
  12. #Egzon14 #Egzon14: habbo passerà ad unity
  13. #KiK #KiK: ma infatti
  14. #Egzon14 #Egzon14: ancora con sti retro habbo
  15. M mikiamo2012: Qualcuno per creare retro habbo?
  16. topolino1958 topolino1958: Ragazzi dove posso postare un canale telegram per pubblicità?
  17. #KiK #KiK: e poi ci sono io che vado a sorseggiare un po di kaffè su habbo inglese
  18. #Egzon14 #Egzon14: è proprio morto sciax2
  19. #KiK #KiK: Amiciii come statee
  20. #KiK #KiK: Cerco staff per la mia kaffetteriaaaa
  21. LogR LogR: Cerco tutto lo staff per il mio retroserver
  22. LogR LogR: https://www.sciax2.it/forum/threads/cerco-team-progetto-pronto.700516/
  23. A AnonymousOwna: Lubex Hotel è online vi aspetto
  24. ..Vortix.. ..Vortix..: Sì, penso ci sia la categoria adatta
  25. A Antonyblind: Qui si possono pubblicare metodi di guadagno???
Top