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, complimenti per il tuo lavoro di diffusione. Mi piace molto questa galleria, avrei un paio di domande da farti se riesci a rispondermi. ho messo un esempio del menu qui: CLICCA e come vedi le foto verticali vengono schiacciate. Non c’è mica un modo di avere una dimensione dinamica, ad esempio regolando l’altezza della foto e basta? Poi, nel link ho messo la foto ingrandita, non c’è il modo di inserire dopo il link questo codice -onclick=”return iPop(this.href)”-? Così potrei utilizzare i javascript che apre una finestra delle dimensioni della foto.
    Grazie

  2. Si potrebbe modificare il link utilizzando un effetto Lightbox

    la logica è identica a questo tutorial

    Per le foto schiacciate invece dovresti cambiare le dimensioni del clip contenitore che trovi sullo stage

  3. ciao, grazie della risposta. Ok per l’effetto lightbox, anche se più in avanti vorrei far aprir una pagina asp dinamica con la foto.
    Ma per il ridimensionamento del clip: anche se cambio le dimensioni io ho foto sia orizzontali che verticali, se ottimizzo per le orizzontali vengono schiacciate le veritcali e viceversa…

  4. Ciao Julius e complimenti per questo tutorial :)
    una domanda, come posso fare per inserire questo menù in un altro filmato flash?grazie :)

  5. neapolis

    Grande Julius,
    ho inserito in iTunes Menu con link dinamici un file sonoro.
    Essendo i link esterni al mio sito ed inseriti nel codice XML come posso fare a fermare l’audio quando si clicca su di essi?
    Ti ringrazio,
    con tanta stima Neapolis

  6. @Tosk ridimensiona le immagini non in base allo stage ma al clip contenitore

    @Carmelo devi incorporare l’swf con il metodo _lockroot che ora in adobe cs3 non so bene come sia diventato…

    @neapolis ciao

    al click puoi inserire un comando per stoppare i suoni cerca la classe sound();

  7. ciao, non ho capito….
    al momento il problema è che alcune sono orizzontali, mentre altre sono verticali, ma il filmato flash le ridimensiona tutte uguali, non in proporzione, ma a misura fissa. Ho modificato il clip contenitore e quelle orizzontali vengono perfette, mentre quelle verticali vengono schiacciate. Se ridimensionassi in maniera verticale presumo verrebbero magre le orizzontali….

  8. Ho capito purtroppo essendo pensato come cover, le immagini vengono proporzionate in maniera uguale su tutti i lati…

    Prova ad adattare le immagini invece del clip in quanto è stato progettato per rendere le dimensioni in proporzioni

  9. ciao, grazie ancora. immaginavo questo “limite”. Non sarebbe un problema rifare le foto tutte quadrate…se non ne avessi già parecchie centinaia! Quindi ho provato a utilizzare uno script asp.net che trasforma tutte le foto e le rende qadrate, tagliandole. Purtroppo ancora il flash “non digerisce” le immagini così create e non le carica dentro il filmato.
    Esempio . Conosci mica questo script? Comunque penso di orientarmi verso un’altra delle gallerie da te condivise, questa impacca un po’ il pc. ciao

  10. Ciao Julius,
    molto bello il menù!
    potresti dirmi come si fa a far aprire il link non in una finestra esterna ma nella stessa.
    Grazie

  11. Grande Julius, fantastica gallery…..!
    Solo una domanda:
    come mai il movimento è fluido sia su Safari che su Firefox,
    ma ha dei problemi su Explorer, indipendentemente dal fatto che si usi mac o pc. Potrebbe dipendere dallo script (…delay…) presente nel .fla….?

    Ti ringrazio comunque.
    Ciao, Vink

  12. @Tosk non conosco, comunque si in effetti questo progetto richiede molta CPU

    @ivan cambia il parametr nella funziona getURL

    invece di _blank utilizza _self

    @Vink si questo progetto ha uno script danneggiato e va in loop per quello richiede molta CPU…ma non mi sono mai messo a studiarlo bene

  13. paololosco

    allora… no, in realtà, concettualmente… il menu in se va bene cosi, solo che, essendo l’immagine “selezionata” in primo piano, larga come tutto lo stage, ovviamente si vede il movimento tra l’una e l’altra, ma il clic sulle immagini in secondo piano non c’è più (pichè le immegini restano DIETRO) e fin qui è quello che voglio e l’ho fatto!

    ora: vorrei praticamente “duplicare” il menu, mettendo sotto una striscia (magari a scorrimento o semplicemente con “next 8” e “prev 8” se le immagini sono più di 8) con lo stesso collegamento che avrebbero le immagini nel menu originale (quindi, se sono alla numero 2 e clicco la numero uno delle thumb, si sfoglia solo un’immagine, se clicco la numero 8, si sfogliano tutte le immagini per fermarsi all’ultima…) è fattibile con “poco sbattimento” ??? (ma anche se lo sbattimento è un po’ di più…)

    spero di essere stato chiaro nella spiegazione! (ho visto che su html.it mi hai risposto ma non ero stato chiaro io e a quello che mi hai scritto avevo già provveduto in precedenza… mea culpa!)

    grazie mille per l’attenzione in ogni caso

  14. in this itunes-menu-in-flash, when iam giving & parameter url its showing error in xml.. for example

    http://aetna:8080/params.jsp?a=1&b=2
    output in browser
    http://aetna:8080/params.jsp?a=1&b=2

    and in same xml when i giving &
    http://aetna:8080/params.jsp?a=1&b=2

    output in browser
    http://aetna:8080/params.jsp?a=1&amp;b=2

    i also used

    then also the same problem
    julius can u show mw the coorect way of doing this, so it not show the & in output url.

    because in my jsp page output is not coming correctly due to &amp:
    i need that it not change & to & in url thats all.

    Thanks,
    neeraj

  15. sorry JULIUS but this article doesn’t help me

    can we not write anything in Action Script, that will parse xml url correctly(as it is) without conveting & to & in URL(browser).

    URL inside XML
    http://aetna:8080/params.jsp?a=1&b=2

    url after click on flash app. ( output in browser IE + Firefox )
    http://aetna:8080/params.jsp?a=1&b=2

    is it Action Script can do any thing in it.did i hav to change anything in urs script.

    beacuse here iam genearting xml dynamically from java server

    tell me if any other way is there in Java.

    Thanks

  16. ok no prob i solved that issue using %126 in place of &.
    now it is coming perfectly.

  17. ok just answer my this problem we see later above one

    let me giv some detail abt my project.
    i removed the below scrubber and using only left right buttons for navigation.
    so can i disable or hide one of them left & right buttons when its goes to last child or say last image from anyside.
    so user know that there is no image left more to click or shwn left.

    julius plz Post the Action Script
    in waiting of ur reply

    help me in that
    Thanks
    neeraj

  18. ok just answer my this problem we see later above one

    let me giv some detail abt my project.
    i removed the below scrubber and using only left right buttons for navigation.
    so can i disable or hide one of them left & right buttons when its goes to last child or say last image from anyside.
    so user know that there is no image left more to click or shwn left.

    julius plz Post the Action Script
    in waiting of ur reply

    help me in that
    Thanks
    neeraj

  19. Ciao Julius, sei proprio bravo e sei un punto di riferimento.
    Scusami se ti tedio con una domanda.. volevo mettere l’itunes menu su myspace ( ho visto che anche altri hanno avuto il mio stesso problema) ma se metto nell’xml il precorso assoluto nelle immagini – che risiedono sul mio server – non vengono visualizzate..
    Ho provato e riprovato .. ma niet..
    Potresti dirmi cosa modificare?
    Ti ringrazio tantissimo.
    Ciao Giò

  20. ciao i complimenti sono ovvi per il grande lavoro…

    vorrei chiederti se è possibile rendere le immagini linkabili direttamente eliminando il pulsantino play, in modo che cliccando sull’immagine si vada direttamente al url indicato nel xml

    grazie per le risposte…

  21. Riscrivo un mio suggerimento di tempo fa:
    credo basti creare un pulsante trasparente con dimensione della cover, e sovrapporlo alla cover nel centro e poi metti le stesse azioni del play

  22. ho provato è la prima idea che ho avuto ma il pulsante nonostante fosse al primo livello si porta ion secondo piano dietro la foto e quindi non cliccabile…

  23. ciao Jiulius ho un stage in flash di 985px…avrei bisogno di centrare il tutto come devo modificare il codice?
    ho provaato a modificare i parametri qui sotto ma nn si allineano le img….help! :) grazie
    var centerX:Number = Stage.width/2;
    var centerY:Number = 100;

  24. quando si pubblica un lavoro di un altro sarebbe corretto pubblicare anche il nome
    Stephen è un genio, e il suo lavoro va riconosciuto, non copiato

    cordiali saluti

  25. @plagio ciao forse non conosci Julius…

    Julius in questo articolo non prende i meriti ma bensì cerca di aiutare chi vuole usare questo progetto che tra l’altro si riferisce a un’applicazione realizzata da n99creations (forse lui reo di plagio?)

    E poi il tuo Stephen è citato anche in questo articolo CoverFlow Flash: Raccolta Tutorial e Progetti

    Mi ha aiutato molto Julius e quando leggo questi messaggi cosi scritti tanto per’ ….perdo le staffe…

  26. leggi bene quello che ha scritto a inizio articolo
    /*
    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.
    */
    non vedo da nessuna parte il nome dell’autore, una segnalazione sarebbe stata il minimo, e leggi anche i primi commenti, ma scherziamo? come minimo al primo GRANDE, urgeva una segnalazione, che non c’è stata,

    l’originale non è di nathan (n99creations), il suo progetto si chiama coverFlow, l’approccio è simile, ma il file originale in questione è per l’appunto di stephan, documentati prima di scrivere

    l’articolo da te citato è del febbraio 2008, un po’ in ritardo…

    una cosa è aiutare su lavori in genere, altro è spacciare per propri lavori di altri, e leggendo questo articolo mi sembra evidente che l’intento è quello

    questo non fa bene alle persone che lavorano credendo nell’open source e nella condivisione di idee, fa solo passare la voglia

    tu perdi le staffe per quello che ho scritto, io per quello che ho visto in questo sito, ripeto, tutto ciò non è corretto, o è scritto in modo tale da lasciare spazio alla… fantasia, un po’ di umiltà (o onesta) sarebbe opinabile

    cordiali saluti

  27. Penso che la tua sia una critica costruttiva, ma ti puoi chiamare plagio come nik? cioè gia fai capire che non proprio leale..nel senso che sò poi magari sei il primo che chiede aiuto a jiulius e lui te lo da…va be questo non c’entra…

    Invece di criticare tanto fatti un giro sul blog è guarda come si sbatte per gli altri senza chiedere mai niente in cambio…

    Ora non so di preciso magari era in buona fede o magari no, ma non mi interessa, so solo quello che sta facendo, cioè condividere con gli altri le sue esperienze senza chiedere mai nulla in cambio…tu lo faresti? ne hai le capacità?

  28. @sergio

    sì, sergio, e lo faccio, da quasi 10 anni ormai, ma in questo contesto non ho nessun interesse a… dichiararmi,

    il discorso qui è solo uno, non è corretto quello che leggo in questo articolo, e il modo in cui è scritto, se poi julius sia o meno capace di fare un lavoro del genere non mi interessa, mi interessa solo che venga riconosciuto il lavoro altrui, e nemmeno leggo da qualche parte che stephan abbia autorizzato la publiccazione del file su questo sito

    ci sono delle regole ben precise e non documentate, netetiquette, vi dice qualcosa? se non si rispettano queste regole hanno poi ragione gli “ESPERTI” di internet e della rete in genere a denigrarci e sminuire il nostro lavoro

    e non è vero che se prendi da molti è arte, è ben altro, cmq non mi interessa continuare, la taglio qui sperando che qualcosa cambi,

    buona serata

  29. Ciao Julius,
    sono nuova di questo forum…e volevo farti i complimenti per la galleria fotografica davvero un ottimo lavoro!
    Vorrei chiederti però una cosa: ho inserito il tuo menu i tunes nella pagina discografia di un sito che sto realizzando però ho un problema, cioè quando dalla discografia torno alla home continua a farmi visualizzare il menù i tunes.
    Ho provato a inserire nel pulsante che riporta alla home il codice on release go to and stop discografia però continua a darmi lo stesso problema…dove sbaglio??
    Mi puoi aiutare??
    Grazie mille!

  30. @sun ciao

    dipende come hai realizzato il sito…

    Il menu come lo usi è inserito nel progetto o viene richiamato esternamente?

  31. Ciao Julis intanto buon inizio settimana,
    ho bisogno di un tuo aiuto urgente…in qs tipo di menu è possibile implementare dei pulsanti (quindi una sorta di al tro menu) che richiami ad esempio le cover di film anzichè solo di cd musicali..come posso fare devo costruire immagino un’altro file xml.. o cos’altro? grazie mille

  32. …ad esempio, sarebbe bello implementare il tuo menu_dock_bar :)
    con iTunes menu.. spero tu mi possa aiutare..cmq.. complimenti davvero !

  33. Ciao Julius,
    intanto grazie davvero per avermi risposto..dunque il menu l’ho inserito direttamente nel progetto, non ho creato un moovie clip..si trova su un fotogramma….ammetto di non essere una grande esperta di flash quindi si accettano volentieri suggerimenti!!!
    Grazie per l’attenzione!

  34. caro Julius, chiedo scusa per prima
    ma cerco sempre di cavarmela d sola
    spesso cerco di cavarmela da sola leggendo i vari post..ma stavolta avevo prorpio bisogno del tuo genio
    il tutorial che mi hai consigliato è andato benissimo
    vorrei solo chiederti come fare per far partire in automatico lo l’autoplay
    grazie ancora..(sto facendo un tour de force al lavoro che manco ti immagini) O__O!!!!!

  35. @sun ciao

    se l’hai inserito sul frame direttamente e hai usato il progetto con il quale usare l’oggetto come menu per altri swf esterni è normale che rimanga sotto…

    Potresti creare una sorte di clip contenitore per gli swf esterni con sfondo cosi da coprirlo e ritornare al menu solo quando fai un back

    @lu ciao

    controlla nel codice con una ricerca [CTRL+F] se trovi variabili tipo autoplay, loop, play ecc ecc

    Appena ho tempo ci do un occhiata..

  36. ho un’altro problema oltre a quello,,, dovrei rendere cliccabile l’anteprima in miniatura… aiut…
    ciao e grazie mille

  37. Ciao,
    complimenti per il blog intanto e per tutte le risorse che offri tutti i giorni ti faccio veramente i complimenti… magari ti chiedo una cosuccia in merito alla linea temporale che va al contrario…

    io ho provato a fare come dici, ovvero

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

    ma quando torna indietro va a scatti..capita solo a me?
    ho provato anche in altre maniere ma niente da fare… scatta all’indietro..si vede che non gli piace prorprio andare all’ indietro.

    grazie
    ciao a tutti

  38. @lu ciao

    l’anteprima vera e propria viene gia selezionata per lo spostamento, quindi se vedi tra le implementazioni ho aggiunto la possibilità di inserire un pulsante con un link esterno da XML

    @alle ciao

    io giocherei più nell’inserire il menu itunes in un clip contenitore e dopo dare una istruzione di unloadMovie al clip in questo modo verrà scaricato il suo contenuto e il clip sarà vuoto

Commenti