Il Linguaggio di Programmazione ActionScript 3

 

Vi parliamo adesso del linguaggio di programmazione    ActionScript (AS) è il linguaggio di scripting di Adobe , anche se adesso è utilizzato anche da altre piattaforme come flex,si tratta di  software che affonda le proprie radici nella grafica vettoriale, in quanto questa è stata la sua vera e proprioa base di partenza e che permette la realizzazione di applicazioni dinamiche di alto livello e la realizzazioni di animazioni praticamente ineguagliabili, i veri guru di Flash sono in grado di farti comparire nel computer delle animazioni fantastiche come se fossero vere, purtroppo il suo lato negativo è l’indicizzazione da parte dei motori di ricerca che seppur ultimamente migliorata è ad oggi il vero tallone di Achille di Flash, vedremo meglio il tutto con le nostre guide , ma oggi ci concentriamo solamente su Action Script, ma ne nostro blog potrete trovare anche la relativa guida di Flash

.Le variabili in ActionScript

 

Ed incominciamo in questa guida a parlarvi di una dei piu’ potenti linguaggi di programmazione ad oggi esistenti perfettamente integrato con Flash, ossia Action Script. Flash permette di realizzare animazioni interattive per produzioni multimediamli complesse utilizzando un lingaggio di programmazione tutto sommato semplice. I programmatori professionisti grazie al codice (C, Javascript, Java ….) possono sviluppare applicazioni eleaborate e articolate, ma che pero’ spesso mancano totalmente di grafica. Ma prima di partire iniziamo a definire il programma come:

Un programma è costituito da una serie di istruzioni o procedure che il computer esegue.

Ogni procedura consta, sostanzialmente nella manipolazione di informazione o dati.

Infatti la manipolazione dei dati è alla base della programmazione. L’entità alla base di questa operazione è senza obra di dubbio la variabile il cui valore cambia spesso durante l’esecuzione del programma, Ubn esempio tipico di varibile nel nostro caso di tipo numerico è la seguente

var esempio:Nmber = <valore numerico>;

Ovviamente con le variabili è possibile fare operazioni di addizione

varSomma = var1 + var2

Le variabili in programmazione e quindi anche in ActionScript hanno una loro validità.

• Si definisce locale quando viene dichiarata all’interno di una funzione
• Si definisce globale quando viene definita al di fuori di una funzione ed è quindi valida per tutte le aree del codice

Ovviamente ci sono anche i valori costanti che sono quelli che nell’ambito di un programma non cambiano mai il loro valore e si dichiarano nel seguente modo.

 

cont varcostante:Number =<valore costante>;

Ovviamente anche ActionScript mette a disposizione del programmatore una buona dose di variabili, che si dividono in dati semplici come:

Stirng variabile di testo che puo’ contenere un nome o una frase

• Number valido per qualsisasi tipo di valore numerico con o senza decimali <valoreintero>.<valoredecimale>
• int: numero intero senza decimali
• uint numero intero senza segno
• Boolean variabile che puo’ assumere solamente valore true o false

 

oppure dati complessi, e questa è quasi un’esclusiva di ActionScript, che possono essere

• simboli di tipo Clip Filmato e Pulsante
• campi di testo dinamico o di input
• Date indicazione temporale della data e l’ora
• e altro ancora

Per oggi la lezione finisce qui, nella prossima affronteremo ActionScript e gli oggetti

Gli oggetti di ActionScript

Affrontiamo in questa lezione quelli che sono gli oggetti di ActionScript.

ActionScript è un linguaggio di programmazione orientato agli oggetti. Quando manipolate i simboli in Flash utilizzate degli oggetti. Ogni simbolo è anche , letteralmente, un oggetto di ActionScript; oltre a essere un’istanza della classe MovieClip, ovvero quella relativa ai simboli di tipo Clip Filmato. Gli oggetti a loro volta si dividono in :

 

• proprietà
• eventi
• metodi

Proprietà

Il modo piu’ semplice ed immediato di comprendere le proprietà è forse quelle di considerarle come delle variabili secondarie di un oggetto. Facciamo subito un esempio

Portatile.Netbook = Asus;

L’intera struttura prende il nome di variabile-punto-nome proprietà e viene considerata come se fosse un unico oggetto.

 

Eventi

In sostanza gli eventi sono condizioni che si verificano di cui ActionScript è consapevole e acui è in grado di reagire. Molti eventi servono per consentire i processi interattivi, come la selezione di un pulsante o la pressione di un tasto.

Metodi

Un metodo è un’azione eseguita da un oggetto. Se avete creato un simbolo di tipo Clip Filmato conentente vari fotogrammi sulla linea temporale, è possibile riprodurre o interrompere l’esecuzione del filmato, oppure spostare l’indicatore di riporoduzione su un particolare filmato.

VideoCalcio.play();

Dove VideoCalcio rappresenta il nome del simbolo mentre play il relativo metodo.

Istanziare gli oggetti in ActionScript

Per potere utilizzare un oggetto in ActionScript esso dev’essere stato creato in precedenza sulla Scena o importato nella libreria per esempio di Flash. Praticamente quando digitate un nome per un’istanza nella casella Nome Istanza del pannello Proprietà, state creando una variabile con quel nome d’istanza. Essa sarà l’istanza dell’oggetto e memorizzerà l’oggetto nella variabile

 

Dalla prossima lezione cominceremo a parlarvi degli operatori di ActionScript

Gli Operatori

Analizziamo in questa lezione quelli che sono gli operatori in ActionScript, ossia quelle parole speciali che consentono di eseguire operazioni aritmetiche che ci consentino di comparare fra loro diversi valori. Un tipico esempio di operatore somma potrebbe essere il seguente

 

var esempiosomma:Number = 43 + 22;

 

Gli operatori in ActionScript si dividono in primari e sono i seguenti

• [ ] Utilizzato per l’inizializzazione degli array.
• { x:y} Inizializza un oggetto
• ( ) Utilizzato per le operazione di raggruppamento di espressioni.
• f(x) chiama una funzione
• new costruisce una funzione
• x.y x[y] Permette di accedere ad una proprietà
• <></> Serve ad inizializzare un oggetto XMLList
• @ Accede a un attributo
• :: Qualifica un nome
• .. Accede a un elemento XML

in Operatori Unari

 

• ++ incrementa la variabile di uno
• — decrementa la variabile di uno
• ! Operatore Not logico
• delete Elimina una proprietà
• typeof Restituisce informazioni sul tipo
• void restituisce una valore indefinito

in Operatori Moltiplicativi

• / Divisione
• % Modulo

in Operatori Additivi

• + Addiziione
• – Sottrazione

In Operatori relazionali

• < Minore di
• > Maggiore di
• <= Minore o uguale a
• >= Maggiore o uguale a
• as Verifica il tipo di dati
• in Verifica le proprietà dell’oggetto

in Operatori di Uguaglianza

• = Uguaglianza
• != Disuguaglianza
• === Uguaglianza rigorosa
• !== Diseguaglainza Rigorosa

In Operatori Logici

• && And Logico
• || Or Logico

In Operatore Condizionale

 

• ‘?: Condizione

Operatori di Assegnazione

= Assegnazione

*= Assegnazione Moltiplicazione

/= Assegnazione Divisione

%= Assegnazione Modulo

+= Assegnazione Addizione

-= Assegnazione Sottrazione

 

Commenti

 

I commenti in ActionScript si possono realizzare in due differenti modi. O con la doppia // oppure con i consueti /* e */

facciamo due esempio per chiarire il tutto

 

//esempio rigo di commento 1

/*

Esempio rigo di commento con il secondo metodo

*/

 

Il primo esempio è quello utilizzato nel caso di avere solamente una riga di commento, mentre se dobbiamo fare più righe contemporaneamente si ricorre al secondo modo specifico.

 

E Con questo vi diamo appuntamento alla lezione successiva

Istruzioni Condizionali e di Flusso

Vediamo adesso come si realizzano le istruzioni condizionali e ciclciche in ActionScript 3 , partiamo dunque dalle prime

Istruzioni Condizionali

L’istruzione condizionali sono quelle che al verificarsi di una determinata istruzione compiono una serie di istruzioni solamente una volta e tipicamente si traducono con il linguaggio simbolico

Se si verifica questa condizione allora esegui queste operazioni

Che tradotto nel linguaggio ActionScript diventa

if (pippo == “cane” ) {

//esegui le istruzioni per pippo uguale cane

} else {

//altrimenti pippo non è un cane e d esegui queste altre informazioni

}

questa è la forma classica con cui si puo’ trovare il nostro if ne esiste anche pero’ una nidificata che la possiamo trovare nella seguente forma.

if (punteggio > “8”) {

trace (” ABBIAMO VINTO!!!!!”);

} else if (punteggio < 2) {

trace (“la pratica è ancora { dobbiamo stare attenti”);

}

Switch

Accanto al consolidato if si pone ormai anche il consueto switch detto anche if a scelta multipla è come se nel nostro if ci trovassimo n scelte un tipico esempio potrebbe essere il seguente

 

Switch (colore) {

case 0:

trace(“Rosso”);

break;

case 1:

trace(“Blu”);

break;

case 2:

trace(“Rosso”);

break;

case 3:

trace(“Marrone”);

break;

default:

trace(“Altro Colore”);

break;

}

 

e con questo terminiamo le istruzioni condizionali e passiamo alle istruzioni cicliche

 

Istruzioni Cicliche

 

Le istruzioni cicliche come dice chiaramente il loro numero sono quelle che ripetono un ciclo un numero determinato o indeterminato di volte.E questa è una prima importante distinzione , in quando le determinate sono vincolate a eseguire il ciclo un numero prestabilito di volte, un tipico esempio è il ciclo for che ha la seguente sintassi.

var i:int;

for (i=0; i<5; i++) {

trace (i);

}

 

In questo caso il ciclo è forzato ad essere eseguito obbligatoriamente 5 volte. Altrimenti ci sono cicli indeterminati , ossia ogni volta che vengono eseguiti , viene rivalutata la condizione e se questa risulta vera eseguiti nuovamente. Questi cicli a loro volta si distinguono in cicli che vengono eseguiti almeno una volta e cicli che possono anche non essere mai eseguti. In questi casi si parla di while do, o repeat until. Vediamo un esempio per entrambi i casi

 

var i:int =0;

 

while (i < 5) {

// blocco istruzioni fra cui si richiede di inserire un valore di i

}

quindi come potete vedere fino a quando non verrà inserito per un valore numerico che sia maggiore di 5 questo ciclo continuerà ad essere eseguito

mentre vediamo un esempio anche per il repeat until ossia do while

 

var i :int =5;

do {

trace(i)

i++;

} while (i<5);

questo ultimo codice fa un lavoro strano, ossia è si un codice indeterminato ma con l’utilizzo di un contatore l’abbiamo riportato ad essere determinato, con la variante che questo per sua struttura è forzato ad essere eseguito almeno una volta

Le Funzioni

 

Analizzeremo in questo capitolo una modalità tipica di Flash che facilità e non poco la scrittura di codice. Questa modalità prende il nome di Assistente Scipt ( nelle precedenti versioni del software ci sembra di ricordare che si chiamasse Normale) è più adatta, o meglio è stata pensata per coloro che hanno poche esperienze di programmazione, ma è talmente utile che adesso praticamente la utlizzano tutti

 

Quando la modalità Assistente Script è attiva, si apre il pannello Azioni, un pannello aggiuntivo, la casella degli strumenti Azioni (in alto a sinistra), in cui sono raccolte delle porzioni di codice preprogrammato, pronte èer essere selezionate e inserite nel listato.Come si puo’ vedere facilmente sotto in figura.

Quindi come potete vedere il pannello azioni , attivato tramite F9 contiene nella parte sinistra tutte le funzioni , operazioni, assegnazioni, che ActionScript consente di fare , un’area di lavoro dove è presente anche l’assistente script e la selezione corrente in basso a sinistra che ci consente di interagire con lo stage di flash.

Se volete lavorare su script esterni quelli che qualche lezione fa vi abbiamo detto avere estensione as, dovete eseguire la seguente procedura. Andate sull’angolo all’estrema destra del pannello di azioni , quello che avete ottenuto premendo F9 e andate sull’icone sopra il pallino rosso evidenziato in figura

e ada qui digitate importa Script , come vedete potete fare anche molte altre operazioni come esportare degli script, la formattazione autmoatica e il controllo di validità dello script, insomma tutti file che ritrovate tranquillamente nelle icone del pannello. Vediamole un po’ in dettaglio queste icone di cui stiamo parlando.

Guardiamole un po’ in dettaglio

Partendo dalla prima icona a sinistra ossia il +

1. Icona Aggiunge un nuovo elemento allo script, nella riga sottostante a quella selezionata.
2. Icona Consente di rimuovere la selezione effettuata nel riquadro dello script
3. Icona Aiuta ad impostare un percorso target assoluto o relativo per un’azione dello script
4. Icona Controlla la Sintassi, ossia verifica la presenza di eventuali errori di sintassi nello scipt e li elenca nel pannello Output
5. Icona formatta lo scipt per garantire un’adeguata sintassi del codice e migliorarne la leggibilità
6. Icona Mostra i suggerimenti del codice

Prima di finire vi vogliamo pero’ fare vedere un esempio pratico di quanto Assistente Script sia comodo. Supponiamo che vogliamo creare un bottone che come venga premuto dirotti il nostro utente presso un’altra pagina. Non dobbiamo fare altro che

1. Creare un rettangolo o un cerchio che ipotizzeremo sia il nostro bottone nello stage del CS4.

2.Convertirlo in Simbolo Pulsante

3. Cliccare F9 in modalità Assistente Script

 

Nella prossima lezione apprenderemo invece come creare una variabile con il pannello delle azioni e ActionScript 3.0

 

Variabili e Comportamenti in ActionScript 3.0

Elementi del linguaggio , istruzioni , parole chiave e direttive parola chiave di definizioni var

 

la sintassi è

var miaVariabile :String;

 

Selezionate un oggetto sullo Stage, per esempio un simbolo ; nel pannello Comportamenti fate clic sull’icona Aggiungi Comportamento e attraverso il percorso dei menu proposti o selezionate il comportamento desiderato.

 

 

Flash offre anche un’altra importante novità ossia quella delle librerie per accedervi digitate Finestra –Librerie Comuni, quindi scegliete una libreria dal sottomenu Classi, Suoni e Pulsanti, apparirà un pannello contenente una serie di librerie pronte per essere utilizzate , trascinate un elemento della libreria comune nella Libreria del documento corrente oppure direttamente nello stage.

Per esempio scegliete Pulsanti aprite la cartella che vi si presenta per esempio la prima che si chiama button ovals e trascinate nello stage l’ovale avrete cosi’ ottenuto il classico pulsante che si vede in molti blog

se controllate nella libreria in alto a destra vedrete che Flash vi offre gia’ la possibilità di trasformarlo in simbolo.

E veniamo adesso a parlarvi dei componenti di ActionScript, sono tipo Clip Filmato predefiniti, con parametri che possono essere modificati per adattarli a nuovi scopi e lavori. Potete elaborarne la forma grafica il comportamento, ed è possibile implementare in essi la funzionalità complesse. I componenti stazionato da semplici controlli per un’interfaccia grafica fino a contenuti più articolati

I componenti di default vengono caricati sul vostro computer quando installate Flash. Il Pannello Componenti è attivabile dal menu finestra- componenti CTRL + F7. I componenti che avrete a disposizione sono UserInterface e Video analizziamoli un po’ in dettaglio perché’ per chi vuole intraprendere la via della progrmmazione possono risultare realmente molto utili. Ossia permettono di realizzare interfacce grafiche di gran lunga superiore a qualsiasi linguaggio web al momento esistente.

Quindi come potete ben immaginare per utilizzarli dovete portarli nel vostro stage e una volta li saranno pronti per i vostri scopi.

E sono

• Button pulsante di forma rettangolare che ovviamente è ridimensionabile a proprio piacere
• CheckBox casella di spunta di forma quadrata potete utilizzarla per creare elenchi in cui dovete far selezionare o deselezionare le voci.
• ColorPicker Consente all’utente di selzionare un colore da un elenco di campioni
• ComboBox classico menu a discesa come in Html
• DataGrid permette di visualizzare i dati in una griglia caricandoli da un array oppure da un file XML esterno.
• Label visulizza un’inica riga di testo.
• List casella di riepilogo a scorrimento
• NumericStepper consente all’utente di incrementare o dimuire un valore all’interno di un set di numeri ordinato
• PogressBar è la barra che visualizza il processo di caricamento di un documento FLash quando lo scaricate da Internet
• RadioButton pulsante di opzione
• ScrollPane permette di visualizzare un oggetto
• Slider Consente all’utente di selezionare un valore intermedio a due estremi
• TextArea da utilizzare per immettere un testo
• TextInput serve anche questo per immettere un testo ma a differenza di quello sopra permette solamente di mettere un testo su una sola riga
• UILoader contenitore per file immagine
• UIScrollBar consente di aggiungere una barra di scorrimentoa un campo di testo.

Dalla prossima lezione vedremo quali sono le piu’ importanti funzioni che permettono ad actionscript e l’utente di potere essere collegati

 

Action Script interazione con l’Utente

Vediamo come detto nel finale della scorsa lezione a quelle che sono l’ interazione flash cs4 con l’utente.

Identifichiamo i tre fattori principali che sono

• origine dell’evento, ossia l’identificazione dell’oggetto su cui si verificherà un determinato evento, un pulsante, un clip filmato e cosi’ via.
• L’evento ossia quello che si attende, qual è l’evento che succederà e acuì bisognerà rispondere come il passaggio del mouse sopra l’oggetto, la pressione di un determinato tasto e cosi’ via.
• il gestore di eventi ossia la risposta ciò che il programma deve realizzare quando l’evento si realizza.

Passiamo adesso ad analizzare quali sono i comandi per realizzare fattivamente queste funzioni che abbiamo descritto sopra.

la Sintassi generale puo’ essere riassunta come

 

On (evento) {

//istruzione da eseguire;

}

 

Occorre pero’ fare una distinzione questi comandi andavano bene per ActionScript 2 , quindi qui per esempio se volevate associare ad un bottone un azione per esempio di quella di andare ad un url di un determinato sito bastava selezionare quel determinato bottone digitare F9 e quindi scrivere la seguente riga di codice

on (release) {
getURL(“url_da_raggiungere.estenzione”, “_blank”, “GET”);
}

ed il tutto era fatto , purtroppo per noi programmatori vecchio stile con ActionScript 3 ci siamo trovati di fronte ad una rivoluzione dei comandi e la sintassi dei comandi è diventata

 

button_instance_name.addEventListener(MouseEvent.MOUSE_UP,go_to_destination_function);

function go_to_destination_function(event:Event):void {
var request:URLRequest = new URLRequest(“http://www.morleyvideoproductions.com”);
navigateToURL(request,”_top”);
}

Quindi si crea un bottone nel nostro stage gli si associa un nome di istanza a questo punto gli si associa la classe event listener che sarà responsabile lei di eseguire le azioni, in questo caso l’azione si esegue al verificarsi dello spostamento del mouse sopra, a questo punto si richiama la funzione go_to_destinaction_function che caricherà la variabile request di tipo URLRequest che attraverso il comando navigateToUrl completerà il tutto. Onestamente a noi sembra una soluzione un po’ cervellotica ma è quella adottata per ActionScript 3 con l’aggravante che se provate ad utilizzare la sintassi di ActionScript 2 cioe’ quella con i Release otterrete degli errori, ossia ActionScript 3 è un qualcosa di totalmente nuovo e non un’estensione della versione 2.

 

Prima di fare un esempio comulativo di quanto abbiamo visto fino a questo momento, facciamo un breve appunto a quelli che sono gli errori di complilazione. Una volta che avete finito il vostro progetto o che piu’ semplicemente volete provarne il funzionamento dovete premere i pulsanti Ctrl + Invio. Nel caso non ci siano errori verrà avviata normalmente la finestra del browser con in esecuzione il file swf. Mentre se ci sono degli errori si aprirà una finestra nella stessa linea della Line Temporale che vi indicherà la scena , la linea ed il tipo di errore commesso.

 

Faremo adesso un esempio di quanto sopra abbiamo visto.

Facciamo adesso un esempio conclusivo di come realizzare una pagina Web in Flash.

 

Quindi avviamo flash e facciamo CTRL N file flash in action script 3.0 ci apparirà cosi’ nello stage una pagina web completamente bianca. Modifichiamone subito le dimensioni e portiamole a 800 di larghezza per 1000 di altezza

dalle proprietà del documento sotto la libreria

Facciamoci qualche disegno tanto per farla sembrare una pagina web, del tipo

 

 

trasformate i rettangoli in alto in pulsanti, ossia li convertite in simboli, quindi una volta fatto ci cliccate sopra vi si apre la schermata del pulsante aggiungete un frame chiave su sopra e magari cambiate colore al rettangolo in modo da ottenere un effetto rollover al passaggio sopra con il mouse. A questo punto selezionate il rettangolo e digitate F9 per andare nelle azioni e inserite i possibili collegamenti come vi abbiamo fato vedere nelle pagine precedenti, in tale modo con pochi passaggi avrete costruito un perfetto sito in Flash con un’ottima grafica senza esservi sbattuti troppo.