In questo tutorial vedremo come creare un effetto Flip (Card) con Flash CS3 e ActionScript 3.0 (vedi l'esempio sotto, passando col mouse sulle immagini).



Per prima cosa scaricate qui il file .ZIP/RAR contenente le classi che useremo in questo tutorial.
Dopo aver scaricato il file Zip/Rar, createvi una cartella e estraete il contenuto dell'archivio, dentro alla cartella appena creata e in piu inserite 4 immagini (aventi le stesse dimensioni).
Apriamo Flash > File > Nuovo > File Flash (ActionScript 3.0) e salviamo subito il file nella stessa cartella creata prima.
Apriamo panello Azioni(F9) e inseriamo il codice sotto:

import fl.transitions.easing.*;
import flashandmath.as3.TweenFlipCS3;
var card1:TweenFlipCS3;
var card2:TweenFlipCS3;
card1=new TweenFlipCS3("image1_front.jpg","image1_back.jpg","horizontal");
this.addChild(card1);         
card2=new TweenFlipCS3("image2_front.jpg","image2_back.jpg");
this.addChild(card2);     
setCardsPosAndProps();
function setCardsPosAndProps():void {
   
    card1.x=30;
    card1.y=50;
   
    card2.x=330;
    card2.y=50;
   
    card1.setURL("http://link_image1");
    card1.setFunc(Back.easeOut);
    card1.setSpeed(1.5);      
    card2.setFunc(Bounce.easeOut);
    card2.setSpeed(2);
    card2.setURL("http://link_image2");
}

Naturalmente dovrete sostituire i nomi che ho adoperato io con quelli delle vostre immagini (es: image1_front, image1_back...ecc) e i vostri link con ("http://link_image1").
Salvate tutto e provate il filmato...
Buon divertimento....


Articoli correlati per categorie




 Abbonati gratis a questo blog      

13 commenti

  1. Simone // 13 dicembre 2009 21:22  

    Fantasticoooooooooooo 8-) 8-) 8-)
    Sei grande

  2. Hillary // 13 dicembre 2009 21:30  

    This is a very good tutorial you have here. It is very cool as it explains the fundamental really well.
    I like it,thanks for share.

  3. pgrevolution // 16 dicembre 2009 03:09  

    Fatto tutto preciso pero il file swf se lo lascio dentro la cartella si vede se lo trascino nel desktop fuori dalla cartella  e poi lo apro non si vede piu. Piccolo aiuto grazie
    pgrevolution@libero.it

  4. pgrevolution // 16 dicembre 2009 03:10  

    Comunque bellissimo.

  5. pgrevolution // 16 dicembre 2009 03:12  

    Questo e il funziuonante mentre la foto sopre no

  6. bestar // 16 dicembre 2009 10:51  

    Ciao PGRevolution...
    Quando il file swf e le immagini si trovano nella stessa cartella funziona, perche quello è il path (percorso) impostato.
    Se tu vorresti cambiare il percorso, devi soltanto dire al flash dove caricare le immagini.
    es: mettiamo che vuoi caricare delle foto online, devi cambiare il path(percorso), e il codice diventa
    da:
    <span>TweenFlipCS3("<span style="color: red;">image1_front.jpg</span>","<span style="color: red;">image1_back.jpg</span>","horizontal");</span>
    a:
    <span>TweenFlipCS3("<span style="color: red;">http://www.l'url della foto1.jpg</span>","<span style="color: red;"></span></span><span><span style="color: red;">http://www.l'url della foto2.jpg</span></span><span><span style="color: red;"></span>","horizontal"); e cosi via...
    </span>

    spero di essere stato chiaro....
    fammi sapere...

  7. pgrevolution // 16 dicembre 2009 12:01  

    capito poco non sono tanto ferato in materia
    Mettiamo che io voglio mettere questo flash in un sito
    http://radiocagli.altervista.org
    faccio cosi?
    <span><span>("<span style="color: red;">http://radicagli.altervista.orgdella foto1.jpg</span>","<span style="color: red;"></span></span><span><span style="color: red;">http://radiocagli.altervista.org della foto2.jpg</span></span><span><span style="color: red;"></span>","horizontal")</span></span>
    Gradita risposta
    ringrazio anticipatamente
    bellissimo blog lo usero spesso voglio imparare a usare flash
    cordiali saluti
    PGRevolution
    PS:se hai qualche dritta x i miei siti e tutto ben accetto
    si parte da qui
    http://pgrevolution.altervista.org
    (gia uso qualche programmetto flash ma cose da poco giusto per fare banner e altre piccole cose)

  8. pgrevolution // 16 dicembre 2009 12:07  

    Scusa ma mi e venuto in mente adesso
     devo postare le foto in qualche hosting che mi da l'url?

  9. bestar // 16 dicembre 2009 15:01  

    Ciao pgrevolution...
    esatto....dopo aver caricato le immagini, inserisci l'url come nel tutorial...
    se hai difficoltà, non esitare a chiedere...
    fammi sapere...

  10. Anonymous // 18 dicembre 2009 04:43  

    Mi si sta fondendo il cervello.
    Apro il rar in una cartella ci metto le 4 foto 
    le 4 foto le ho chiamate pari pari come le hai chiamate tu
    <span><span style="color: red;"></span> </span><span><span style="color: red;">image1_front.jpg</span>","<span style="color: red;">i</span></span><span><span style="color: red;"></span></span><span></span><span><span style="color: red;">mage1_back.jpg</span>
    <span style="color: red;">image2_front.jpg</span>","<span style="color: red;">image2_back.jp</span></span><span> 
    </span>

    apro flash (A.script 3)
    salvo file nella cartella /poi azioni
    Mi scrivimi sto script per favore le foto le ho messe su flickr
    1-http://farm5.static.flickr.com/4010/4193572655_04e19e146a_o.jpg
    2-http://farm3.static.flickr.com/2773/4194330254_cab15ffd88_o.jpg
    3-http://farm3.static.flickr.com/2706/4194330282_b9e27953ca_o.jpg
    4-http://farm3.static.flickr.com/2685/4194330220_692be7f14a_o.jpg
    le 4 foto le ho chiamate pari pari come le hai chiamate tu
    <span><span style="color: red;"></span> </span><span><span style="color: red;">image1_front.jpg</span>","<span style="color: red;">i</span></span><span><span style="color: red;">g</span></span><span></span><span><span style="color: red;">mage1_back.jpg</span>
    <span style="color: red;">image2_front.jpg</span>","<span style="color: red;">image2_back.jp</span></span><span>    
    <span style="color: red;">adesso le devo rinominare come i link di flickr?</span></span>

    GRAZIE di nuovo per una tua ennesima risposta sei molto gentile.
    PGRevolution

  11. bestar // 18 dicembre 2009 10:33  

    ciao PGRevolution....
    non c'è bisogno di cambiare il nome delle foto...importante inserire il percorso giusto...
    dovresti soltanto inserire i link delle foto che hai su flickr, ed il risultato è:

    card1=new TweenFlipCS3("http://farm3.static.flickr.com/2773/4194330254_cab15ffd88_o.jpg","http://farm3.static.flickr.com/2706/4194330282_b9e27953ca_o.jpg","horizontal");

    card2=new TweenFlipCS3("http://farm3.static.flickr.com/2685/4194330220_692be7f14a_o.jpg","http://farm5.static.flickr.com/4010/4193572655_04e19e146a_o.jpg");

    Come vedi, ho soltanto sostituito ("<span><span><span style="color: red;">image1_front.jpg" - ecc</span></span></span>) con i link delle tue foto su flickr e funziona...

    NB: inserendo i link delle foto, è normale che in locale il file da l'errore...ma una volta caricato il file flash(SWF) online, funziona benissimo...

  12. Anonymous // 18 dicembre 2009 17:46  

    Niente da fare ci rinuncio ho provato lo messo online ma niente. adesso provo l'unico che si vede a convertirlo in un altra cartella sempre in swf
    ciao grazie e scusa il disturbo

  13. luis // 19 dicembre 2009 21:03  

    ciao bestar visto è arrivata anche da mè la neve brrrrr -5

Posta un commento