Ciò che contraddistingue le Rich Internet Applications, oltre che le funzionalità avanzate, sono anche le animazioni di transizione o di interazione. Chi è abituato a lavorare con Flash e ActionScript 3 sa che spesso ottenere animazioni da codice può essere non proprio immediato – a volte possono essere necessarie librerie esterne –, ma grazie al nuovo framework Flex 4 integrato in Flash Builder 4 animazioni semplici ma accattivanti come le rotazioni 3D posso essere utilizzate con sforzi minimi!

Guardate una demo del risultato finale.

1. Creiamo un nuovo documento

Creaimo un nuovo progetto che utilizzi il framework Spark (SDK Flex 4) e passiamo subito alla visualizzazione del codice nella modalità “source”.

All’interno del tag <fx:Declarations> creiamo un oggetto di tipo “Rotation 3D” al quale assegnamo subito un id per poterlo richiamare più avanti:

<s:Rotate3D id=”ruota” />

Il tag <fx:Declarations> è stato introdotto nel framework Flex 4 per creare una zona nel codice MXML dove dichiarare solo gli oggetti non visuali, quindi non bottoni, liste e simili.

2. Impostare la rotazione

Ora inseriamo un po’ di proprietà analizzandole. Il risultato di queste sarà una rotazione sull’asse Y dell’oggetto che dura un secondo dal centro dello stesso:

<s:Rotate3D id=”ruota” angleYFrom=”0″ angleYTo=”360″ duration=”1000″ autoCenterTransform=”true” />

angleYFrom e angleYto : rispettivamente angolo dell’asse Y di inizio e di fine, possiamo anche usare gli assi X e Z!

duration: indica in millisecondi la durata dell’interpolazione, quindi 1000 = 1 secondo.

autoCenterTransform: impostando “true” o “false” decidiamo se vogliamo la rotazione dal centro dell’oggeto oppure no.

3. Click e via!

Ora l’interpolazione è creata… ma inutilizzata! Trasciniamo nel nostro layout dalla modalità “design” una copia del componente Button e una copia del componente DateChooser:

Layout demo rotazioni Flex 4

torniamo alla modalità “source”, diamo un id al DateChooser (io l’ho chiamato “vittima”) e aggiungiamo una proprietà nel tag del bottone:

<s:Button label=”Ruotalo!” click=”ruota.play([vittima])” />

con la proprietà “click” su un componente Button attiviamo delle azioni che vengono lanciate quando premiamo quel bottone. In questo caso richiamo la mia rotazione 3D alla quale ho dato id “ruota” e con il metodo “play()” avvio l’animazione. Tra le parentesi tonde posso indicare i bersagli dell’animazione: siccome possono essere più di uno, li scriviamo dentro parentesi quadre (eventualmente ne mettiamo altri e li separiamo con la virgola).

Conclusione

Di seguito potete vedere il risultato finale , cliccate sul bottone per vedere ruotare il calendario soprastante:

Avete visto che grazie al framework Spark (la 4° versione di Flex) si può facilmente creare e applicare un qualunque tipo di rotazione 3D a praticamente ogni oggetto, vi basta cambiare l’asse di rotazione e il nome del bersaglio (o bersagli) dentro “ruota.play()” e il gioco è fatto!

Il 12 aprile Adobe ha finalmente presentato la nuova Creative Suite (CS5). Mentre attendiamo la fine di maggio per la commercializzazione in Italia, scopriamo quali sono le novità salienti della suite a livello generale.

Che c’è di nuovo?

CS5 Master

In questa release della Creative Suite, oltre agli aggiornamenti delle funzionalità dei singoli prodotti (che non è cosa da poco!) si nota una crescente “contaminazione” tra i programmi stessi, per permettere a chi ha conoscenze in un settore specifico di muovere i primi passi verso altri ambiti. Per esempio, da InDesign CS5 è possibile creare eBook e pagine web, grazie al nuovo Flash Catalyst CS5 (presente in tutte le versioni della suite). Grafici “statici” abituati a lavorare in Photoshop o Illustrator possono trasformare i loro artwork in pagine interattive. Con la neo-acquisita Omniture troviamo servizi di analitiche e marketing integrati nei prodotti CS5, in più una nuova serie di servizi on line permette una maggiore revisione e collaborazione con altri utenti se si lavora in gruppo sullo stesso progetto.

64 bit

Da questa release viene introdotto un pieno supporto nativo per i sistemi a 64 bit, questo permette un utilizzo migliore della memoria RAM e quindi un’esecuzione più performante dei programmi, specialmente Photoshop e Illustrator. Ma dove viene maggiormente utilizzata questa funzione è nel video… infatti Premiere CS5 e After Effects CS5 d’ora in avanti saranno compatibili solo ed esclusivamente su computer basati su un’architettetura a 64 bit!

Omniture, da non sottovalutare!

Con l’acquisizione di Omniture, Adobe ha potuto inserire una serie di strumenti per il monitoraggio delle campagne di marketing direttamente nei software CS5. Con Site Catalyst è possibile tenere sotto controllo le attività dei nostri siti web una volta on line e anche delle nostre campagne di marketing (banner, mini siti, ecc.), ma la novità più considerevole in questo ambito è Business Catalyst, che permette di creare e gestire siti aggiornabili dai clienti, e-commerce e business on line… con pochissimo codice.

L’allargamento della piattaforma Flash

Logo Flash Platform

Con la CS5, la piattaforma Flash si allarga e punta a nuove frontiere. Entrano nella suite due nuovi prodotti: Flash Catalyst CS5, che permette la creazione di interfacce interattive senza la scrittura di codice, e Flash Builder 4 (di cui abbiamo parlato poco tempo fa), che potenzia i progetti creati in Catalyst o Flash Professional aggiungendo logiche complesse e integrazioni di database e servizi esterni. Adobe AIR vede la sua seconda versione permettendo di creare applicazioni desktop che reagiscono ai dispositivi touchscreen e Flash Player 10.1 estende il dominio di questa piattaforma fino agli smartphone… il tutto aspettando l’annunciato arrivo di Flash anche sulle prossime Tv.

Anche CS5 si avvicina al cloud, ecco i nuovi servizi

Come accennavo in apertura, ai prodotti “fisici” per la prima volta nella storia della Creative Suite si uniscono dei servizi on line, che prendono il nome di CS Live. Il tutto consiste in una mini suite di applicazioni on the cloud con lo scopo di ottimizzare i flussi di lavoro e di revisione prodotti realizzati in CS5. Per i “webbisti” il più entusiasmante di questi nuovi componenti è BrowserLab, che permette di testare le pagine web su più browser e più sistemi operativi senza alzarsi dalla propria sedia, mentre Acrobat.com mette a disposizione una serie di strumenti di editing di documenti on line. Con Adobe CS Review è possibile rivedere e commentare i progetti on line insieme al proprio team minimizzando i tempi morti generati dalle comunicazioni via e-mail.

Se siete già entusiasti della nuova Creative Suite potete scoprire tutte le novità nel dettaglio e scaricare le varie versioni di prova delle applicazioni presso il sito ufficiale di Adobe.

Il 2010 era già stato preannunciato come un anno ricco di novità per la piattaforma Flash: la prima si è concretizzata in questi giorni con il rilascio ufficiale da parte di Adobe di Flash Builder 4 (precedentemente noto come Flex Builder). Vediamo quali sono le maggiori novità che lo riguardano e proviamo a ragionare su come cambierà l’approccio allo sviluppo delle Rich Internet Applications.

Flash o Flex?

Flash Builder 4

Nel 2004 Macromedia (successivamente acquisita da Adobe) ha deciso di rispondere alle esigenze dell’utenza evoluta di Flash rilasciando sul mercato Flex Builder, un’ambiente di sviluppo e un nuovo framework di ActionScript che si concentra sulla costruzione di applicazioni e siti web complessi in gergo chiamati Rich Internet Applications (applicazioni web ricche). A quei tempi Flex era anche il primo prodotto a introdurre la nuova versione del linguaggio ActionScript 3, che successivamente sarà inserito anche in Flash CS3. Essendo Flex diviso in due elementi: l’ambiente di sviluppo (il “builder”) e le librerie del framework (Flex SDK), nell’ultima versione è stato deciso di distinguerli maggiormente rinominando il primo “Flash Builder” e lasciando invariato il nome del secondo; questo anche perche mentre Flash Builder 4 è a pagamento, è possibile lavorare liberamente con le librerie Flex SDK, che sono gratuite e open-source.

Pensavo di poter fare tutto con ActionScript 3… cos’è questo Mxml?

In Flex abbiamo a disposizione un secondo linguaggio oltre ad ActionScript 3, che si chiama Mxml, il cui scopo è descrivere e definire gli elementi nella nostra applicazione. In Flash siamo abituati a disegnare e a disporre gli oggetti visualmente con gli strumenti da disegno. Non essendo questi presenti in Flex (e Flash Builder), abbiamo bisogno di questo secondo linguaggio per organizzare il layout. Un semplice paragone si può fare pensando ad Html e Javascript: il primo descrive la struttura e il layout delle pagine web, mentre il secondo gestisce le interazioni… La stessa cosa succede anche in questo caso, dove Mxml prende il posto di Html e ActionScript quello di Javascript. In più, sia Html sia Mxml sono figli del “grande” linguaggio Xml, quindi sono molti gli aspetti che li accomunano.

Un’occhiatina all’interfaccia

Rispetto a Flex Builder 3, non ci sono differenze sostanziali nell’interfaccia, mentre per chi arriva da Flash CS3/4 il cambiamento è veramente netto:

Interfaccia di Flash Builder 4 (clicca per ingrandire)

Niente linea temporale, niente libreria, niente strumenti da disegno… ma in cambio tanti componenti, pannello del progetto e altri pannelli per monitorare gli errori e le connessioni verso i servizi esterni.

Le nuove funzioni

In questa quarta versione del software troviamo una serie di innovazioni:

• Nuovo framework di lavoro: Flex 4, che introduce nuovi elementi e la possibilità di descrivere elementi grafici vettoriali da codice.
• Maggiore compabitibilità con Flash CS4/CS5: grazie al componente “Flash Component” è possibile avviare Flash Professional CS4 per realizzare elementi singoli che rimarrano all’interno del nostro progetto in Flash Builder.
• Possibilità di “skinning” (rifacimento grafico) dei componenti.
• Nuovi e migliorati strumenti di debug e verifica.
• Possibilità di importare file grafici Fxg: file grafici vettoriali che possono essere generati da Illustrator.
• Migliorata la gestione con i linguaggi lato server (Php, Asp, ColdFusion).

Ok, ma devo anche lavorare con linguaggi lato server e database!

La tecnologia Flash è di tipo lato client, quindi non può dialogare direttamente con un database, ma ha bisogno di un linguaggio lato server che faccia da intermediario. In questa nuova versione di Flash Builder 4 troviamo un pannello apposito per potere gestire la connessione verso una fonte di dati esterna (Http, Xml, Php, Asp, BlazeDS, ecc.) che ci permette in pochi click di creare collegamenti verso servizi esterni per rendere le applicazioni sempre più dinamiche. In più, se il nostro server per il progetto è in Php, Flash Builder 4 ha integrato il framework Zend che consente al software di creare in automatico le pagine in codice Php per collegarsi al database!

Gratuito? Sì, a livello “educational”!

Come per tutti i prodotti Adobe, è possibile scaricare la versione di prova gratuita di Flash Builder 4, completa di tutte le opzioni e funzionante per 60 giorni… Tuttavia, se siete studenti, docenti, sviluppatori disoccupati o comunque puntate a un’utenza non commerciale, potete richiedere tramite un apposito modulo una licenza educational gratuita che sblocca l’utilizzo di Flash Builder 4 a tempo indeterminato.

In un’era dominata dal web, in cui ormai l’utenza considera alcune funzioni di interazione come scontate (per esempio suggerimenti di testo, piccole animazioni, trascinamento di oggetti), sarebbe controproducente dedicare troppo tempo alla realizzazione di queste ultime… Ecco perche da un paio di anni stanno riscuotendo un grande successo le librerie per JavaScript. In questo post scorpriremo i vantaggi di queste librerie e analizzeremo le 3 più diffuse.

Cos’è una libreria JavaScript?

Per libreria (framework) si intendono dei file scritti in linguaggio JavaScript contenenti al loro interno molte funzioni comuni e utili già scritte, con lo scopo di ottimizzare i tempi di sviluppo di applicazioni e pagine web. I vantaggi principali di queste librerie sono:

• la facilità di utilizzo
• non pesano molto (pochi kb)
• utilizzano selettori Css
• permettono di creare animazioni da codice
• possono essere usate anche da chi non conosce JavaScript
• il codice è open-source e può essere modificato
• chiunque può costruire delle estensioni (plug-in) per includere nuove funzioni

Detto questo, vediamo quali sono le 3 librerie più diffuse e le loro particolarità:

jQuery - write less,do more

jQuery

Attualmente la più diffusa nel web, jQuery è la libreria che promette “write less, do more” (scrivi di meno, fai di più). Punta a un’utenza basilare, ma per la sua versatilità e potenza è utilizzata spesso da grandi aziende anche per questioni più complesse (recentemente è stata inserita all’interno della suite Visual Studio di Microsoft). A un’utenza molto ampia corrisponde il numero di plug-in esistenti per questa libreria, tra cui l’ufficiale jQuery UI, che include strumenti per realizzare interfacce utente interattive in modo semplice.

MooTools

MooTools

MooTools invece è una libreria che viene sviluppata puntando a un’utenza di medio/avanzato livello. La sua curva di apprendimento è leggermente più ripida di quella di jQuery, ma questo non le ha impedito di guadagnarsi un consolidato secondo posto tra le librerie più diffuse. Anche per MooTools esiste un numero elevato di risorse e di plug-in.

Adobe Spry

Spry

Sviluppata da Adobe, Spry in realtà non è proprio al terzo posto, in quanto a utilizzo, tra le librerie JavaScript, ma è molto più conosciuta delle altre in quanto è stata integrata nativamente in Dreamweaver fin dalla versione CS3, cosa che le permette di essere inserita all’interno di pagine web con estrema facilità. Tuttavia può essere utilizzata anche separata da Dreamweaver, ma nonostante rimanga di facile utilizzo, pecca nella mancanza di plug-in e risorse aggiuntive.

I Css sono noti per la loro semplicità e versatilità, tuttavia realizzare alcuni effetti basilari di tipografia non è poi così semplice e intuitivo… ma niente panico, non è nemmeno troppo complesso! Ci soffermeremo ora sulle centrature verticali e orizzontali degli oggetti, vedremo come ottenerle e quali sono i loro vantaggi/svantaggi.

Centrare orizzontalmente il testo all’interno di un oggetto

Partiamo dal caso più semplice. Se abbiamo del testo all’interno di un qualunque oggetto Html (h1, div, p… quello che volete!) possiamo sfruttare una proprietà Css che fa proprio al caso nostro, “text-align” (allineamento testo), che supporta tre valori: left (sinistra), right (destra) e center (centro). Quindi ci basta assegnare al testo questa proprietà e il gioco è fatto!

.centraTesto{
   text-align: center;
}

Centrare verticalmente il testo all’interno di un oggetto

Per effettuare invece una centratura verticale del testo, abbiamo prima bisogno di definire l’altezza (height) dell’oggetto che lo contiene. Poi specificheremo un’altezza di linea (line height) esattamente dello stesso valore.

.boxTestoVerticale{
   height: 70px;
   line-height: 70px;
}

Con questa “tecnica” possiamo centrare verticalmente sia testi sia immagini.

Centrato in verticale

Centrare orizzontalmente un box

Ecco ora la soluzione più richiesta! Come avrete notato, tutte le centrature che eseguiamo tramite i Css modificano la posizione di ciò che è contenuto dentro il nostro oggetto, non dell’oggetto stesso!
In modo predefinito non esiste una proprietà che ci permette di centrare un oggetto Html in una pagina tramite i fogli di stile ma, per ottenere questo risultato, possiamo sfruttare un valore magico della proprietà “margin”:

.centraBox{
   margin:0 auto;
}

Centrato in orizzontale, sia il testo sia il box

Assegnando due valori alla proprietà “margin”, facciamo in modo che il primo venga applicato in verticale (tanto sopra quanto sotto) e il secondo in orizzontale (sia a destra sia a sinistra). Quello che otteniamo in questo modo è che i margini orizzontali del nostro oggetto siano automatici: rimarrà così centrato nella pagina anche in caso di successivi ridimensionamenti!

Viviamo ormai in un’era dominata dal web, e in cui il fenomeno dei social network sta acquisendo una rilevanza sempre maggiore. Ora si sta lentamente diffondendo anche in Italia il servizio che oltreoceano spopola già da un paio di anni: scopriamo insieme le caratteristiche principali di Twitter e come ha rivoluzionato il modo di comunicare in 140 caratteri!

Cos’è Twitter?

Twitter (in inglese “cinguettare”) è un servizio di micro-blogging, ovvero uno spazio dove ognuno può liberamente scrivere i propri pensieri o opionioni, dentro un limite di 140 caratteri. Quello che scriviamo su Twitter viene visualizzato da chi ci segue (“follower”) e a nostra volta leggeremo le micro-pubblicazioni di chi stiamo seguendo (“following”). Ogni nostro intervento su Twitter viene in gergo chiamato “tweet”.

I “followers” sono “amici”?

No. Un’utente registrato a Twitter può decidere di seguirci senza la nostra approvazione, tuttavia noi siamo liberi di bloccarlo (quindi non permettergli di visualizzare i nostri tweet) in qualunque momento. In genere si differenzia Facebook da Twitter sostenendo che il primo viene utilizzato per mantenere contatti con chi già si conosce, il secondo per seguire persone che non necessariamente si conosce nella vita reale.

Di cosa dovrei “twitterare”?

Di quello che vuoi. Ovviamente più sono interessanti i tuoi tweet, più è probabile che la gente continui a seguirti. “Twitterando” di fatti o notizie utili, magari di cui siete testimoni, sicuramente guadagnerete interesse! Sappiate che gran parte delle informazioni riguardanti alcune particolari, estreme situazioni di cronaca, come il terremoto in Abruzzo e i disordini in Iran dopo le elezioni del 2009, sono giunte a noi tramite gli utenti locali di Twitter.

Seguitemi!

Chi dovrei seguire?

Il pregio di Twitter è che ci tiene aggiornati in tempo reale su tutto quello che le persone che decidiamo di seguire scrivono. Quindi, la cosa migliore è seguire persone o associazioni che ci interessano: tra gli account Twitter troverete attori (famosi o meno), associazioni ed enti (come Save The Children e altri), gruppi musicali, guru della tecnologia e… ovviamente anche noi di Mohole!

Facebook e Twitter sono integrati!

Se siete utenti Facebook potete attivare l’applicazione per Twitter, che vi permette di sincronizzare i due servizi. Il vantaggio principale sta nel fatto che scrivendo una frase in un contesto, vedrete aggiornarsi in automatico anche l’altro, quindi potrete tenere aggiornati entrambi gli account con uno sforzo minimo.

Ci sono programmi desktop per usare Twitter?

Certo! Ce ne sono un’infinità, i maggiori al momento sono Twitterrific (anche in versione iPhone), Twhirl e TweetDeck, ma essendo Twitter un servizio a codice libero ogni sviluppatore può creare la sua applicazione! Il vantaggio di usare un programma desktop è quello di ricevere notifiche sugli aggiornamenti dei nostri contatti in tempo reale, grazie a finestrelle di pop-up sullo schermo.

Le applicazioni disponibili per Twitter

]]> http://labs.mohole.it/2010/02/breve-guida-a-twitter/feed/ 0 http://labs.mohole.it/2010/01/creiamo-piccoli-archivi-con-xml/ http://labs.mohole.it/2010/01/creiamo-piccoli-archivi-con-xml/#comments Wed, 20 Jan 2010 11:50:35 +0000 Salvatore Laisa http://labs.mohole.it/?p=384

Il linguaggio Xml è molto complesso e sicuramente più importante e ricco di quanto non si tenda a credere. La sua facilità di utilizzo e la grande flessibilità che offre l’hanno reso un linguaggio molto utilizzato per creare piccoli archivi spesso utilizzati da linguaggi di scripting (come ActionScript 3, Php e Javascript), con il fine di rendere dinamiche nei contenuti le pagine web. In questo tutorial scopriremo le basi di Xml creando un piccolo archivio di dischi, che in futuro riutilizzeremo per altri tutorial.

Che cos’è Xml

Abbreviazione di eXtensible Markup Language (linguaggio di marcatura estensibile), Xml è un linguaggio usato per generarne altri. Utilizza tag per definire delle parole chiave ma, al contrario di linguaggi come Html, non ha una “grammatica” di tag fissa, essendo flessibile: ciò siginifica che se voglio inventare il tag <pippo>, in Xml posso farlo!

Nota: Al contrario di molte credenze comuni Html è figlio di Xml e non il contrario!

Di che software ho bisogno?

Potrebbe bastare il blocco note ma, visto che non ci vogliamo così male, possiamo tranquillamente optare per un editor di codice. Tanto quelli a pagamento (come Dreamweaver, Coda, ecc.) quanto quelli gratuiti (Aptana, Notepad++, Komodo Edit, ecc.) supportano la scrittura in linguaggio Xml.

1. Iniziamo!

Creiamo un nuovo file dal nostro editor preferito: in quasi tutti i software sarà possibile selezionare fin da subito, come tipologia di file, proprio Xml. Una volta creato il nuovo file, dovreste avere di fronte a voi una pagina bianca, a eccezione di una prima riga già scritta:

<?xml version=”1.0″ encoding=”UTF-8″?>

questo “tag” assomiglia al Doctype di Html, nel senso che indica il tipo di linguaggio (Xml), la versione (1.0) e il tipo di codifica di caratteri (UTF-8). Se il vostro editor non ha generato in automatico la prima riga che vi ho appena illustrato, sentitevi liberi di copiarla da questa pagina e incollarla nel vostro documento, in quanto questa riga di “configurazione” del file Xml è obbligatoria!

2. E vai di primo tag

Dopo avere creato il nuovo file, iniziamo a strutturare il nostro archivio. Abbiamo detto che una caratteristica fondamentale di Xml è che possiamo inventarci noi i tag; quindi, se vogliamo inizializzare un archivio di cd musicali, il primo tag potremmo chiamarlo proprio “dischi”:

...

ovviamente, come gran parte dei tag, se lo apriamo dobbiamo anche chiuderlo… (ecco il perché di </dischi>).

3. Uno per tutti

Dentro il tag “dischi” inseriremo gli oggetti che conterrano le informazioni relative a ogni album: per il momento, titolo dell’album e autore. Per capire come struttureremo questi oggetti, iniziamo scrivendone uno solo:

	Dark side of the moon
	Pink Floyd

Useremo il tag “album” come contenitore di informazioni per ogni cd, mentre i tag “titolo” e “autore” li metteremo al suo interno, in modo da fargli contenere le informazioni relative a ogni disco.

4. Tutti per uno!

Ora che abbiamo stabilito una struttura per ogni singolo oggetto, ripetiamola per tutti quelli che vogliamo inserire. Come esempio lo riepeterò 4 volte con oggetti diversi, ovviamente inserendo il tutto dentro il tag “dischi”:

	
		Dark side of the moon
		Pink Floyd
	
	
		The song remains the same
		Led Zeppelin
	
	
		Yessongs
		Yes
	
	
		Made in Japana
		Deep Purple
	

5. Salviamo

Ora il nostro file è pronto per essere utilizzato, ricordiamoci di salvarlo! Se l’editor non lo suggerisce, a questo punto dobbiamo salvare il file con estensione .xml per poter sfruttare le potenzialità di questo formato.
A cosa serve questo file? Innanzitutto è un piccolo archivio, quindi possiamo usarlo proprio per archiviare informazioni (l’elenco dei nostri cd magari!) poi, avendo una struttura logica che si ripete, sarà grandioso quando con un linguaggio di scripting avremo bisogno di leggerlo ed estrapolarne le informazioni in esso contenute… ma questo lo vedremo più avanti .

A breve Adobe rilascerà una nuova versione di Flash Player, il runtime che permette di visualizzare i contenuti Flash nei nostri browser. A dispetto di quello che può suggerire il numero di versione di questo aggiornamento (10.1), non si tratta affatto di un aggiornamento di tipo minore.

Ma perché seguire gli sviluppi del Player? Semplicemente perché se il Player supporta nuove funzionalità, significa che gli sviluppatori Flash possono utilizzarle per migliorare i prorpri siti/applicazioni e, in generale, che abbiamo a disposizione nuovi strumenti per essere creativi!

Se volete iniziare a sperimentare le nuove caratteristiche del Player illustrate di seguito potete scaricarne la versione beta dal sito ufficiale di Adobe e leggere la documentazione a riguardo.

Mobilità e nuove piattaforme

Flash Player 10.1 sarà scalabile. Ciò significa che sarà in grado di visualizzare i nostri contenuti – pensati per essere visualizzati su computer fissi – anche su dispositivi mobili con minore potenza di calcolo. Quindi, se realizziamo un sito in Flash per il web “classico”, quello stesso sito sarà poi visualizzabile anche sui sistemi mobili che supportano il nuovo Player come smartphone, netbook e palmari. Tra i sistemi che attualmente rendono possibile tutto ciò ricordiamo: Android 2.0, Microsoft Windows Mobile 6.5, Palm webOS, and Symbian S60 V5 – che coprono quindi le maggiori marche di produttori di cellulari come Nokia, Htc e Palm. Il grande escluso da questo discorso è l’amato/odiato iPhone.

Supporto per MultiTouch

Se pensavate che mouse e tastiera non fossero più sufficienti per creare interazioni, allora siete stati accontentati: da questo nuovo aggiornamento del Flash Player potremo sfruttare dispositivi sensibili al tocco per creare interazioni guidate dalle nostre dita! Sia Windows 7 sia Mac OS 10.6 (Snow Leopard) supportano questa funzionalità, tuttavia al momento in cui scrivo questo articolo gli unici dispositivi che sono dotati dell’hardware necessario per il multitouch sono i MacBook Pro di Apple e i computer HP TouchSmart.

Per una serie di Faq sul MultiTouch in Flash Player 10.1 consultate questo post di Lee Brimelow.

Accelerometro e orientamento (solo mobile)

Se realizzate siti/applicazioni pensando proprio ai dispositivi mobili come destinatari principali, potrete sfruttare i dati dell’accelerometro (il componente hardware che è in grado di rilevare quando l’oggetto viene mosso), oltre a potervi cimentare con la possibilità di riadattare i contenuti delle vostre realizzazioni Flash in base alla direzione in cui viene rotato lo schermo. Molti smartphone, come per esempio il Nokia N97, permettono di ruotare lo schermo per visualizzare le pagine web in altezza o in larghezza.

Accesso diretto al microfono (solo desktop)

Un’ultima curiosità: da questa nuova versione potrete accedere direttamente al microfono del computer per leggere l’audio in entrata. Cosa succederà poi dipende solo da voi… è possibile memorizzare audio, eseguire controlli sull’audio raccolto (per esempio per accordare uno strumento), rimanipolare suoni/rumori registrati e altro ancora!

ActionScript 3 è un linguaggio molto più potente e versatile del suo predecessore, anche se si è perso qualcosa in semplicità di utilizzo. In parole povere: per realizzare operazioni complesse troverete questo linguaggio molto comodo, mentre per realizzare azioni più banali potreste incontrare inaspettate difficoltà. Niente panico! In pochi e semplici passaggi vedremo come dare interattività a qualunque pulsante realizzato in Flash con questo linguaggio, e faremo chiarezza su alcuni aspetti base di As3.

Software richiesto: Flash CS3 e superiori.

1. Iniziamo

Innanzitutto aprite un nuovo documento in Flash (ovviamente deve essere un nuovo documento di tipo ActionScript 3) e create un qualunque oggetto grafico, che trasformerete in un pulsante. Ricordatevi che la cosa più importante è dare un nome di istanza a questo pulsante, per poterci mettere mano da codice. Con grande fantasia, per questo esempio chiamerò il mio “pulsantino”.

Un nuovo documento ActionScript 3

Nota: potete convertire il vostro oggetto grafico sia in Clip Filmato (MovieClip) sia in Pulsante (Button), ricordatevi in entrambi i casi di dare un nome di istanza all’oggetto!

2. In ascolto…

Deselezionate il pulsante e aprite il pannello delle Azioni (nel menu Finestra -> Azioni). La prima riga di codice che scriveremo ci servirà per creare un’entità che resterà in attesa di un evento e richiamerà un’azione non appena questo evento accadrà.

pulsantino.addEventListener(MouseEvent.CLICK , Cliccato);

Le prime due parole significano che aggiungiamo all’oggetto “pulsantino” un oggetto di tipo Event Listener. Tra parentesi indichiamo il tipo di evento per il quale deve restare in ascolto – nel nostro caso si tratta del click del mouse – e il nome della funzione da richiamare quando questo evento avviene.

Nota: ricordatevi che ActionScript 3 è case-sensitive, ovvero legge le differenze tra le lettere maiuscole e minuscole. Fate quindi attenzione a come scrivete le parole-chiave, e ai nomi che date a funzioni e variabili. “Cliccato” è diverso da “cliccato”!

Ora abbiamo quindi una sentinella che resta in ascolto del click del mouse sul nostro “pulsantino”: quando sentirà questo evento richiamerà la funzione “Cliccato”. Ma cosa farà questa funzione? Al momento niente, ma solo perché non l’abbiamo ancora definita! Quindi procediamo…

3. Causa ed effetto

Facciamo in modo che ci appaia un messaggio nella finestra di output con il comando “trace”:

function Cliccato(event:MouseEvent){
	trace("Mi hai cliccato!");
}

La parola-chiave “function” indica che stiamo scrivendo una funzione, e la parola successiva è il nome che vogliamo attribuire alla funzione in questione (è necessario chiamare questa funzione esattamente con lo stesso nome che abbiamo utilizzato in precedenza). Subito dopo, tra parentesi, indichiamo il tipo di evento che richiama la funzione: nel nostro caso è esattamente lo stesso dell’EventListener. Tra parentesi graffe indichiamo le righe di codice da eseguire quando questa funzione viene chiamata – per il nostro scopo ci basta la funzione “trace”, che stamperà una stringa di testo da noi indicata nel pannello di output.

Dopo aver scritto queste 4 righe di codice, salvate il file e avviatelo premendo Ctrl + Invio (per utenti Mac: Cmd + Invio). Ora, ogni volta che cliccherete sul vostro pulsante otterrete il messaggio nel pannello output di Flash.

La finestra di Output

4. Varie possibilità

A questo punto abbiamo tra le mani il “motore” per eseguire azioni al click del mouse su un pulsante. Per esempio, se vogliamo fare in modo che cliccando il nostro pulsante si sposti la Timeline verso un determinato frame, ci basta sostituire la riga del “trace” con la seguente:

// Il numero tra parentesi può essere cambiato a vostro piacimento o necessità
gotoAndStop(3);

oppure modificare il valore del testo all’interno di un campo di testo dinamico:

// Prima create un campo di testo dinamico e dategli un nome!
// in questo caso l'ho chiamato "TestoDinamico"
TestoDinamico.text = "Hai cliccato il pulsante!";

Esempio:

5. In chiusura

Gli eventi e le funzioni svolgono un ruolo fondamentale nella programmazione in ActionScript 3, in quanto è principalmente grazie a essi che possiamo realizzare le interazioni nei nostri siti o applicazioni. Con questo tutorial abbiamo fatto chiarezza sull’utilizzo pratico di questo linguaggio per dare vita ai nostri pulsanti, tuttavia… questa è solo la punta dell’iceberg!

In questo capitoletto vedremo quali elementi compongono la struttura base di un documento Html e li useremo per costruire le fondamenta della nostra prima pagina web.

Software richiesto: editor di testo (non word processor)

1. I tag

Un documento Html per essere elaborato correttamente dal browser deve avere una struttura “scheletro” di base fissa, l’equivalente delle fondamenta per la costruzione di una casa. Con il nostro editor aperto creiamo un nuovo documento e cominciamo scrivendo il tag più importante per la nostra pagina:

<html></html>

In Html i tag si differenziano dal resto del documento per il fatto che sono parole racchiuse tra i segni di maggiore e minore ( < e > ) e quasi tutti necessitano di un tag di chiusura, che altro non è che una ripetzione dello stesso tag preceduto da uno slash ( / ). In questo modo stiamo indicando al documento che tutto ciò che si trova tra <html> e </html> sarà processato come linguaggio Html.

2. Mente e Corpo

Definito il linguaggio il passo successivo è dividere le informazioni contenute in due gruppi, quelle che saranno visibili all’utente e quelle che non saranno visibili all’utente finale, in Html raggruppiamo le informazioni non visibili all’utente nel tag <head>  (testa) e quelle visibili nel tag <body> (corpo), quindi scriviamo questi tag nel nostro documento seguendo la sintassi che abbiamo usato per il primo:

<html>
	<head></head>
	<body></body>
</html>

Nota: l’indentazione è una tecnica di scrittura nel quale si sfruttano spazi vuoti prima di alcune frasi per dargli una specie di ordine gerarchico.

Questo schema di scrittura del codice, che sfrutta tabulazioni per indentare e allineare il testo è il più utilizzato tra gli sviluppatori in quanto permette una rapida consultazione del documento.

Per informazioni visibili all’utente si intende testi, titoli, immagini e oggetti di questo tipo; mentre per informazioni non visibili all’utente ci riferiamo a link per fogli di stile o script esterni, parole chiave per i motori di ricerca e informazioni sul documento.

3. Il “Title” del documento

All’interno di esiste un tag per il quale il discorso del non essere visibile all’utente vale a metà. Si tratta del tag <title> che ci permette di dare un titolo al nostro documento, questo titolo non sarà visibile nel corpo del nostro documento, ma sarà visibile ai motori di ricerca e nella barra superiore di tutti i browser. Essendo un tag che permette sia all’utente che ai motori di ricerca di individuare la pagina, sarebbe sempre meglio evitare di pubblicare sul web pagine prive di tag <title> o con un contenuto non appropriato, nel caso del sito di un’attività la cosa migliore sarebbe mettere il nome del suddetto seguito da una brevissima descrizione.

Inseriamo un tag di titolo allo scheletro Html che abbiamo appena creato:A questo punto salviamo il file con un nome che abbia come estensione .html (per esempio: prova.html) e apriamolo all’interno di un browser per vedere i risultati, se tutto è andato bene senza problemi (e sarebbe difficile averne ora!) vi troverete di fronte ad una pagina completamente bianca con il titolo visualizzato nella parte superiore della finestra del browser.

<html>
 <head>
   <title>La mia prima pagina Html</title>
 </head>
 <body></body>
</html>

Ecco come appare il tag Title nella nostra pagina

A questo punto per velocizzare la creazione delle prossime pagine che realizzeremo vi consiglio di partire sempre da questo file con lo “scheletro” Html di base.