Actionscript 3.0 for beginners: lesson #1

Premessa

Actionscript 3.0 può rappresentare un buon punto di partenza per impratichirsi, chi non è pratico di programmazione C e/o C++, di programmazione orioentata agli oggetti (OOP). Inoltre, questa serie di lezioni, saranno utili a chi proviene da altri ambienti o da precedenti versioni di Flash.

Impostare un progetto

In questa prima lezione vedremo come impostare un progetto Flash CS3 generico. È bene utilizzare i progetti quando si prevede di avere a che fare con almeno più di un file. L’uso dei progetti è stato introdotto – da Macromedia – già nelle versioni  precedenti alla CS3, quindi dovrebbere essere argomento noto anche a sviluppatori Actionscript 2.0.
Comunque sia con Actionscript 3.0 – come vedremo – è possibile associare un file Actionscript (.as) al documento-filmato principale, il nostro .fla per intenderci. Questa caratteristica è molto utile e rende un progetto anche minimale composto da almeno due file: il .fla e .as associato. Per questo motivo è bene “sempre” partire da un progetto, così da organizzare sin da subito i vari file (.fla, .as, …) che faranno parte del nostro “pacchetto” di sviluppo.
Inoltre, una volta acquisita la dimesticazza con la filosofia ad oggetti, instrinseca in questo tipo di linguaggio, sarà normale ritrovarsi con numerosi file, anche per progetti sostanzialmente semplici.

Un progetto Flash è un contenitore virtuale (i file .flp sono file testo in formato XML con l’elenco dei file da caricare) che riunisce, in modo organizzato, tutti i file del nostro progetto.

1
2
3
<flash_project name="mioprogetto" version="1">
    <project_file path="./mioprogetto.fla" filetype="fla" profile="" def_file="true" />
</flash_project>

Sarebbe possibile benissimo gestire più file singolarmente, tuttavia un progetto Flash propone una serie di caratteristiche che rendono alcune operazioni più semplice e automatizzate, come la compilazione e il salvataggio di tutti i file che compongono il progetto.

Nota: se avete installata una suite completa, quindi con Dreamweaver o Adobe Version Cue, tramite i progetti potrete usufruire di tutta una serie di features altrimenti non disponibili, come il collegamento diretto ai siti realizzati tramite Dreamweaver – con tutte le impostazioni per FTP – o al versioning.

Prima di creare effettivamente il progetto è bene preparare in modo oppurtuno il filesystem, ovvero le cartelle che conterranno i nostri file. Normalmente si crea una cartella del nostro progetto e, nel caso più semplice (quello che vedremo in questa prima lezione) ciò è sufficiente!
La creazione di un progetto avviene da menu File->Nuovo o dalla pagina di benvenuto:

image

Verrà chiesto di salvare un file, ad esempio mioprogetto.flp. Salviamo questo file nella cartella che abbiamo precedentemente preparato.

image

A questo punto possiamo aggiungere il filmato principale, sempre dal Menu File->Nuovo:

image

Salviamo questo file (.fla) con un nome, ad esempio mioprogetto.fla. A questo punto, ancora, il progetto non è a conoscenza del nostro file filmato. Dal pannello Progetto selezionare l’icona image  “Aggiungi file al progetto” e selezioniamo il nostro mioprogetto.fla:

image

image

Un progetto Flash permette di aggiungere un numero qualsiasi di file .as e .fla. Alcuni progetti, infatti, sono composti da più file “filmato” (.fla), caricati runtime da un filmato principale. Per questo motivo bisogna indicare quale, tra i file filmato presenti nel progetto, è quello di default, cioè quello che verrà eseguito in design-time alla selezione della voce “Prova filamato”.

Nota: se nel progetto è presente un solo filmato Flash potrebbe selezionarlo come “predefinito” in automatico… tuttavia questa features è sfuggita, per ora, agli sviluppatori Adobe.

Selezioniamo quindi il nostro filmato e dal menu contestuale selezioniamo (indichiamo) “Imposta come documento predefinito”.

image

L’icona del nostro filmato cambierà, indicando che quel filmato è il principale.

image

Apriamo ora il filmato principale, nella finstra delle proprietà, in basso, noteremo la prima differenza rispetto alle precedente versioni di Flash: Classe documento.

image

La classe documento non è necessaria per far funzionare il nostro filmato. Come accadeva “un tempo”, si potrebbe inserire il codice direttamente nel primo frame del filmato stesso. Tuttavia, usare la classe documento, rende il nostro progetto estremamente più chiaro, svincolando il codice dal filmato vero e proprio. La classe documento, infatti, è un vero e proprio file .as esterno. In questo modo possiamo anche riutilizzare tale classe per altri filmati senza dover “copiare e incollare” codice da frame a frame.
Per aggiungere una Classe documento e suffciente selezionare dal menu File->Nuovo:

image

Inseriamo il seguente codice/template:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package {
    /**
     * Class Documento for mioprogetto
     *
     *
     * @class            MioProgetto
     * @author           Giovambattista Fazioli
     * @email            g.fazioli@undolog.com
     * @web              http://www.undolog.com
     * @version          1.0
     *
     */
    import flash.display.*;
    import flash.events.*;
    //
    public class MioProgetto extends MovieClip {
        /**
         * Class constructor
         */
        public function MioProgetto ():void {
            // todo
        }
    }
}

Salviamo come “MioProgetto.as” e aggiungiamo questo file al progetto:

image

Nel campo testo “Classe documento” delle proprietà del filmato principale che abbiamo visto prima inseriamo “MioProgetto”:

image

Clicchiamo sull’icona image , se tutto è corretto si aprirà nell’editor la nostra classe Documento.

Classe documento

Possiamo verificare il nostro progetto dal bottone “Prova progetto” del pannello progetti:

image

Inseriamo nel costruttore della Classe documento il seguente codice:

1
2
3
4
5
6
/**
* Class constructor
*/
public function MioProgetto ():void {
    trace( 'Avvio progetto' );
}

Questo sarà il codice relativo all’avvio del nostro filmato, quello – insomma – che “un tempo” si inseriva nel primo frame! Ciò significa che qualsiasi istanza di MovieClip, TextFiled o Component inseriti nel filmato principale, saranno visibili a questa Classe. Nella prossima lezione realizzeremo il classico gioco Tic Tac Toe (in onore anche al citato WarGames) così da vedere in dettaglio ulteriori caratteristiche della Classe Documento.

11 commenti a: “Actionscript 3.0 for beginners: lesson #1”

  1. 18 ago, 2008 Simple Flash Project Generator 0.5: una AIR application per Flash | Undolog.com:

    [...] Actionscript 3.0 for beginners: lesson #1 abbiamo visto i passi necessari per la creazione di un progetto in Flash CS3. Così mi è venuta [...]

  2. 03 set, 2008 Actionscript 3.0 for beginners: lesson #2 | Undolog.com:

    [...] Come promesso ecco la seconda lezione su ActionScript 3.0! Oggi inizieremo l’analisi di un semplice progetto che riproduce il giochino del Tris o Tic Tac Toe. Ho cercato di inserire in questo esempio alcune caratteristiche particolari di ActionScript 3.0, cercando di dare spazio alla comprensione e non allo stile. Ne segue che se avessi dovuto scrivere il “gioco” davvero, probabilmente l’avrei strutturato in modo assai diverso, ma in questo caso ho cercato di mediare tra una classica programmazione compatta ed ermetica con una maggiormente comprensibile per i neofiti. Ho realizzato un’unica classe documento, procedura non necessaria ma utile per rimanere in linea con la precedente lezione. [...]

  3. 02 ott, 2008 Oibaf:

    ciao Giovambattista, mi sembra un tutorial molto interessante ma che non hai nemmeno iniziato l’ultima fase della avvio progetto dove lo inserisco sempre nel mioprogetto.as? aggiungendo a quello scritto precedentemente? Mi piacerebbe capire come realizzare un sito internet in as3 con pulsanti e pagine e nient’altro spero che tu possa aiutarmi grazie mille

    RispondiQuota
  4. 02 ott, 2008 Giovambattista Fazioli:

    @Oibaf: non ho capito bene la prima parte del tuo commento.

    RispondiQuota
  5. 28 nov, 2008 dosa85:

    Ciao. Complimenti per il bel tutorial. Comunque avevo una domanda, ma il secondo script della prima lezione dove andrebbe messo di preciso?!?!?!? thank

    RispondiQuota
  6. 28 nov, 2008 Giovambattista Fazioli:

    @dosa85:

    Ciao. Complimenti per il bel tutorial. Comunque avevo una domanda, ma il secondo script della prima lezione dove andrebbe messo di preciso?!?!?!? thank

    Il secondo script è una porzione del primo, a titolo di esempio. Corrisponde al costruttore.

    RispondiQuota
  7. 28 nov, 2008 dosa85:

    L”errore: 1013: L’attributo private può essere utilizzato solo nelle definizioni delle proprietà di classe.

    RispondiQuota
  8. 28 nov, 2008 Giovambattista Fazioli:

    @dosa85:

    L”errore: 1013: L’attributo private può essere utilizzato solo nelle definizioni delle proprietà di classe.

    Quest’errore può dipendere da vari fattori. Sei sicuro di aver seguito tutto in modo corretto? In caso mandami per email lo ZIP di quello che hai fatto, così vediamo perchè non ti funziona.

    RispondiQuota
  9. 01 gen, 2010 John:

    Grazie mille per questo tutorial!

    RispondiQuota
  10. 06 mag, 2010 ricvail:

    la pagina non sembra essere molto frequentata, a giudicare dalla data dell’ultimo commento, in ogni caso spero che qualcuno in grado di aiutarmi abbbia attivato la notifica e-mail…
    prima di tutto grazie per il tutorial, è molto + chiaro di tanti altri… mi sfugge solo il significato di questa frase, alla fine:

    “Questo sarà il codice relativo all’avvio del nostro filmato, quello – insomma – che “un tempo” si inseriva nel primo frame! Ciò significa che qualsiasi istanza di MovieClip, TextFiled o Component inseriti nel filmato principale, saranno visibili a questa Classe.”

    Se non ho capito male un istanza è tipo: var mySound:Sound = new Sound(); in questo caso è un istanza della classe Sound, e il suo nome è mySound, giusto?

    Altra cosa: I movieclip sono filmati, cioè dei “symbol” con del codice e una linea temporale interna, giusto? (ho la cs4 in inglese, purtroppo)… poi vabbè, text field sarà la casella di testo, ma… component? cosa sarebbe un component?

    ultima cosa: cosa intendi con “saranno visibili a questa classe”?

    RispondiQuota
  11. 06 mag, 2010 Giovambattista Fazioli:

    @ricvail: ciao, ti rispondo per punti.

    1) Originariamente Flash non supportava i file (esterni) .as. Tutto il codice – o pseudo codice – era inserito come “script” all’interno dei frame. Le prime versione di Actionscript (script per azioni), poi, erano davvero lontane da un vero e proprio linguaggio di programmazione. Le istruzioni si limitavano a controllare sostanzialmente l’avanti e indietro dei frame. Man mano si è evoluto, fino a raggiungere lo stato attuale dove, tuttavia, è rimasta ancora la possibilità di usare Flash alla “vecchia maniera”.
    Quello che intedevo, quindi, era che l’uso della classe documento, così come l’ho presentata in questo tutorial, risolve quello che una volta si faceva all’interno dei frame.
    L’evoluzione di Flash ha permesso di utilizzarlo come vero ambiente di sviluppo di applicazioni evolute. Chi sviluppa applicazioni complesse, ma anche chi ne apprezza le caratteristiche, usa di fatto la tecnica da me illustrata e non scrive più il codice all’interno dei “frame”.

    2) Si! Nella programmazione ad oggetti (OO) si indica con classe la “dichiarazione” di un oggetto. Un oggetto, tuttavia, non esiste fin tanto non è creato o, come si usa dire, istanziato. Quando crei un oggetto, utilizzando l’operatore new, e lo poni in una variabile, come mySound, si dice che l’oggetto esiste ed è ti tipo Sound.

    3) Flash mette a disposizione degli oggetti visuali primitivi come quelli da te indicati: MovieClip, TextField, etc… questi fanno parte dello strato più basso di tutto il sistema. I Component sono degli oggetti, non necessariamente visuali, di più alto livello, spesso formati dalla somma di più oggetti primitivi. Ad esempio si potrebbe realizzare un Component con l’aspetto di un modulo di inviomail, quindi composto da una serie di Label (nome, cognome, etc…), una serie di TextField e un bottone “Invia”.
    In linea di principio un Component è simile ad un MovieClip, anche se ha bisogno di essere scritto in un determinato modo e compilato (ed esportato) come componente. Il vantaggio dei Component (come accade per i MovieClip) è quello di poterli riutilizzare facilmente più volte.

    4) Con “saranno visibili a questa classe” intendo che un metodo all’interno della classe MioProgetto può indirizzare un oggetto visuale (tipo un MovieClip o TextField) posto nel filmato principale. Se ad esempio crei un MovieClip e lo poni nel filmato, dandogli un nome di istanza “pippo”, all’interno della classe MioProgetto potrai – ad esempio – manipolare “pippo”, spostandolo, ingrandendolo, associargli eventi, etc… come se lo avessi creato da codice.

    Se ti può essere di ulteriore aiuto ti consiglio:

    Spero di essere stato abbastanza chiaro. In caso di dubbi non esistare a riscrivirmi.

    RispondiQuota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
					<code></code> // blocco generico
					[cc_actionscript][/cc_actionscript] // Actionscript
					[cc_actionscript3][/cc_actionscript3] // Actionscript 3
					[cc_css][/cc_css] // CSS Style Sheet
					[cc_html][/cc_html] // HTML
					[cc_js][/cc_js] // Javascript
					[cc_objc][/cc_objc] // Objective-C
					[cc_php][/cc_objc] // PHP
					[cc_sql][/cc_sql] // SQL


Stop SOPA