iTunes Menu in Flash

- Letture: 7.223

La mia ricerca di applicazioni flash non si ferma mai, ed ecco una simulazione del menu stile iTunes in flash.

Il risultato è molto soddisfacente, ho modificato un pò il codice e più avanti implementerò altre opzioni.

Itunes Menu in Flash

Le cover vengono prese da una cartella esterna tramite un file XML, ridimensionate e posizionate nel menu iTunes.

Andiamo a vedere insieme il codice XML

<albuminfo>
<artLocation>cover/3.jpg</artLocation>
<trackName>Robbie William</trackName>
<artist>Intensive Care</artist>
</albuminfo>

  • artLocation: Percorso della cover
  • trackName: Titolo album
  • artis: Nome dell’autore

iTunes menu è disponibile solo per la versione 8 di Flash

Scarica il sorgente
Guarda il Tutorial

Implementazioni aggiuntive

  • Guarda il Tutorial iTunes Menu con link dinamici
    (Nel file .ZIP troverete la versione con i link dinamici)

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.

242 Commenti

  1. Bellissimo. Sarebbe carino se cliccando sull’immagine partissero i corrispondenti video musicali o cmq dei video non credi ;)

    Ciao Grande Julius

  2. Bella Julius….!Complimenti!Cmq goditi le vacanze….poi ci stupirai ancora per mesi anni e anni ancora….:p

  3. Se è tutta farina del tuo sacco,….mi tolgo cappello, mutante, rompo la tastiera, e strappo tutte le frame della TimeLine di Flash.
    (°o°)
    ooo00ooo

    VERMENTE BELLO MA BELLO. Rempox

  4. Ciao Rempox,

    diciamo che è farina mischiata, ho ottimizzato il codice, introdotto altre cose e tolte altre…

    In seguito inserirò la possibilità di sentire audio oppure video ora vedo…

    Grazie per la visita

  5. Massimiliano

    Ciao Julius… a costo di essere ripetitivo COMPLIMENTI per tutto quello che offri attraverso questo tuo spazio…Suggerimenti, consigli e soluzioni molto utili!! :)
    Innanzitutto ti auguro buone vacanze, che un po’ di riposo distante dai computer macchine fa sempre bene al fisico e alla mente!!
    Non vorrei quindi disturbarti, ma ho un piccolo problema col .fla di questo post, o meglio con l’.swf!! (O forse col file xml!!) … mi spiego meglio.
    Hai provato ad aprire il file .xml ed a scrivere, ad esempio, madonnà o m’adonnà? :S
    Succede un po’ un casino con i caratteri speciali!!
    Ho provato in tutti i modi a me noti, e forse noti anche alla guida ufficiale di AS2.0 (incorporazione caratteri, modifica file system dei caratteri, etc.etc…)…Ho provato a determinare il file xml sia come Unicode, che come UTF-8 … Ho provado ad inserire stringhe di qualsiasi tipo in ogni livello ma niente… Ho provato anche ad integrare il codice del lettore qui I-tunes con quello del tuo intervento sulle ”news” che scorrono orizzontalmente, dove, correttamente lo script permette la lettura dei caratteri speciali, ma non cambia assolutamente nulla… :(
    Sto impazzendo, e come sempre in questi casi la soluzione deve essere la più semplice possibile!!
    Beh, ad ogni modo, termino con le lagne e, siccome credo che il problema sarà presto di comune dominio, e anche a te sarà necessario risolverlo, beh, se quando hai due minuti ci dai un’occhiata…
    Grazie mille anticipatamente!! E complimenti ancora (anche per il tuo sito!)!!
    Ciao! :)

  6. Bellissimo! Veramente. Non capisco però dove devo inserire il link per andare in un altra pagina. Mi spiego meglio: è possibile cliccare la copertina e andare in una pagina interna?

    Mi potresi aiutare a capire meglio?

    grazie!

  7. Aggiungo un suggerimento. Ho visto che hai postato una recensione del sito AllCdCovers. Se hai notato, hanno reso disponibile un API per il retrieve delle covers. Bè… non sarebbe male integrare il tuo iTunes menu con tale sistema, no? ;-) Se ne potrebbe fare anche un plugin per WordPress ad esempio…
    S.

  8. Grazie mille per la tua risposta! Ti auguro buone vacanze… Aspetto il tuo tutorial…
    Serena

  9. Inserita l’opzione di un link dinamico, riscaricate i file sorgenti alla fine dell’articolo.

    @sirjoe grazie per la segnalazione :)

  10. ho scoperto da pochi giorni il tuo spazio e sicuramente diventerò assiduo frequentatore. complimenti ;)
    perché non inserire in questo menu dei controlli audio completi (scorrimento, volume…) in modo da renderlo un player a tutti gli effetti?
    a presto…

  11. @Irns ciao

    l’intenzione è quella, ma ho notato che il menu per ora preleva molta CPU tocca quasi il 100%, appena risolvo questo bug, inserirò un player…

    saluti

  12. Julius ti ripropongo le mie idee ( che io non so realizzare)
    1) Farla funzionare come player video
    2) aggiungere l’opzione per vedere l’immagine in grande con javascript

    Chiaramente la prima opzione vale per i video la seconda per un book fotografico

  13. giaguaro99

    ciao julius ti faccio i miei complimenti sei un grande volevo chiederti per quanto riguarda itunes menu con i link ho provato in tutti i modi non sono riuscito a farli funzionare non mi si aprono le pagine che linko. è giusto così?

    cover/1.jpg
    gigi

    http://juliusdesign.wordpress.com/

    dove sbaglio? forse perche per creare il filmato uso flash cs3? puoi mettere nel blog un filmato con link funzionante? grazie in anticipo ciao

  14. giaguaro99

    grazie julius adesso i link funzionano pero con explorer la cpu quasi si blocca non gli va a genio questo menu solo tu puoi risolvere il problema ancora grazie ciao

  15. Per la prima domanda ci sto lavorando, per la seconda invece puoi provare cosi

    Crea un interpolazione di movimento dal frame 1 al frame 20
    Ora inserisci sul tuo ultimo frame, ovvero il 20° il codice

    this.onEnterFrame = function() {
    this.prevFrame();
    if (this._currentframe == 20) {
    delete this.onEnterFrame;
    }
    };

    Quando il frame risulterà il 20°, sarà azionata un azione che avrà l’obbiettivo di riportare indietro le animazioni della linea temporale

  16. giaguaro99

    grazie julius per la disponibilita ma come fai? sei più di uno? comunque con flash non riesco a fare niente è troppo complicato con swish me la cavicchio se puoi aiutarmi con swish è moooolto meglio vorrei che in mouseover partisse un swf e on mouseout tornasse indietro al contrario si puo fare? a dirlo è facile ma a farlo….sempre grazie in anticipo ciao

  17. FRDESIGN

    Ciao Julius, inanzitutto complimenti! Ti volevo chiedere come importare in un filmato con stage più grande, il menu itunes. Se ci provo, si sposta la maschera delle cover e non le vedo. Spero di essere stato chiaro :) grazie in anticipo!

  18. @giaguaro99

    Ciao alla domanda come fai? ti rispondo “con PASSIONE” e a “sei più di uno?” no sono solo io :)

    guarda questo piccolo esempio che ho fatto ora Scarica Esempio

    @FRDESIGN

    ciao fai cosi:

    Crea un clip contenitore di nome istanza box ( è solo un esempio )

    e poi nel tuo frame inserisci

    //Carico il menu iTunes nel clip di nome istanza box
    loadMovie("itunes_menu.swf", _root.box);
    //tutti i riferimenti a _root nel filmato caricato punteranno a _root del loader anziché a _root del filmato caricato:
    _root.box._lockroot = true;

  19. Massimiliano

    Ciao Julius, ben tornato dalle vacanze, che spero siano state belle; hai novità col mio problema con i caratteri speciali?? ‘sto lettore iTunes non ne vuole sapere di caricare accenti o apostrofi dal file xml!! :(
    Sempre grazie per l’attenzione!!

  20. Cioa Massimiliano,

    Grazie si tutto bene.

    Scusa ma mi ero dimenticato :P

    Ho riguardato bene ed ecco come ho risolto…

    Rendi i campi di testo dinamici compatibili a HTML e incorpori i caratteri includendo la PUNTEGGIATURA..

    Ho aggiornato i file sorgenti a fine articolo se vuoi scaricare e vedere.

  21. Massimiliano

    GRAZIE JULIUS!!! :)
    Davvero impensabile per me che fosse tutto in quel comando!! Era un bottone che non capivo a cosa servisse!! Praticamente rende l’swf come un decompiler di linguaggio html, che quindi interpreta ciò che è tra come testo formattato?? :S
    Grazie ancora Julius!!
    Io ho iniziato da un paio di mesi con flash… Ho fatto qualcosa con swish, ma mi moso subito accorto che è mooooolto limitato e limitante…Per adesso uso la versione di prova di flash che ho trovato su una rivista, istallando e disistallando di continuo :P credo però che è un programma davvero infinito… che vale la pena di acquistare!!
    E penso pure che tornerò spesso a scocciarti!! :) …se non disturbo!! :(
    Ciao Julius… E grazie ancora mille!!

  22. giaguaro99

    sei gentilissimo come al solito se ero una donna mi sarei gia innamorata di te! purtroppo adobe flash per me è quasi arabo ho usato tanti programmi nella mia vita ma mai ho visto un programma più complicato di questo con swish riesco a fare qualcosa l’ hai mai provato? posso mandarti un filmato flash per applicarmi l’ effetto contrario con swish? ultima domanda dove posso trovare dei buoni tutorial per flash in italiano? soprattutto le basi ciao e grazie mille

  23. FRDESIGN

    Ciao Julius, inanzitutto grazie per avermi risposto. Ho provato a bloccare il livello _root dell’mc contenitore, ma la maschera si sposta sempre. Se hai tempo e voglia riesci a mandarmi un esempio in cui il menu itunes è caricato al centro dello stage il quale ha dimensioni 1000×800 ad esempio. Grazie in anticipo.
    FR

  24. giaguaro99

    ottimo julius era proprio quello che mi serviva come al solito hai fatto centro mi potresti spiegare passo passo tutta la procedura? come si fa con i bambini piccoli? sopratutto come si fa a editare gli swf su flash? grazie tantissime.
    poi volevo segnalarti una galleria molto carina se hai voglia e tempo e volessi modificarla per i comuni mortali…..http://www.swishzone.com/products/sites/site94/index.html ciao e grazie

  25. Il codice è lo stesso che ho scritto per FRDESIGN

    Crea un clip contenitore di nome istanza box ( è solo un esempio )

    e poi nel tuo frame inserisci

    //Carico il menu iTunes nel clip di nome istanza box
    loadMovie("itunes_menu.swf", _root.box);
    //tutti i riferimenti a _root nel filmato caricato punteranno a _root del loader anziché a _root del filmato caricato:
    _root.box._lockroot = true;

  26. Ciao Julius,
    complimenti per l’ottimo lavoro e per la passione che hai….
    volevo chiederti cosa dovrei settare se volessi il menù più piccole, cioé al posto di mettere le immagini a 250 x250 per esempio settarle a 120 x 120!

    ti ringrazio, un saluto dalla Svizzera
    ciao

  27. lucabaldo

    Ciao Julius ho utilizzato il tuo menu i tunes in questo modo (andranno sostituite le immagini a tempo debito) ma dato che assorbe troppa cpu al sistema, ora come ora nn è utilizzabile, navigando nel tuo sito o visto questo: http://braingiants.com/ l’esempio che mi interessa è: SCROLLMENU, mi piacerebbe utilizzarlo come menu di navigazione, il mio problema è come linkare sulle immagini alle varie sezioni del sito… mi puoi dare tu un consiglio?

    GRAZIE E COMPLIMENTI PER IL TUO LAVORO!!! DAVVERO OTTIMO

    Luca

  28. @lucabaldo,

    se vedi quando clicchi esce una frase, quella frase dovrebbe essere impostata da qualche parte…

    utilizza quella per inserire un link e poi utilizza la funziona getURL

    PS: ho dovuto togliere il link =P

  29. Ciao Julius! cheddire…sei incredibile!
    Sono alle prese con l’ormai famosissimo ITunes menu.. non riesco ad inserire il linkcome dal tuo esempio…holettoche ilcodice è lo stesso edi riscaricarlo alla fine dell’articolo….scusami ma non l’ho trovato :P.

    Mi potresti dare una mano?

    Grazieee

    die

  30. Ciao diego se riscarichi il file .zip con i sorgenti dovresti trovare itunes_menu_con_link.fla

    quello è l’esempio iTunes con i link

  31. grazie mille! non vedo l’ora di vedere le nuove versioni di questo menu!
    MITTICO!

  32. riccardo

    ciao! avrei le stesse esigenze di FRDESIGN ma non riesco a creare l’swf del menù stile itunes con uno stage di 800×600 o superiore, nemmeno dopo il tuo suggerimento! riesci a postare qualcosa da “studiare” per i newbee come me??
    perdonate la mia ignoranza, ho iniziato da poco a usare flash :-)
    grazie mille, spacchi veramente, continua così

  33. Ciao Julius questo menu è davvero incredibile ma ho un problema, anzi 2
    1) Se voglio cambiare dimensione delle foto ad esempio formato verticale di 324×470; lo riesco a modificare dove c’è :
    var frontCDWidth:Number = 324;
    var frontCDHeight:Number = 470;
    ma perdo parecchio di effetto, del tipo a destra non vedo + le foto ma si interrompe con quella centrale.
    2) usando lo script per lo stage a te già noto:
    Stage.align = “”;
    Stage.scaleMode = “showAll”;
    non visualizzo + niente nell’html.
    Spero di essere stato chiaro.
    Mi potresti aiutare? GRAZIE

  34. ah dimenticavo che lo stage è di 800×600 te lo dico perchè potrebbe essere uno dei problemi, grazie ancora

Commenti