Esempio: Animation portfolio piece (Flash Professional)

Create un file FLA con un'animazione semplice, ad esempio un'unica interpolazione di movimento o di forma. Se disponete già di un file FLA contenente l'animazione da utilizzare nel progetto, apritelo e salvatelo con un nuovo nome.

Decidete la posizione in cui devono essere visualizzati i due pulsanti: uno per avviare l'animazione e l'altro per collegarsi al portfolio o alla home page dell'autore. Se necessario, liberate o aggiungete spazio sullo stage per il nuovo contenuto. Se l'animazione non è dotata di una finestra di avvio, potete crearne una nel primo fotogramma. In tal caso, potete anche spostare l'animazione in modo che venga avviata nel fotogramma 2 o in uno successivo.

Aggiungete un nuovo livello sopra gli altri livelli nella linea temporale e denominatelo buttons . Questo è il livello in cui verranno aggiunti i pulsanti.

Aggiungete un nuovo livello sopra il livello buttons e denominarlo actions . Questo è il livello in cui verrà aggiunto all'applicazione il codice ActionScript.

Mediante gli strumenti di disegno, create l'aspetto visivo del primo pulsante (il pulsante “play”) nel livello buttons. Ad esempio, disegnate un'ovale orizzontale contenente del testo.

Mediante lo strumento Selezione, selezionate tutte le parti grafiche del pulsante.

Nel menu principale, scegliete Elabora > Converti in simbolo.

Nella finestra di dialogo, scegliete Pulsante come tipo di simbolo, assegnate un nome al simbolo e fare clic su OK.

Con il pulsante selezionato, nella finestra di ispezione Proprietà assegnate al pulsante il nome di istanza playButton .

Ripetete i passaggi da 1 a 5 per creare il pulsante che collega alla home page dell'autore. Denominate questo pulsante homeButton .

Selezionate il fotogramma chiave nel fotogramma 1 del livello actions.

Per aprire il pannello Azioni, dal menu principale scegliere Finestra > Azioni.

Nel riquadro dello script, immettete il codice seguente:

stop();

Al termine del codice inserito nei punti precedenti, aggiungete due righe vuote.

Inserite il codice seguente alla fine dello script:

function startMovie(event:MouseEvent):void 
{ 
    this.play(); 
}

Questo codice definisce una funzione di nome startMovie() . Quando la funzione startMovie() viene chiamata, viene avviata la riproduzione della linea temporale principale.

Nella riga successiva al codice aggiunto al punto precedente, inserite la riga di codice seguente:

playButton.addEventListener(MouseEvent.CLICK, startMovie);

Questa riga di codice registra la funzione startMovie() come listener per l'evento click di playButton. In altre parole, fa in modo che quando si fa clic sul pulsante di nome playButton , venga chiamata la funzione startMovie() .

Al termine del codice inserito nei punti precedenti, aggiungete due righe vuote.

Inserite il codice seguente alla fine dello script:

function gotoAuthorPage(event:MouseEvent):void 
{ 
    var targetURL:URLRequest = new URLRequest("http://example.com/"); 
    navigateToURL(targetURL); 
}

Questo codice definisce una funzione di nome gotoAuthorPage() . Questa funzione prima crea un'istanza URLRequest che rappresenta l'URL http://example.com/, quindi passa questo URL alla funzione navigateToURL() , che determina l'apertura dell'URL nel browser.

Nella riga successiva al codice aggiunto al punto precedente, inserire la riga di codice seguente:

homeButton.addEventListener(MouseEvent.CLICK, gotoAuthorPage);

Questa riga di codice registra la funzione gotoAuthorPage() come listener per l'evento click di homeButton. In altre parole, fa in modo che quando si fa clic sul pulsante di nome homeButton , venga chiamata la funzione gotoAuthorPage() .

Nel menu principale, scegliete Controllo > Prova filmato. Flash Professional crea il file SWF e lo apre in una finestra di Flash Player.

Provate entrambi i pulsanti per verificare che eseguano le funzioni impostate.

Se i pulsanti non funzionano, controllate le seguenti condizioni:

• I pulsanti hanno nomi di istanze distinti?

• Per le chiamate al metodo addEventListener() vengono utilizzati gli stessi nomi delle istanze dei pulsanti?

• I nomi evento utilizzati nelle chiamate al metodo addEventListener() sono corretti?

• Il parametro specificato per ciascuna funzione è corretto? (Entrambi i metodi richiedono un singolo parametro con tipo di dati MouseEvent.)

Tutti questi errori, e molti degli altri errori possibili, generano un messaggio di errore. Il messaggio di errore può essere visualizzato quando scegliete il comando Prova filmato o quando fate clic sul pulsante durante la prova del progetto. Cercate nel pannello Errori del compilatore eventuali errori del compilatore (quelli che si verificano quando scegliete Prova filmato per la prima volta) e nel pannello Output eventuali errori di runtime (errori che si verificano mentre la riproduzione del file SWF è in corso, ad esempio quando fate clic su un pulsante).