In questo Tutorial impareremo a realizzare un pulsante stile web 2.0 utilizzando solo Flash 8

button_flash_web20.jpg

  • Creiamo la base circolare
  1. Dal pannello Strumenti scegliamo lo Strumento Cerchio, dimensioni 16×16
  2. Ora trasformiamo il nostro grafico in un clip filmato [tasto rapido F8]

 

  • Applichiamo il Filtro di Bagliore interno al clip filmato

  1. Bagliore interno colore: #FFFFFF
  2. sfocaturax 22
  3. sfocaturay 22
  4. Intensità 100%
  5. Qualità Alta

  

  • Applichiamo il Filtri di Bagliore al clip filmato

  1. Baglire interno colore: #0066FF
  2. sfocaturax 5
  3. sfocaturay 5
  4. Intensità 100%
  5. Qualità Alta

 

  • Creiamo l’ombra sfumata ovale

button_flash_web20_step3.jpg

  1. Dal pannello Strumenti scegliamo lo Strumento Cerchio, dimensioni 13×10
  2. Applichiamo una sfumatura dal alto in basso, da bianco #FFFFFF ALPHA 0% a bianco #FFFFFF ALPHA 80%

Scarica il sorgente
Guarda il Tutorial

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.

18 Commenti

  1. caio julius stavo provando a seguire il tuo tutorial però mi sono bloccato quando inizia il passaggio “”Creiamo l’ombra sfumata ovale”” non ho capito bene cosa fare devo creare un ovale bianco?

  2. @Antonio si sarebbe quel cerchio sfumato trasparente che vedi sopra la scritta Julius
    Crea un cerchio che avendo dimensioni 13×10 diventerà ovale.
    Infine applica una sfumatura dal alto verso il basso, da bianco #FFFFFF ALPHA 0% a bianco #FFFFFF ALPHA 80%
    comunque trovi il sorgente, cosi da poter vedere come è realizzato
    ciao

  3. il tutorial è veramente bello.
    ma perche hai definito questo stile al web 2.0 ?
    grazie della curiosità

  4. Ciao Pacio,

    come tu ben saprai il Web 2.o ha delle caratteristiche grafiche e stilistiche ben note, come ombre interne, lineamenti leggiadri, colori pastellosi e molte altre finezze…

    Questo è un semplice esempio di un pulsante con caratteristiche simili alla filosofia web 2.0

  5. potresti darmi qualche fonte o link dove leggere sulle caratteristiche grafiche e stilistiche del Web 2.o ?
    ho cercato molto ma l`uniche informazioni che ho trovato parlavano della rivoluzione che sta avvenendo sulle modalita` di utilizzo ecc del web 2.0 ma niente approposito dei nuovi stili e gusti grafici.
    grazie Julius

  6. ciao julius, complimenti innanzitutto.
    vorrei creare per il mio sito dei pulsanti che si animano al passaggio del mouse.
    utilizzo FREEWAY 5 PRO ed un mac per il sito.
    con questo programma posso fare il rollover ma passa bruscamente da un colore o forma del tasto all’altro.
    vorrei dargli più armonia nel passaggio del mouse.
    come posso fare?
    grazie

  7. Scusate un momento… ammetto di essere alle prime armi con flash, ma come fa diventare bello il pulsante?
    Io seguo le indicazioni alla lettera ed il mio risultato è un pulsante orribile, come il movie clipe del file sorgente chiamato pulsante… come fa a diventare poi invece bello come quello raffigurato?

    Grazie

  8. @Luca… ho “quasi” lo stesso tuo problema.

    Nel senso che non riesco neanche a completare l’esercizio.

    Non ho la minima idea di che cosa significhi: “Applichiamo una sfumatura dal alto in basso, da bianco #FFFFFF ALPHA 0% a bianco #FFFFFF ALPHA 80%”. Come si faccia, dove si clicchi, partendo da che per arrivare dove.

  9. Più ke altro in cs4 se lo converti in MovieClip come fai a dargli dei filtri??? a me li fa dare soltanto ai pulsanti!!!

  10. Rosa blu

    C’è qualcosa che non è spiegato, perchè non viene uguale! Perchè fare un tutorial se poi il risultato con corrisponde? No ha senso! Non voglio esere scortese, tutt’altro … voglio solo capire perchè non c’è l’effetto lucido!

    Baci8

    Rosa blu

  11. ciò messo un pò a capirlo anche io, ma alla fine basta che ingrandisci e viene perfetto.

    Mancava solo di dire questo.

    Praticamente quando lo fai te lo fa fare minuscolo… prova e vedrai

  12. Rosa blu

    Io l’ho disegnato con le misure che dice Julius, a cui devo fare i miei complimenti perchè è un grande grafico, si vede che ci mette passione … mi viene chiaro … non ci sono le sfumature … uff risprovo a fare tutto dall’inizio!

    Baci8

    Rosa blu

  13. Rosa blu ha scritto:

    Io l’ho disegnato con le misure che dice Julius, a cui devo fare i miei complimenti perchè è un grande grafico, si vede che ci mette passione … mi viene chiaro … non ci sono le sfumature … uff risprovo a fare tutto dall’inizio!

    Baci8

    Rosa blu

    Non serve che ricominci da capo, basta solo che lo ingrandisci.
    Ovviamente non puoi lasciarlo a 16×16 px

  14. Francesca

    Ciao, navigando sono capitata qui. Vorrei sapere come posso creare dei pulsanti di condivisione… come in questo caso:http://www.lagattasultettomilano.com/ ed inserirli sopra l’header centrati?. Mi devo creare l’immagine con photoshop o altri programmi?. Grazie.

Commenti