Realizzare l'effetto Swipe in Flash Air per Android

Ciao a tutti e benvenuti al quarto tutorial di questo corso. Oggi vedremo come creare un effetto Swipe ovvero l'effetto "slittino" come lo chiamo io. Questo effetto è uno dei più richiesti inquanto getta la base di molte applicazioni di uso quotidiano e di giochi. Vediamo allora subito come realizzare questo effetto:

1) Apriamo il nostro Flash CS6/CS5, Air per Android, impostiamo l'area di lavoro a 480px x 800px.




2) Adesso importiamo nella libreria quattro o piu foto/elementi nel formato che ci interessa e disponiamoli equi distanti tra loro di circa 56px. Cerchiamo di ottenere il risultato seguente. Io per praticità ho disegnato dei blocchi colorati.




3) Bene, selezioniamo tutti i blocchi e convertiamoli in un unica clip-filmato a cui diamo il nome istanza di gallery_items.




4) Ora creiamo un livello azioni ed inseriamoci all'interno questo codice:




Multitouch.inputMode = MultitouchInputMode.GESTURE;

var currentGalleryItem:Number = 1;
var totalGalleryItems:Number = 4;

stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, fl_SwipeToGoToNextPreviousFrame);

function fl_SwipeToGoToNextPreviousFrame(event:TransformGestureEvent):void
{
if(event.offsetX == 1)
{
if(currentGalleryItem > 1){
currentGalleryItem--;
slideRight();
}
}
else if(event.offsetX == -1)
{
if(currentGalleryItem < totalGalleryItems){
currentGalleryItem++;
slideLeft();
}
}
}
var slideCounter:Number = 0;
function slideLeft(){
gallery_items.addEventListener("enterFrame", moveGalleryLeft);
}
function slideRight(){
gallery_items.addEventListener("enterFrame", moveGalleryRight);
}

function moveGalleryLeft(evt:Event){
gallery_items.x -= 48;
slideCounter++;
if(slideCounter == 10){
gallery_items.removeEventListener("enterFrame", moveGalleryLeft);
slideCounter = 0;
}
}
function moveGalleryRight(evt:Event){
gallery_items.x += 48;
slideCounter++;
if(slideCounter == 10){
gallery_items.removeEventListener("enterFrame", moveGalleryRight);
slideCounter = 0;
}
}


stop();


5) Esportiamo la nostra applicazione e installiamo sul dispositivo mobile! Avrete ottenuto la vostra galleria con l'effetto Swipe.

SPIEGAZIONE DEL CODICE:

In questo caso mi sento in dovere di spiegarvi brevemente il codice sarò moooolto pratico! :)

var currentGalleryItem:Number = 1;
var totalGalleryItems:Number = 4;

queste voci controllano lo spostamento della galleria dalla prima slider alla quarta. Aumentando il numero delle immagini dovrete aumentare anche questo valore ( 4 ).

Ci sono poi due valori in questo modo:

gallery_items.x -= 48;

il 48 indica 480px che è la larghezza dello stage. Se realizzate un stage magari orizzontale dovrete impostare 80 che indica 800px e cosi via. Nel caso di una galleria orizzontale,lo dico perche sicuramete sarà quella piu usata, dovrete impostare i valori a 80 e cambiare .x in .y cambiando cosi le assi di spostamento. Contenti??

Ci vediamo al prossimo tutorial " Effetto Zoom "

Ciaooo

Wanlooloo!

Google+