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)
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.

242 Commenti

  1. ciao,innanzi tutto complimenti x tutto quello che fai..per noi..cmq ho 2 domande da porti e mi sarebbe utile ricevere una tua risposta
    1) devo realizzare un sito ,solo che lo sto realizzando con dreamweaver…
    come faccio a inserirlo e cosa devo inserire..(il tipo di file)
    2) come faccio a ambiare lo sfondo, cioè mi spiego meglio quando do la sfumatura(siccome lo sfondo del sito è bianco)come faccio a inserire il colore??
    ciao grazie anticipatamente buona giornata

  2. Ciao Loris,

    dai una bella lettura alla guida d’uso di dreamweaver Guida Dreamweaver

    per le prossime volte ti prego di non inserire la stessa richiesta 2 volte, addirittura in una sezione che non c’entra niente, grazie :)

    per i messaggi generici ce la sezione MESSAGGIAMO

    saluti

  3. @volare2000 Le immagini puoi aggiungerle e eliminarle dal file XML

    @daniele ciao controlla di aver caricato correttamente il file XML

    @Anselmo non le vedo tagliate, ma allungate o sbaglio?

  4. e krashnet ???? :-)
    Guarda che chiedo a Nathan hehehehe!
    (azz mi cita per sconsiderata integrazione in myspace) :-)

  5. fabiustek

    Julius.. non so se ti chiedo troppo ma :-) si potrebbe avere x email una copia del tuo menu modificato…? shhh! meglio parlare piano.. il nemico ascolta… x fortuna non sa parlare in italiano… ;-)

  6. @Krashnet se vedi sembra che stia caricando qualcosa che non trova controlla che ci siano tutti i file caricati…

    @fabiustek :)

  7. ciao julius … a parte i complimenti che sono scontati … mi servirebbe il sorgente della versione con i link … ovvero quando mi mette in primo piano la copertina che avesse un link o ad un video o ad altra appliccazione in modo da far aprire qualcosa …

    dove lo trovo?!?

    ciao e grazie

  8. Ciao,

    scusate se insisto… a me sembra moooolto lento..

    Con explorer mi segnala anche un errore: swfobject non definito…

    Come mai?
    Cosa Sbaglio?

  9. salve a tutti e un grandissimo grazie a Julius che ci mette a disposizione le sue idee, i suoi progetti e quant’altro.
    Una domanda è forse possibile avere ” I Tunes menu in flash” ????
    Se c’è qulache anima pia lo ringrazio anticipatamente e nel caso volesse farmi questo regalo il mio indirizzo è: mauroadsl@tele2.it
    Un caro saluto a voi tutti
    Mauro

  10. @Mauro :)

    @Dario per la lentezza ti do ragione, per l’swfobject non definito controlla di averlo nella stessa cartella e di averlo caricato sul tuo spazio web…

  11. Ciao Julius,

    ho controllato e ricontrollato… tutto è al posto giusto…

    Ecco la mia inclusione:

    var so = new SWFObject(“images/up/newsletter/home/itunes_menu_con_link_regalo.swf”, “mymovie”, “500”, “300”, “9”, “”);
    so.addParam(“quality”, “best”);
    so.addParam(“wmode”, “transparent”);
    so.addParam(“salign”, “t”);
    so.write(“flashcontent”);

    Sbaglio Qualcosa?

    Nella cartella HOME ci sono: flashobject.js e il file .swf
    In COVER ci sono le immagini e il .XML

    AIUTOOOO

  12. Ciao Julius,

    dato che il sito è online, ed è commerciale, non vorrei pubblicizzarlo sul tuo sito.

    Mandami una mail al mio indirizzo: didje@interfree.it e ti dò il ink.

    Grazie mille
    Dario

  13. Niconero81

    Ciao julius, innanzitutto complimenti sei un grande, ed io sono un tuo ammiratore. Mi interessava tantissimo il file sorgente “i Tunes in Flash”, bellissimo, ma non riesco a scaricarlo cortesemente me lo manderesti al mio indirizzo di posta.
    Un enorme grazie anticipato, ciao a presto.

  14. Ciao, potresti controllare il link per scaricare il sorgente?
    Potresti mandarlo al mio indirizzo? ;)
    Saresti gentilissimo :)

  15. Francesco

    Ciao Julius complimenti per il menu davvero grandioso. Volevo chiederti se per caso si poteva averne una copia. Grazie in anticipo

  16. ciao jul, anche io una piccola domanda.
    è complicato inserire nel LOADING una percentuale del caricamento?
    grazie!

  17. Ciao Julius, innanzitutto volevo complimentami per il tuo nuovo sito!
    …e volevo chiederti una cosa…
    tempo fa avevo scaricato l’iTunes Menu con l’url che portava ad una pagina web
    a me servirebbe invece un link che porti ad un “file.swf “del sito stesso
    ho provato in tutti i modi a modificare sia il codice nel file.xml sia lo script del file.fla …ma non c riesco!
    come fare? aiuto
    per favore una piccola manina sarebbe tanto gradita, grazie

  18. Cristian

    Ciao avrei bisogno di un aiutino. E’ da un po di tempo che sto cercando risposta a questo problema. Vorrei realizzare un menù tipo questo per presentare de quadri che hanno dimensioni diverse fra loro. C’è un modo per impostare tramite xml le dimensioni per ogni quadro? Mi sapresti aiutare? Grazie.

  19. ciao e complimenti x il sito e per i contenuti…volevo sapere se è possibile trasformare il menù verticalmente in modo da avere sopra e sotto la fotoo precedente e quella successiva…..grazie :)

  20. @franc3s ciao, basta associare a un testo dinamico il numero progressivo della percenuale di caricamento…

    Ti consiglio di vedere alcuni loading e analizzare il codice di alcuni preloader flash

    @chahida il link lo trovi nel file xml, ti basta cambiare quello accertandosi del corretto percorso del file

    @Daniele@Cristian a breve pubblicherò una lista di altri progetti di itunes menu e troverete quello che vi serve..

  21. Giuseppe

    Ciao,
    davvero un ottimo lavoro…una bella applicazione flash.
    Volevo però chiederti una cosa…o meglio un bell’aiuto. Per il contesto in cui vorrei inserire per un amico l’itunes menu (un sito php/mysql) la creazione continua di un file xml non sarebbe la scelta migliore. Vorrei modificare l’actionscrpt in modo che le informazioni invece di trarle da un file xml esistente le prenda da una variabile php passata al flash (ovviamente avente la stessa struttura di quello che sarebbe il contenuto del file xml). Ho fatto qualche tentativo ma non avendo delle conoscenze di flash ho fallito…mi potresti aiutare?. grazie

  22. Lupogiampy

    Ciao, ottimo lavoro…… ho clickato su “guarda il tutorial” ma non vi è spiegazione di come si facciano certe cose…… non è un tutorial è un lavoro regalato…… non ha molto senso regalare lavori……. spiegare cosa si è fatto e parti di codice è un tutorial…..
    Scusa la critica ma io la vedo così…..

  23. Julius intanto complimeti per il sito.
    per quanto riguarda il consumo di cpu ho scoperto che è dato da:
    —this.setTransform(this.px1, this.py1, this.px2, this.py2, this.px3, this.py3, this.px4, this.py4);—-
    nella funzione —function controlTheObject(mc)—
    che viene eseguita di continuo anche a carousel fermo.
    spero di essere stato chiaro…
    al momento però non ho trovato una soluzione valida

  24. Francesco

    Ciao,
    non mi dilungo in complimenti inutili… tanto lo sai benissimo che con queste tue risorse ci svolti l’esistenza… ;)

    un altro utente ti aveva fatto una domanda a cui hai risposto ma che per me che sono un lamerone_lavativo è rimasta un po’ incompresa:

    ho l’esigenza di far si che di ogni album venga visualizzata tutta la tracklist (tutte le canzoni dell’album)…
    a loro volta ogni canzone deve essere un link che mi “poppa” una finestra con il testo della canzone.

    cortesemente mi spiegheresti …il codice necessario e dove piazzarlo?

    grazie infinite
    F

  25. @Renato ciao si avevo notato… si dovrebbe cancellare l’onEnterFrame in questo modo

    delete mc.onEnterFrame

    solo che non ho trovato ancora il punto giusto dove inserire in quanto quelle procedure vengono eseguite per tutta la durata…

    @Francesco diciamo che non è semplicissimo da spiegare oltretutto da realizzare se non si hanno le basi…

    In pratica si deve passare al file xml altri parametri che assumeranno il valore delle track e per ogni album verranno visualizzate e gestite…

    E’ in programma di realizzare qualcosa del genere…

  26. Francesco

    …invece penso che sia una cosa abbastanza semplice se si fa in questo modo…poco ortodosso, ma risolutivo (x me!):

    per il momento io sono riuscito a fare in modo che ogni volta che si spinge il pulsante (quello che preleva l’indirizzo url dal’xml)…viene caricato un mc in cui ci sono le tracklist. Certo questo significa che tutte le tracklist degli album devono essere residenti nell’swf… e il discorso xml perderebbe di senso… ma per quello che devo fare io è ottimo.

    mettiamo che io ho solo 5 album da visualizzare:
    se al frame 5 metto la tracklist del primo album
    al 10 quella del secondo
    al 15 del terzo e così via

    e nell’xml
    tra i tag url passo il valore del mc… 5-10-15….

    per te non dovrebbe essere molto complicato sapere dove andare a piazzare un comando che dice: per ogni copertina gotoAndStop (url).

    sapere questa cosa mi svolterebbe abbastanza l’esistenza… almeno per un certo periodo. ;)
    spero di essermi fatto capire.

    grazie
    F

  27. giuseppe

    caro Julius, bel lavoro!
    ti chiedo dove bisogna intervenire (fammi un esempio se possibile) per:
    a. collegare il pulsante o la foto di itune menu ad un link url (a mervirebbe collegarmi a slideshare dove metto a disposizione lezioni di corsi di aggiornamento)
    b. poter sfogliare le pagine del mio sito
    c. collegare un file mp3 da una cartella del sito
    grazie di cuore giuseppe

  28. emanuele

    E’ possibile inserire un link o un loadMovie sull’immagine quando questa e’ selezionata (cioe’ in primo piano)?

  29. ciao Julius,
    ho ridotto l’uso di CPU quando è fermo spostando
    this.setTransform(this.px1, this.py1, this.px2, this.py2, this.px3, this.py3, this.px4, this.py4);
    dalla sua posizione a questa
    mc.onEnterFrame = function ()
    {
    if (Math.abs(this._x – this.x) > 1)
    {
    this.setTransform(this.px1, this.py1, this.px2, this.py2, this.px3, this.py3, this.px4, this.py4);
    ecc… ecc…

    fa un pò di casino all ‘inizio ma poi va bene.
    Ho modificato anche io un po di codice e potete vederlo su
    http://www.ch-one.tv
    mi dai un tuo giudizio sul sito.
    ciao
    Renato

  30. @emanuele a fine articolo puoi vedere un esempio con LINK

    @renato il livello di cpu io lo vedo sempre alto purtroppo…il sito è carino, ci sono grandi margini di miglioramento…

  31. emanuele

    Posso modificare il pulsante play e sovrapporlo ala foto in modo da avere il link sulla foto o fa confusione?

  32. alessandra

    Ciao Julius,
    per prima cosa mi aggiungo agli altri e ti faccio i miei complimenti per il tuo lavoro e le tue capacità…

    Vorrei utilizzare il menu Itunes con links, ho scaricato il file zip che hai preparato e non vedo funzionare i links pur non avendo modificato niente.
    Ho inserito nella tua pagina itunesmenu.html il file itunes_menu_con_link.swf ( che da quanto ho visto nel fla richiama il file albuminfo2.xml dove tu hai messo degli url) salvo e vado a vedere l’html con i browser sia IE 7 che FF e vedo le immagini e le scritte sopra tutto ok, ma ho cliccato OVUNQUE e non ci si muove da lì, i links non funzionano.
    Mi sai dire perchè? Vorrei fare degli adattamenti per un mio lavoro ma se già non mi funziona il tuo in origine la vedo dura.
    Hai qualche soluzione per me? :-)
    grazie!!!!
    Ale

  33. sorpresina

    Forse fai prima a mandarmi la tua prova e vedo cosa c’e’ di sbagliato e te la rimando corretta per email, o comunque senti julius

  34. @alessandra ciao controlla bene che il file xml abbia il parametro riferito al link sul pulsante del nuovo progetto itunes con link

    Ti ricordo che in locale non funziona in quanto devi abilitare il contenuto

    Se il problema persiste inviami un link al tuo progetto online che controllo

    ciao

    @emanuel ciao in pratica le cover stanno a un livello superiore impostato da AS, per mettere il pulsante sopra devi sempre da as dargli una priorià superiore alle cover..

    ps:grazie per il supporto, fa sempre piacere vedere qualcuno che cerca d’aiutare…

  35. sorpresina

    A suggestion I used with photoflow that you can use also with your script with dynamic links

    You can make the button trasnparent with the same dimension of images and perfectly puttet over so you can create a portfolio with click on images instead of the play button

    Only a suggestion

  36. ciao julius,
    senti trovo lo script molto utile, solo che vorrei kiederti una cosa..
    ma se invece di un’immagine volessi usare semplicemente dei clip con una trasparenza come posso fare?!

  37. Ciao julius, complimenti per tutti i tuoi lavori!!!!
    Ho scaricato questo e lo ho adattato alle mie esigenze. in locale funzione e anche l’html caricato su altervista.
    Una volta caricato swf – cartella Cover – xml – e pure il .js nella stessa directory quando vado a linkarlo a myspace mi appare il box del layout e la scritta di errore caricamento invece che le cover.
    Ho cercato nel Fla standard (quello senza link) una riga nell’action script per modificare la posizione del file xml casomai per mettergli il link da cui caricarlo…ma nn trovo nulla.

    Come posso risolvere?

  38. sorpresina

    Scusate se ho scritto un commento in inglese ero fuori di testa pensavo di scrivere su un altro sito

    Comunque la mia idea era questa sempre che vi piaccia!
    Se uno volesse mettere i link sule cover invece che sul pulsantino play basta creare un pulsante trasparente con dimensione della cover, e sovrapporloo alla cover. Cosi puo’ essere usato come menu magari per una photogallery

    ciao,bravo julius

  39. assa perder

    ciao anch’io ho il problema di Krashnet … non mi vede i file che sono anteposti dal http:// ovvero … volevo usarlo nel mio space e per questo il xml – swf e le varie immagini risiedono su un altro server …

    se nel xml metto come percorso delle immagini il percorso relativo es:

    loghi/1.png

    tutto funziona se lo guardo dal sito ma non funziona sullo space …

    se invece metto il percorso assoluto es:

    http://www.pippo.com/loghi/1.png

    non visualizza nulla ne nel server dove risiede ne tantomeno nello space …

    Visto che ho visto questo “menu” in altri space vorrei sapere come si è risolto il problema.

    Grazie

  40. assa perder

    dunque … per chi fosse interessato è disponibile nel sito http://www.n99creations.com/ una versione chiamiamola 2.0 dove sono stati corretti numerosi bug tra cui il caricamento delle img con http …

    quindi ho risolto il problema :-D

    ciauz

  41. Ciao julius, innanzitutto ti faccio i complimenti per questa sezione di tutorial veramente ottima e poi ti ringrazio (in anticipo) per la tua disponibilità.
    Infatti ho un piccolo problemino…vorrei caricare il filmato swf della gallary in un mc di nome istanza “holder”, ho provato con la soluzione lockroot ma continua a non funzionare..ti posto il codice:

    on (release) {
    loadMovie(“filmati/itunes.swf”, _root.holder);
    _root.centro._visible = false; //metto invisibile l’mc centro
    _root.holder._lockroot = true;
    }

    non so proprio come fare.. :D
    Grazie,
    ciao da Giulio.

  42. :D ok..ho capito che il problema non è impostare il ._lockroot, è che quando carico il menu come swf all’interno di un clip filmato le posizioni delle maschere e delle foto grandi (quelle all’interno del clip di nome istanza box) non vengono più rispettate, appaiono infatti tutte spostate verso destra. Questo pare essere un problema più generale visto che me lo sono ritrovato pari pari in un’altra situazione…non è che sapresti come fare?? aiuto…sto impazzendo!!
    ciao ciao,
    giulio.

  43. Julius
    sono andato a ripescare questo tuo vecchio post perchè oggi metterò in pratica questo menù in flash. Mi piacerebbe sapere una cosa: al posto delle immagini mi piacerebbe caricare dei piccoli video, facendo scorrere, però, delle immagini in miniatura (come nel tuo tutorial) che possano far vedere cosa è contenuto nei vari swf… credi sia possibile?
    Grazie!

  44. ciao gipris =)

    puoi utilizzare la versione che ho implementato con i link

    utilizzi le immagini come anteprime e quando clicchi sul pulsante invece di indirizzare a un link puoi cambiare il getURL con un loadMovie di swf o video

  45. paololosco

    ciao, intanto, complimenti per il blog, davvero, è la prima volta che scrivo ma la n-periodico che lo visito…

    scrivo perchè:

    1- ti ho aggiunto a MSN
    2- sto utilizzando questo script come “slideshow” ovvero il movimento in entrata ma con alcune modifiche: l’immagine “current” occupa tutto il mio stage ad eccezione della barra di navigazione next-prev.

    Avrei l’esigenza di inserire delle thumb (magari ad effetto “entrano quando il mouse passa vicino al bordo inferiore dello stage”… )

    mi ci sto scornando ma finora non riesco a venirne a capo… :D un’aiutino????

Commenti