Esempio: Porzione del portfolio di animazione (Flash Professional)
Questo esempio ha lo scopo di offrirvi una prima opportunità di scoprire come è possibile unire parti di ActionScript in un'applicazione ActionScript completa. La porzione del portfolio animazione è un esempio di come sia possibile modificare un'animazione lineare esistente, aggiungendovi alcuni elementi interattivi minori. Ad esempio, potete incorporare un'animazione creata per un cliente in un portfolio in linea. Il comportamento interattivo che verrà aggiunto all'animazione include due pulsanti selezionabili dall'utente: uno per avviare l'animazione e uno per spostarsi su un URL separato (ad esempio il menu portfolio o la home page dell'autore).
Il processo di creazione di questa porzione può essere suddiviso nelle seguenti fasi principali:
Preparazione del file FLA per l'aggiunta di elementi ActionScript e interattivi
Creazione e aggiunta di pulsanti
Scrittura del codice ActionScript
Prova dell'applicazione.
Preparazione per l'aggiunta di elementi interattiviPrima di aggiungere elementi interattivi all'animazione, è utile configurare il file FLA creando alcuni spazi in cui aggiungere il nuovo contenuto. Questa operazione include la creazione di spazio effettivo sullo stage in cui poter posizionare i pulsanti e anche la creazione di “spazio” nel file FLA per mantenere separati gli elementi diversi.
Per configurare il file FLA per l'aggiunta di elementi interattivi: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.
Creazione e aggiunta dei pulsantiA questo punto, è necessario creare e posizionare i pulsanti che costituiscono il fulcro dell'applicazione interattiva.
Per creare e aggiungere pulsanti al file FLA: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.
Scrittura del codiceIl codice ActionScript per questa applicazione può essere suddiviso in tre set di funzionalità, sebbene vengano inserite tutte nella stessa posizione. Le tre azioni che il codice esegue sono le seguenti:
Interrompere l'indicatore di riproduzione non appena il file SWF viene caricato (quando l'indicatore di riproduzione raggiunge il fotogramma 1).
Attendere un evento per avviare la riproduzione del file SWF quando l'utente fa clic sul pulsante play.
Attendere un evento per indirizzare il browser all'URL appropriato quando l'utente fa clic sul pulsante della home page dell'autore.
Per creare il codice che interrompe l'indicatore di riproduzione quando raggiunge il fotogramma 1:Selezionate il fotogramma chiave nel fotogramma 1 del livello actions.
Per aprire il pannello Azioni, dal menu principale scegliete Finestra > Azioni.
Nel riquadro dello script, immettete il codice seguente:
stop();
Per scrivere il codice che avvia l'animazione quando si fa clic sul pulsante play: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().
Per scrivere codice per indirizzare il browser a un URL quando si fa clic sul pulsante home page: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, inserite 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().
Prova dell'applicazioneL'applicazione è ora completamente funzionante. Proviamo il codice per essere certi che sia proprio così.
Per provare l'applicazione: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).
|
|