
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Creazione di effetti di trasparenza, sempre più presenti su RIA e software, al movimento dei vari oggetti, il tutto tramite ActionScript 3 sia in Flex che in Flash
Un effetto piuttosto diffuso nelle applicazioni desktop, e in molte RIA, è l’effetto di semi-trasparenza di un pannello quando questo viene trascinato: gli stessi software Adobe utilizzano questo effetto per evidenziare all’utente quale pannello sta spostando.
In questo articolo vedremo come rendere semi-trasparente un elemento quando viene trascinato, aggiungendo anche un piccolo effetto di ombreggiatura, il tutto tramite Actionscript 3 (in Flex 3 e in Flash CS3).
Per visualizzare i file di esempio presenti nell’articolo è necessario il Flash Player 9 (o successivo).
Per prima cosa creiamo un nuovo progetto (File -> New -> Flex Project) dandogli un nome a piacere, quindi trasciniamo un’istanza del componente Panel (contenuto nella categoria Layout del pannello Componenti); tramite il pannello proprietà diamo un identificavo al nostro pannello, per esempio pannello1; facoltativamente è possibile impostare anche un titolo per il pannello ed eventuali altre proprietà, ma non sono parametri rilevanti per il nostro esempio.
Ora che abbiamo inserito sullo stage l’oggetto a cui vogliamo applicare l’effetto, dobbiamo per prima cosa renderlo trascinabile: in Flex possiamo usare le proprietà dei tag MXML per impostare l’esecuzione di una funzione al verificarsi di un evento, nel nostro caso gli eventi che ci interessano sono mouseDown
(ovvero il click sul pannello) e mouseUp
(ovvero il rilascio del pulsante sinistro del mouse) che lanceranno rispettivamente l’inizio e la fine del trascinamento dell’oggetto cliccato.
I comandi per avviare e fermare il trascinamento in Actionscript 3 sono i medesimi delle precedenti versioni di Actionscript, ovvero startDrag
e stopDrag
.
Possiamo quindi impostare due funzioni, trascina e rilascia, associandole ai suddetti eventi:
Listato 1. Trascina e rilascia l’oggetto
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”400″ height=”400″>
<mx:Script>
<![CDATA[
public function trascina(evt:Event):void{
evt.target.startDrag()
}
public function rilascia(evt:Event):void{
evt.target.stopDrag()
}
]]>
</mx:Script>
<mx:Panel x=”66″ y=”10″ width=”250″ height=”100″ layout=”absolute” title=”Pannello” id=”pannello1″ mouseDown=”trascina(event)” mouseUp=”rilascia(event)” mouseChildren=”false”>
</mx:Panel>
</mx:Application>
Notiamo gli eventi MouseDown
e mouseUp
nel tag MXML del componente Panel, mentre nelle due funzioni abbiamo sfruttato la proprità target degli eventi per sapere su quale oggetto ha cliccato l’utente, in questo modo potremo sfruttare facilmente le funzioni anche per altri eventuali pannelli, come vedremo in seguito.
È da evidenziare nel codice anche l’impostazione della proprietà mouseChildren
a false: questo impedisce che l’evento del click del pulsante venga recepito dagli elementi interni al pannello (per esempio il titolo), situazione che potrebbe causare degli errori o degli effetti indesiderati in quanto, per esempio, potrebbe essere trascinato non l’intero pannello, ma un elemento interno a esso.
Il risultato del codice appena visto è il seguente:
Trascinamento del pannello
Possiamo impostare molto semplicemente la trasparenza tramite la proprietà alpha (che, ricordiamo, in Actionscript 3 ha un range compreso tra 0 e 1) mentre per l’ombreggiatura possiamo affidarci al filtro DropShadow. Ecco come modificare le funzioni trascina e rilascia:
Listato 2. Aggiunge trasparenza e ombreggiatura
public function trascina(evt:Event):void{
evt.target.startDrag()
evt.target.alpha = .6
var filtro:DropShadowFilter = new DropShadowFilter()
filtro.alpha = .3
filtro.distance = 30
evt.target.filters = [filtro]
}
public function rilascia(evt:Event):void{
evt.target.stopDrag()
evt.target.alpha = 1
evt.target.filters = []
}
Come possiamo vedere, al click sul pannello la trasparenza viene impostata al 60% (0,6), viene quindi creata una nuova ombra con la trasparenza al 30% (0,3) e una distanza di 30 pixel, quindi il filtro viene applicato all’elemento cliccato grazie alla proprietà filters. Quando, invece, il mouse viene rilasciato, la trasparenza dell’elemento che era stato cliccato viene riportata al 100% (1) e il filtro DropShadow viene rimosso dalla clip.
Nel nostro esempio, finora, abbiamo utilizzato un solo pannello, ma utilizzando più elementi avremmo un problema di sovrapposizioni, infatti, un pannello, durante il trascinamento, potrebbe risultare sottostante agli altri.
Uso di più pannelli con problemi di profondità
Come si può vedere, il Pannello 3 è posto sopra agli altri e tale rimane anche durante il trascinamento degli altri pannelli.
Il codice relativo a questo esempio è molto semplice; notiamo come le funzioni utilizzate per il trascinamento dei vari pannelli sono sempre trascina e rilascia, questo perché grazie all’utilizzo del target dell’evento possiamo sfruttare una medesima funzione per più oggetti, ricavando l’oggetto che ha scatenato l’evento.
Listato 3. Trascina e rilascia più pannelli
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”400″ height=”400″>
<mx:Script>
<![CDATA[
public function trascina(evt:Event):void{
evt.target.startDrag()
evt.target.alpha = .6
var filtro:DropShadowFilter = new DropShadowFilter()
filtro.alpha = .3
filtro.distance = 30
evt.target.filters = [filtro]
}
public function lascia(evt:Event):void{
evt.target.stopDrag()
evt.target.alpha = 1
evt.target.filters = []
}
]]>
</mx:Script>
<mx:Panel x=”66″ y=”10″ width=”250″ height=”100″ layout=”absolute” title=”Pannello” id=”pannello1″ mouseDown=”trascina(event)” mouseUp=”lascia(event)” mouseChildren=”false”>
</mx:Panel>
<mx:Panel x=”10″ y=”151″ width=”189″ height=”151.2″ layout=”absolute” id=”pannello2″ title=”Pannello 2″ mouseDown=”trascina(event)” mouseUp=”lascia(event)” mouseChildren=”false”>
</mx:Panel>
<mx:Panel x=”217″ y=”151″ width=”173″ height=”200″ layout=”absolute” id=”pannello3″ title=”Pannello 3″ mouseDown=”trascina(event)” mouseUp=”lascia(event)” mouseChildren=”false”>
</mx:Panel>
</mx:Application>
Possiamo facilmente ottenere un effetto più gradevole portando in primo piano il pannello che viene cliccato, ciò è molto semplice grazie al comando addChild
, che permette di aggiungere un oggetto allo stage o, nel caso in cui questo oggetto sia già presente, lo sposta sulla profondità più alta disponibile. Possiamo quindi variare in questo modo la funzione trascina:
Listato 4. Porta in primo piano il pannello cliccato
public function trascina(evt:Event):void{
evt.target.startDrag()
evt.target.alpha = .6
var filtro:DropShadowFilter = new DropShadowFilter()
filtro.alpha = .3
filtro.distance = 30
evt.target.filters = [filtro]
addChild(evt.target as DisplayObject)
}
Notiamo l’uso della dicitura as DisplayObject
, che ci permette di convertire l’oggetto in un DisplayObject
, ovvero il tipo di oggetto richiesto dal comando addChild
.
Uso di più pannelli con cambio di profondità
Possiamo notare come l’ultimo pannello cliccato risulti in primo piano.
Ricordiamo che quanto visto finora è applicabile anche a elementi diversi dal componente Panel, di seguito è possibile vedere per esempio l’effetto applicato su tre diversi elementi: un componente Button, un componente Radio Button e un componente Numeric Stepper.
Uso di elementi diversi dal componente Panel
L’effetto visto è perfettamente replicabile anche con Flash CS3: creiamo un nuovo file Actionscript 3 (File -> New -> Actionscript 3 File) e creiamo tre clip sullo stage, dandogli nome istanza clip1, clip2, clip3. Le clip possono essere disegnate manualmente oppure essere istanze di un componente.
Portiamoci quindi nel pannello azioni e inseriamo il seguente codice:
Listato 5. Trascina e rilascia in Flash
function trascina(evt:Event):void{
evt.target.startDrag()
evt.target.alpha = .6
var filtro:DropShadowFilter = new DropShadowFilter()
filtro.alpha = .3
filtro.distance = 30
evt.target.filters = [filtro]
addChild(evt.target as DisplayObject)
}
function rilascia(evt:Event):void{
evt.target.stopDrag()
evt.target.alpha = 1
evt.target.filters = []
}
clip1.addEventListener(MouseEvent.MOUSE_DOWN,trascina)
clip1.addEventListener(MouseEvent.MOUSE_UP,rilascia)
clip2.addEventListener(MouseEvent.MOUSE_DOWN,trascina)
clip2.addEventListener(MouseEvent.MOUSE_UP,rilascia)
clip3.addEventListener(MouseEvent.MOUSE_DOWN,trascina)
clip3.addEventListener(MouseEvent.MOUSE_UP,rilascia)
Come vediamo il codice delle funzioni trascina e rilascia rimane invariato, mentre cambia il modo di associazione degli eventi alle clip che in questo caso eseguiamo tramite Actionscript.
In Flash CS3 non è presente il componente Panel, tuttavia come abbiamo detto il codice funziona su qualsiasi tipo di elemento e potremo quindi adattarlo alle nostre esigenze e ai nostri pannelli.
Esempio dell’effetto su clip disegnati in Flash
Se vuoi aggiornamenti su Effetti di trasparenza al drag di un elemento inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Abbiamo ricevuto la tua richiesta di iscrizione. Se è la prima volta che ti registri ai nostri servizi, conferma la tua iscrizione facendo clic sul link ricevuto via posta elettronica.
Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali.
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Come creare database e collection, inserire, estrarre, aggiornare e rimuovere dati da una base di dati MongoDB con Python
Impariamo ad utilizzare Takamaka, una blockchain Java Full Stack, per scrivere codice Java installabile ed eseguibile su una blockchain
Controllare da front-end le dimensioni e tipologia dei file che gli utenti caricano su server sfruttando le FIle API di HTML5, jQuery. Completa la trattazione una verifca anche da back-end in PHP.
Android è il sistema operativo mobile più diffuso attualmente sul mercato. Imparare a sviluppare app per Android è quindi la chiave d’accesso ad uno dei mercati più attivi nello sviluppo mobile. Questa guida completa e dettagliata fornisce tutte le informazioni necessarie per imparare a progettare ed implementare app moderne e funzionali per Android.