Cerchi articoli, tutorial e guide su Photoshop CS3, Flash CS3, Premiere Pro CS3, Actionscript 3, Flex 3 e Adobe AIR, Java e Microsoft Silverlight ? In Flash CS3 e ActionScript 3.0 non è più possibile utilizzare l’utilissimo metodo attachMovie, disponibile nelle versioni precedenti di actionscript, che permetteva di prelevare un movieclip dalla libreria e di visualizzarlo runtime sullo Stage.
In questo articolo utilizzeremo un semplice script alternativo, in actionscript 3.0, per realizzare una lista di elementi cliccabili, utilizzando un array come fonte dati e un movieclip in libreria, come grafica del pulsante.
Sfrutteremo, infine, la classe DisplayObject per posizionare e visualizzare gli elementi sullo Stage.
PREPARARE L’AREA DI LAVORO IN FLASH CS 3
Apriamo Flash CS3 e creiamo un nuovo File Flash (ActionScript 3.0).
Inseriamo un nuovo MovieClip, chiamato button01, composto da due livelli: uno conterrà l’area cliccabile, ovvero un semplice rettangolo; nell’altro inseriremo, invece, un campo di testo dinamico con nome istanza testo.
Eliminiamo, quindi, dallo Stage l’intero MovieClip, lo selezioniamo dalla libreria utilizzando il pulsante destro del mouse e scegliamo la voce Linkage, come in un normale file Flash Actionscript 2.0.
Selezioniamo il checkbox “Export for ActionScript, accentando i parametri di default che Flash ci proporrà, e clicchiamo nuovamente su OK nel caso in cui dovesse apparire una finestra di avviso.
Il valore dell’attributo Class – button01 - sarà utilizzato nel nostro codice per far riferimento alla MovieClip in libreria.
IL CODICE ACTIONSCRIPT 3.0
Posizioniamo lo script seguente sul primo frame del file .FLA:
// Il Contenitore di tutti gli elementi che visualizzeremo
var container:Sprite = new Sprite();
addChild(container)
// Distanza Verticale tra i pulsanti
var vertGap:Number = 5;
// Array Dati
var name_array:Array = new Array();
name_array.push({company: "Adobe", link: "www.adobe.com"})
name_array.push({company: "Adobe Lab", link: "labs.adobe.com"})
name_array.push({company: "AugItaly", link: "www.augitaly.com"})
name_array.push({company: "FlexGala", link: "www.augitaly.com/flexgala"})
name_array.push({company: "Elastech", link: "www.elastech.it"})
// Creazione dei pulsanti
for (var i:Number = 0; i < name_array.length; i++){
// Creazione dell'istanza dell'elemento acquisito dalla libreria
var tempButton:button01 = new button01();
// Attiviamo la modalità buttonMode su true, ad indicare che
// il nostro elemento dovrà essere trattato come un pulsante
tempButton.buttonMode = true;
// Testo visualizzato (acquisito dall'array)
tempButton.testo.text = name_array[i].company
// Associamo all'elemento nome e link
tempButton.company = name_array[i].company
tempButton.link = name_array[i].link
// Visualizziamo l'elemento, aggiungendolo alla DisplayList
var button:DisplayObject = container.addChild(tempButton)
// Posizione y progressiva
button.y = (button.height + vertGap) * i;
// Abbiniamo al pulsante i listener Click, Mouse Over e Mouse Out
button.addEventListener(MouseEvent.CLICK, onClick);
button.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
button.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
}
// CLICK
// Output del nome e del link associato al pulsante
function onClick(event:MouseEvent) {
trace("onClick: "
+ event.currentTarget.company
+ " -> " + event.currentTarget.link)
}
// MouseOver
// Il pulsante viene spostato di 5 pixel a destra al passaggio del mouse
function onMouseOver(event:MouseEvent) {
event.currentTarget.x += 5;
}
// MouseOut
// Il pulsante viene spostato di 5 pixel a sinistra all'uscita del mouse
function onMouseOut(event:MouseEvent) {
event.currentTarget.x -= 5;
}
Ecco infine il risultato dello script:
AUGItaly Feed