JuliusDesign

Menu 3D rotatorio

Di - Letture: 9.784

Stavo cercando un menu 3D rotatorio in flash e finalmente l’ho trovato!

Questo menu grazie alla classe Tween gia discussa in precedenza, permette il movimento rotatorio dei nostri options con una prospettiva 3D.

Obbiettivamente questo esempio è molto grazioso, ha la possibilità di avere in aggiunta una descrizione aggiuntiva come si vede dall’immagine sopra, e anche graficamente è soddisfacente, notare le obre stile web 2.0 :)

Tramite un file .XML possiamo aggiungere, diminuire o modificare un option con la sua descrizione.

  • Vediamo la struttra del file XML:

<icons>
<icon image="icon1.png" tooltip="pippo" content="bla bla bla" />
</icons>

  • image= percorso dell’immagine o filmato esterno .swf
  • tooltip= titolo della nostra option
  • content= descrizione dell’option

Scarica il sorgente V.1
Scarica il sorgente V.2
Guarda il Tutorial

Implementazioni aggiuntive

Esempi dei lettori

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

Chi ha letto questo articolo ha letto anche

321 Commenti

  1. Alessio

    julius,
    niente allora sulle popup da xml?
    io mi sono proprio infangato, puoi aiutarmi?
    Alessio

    Cita / Quota
  2. Julius

    Ciao alessio ho implementato il link via POPUP lo trovi nelle varie implementazioni a fondo articolo.

    come ti avevo suggerito ho inserito le prime linee di codice per aprire una popup sul primo frame

    MovieClip.prototype.popup = function(nome, titolo, lar, alt, x, y, feat) {
    getURL("javascript:window.open('"+nome+"','"+titolo+"','width="+lar+",height="+alt+",screenX="+x+",left="+x+",screenY="+y+",top="+y+","+feat+"');void(0);");
    };

    e poi sulla funzione released [linea 120]

    function released_link() {
    //implementato il link esterno tramite POPUP
    popup(_root.linko, 'link', 400, 300, 350, 50, 'status=yes');
    }

    saluti

    Cita / Quota
  3. Alessio

    grazie per la cortesia e la velocità.
    Lo provo subito.

    non sono infondate le lodi che ti fanno nel blog, complimenti.

    a presto, alessio

    Cita / Quota
  4. Ricky

    Ciao Julius,

    ritornando alla possibilità di implementare la navigazione attraverso la keyboard, è una cosa difficile? Un principiante come me ce la potrebbe fare?

    saluti e grazie,
    ric

    Cita / Quota
  5. Davide

    Julius, sono ancora impantanato sul fermare le icone. A questo proposito ti chiedo, se è possibile naturalmente, potresti girarmi il file che LiberatedBlade ti ha inviato in data 13/04 con il menu gestito da pulsanti? Quel file potrebbe essere una soluzione per il mio problema…

    Grazie

    Cita / Quota
  7. Davide

    Ricky, non ho il menu di cui parli, ho solo quello di julius e vorrei integrarlo con un menu che un utente ha postato in questo blog… Tu ce l’hai o ne hai bisogno anche tu?

    Cita / Quota
  8. Ricky

    Davide, lo sto cercando anch’io.
    Vorrei poter muovere il menu con due pulsanti (per esempio freccia destra e freccia sinistra) e poi azionare l’evento con l’ENTER

    purtroppo non mi ritengo in grado di farlo da solo :-(

    Cita / Quota
  10. Ricky

    Julius,

    è possibile chiederti una modifica a pagamento?
    Vorrei utilizzare il tuo menu per fare una demo del mio prodotto.

    saluti,

    Cita / Quota
  11. Giorgio

    Ciao Julius! E’ possibile quando si passa con il mous sopra le icone che girano far comparire il nome del link (il clip tooltip) solo per le icone ingrandite davanti (che nel mio caso sono 5)?
    E’ possibile sapere la tua mail?

    Grazie.

    Cita / Quota
  12. Julius

    @Ricky contattami via mail vediamo di cosa si tratta….

    @Giorgio non so se è possibile identificare quale sia l’icona ingrandita tra le altre, ma si potrebbe inserire il link su tutte come un altro parametro

    Cita / Quota
  13. franc3s

    Qualcuno sa come mandare a capo nelle descrizioni? io non sono ancora riuscita e sto ancora impazzendo, sì..
    se qualcuno lo sa..vi prego..
    bohemien983 chiocciolina hotmail punto com

    Cita / Quota
  14. Julius

    Ciao allora il file XML come è impostato ora non va bene in quanto il parametro content deve essere al di fuori…

    ti spiego meglio

    i vari parametri image tooltip e content sono dentro il tag icon e non è possibile inserire tag tipo il grassetto o rientri….

    si dovrebbe riscrivere il file XML in questo modo

    <icon>icon1.png</icon>
    <tooltip>ppippo</tooltip>
    <content><![CDATA[Sto scrivendo un <b>testo</b> di prova]]!></content>

    come vedi in content tramite la codifica CDATA posso inserire tag HTML.

    Questo causa la rivoluzione di lettura del FILE XML che a sua volta implica una rielaborazione del codice in AS.

    Purtroppo in questo esempio non era considerata la possibilità di inserire formattazione..

    Se mi viene in mente quals’altro ti avverto..

    ciao

    Cita / Quota
  15. giorgio

    Ciao Julius, sai per caso se è possibile, in maniera abbordabile, aumentare il numero delle pagine? Io ho aumentato la lista
    addPage(“start”); //Always start with “start”!!!
    addPage(“pageA”);
    addPage(“page2”);
    addPage(“page3”);
    addPage(“page4”);
    addPage(“page5”);
    addPage(“page16”);
    addPage(“end”); //always end with “end”!!!

    ma non credo sia sufficiente…

    Cita / Quota
  16. franc3s

    Grazie Julius, puoi ancora dirmi come dovrei rielaborare l’AS? Saresti un angelo..

    Cita / Quota

  17. Pingback: Flash Carousel Slideshow « JuliusDesign

  18. Luca

    Ciao, è possibile bloccare la rotazione al passaggio del mouse sopra una immagine? Qual’è la variabile che blocca lo scorrimento?
    Ciao e Grazie

    Cita / Quota
  20. alfire

    Ciao, complimenti per il blog!

    volevo chiederti 2 cose:
    – ho aggiunto in fase di load() le classi Tween di unRealeased .
    Cioè il tuo stesso effetto per “ingrandire” le icone ma in fase di load().
    Solo che le “scale” delle varie immagini non si adattano subito alla prospettiva, ma dopo un piccolo intervallo di tempo indipendentemente dalla lunghezza del Tween… hai suggerimenti!?
    – come fai a stoppare il carosello dopo le fase di unReleased? Vorrei che cominci a girare dopo che siano apparse le icone, mentre incomincia a girare da subito.

    grazie…

    Grazie

    Cita / Quota
  22. alfire

    ho avuto anch’io il bisogno di rallentare le icone.
    Personalmente ho provato a cambiare la variabile speed alla riga 10 ma forse il valore 0.05 serve solo per inizializzarla. Mentre ho modificato 2500 in 10000 il codice in fondo alla pagina:
    speed = (this._xmouse-centerX)/10000;
    così rallenta ma non so se è la soluzione + elegante, julius ne sa di più…

    Cita / Quota
  23. Luca

    Ciao a tutti vorrei continuare su questo filone. Vi propongo questa domanda. C’è la possibilità di rallentare di molto la rotazione solo quando si passa sulle icone? In questo modo si eviterebbe la fastidiosa sensazione di doverle “rincorrere”, della serie doppia velocità, una di rotazione normale e una al passaggio del mouse sulle immagini.
    Ciao e Grazie.

    Cita / Quota
  24. alfire

    si può fare in 4 passi:
    Crei 3 variabili all’inizio del codice[10 ca]var piano:Number = 30000;
    var veloce:Number = 10000;
    var velocity:Number= piano;
    definisci un nuovo valore quando il mouse è sopra l’incona [46 ca]:

    function over() {
    ..........
    velocity=piano;
    }     (i puntini stanno per il codice già presente nella funzione da non toccare, aggiungi solo velocity)

    e lo ripristini quando esci dall’incona [54 ca]:
    function out() {
    ........
    velocity=veloce;
    }
    Ora ultimo passo. Aggiungi la velocity nella funzione [163 ca]
    this.onMouseMove = function() {
    speed = (this._xmouse-centerX)/velocity;
    };
    Prova a cambiare i valori di piano e veloce per ottenere l’effetto che vuoi

    Cita / Quota
  25. alfire

    hemmm…
    nel primo pezzo di codice la terza variabile non va bene, devi scrivere:
    var velocity:Number= veloce;

    Cita / Quota
  28. .: DoC :.

    Julius che dire… SEI UN GENIO!

    ogni giorno controllo il tuo sito per vedere se c’è qualche novità ed ogni volta rimango a bocca aperta.

    COMPLIMENTI!

    Cita / Quota
  29. Neel

    Ciao Julius, sto utilizzando il tuo menu rotatorio e sto apportando delle modifiche. Come posso delegare la funzione unreleased ad un pulsante esterno?
    In pratica qui
    var s:Object =this;
    tw.onMotionStopped = function()
    {
    s.onRelease = unReleased;
    }

    se sostituisco s:Object =this con s:Button= miopulsante al ritorno nel menu manca l’icona che ho cliccato prima, o meglio non sta al suo posto.
    Credo sia dovuto a questa chiamata nella funzione unReleased():

    if(t != this._parent)
    {
    ....
    }

    Mi sapresti dire come risolverlo?

    Cita / Quota
  30. alfire

    Ciao. Allora per differenziare il comportamento per prima cosa al bottone creato dai come nome d’istanza “bottone”.
    Poi aggiungi la seguente variabile [5 ca], servirà per mantenere memoria del movie cliccato.
    ...
    var padre:MovieClip;
    ...
    Definiamo padre, e come avevi già fatto definisci il bottone[98 ca]:
    ...
    padre = this;
    var s:Button = bottone;
    ...
    Infine dobbiamo riportare il movie nella posizione originaria. Il problema come hai trovato, sta nell’ if. Questo controllo serve per trovare il movie chiamante, nel tuo caso non lo trovava perchè si riferiva al bottone e lo lasciava in giro, ma ora abbiamo differenziato il movie dal bottone [112ca]:
    ...
    if (t != _root.padre._parent) {
    ...
    Spero di essere stato chiaro, e che non ci siano errori ma a quest’ora non assicuro nulla! Ciao

    Cita / Quota
  32. Marco

    Ciao a tutti, io non riesco proprio a vederlo funzionante.
    Ho la Vs 2, carico nella pagina l’swf, mi si vede la schermata nera e non appare altro.
    Aprendo il file swf da computer, mi apre nel browser l’elenco dei file presenti nella directory in cui si trova esso, quindi le immagini il file xml ecc, cliccando poi l’swf dall’elenco, si vede cio che si dovrebbe vedere, cioé il menu funzionante. Come mai????

    Cita / Quota
  33. Julius

    Ciao Marco io ho scaricato nuovamente la versione 2 ovvero menu2.zip è lo vedo correttamente…

    Estrai i file compressi, e dalla cartella avvia il file swf

    Cita / Quota
  34. Marco

    Ciao Juilius, avviando dalla cartella il file swf si pare il flash player con schermata nera, dopo qualche secondo mi apre nel browswer la classica paginetta che elenca i file presenti nella directory richiesta. Se poi avvio da lì l’swf allora mi visualizza il menu però i link non funzionano. Comunque questo è quello che accade sul computer, mentre integrandolo sul sito e mandato in hosting, mi si vede solo il riquado nero e non apre la pagina di cui ti ho parlato prima.

    Cita / Quota
  36. Marco

    No, suo windows xp pro, i file li ho estratti, il file swf lo avvio dalla cartella. Guarda se vuoi, ti faccio un video e ti faccio vedere con i tuoi occhi. E’ molto strano, perhé se apro altre applicazioni in flash le vede bene, quindi non puo nemmen essere un problema di flashplayer. Apparte che ho quello di adobe sta anche quello del pacchetto macromedia. Poi a prtescindere almeno sul sito si doveva vedere, invece nada anche li. Schermata nera. Pensavo ci fosse qualche errore nel percorso file, invece tutto ok. Non saprei, l’unica cosa che mi viene da pensare è che l’action script che apre la cartella per la ricerca delle immagini da visualizzare nel filmato mi dia problemi, perché questa funzione me la fa da browser. Tipo l’ fopen di php.

    Cita / Quota
  38. Marco

    No con tutte, fa la stessa identica cosa, si apre il player, carica, dopo qualche secondo mi apre il brower, e mi da la pagina con l’elenco dei file presenti nella cartella. Se lo avvio da lì poi si visualizza, però non funzionano i link. E’ un vero peccato, perché devo dire che hai fatto un bel lavoro e lo volevo integrare in un sito che ho in amministrazione. Grazie comunque per l’attenzione e la pazienza.

    Cita / Quota
  40. Marco

    Ho fatto un video, così tanto per farti vedere cosa succede. Forse potresi avere piu in là altri utenti con lo stesso problema, magari riesci a capire da cosa deriva ciò. E risolvere questo inconveniente.

    Cita / Quota
  43. Marco

    Già, me ne ero dimenticato che avevo aggiornato solo quello del browser. Infatti ora funzia. hehehe, che stupido :? Grazie di tutto, e ancora complimenti!

    Cita / Quota
  45. cerry

    Ciao julius volevo chiederti una cosa,
    è possibile utilizzare dei bottoni in flash al posto delle icone png?
    ti ringrazio in anticipo e complimenti…..

    Cita / Quota
  46. Julius

    @cerry si dovresti provare a creare i pulsanti e richiamarli nel file XMl al posto delle icone .png

    dovrebbe funzionare…

    Cita / Quota
  47. cerry

    in che modo?
    tipo: _root.bottone

    o richiamando direttamente l’swf contenente il bottone?(bottone.swf)

    nel secondo modo non esce nulla…
    grazie ancora

    Cita / Quota
  48. Julius

    Tu mi hai chiesto se si possono visualizzare dei pulsanti in flash al posto delle icone png

    Quindi invece di caricare png esterne carichi swf esterni…

    Nel file XML vai a scrivere il nome dell’swf del pulsante…

    Ovviamente non vedrei l’evento rollover in quanto l’swf pulsante viene caricato in un clip filmato su cui vengono gia inseriti eventi

    Cita / Quota
  49. Jo

    Ciao Julius,
    una domanda stupida, scusami ma nn sono tanto pratico. La mia curiosità è qst:
    Ho un file html ke richiama il file menu.swf, ora se i 2 file si trovano nella stessa cartella funziona ma se l’html richiama il filmato menu.swf da una cartella menu1/menu.swf non funziona più. xke??? sto uscendo pazzo!
    dove sbaglio?

    Cita / Quota
  50. Julius

    Devi far attenzione ai percorsi…

    se sono nella stessa cartella nell’html richiamerai, a seconda del tuo modo di pubblicazione, ovvero con i tag object o lo script

    menu.swf

    se l’html è in una cartella inferiore

    nome_cartella/menu.swf

    se è in una cartella superiore

    ../nome_cartella/menu.swf

    se hai ancora il problema linka la pagina html qui o in mail…

    Cita / Quota

Commenti