Colorare gli oggetti in Flash CS3 con il componente "Color Picker"

Che fosse possibile colorare gli oggetti in Flash con Actionscript 3 già lo sapevamo.
In questo post vedremo come colorare gli oggetti tramite il color picker, uno dei componenti che Flash mette a disposizione.


Per capire meglio, vediamo un'immagine d'esempio.
Come vedete cliccando sul color picker (tipico dei programmi di grafica) posso gestire il colore degli oggetti.
Tramite il pannello di "Output" mi farò anche restituire a video il codice esadecimale del colore scelto.

Fondamentale sarà importare un componente "ColorPicker" all'interno della nostra applicazione. Quindi dal menu "Finestra", "Componenti", "UserInterface", "ColorPicker". Diamo all'istanza il nome :"colorPicker1".

Ora con il color picker importato, apriamo il primo fotogramma, e scriviamo quanto segue:

import fl.events.ColorPickerEvent;
var pinto:MovieClip=new MovieClip();
addChild(pinto);

Abbiamo creato una clip (il quadrato che verrà colorato) e importato gli eventi legati al color picker.

function changeHandler(event:ColorPickerEvent):void {
with(pinto.graphics)
{
beginFill(event.target.selectedColor,1);
moveTo(0,0);
lineTo(100,0);
lineTo(100,100);
lineTo(0,100);
endFill();
}
trace("#"+event.target.hexValue);
}

Qui invece indichiamo la funzione con le istruzioni da eseguire ogni volta che l'utente sceglierà un colore.

Aggiungiamo il listener delle azioni:
colorPicker1.addEventListener(ColorPickerEvent.CHANGE,changeHandler);

Gestire la Scroll Bar in Actionscript 3

Creare testi scorrevoli con il componente Scroll Bar di Flash non è poi così difficile! Basta trascinarlo dal pannello "Componenti" (raggiungibile dal menu "Finestra") e posizionarlo all'interno del testo (ovviamente "dinamico"), sul lato destro (dove di solito appare una barra di navigazione).
Tuttavia, se il testo dinamico non è sufficientemente lungo, la barra è semplicemente deselezionata...
E se volessimo farla sparire, quando il testo è troppo corto?
Ci sono due proprietà dei campi di testo dinamici che sono molto utili: bottomScrollV, che ci indica il numero dell'ultima riga visualizzabile tramite il campo dinamico, e maxScrollV: il numerod i righe scrollabili.

Per far sparire la barra, quindi, vuol dire che ci troviamo nella situazione in cui l'ultima riga (bottomScrollV) è maggiore delle righe scrollabili (maxScrollV).
Quindi, creiamo un nuovo file in Flash CS3 con Actionscript 3.
Inseriamo un campo di testo dinamico (di nome "testo_txt").
Inseriamo una UIScrollBar nel testo ("Finestre"-->"Componenti"-->"UserInterface"-->"UIScrollBar")
Chiamiamo la barra "scrollBar_mc".

Quindi nel primo fotogramma scriviamo:

testo_txt.text="Lorem ipsum dolor Morbi nunc gravidcursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros.";

if(testo_txt.bottomScrollV>testo_txt.maxScrollV){
scrollBar_mc.visible=false;
}

Se provate il lavoro vedrete che la barra non compare! Semplice! Il testo è troppo breve e non c'è nulla da far scrollare! Raddoppiate la lunghezza del testo dinamico copiando il contenuto così:

testo_txt.text="Lorem ipsum dolor Morbi nunc gravidcursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor amet, consectetuer adipiscing elit Lorem ipsum dolor Morbi nunc gravidcursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor amet, consectetuer adipiscing elitLorem ipsum dolor Morbi nunc gravidcursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor amet, consectetuer adipiscing elit FINE";

Ora riprovate e vedrete la vostra scoll bar!!!

Creare pannelli a soffietto in Javascript con Dreamweaver CS3

Con l'ultima versione di Dreamweaver CS3, è possibile aggiungere simpatiche animazioni. Soprattutto queste animazioni permettono di creare siti in vero stile Web 2.0 senza l'ausilio diretto dei Widget Spry (molto utili in verità!)
Vediamo come fare, quindi!
Creiamo una nuova pagina HTML in Dremweaver CS3.
Tra il tag <body> e </body> aggiungiamo il seguente codice:

<div id="animato"> Questo è un livello semplice!! testo_txt.text="Lorem ipsum dolor Morbi nunc gravidcursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor amet, consectetuer adipiscing elit Lorem ipsum dolor Morbi nunc gravidcursus nec, luctus a, lorem. </div>

Ora, giusto un secondo livello, di seguito al codice precedente:

<div id="secondLevel">Apri/Chiudi</div>

Ora non resta che creare l'animazione! Assicuratevi di trovarvi sul cursore all'interno del codice dell'ultimo livello denominato "secondLevel".

Dal menu "Finestra" clicchiamo su "Comportamenti".
Dal pannello a destra che si aprirà clicchiamo sul simoblo "+" e scegliamo dal menu conseguente la voce "Effetti".
Dal successivo menu scegliamo "Veneziane".
Quindi popoliamo l'ultimo pannello che verrà visualizzato, impostando i valori come da immagine seguente.

Confermate con "OK".

Vi verrà richiesto di salvare un file Javascript. Confermate con "OK".

Prima di provare la pagina, assicuratevi che il tag del livello "secondLevel" sia stato modificato nella seguente maniera:

<div id="secondLevel" onclick="MM_effectBlind('animato', 1000, '100%', '0%', true)">Questo è altro livello</div>

Ora potete provare la pagina! Come vedrete la sezione verrà aperta o chiusa ogni volta che clicco sul menu "secondLevel".
Come i pannelli a soffietto degli Spry Widget!

Gestire gli eventi della tastiera in Actionscript 3

Talvolta, creando animazioni in Flash con Actionscript, è utile gestire gli eventi dalla tastiera. Il caso più semplice è quello di creare un oggetto e muoverlo in alto/basso o destra/sinistra con le frecce.
Vediamo come è possibile con questo breve post.
In un nuovo documento, creiamo una forma quadrata e convertiamola in MovieClip, dandole il nome "quadro_mc".

Quindi, sul primo fotogramma scriviamo:

stage.addEventListener(KeyboardEvent.KEY_DOWN, sposta);

function sposta(e:KeyboardEvent)
{
switch(e.keyCode){
case Keyboard.DOWN:
quadro_mc.y+=5;
break;
case Keyboard.UP:
quadro_mc.y-=5;
break;
case Keyboard.LEFT:
quadro_mc.x-=5;
break;
case Keyboard.RIGHT:
quadro_mc.x+=5;
break;
}
}

Così facendo, controlliamo quale pulsante della tastiera sto cliccando e le varie costanti della classe "Keyboard" (LEFT, RIGHT, ecc..) mi permetteranno di capire come far muovere l'oggetto. L'evento ovviamente è legato alla classe "KeyboardEvent"
Unica nota: questo script non permette di muoversi in diagonale. In questo caso avrei dovuto gestire il materiale in maniera differente.

E' uscito Adobe Flash Player 10!

(ringraziamo per la news: M.Casario e AUGItaly)
E' disponibile la nuova versione di Adobe Flash Player 10, nome in codice ASTRO.

Direttamente dal sito LABS :
3D Effects - Easily transform and animate any display object through 3D space while retaining full interactivity. Fast, lightweight, and native 3D effects make motion that was previously reserved for expert users available to everyone. Complex effects are simple with APIs that extend what you already know.

Custom Filters and Effects - Create your own portable filters, blend modes, and fills using Adobe® Pixel Bender™, the same technology used for many After Effects CS3 filters. Shaders in Flash Player are about 1KB and can be scripted and animated at runtime.

Advanced Text Layout - A new, highly flexible text layout engine, co-existing with TextField, enables innovation in creating new text controls by providing low-level access to text offering right-to-left and vertical text layout, plus support for typographic elements like ligatures.

Enhanced Drawing API - Runtime drawing is easier and more powerful with re-styleable properties, 3D APIs, and a new way of drawing sophisticated shapes without having to code them line by line.

Visual Performance Improvements – Applications and videos will run smoother and faster with expanded use of hardware acceleration. By moving several visual processing tasks to the video card, the CPU is free to do more

Creare e gestire campi di input in Actionscript 3.0

In questo breve tutorial vedremo come sia semplice gestire, colorare o modificare in generale un campo di testo di input.

Ecco qui il codice:

var testo:TextField=new TextField();
addChild(testo);
testo.borderColor=0xAADDCC; // Imposto il colore del bordo
testo.border=true;//Imposto che il colore deve essere visibile
testo.width=200;
testo.height=20;
testo.x=200;
testo.y=200;
testo.type=TextFieldType.INPUT;//Dichiaro che il campo di testo è di INPUT!!
testo.background=true;
testo.backgroundColor=0xFFAACC; //Imposto il colore dello sfondo!

Far sapere ad un file SWF il proprio nome...!!!

Va bene. Detto così non è che si capisce bene cosa voglia mostrarvi con questo post!
In realtà se non ci avessi dovuto sbattere un pò la testa, neanche io l'avrei ritenuto così utile ! :)
Tuttavia, per farvi intendere meglio l'utilità dell'argomento che andrò a trattare, vi sottoporrò un problema che mi è capitato in un lavoro di e-learning per una società (Gruppo Pragma) con cui ho collaborato.

Per questo lavoro dovevo creare dei filmati flash molto semplici. Inoltre alcuni file avevano associeto un video FLV esterni. E fin qui tutto ok!
Qui però nasceva il problema! I file FLV e SWF che venivano caricati sulla piattaforma finale del cliente venivano rinominati in automatico, con un nome generato seguendo una precisa regola che però, per motivi vari, non ero tenuto a sapere!!!

Aiuto! E ora? Come faccio a far capire al componente FLVPlayBack che deve caricare un video, di cui, neanche io sapevo il nome, ne potevo dedurlo??
L'unica certezza era: il nome file FLV è lo stesso dell'SWF. Questo significava che se il file SWF veniva rinominato tipo: acdf45Ials.swf, il video sarebbe stato acdf45Ials.flv.

Senza sbattersi troppo, basta rifarsi alla classe LoaderInfo e alla sua proprietà "url".
(hehehe ora lo so!!!)

Quindi torniamo al titolo! Se io voglio far "sapere al file SWF il proprio nome" sarei risalito al nome del video e fine dei problemi!!!!

Quindi:

var pathThisFile:String=this.loaderInfo.url;
var numPosFileName:Number=pathThisFile.indexOf(".swf");
var initNomeFile:Number=pathThisFile.lastIndexOf("/")+1;


var nomeFinale:String=pathThisFile.slice(initNomeFile, numPosFileName);
trace("Questo file si chiama, senza estensione :"+nomeFinale);

Con la prima riga mi faccio ridare tutto il percorso! Ed è già qualcosa!
Con la proprietà "lastIndexOf" cerco la barra "/" a partire dalla fine di tutto il percorso. E mi faccio restituire l'occorrenza esatta in cui appare.

Infatti pensiamo ad un percorso del genere: http://www.miosito.it/file/provaNome.swf

Se voglio individuare "provaNome", la proprietà lastIndexOf mi dice (a partire dalla fine) quando incontrerà la "/".
Col metodo "indexOf" invece gli chiedo di farmi sapere a quale posizione troverà l'estensione "swf".
A questo punto taglio col metodo "slice" tutto al stringa del percorso partendo dal punto in cui ho trovato la "/" fino al punto in cui incontrerà l'estensione "swf". E il gioco è fatto. Quello che rimane è il nome che mi serve!!!!

Gestire codice Actionscript caricato da un SWF esterno

Già in alcuni post precedenti abbiamo visto come caricare materiale esterno: JPG e SWF soprattutto.
Tuttavia, il semplice caricamento potrebbe non essere sufficiente. Immaginiamo di dover gestire del codice presente su altri SWF e di dover far interagire gli script presenti sui vari SWF.

Vediamo come.
In un nuovo documento FLA (che salveremo col nome "uno.fla") , scriviamo:

var ciao:String="Try text";

Creiamo l'SWF (CTRL+Invio o Cmd+Invio).
Creiamo ora un nuovo documento FLA e salviamolo nella stessa cartella del precedente, col nome "due.fla"
Scriviamo sul primo fotogramma:

var path:URLRequest=new URLRequest("uno.swf");
var loader:Loader=new Loader();
var mc:MovieClip=new MovieClip();
loader.load(path);
addChild(loader);

La variabile "mc" è quella che ci interessa veramente. Faremo in modo che "mc" erediti il codice dell'altro . Il resto infatti serve giusto al caricamento dell'SWF "uno".

Subito sotto al codice precedente scriviamo:

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, prendi);

Con l'evento legato al "contentLoaderInfo", possiamo reperire informazioni dal file caricato!!!

function prendi(e:Event){
mc=(e.target.content) as MovieClip;
trace(mc.ciao);
}

Come vedete "mc" è stata popolata con il contenuto del target legato all'evento indicato in precedenza! Con un semplice "trace" ci siamo fatti restituire il valore della variabile appartenente all'altro SWF!

Creare un menu a tendina con Fireworks CS3

Anche detti "menu a comparsa", in questo tutorial vedremo come creare un menu a tendina grazie a Fireworks CS3. In questo piccolo tutorial saremo in grado di gestire il menu con immagini o in semplice HTML.
Apriamo Fireworks CS3 e creiamo un documento 400 x 300 pixel con 72 dpi di risoluzione.

Scriviamo "My Menu" all'interno del documento con lo strumento testo. Userremo la scritta facendo in modo tale che cliccando su di essa, appaia un menu a comparsa.
Per rendere "attiva" la parola, dobbiamo renderla tale (cioè attiva). Quindi dal pannello struementi (alla vostra sinistra) selezionate la voce "Punto attivo". Vedi foto.

Ora creiamo una selezione intorno alla parola "My Menu" con questo struemento.

Si creerà un riquadro celestino chiaro! Quella è l'indicazione da parte di Fireworks che la zona è divenuta un punto attivo, e sarà pronta ad essere associata all'azione di menu a comparsa.

Ora, dal menu "Elabora", andiamo su "Menu a comparsa", quindi su "Aggiungi menu a comparsa".

Perfetto. Ora il pannello che seguirà mi permetterà di gestire le voci di menu secondo 4 impostazioni di base:

CONTENUTO: Qui inserirò le varie voci di menu con i relativi link.
Un pulsante sul rientro di una (vedi foto sottostante) mi permetterà di indicare se il menu deve essere una voce di sottomenu oppure una voce principale.

Impostiamo quindi un menu come presente in foto:


ASPETTO: Questa sezione mi permetterà ( e la modalità è molto intuitiva ) di gestire il menu da un punto di vista grafico. Specificando tra le altre cose, se il menu debba essere orizzontale o verticale.
In questa sezione alla voce "Celle" scegliamo l'opzione "HTML". Sicuramente più leggere di un menu costruito con immagini.

AVANZATI: Qui vengono gestiti gli aspetti più interessanti del menu. Larghezza tra una voce e l'altra di menu, la spaziatura tra le parole, ecc... Lasciamo inalterati i parametri.

POSIZIONE: Ovviamente questo aspetto mostra le caratteristiche di posizionamento del menu. Impostiamolo come meglio preferiamo.
NOTA: nel caso in cui la posizione non fosse a noi congeniale, possiamo modificare la posizione in un secondo momento.

Come potrete vedere, ora sopra il menu è ben visibile un reticolato trasparente legato con il centro del nostro punto attivo, come da foto.

Quel reticolato è il nostro menu. Largo e alto tanto quanto abbiamo chiesto nelle impostazioni precedenti. Se la posizione del menu non ci risultasse buona, possiamo cliccare sul reticolato-menu e spostarlo a nostro piacimento.

Proviamo la pagina e vediamo cosa sta succedendo.

Andiamo nella voce di menu "File", quindi "Anteprima nel browser", quindi "Anteprima in Firefox" o Internet Explorer.

Come vedrete il menu inizialmente non si vede. Se invece passate (effetto rollover) sopra la nostra scritta noterete apparire come per magia il nostro bellissimo menu. Con una voce (Chi siamo) che presenta un sottomenu. Vedi foto successiva.


Ora possiamo anche esportare il nostro lavoro. Dal menu "File" andiamo su "Esporta". Creiamo una cartella "Menu Dinamico" e confermiamo il salvataggio. Facciamo giusto attenzione a che l'indicazione "Esporta" indichi "HTML e immagini", così salveremo immagini e pagina HTML.

NOTA: In effetti la pagina creata da Fireworks CS3 non è il massimo, soprattutto per il fatto che il lavoro viene inserito all'interno di una tabella, e come saprete oggi bisognerebbe lavorare con siti table-less. Potreste utilizzare questa pagina come punto di partenza per comprendere il funzionamento di un sito costruito in questa maniera.

E' disponibile la nuova beta 1 di Internet Explorer 8

E' disponibile da qualche giorno, la nuova beta di Internet Explorer 8 per Designer e Developer!

Così... da che la Microsoft ci ha messo 5 anni a sfornare la versione 7... dopo poco meno di due stiamo già alla 8!

Tra le novità fondamentale è la maggiore fruibilità e gestione del lavoro proprio per chi è addetto ai lavori.

Questo è il link del download. Buon divertimento