Fullscreen Flash: ActionScript 3

Pubblicato il 12/7/2010 alle 08:00

Nel mini-tutorial di oggi vedremo come impostare il fullscreen in un filmato Flash utilizzando ActionScript 3.

Nel filmato Flash, inseriamo il codice ActionScript sul primo fotogramma. Per prima cosa, dichiariamo una variabile “fullStatus” di tipo booleano. Questa variabile conterrà “true” se il filmato è in modalità “fullscreen” altrimenti “false” se è in modalità “normal“:

var fullStatus:Boolean;
fullStatus = false;

Ora scriviamo una funzione che, in questo caso, chiameremo “changeMod“. La funzione controllerà la variabile fullStatus. Se la variabile contiene “false” la proprietà stage.displayState verrà impostata su StageDisplayState.FULL_SCREEN; se contiene “true” la proprietà verrà impostata su StageDisplayState.NORMAL:

function changeMod(e:MouseEvent):void
{

if (fullStatus==false) {
fullStatus = true;
btt.stage.displayState = StageDisplayState.FULL_SCREEN;
}
else {
	   fullStatus = false;
       btt.stage.displayState = StageDisplayState.NORMAL;
      }

}

Posizioniamo un componente “button” con nome d’istanza “btt” sullo stage e associamo la funzione changeMod all’evento MouseEvent.CLICK. Così facendo, cliccando sul pulsante, potremo attivare/disattivare il fullscreen:

btt.addEventListener(MouseEvent.CLICK, changeMod);

Ultima cosa ma importantissima: nel codice html che incorpora il filmato nella nostra pagina web non dimentichiamo di impostare il parametro “allowFullScreen” su “true“:

Qui potete vedere il filmato in azione.

Di seguito potete scaricare i files del mini-tutorial.

download: Flash Fullscreen AS3 (1.14MB) added: 11/07/2010 clicks: 83 description: Come impostare il Fullscreen in Flash con ActionScript 3.

Flash su iPhone/iPad grazie a Smokescreen

Pubblicato il 31/5/2010 alle 13:57

Flash non girerà mai suoi “gioiellini” della Apple e questo l’abbiamo capito tutti e ce ne siamo fatti una ragione (forse???). Ma c’è chi si “ingegna” per ovviare ai divieti di zioSteve

Smokescreen è un progetto open source che permette la visualizzazione di contenuti Flash su iPhone/iPod/iPad. Smokescreen consente la conversione automatica dei contenuti Flash in JavaScript/html5.

Ecco una demo del progetto nel seguente video:

Ecco alcuni errori da evitare nella realizzazione di un sito dinamico

Pubblicato il 25/5/2010 alle 17:54

Nell’ultimo mese sono stato contattato da una adv agency che mi ha chiesto di realizzare un nuovo CMS per un sito dinamico (appartenente ad un loro cliente) e di apportare alcune modifiche anche alla parte client. Visualizzando i sorgenti del sito web ho avuto modo di constatare diversi errori di progettazione  e una moltitudine di scelte più o meno insensate dovute, probabilmente, alle scarse competenze di coloro che in passato hanno realizzato il sito in questione

Errore n°1: menu principale realizzato in Flash

Ebbene si, il primo errore è un errore SEO. Il menu principale e le photogallery dei prodotti sono state realizzate in Flash. Mentre per le photogallery la scelta di utilizzare Flash può essere condivisibile (anche se le soluzioni JS non mancano di certo, vedi qui e qui) il menu principale di un sito non va mai e poi mai realizzato in Flash. Bisogna realizzarlo in semplice HTML per permettere agli spider dei motori di ricerca di trovare le pagine del sito. Leggerezza confermata anche dall’assenza di una sitemap.

Errore n°2: layout tabellare

Il layout delle pagine web è stato realizzato con le tabelle senza rispettare gli standard web e senza tenere conto di una cosa importantissima come l’accessibilità. Errore gravissimo, nulla da aggiungere.

Errore n°3: pagine non dotate di url seo-friendly

Il dominio del sito in questione effettua un redirect ad un server dove è ospitato il sito. Tutte le pagine del sito, comprese quelle dei prodotti, non hanno url uniche. In pratica, tutte le pagine del sito rispondono all’indirizzo www.sitoinquestione.com. Nei motori di ricerca non sono indicizzate le pagine dei prodotti, altro errore SEO dunque (ogni prodotto doveva avere un indirizzo del tipo www.sitoinquestione.com/prodotto-xyz).

Errore n°4: il multilingua che ti farà impazzire

Questa è una vera e propria genialata. In pratica, il sito è multilingua (ita, eng, fra, esp) e per ogni photogallery (di ogni prodotto) sono stati realizzati 4 SWF del tipo:

- photogallery_prodotto_x_ita.swf
- photogallery_prodotto_x_eng.swf
- photogallery_prodotto_x_fra.swf
- photogallery_prodotto_x_esp.swf

e via così per le photogallery di tutti i prodotti. Era sufficiente realizzare un unico file SWF che caricava le informazioni dinamicamente: si inviavano all’SWF le variabili ID_prodotto e la lingua scelta e il gioco era fatto. Invece no, immaginate ora di fare una modifica, anche piccola, alla photogallery…risultato? Impazzire tra decine e decine di file FLA tutti uguali

Ho notato tanti altri piccoli errori ma credo di avervi fatto rabbrividire abbastanza Inoltre rischio di fare troppo la parte del Saputone e non mi sembra il caso

Realizzare applicazioni Adobe AIR lavorando con Flash

Pubblicato il 6/4/2010 alle 13:45

Sul blog dell’amico Andrea Pernici trovate un mio guest post dove spiego come esportare applicazioni Adobe AIR da Flash. L’articolo in questione è un tutorial con il quale illustro come realizzare una semplice applicazione AIR che permette di twittare dal desktop.

Ecco il link all’articolo: Come realizzare una semplice applicazione Adobe AIR per twittare dal desktop

p.s sul blog di Andrea trovate in alto a destra le icone sociali per seguirlo via RSS, Twitter e Facebook; vi consiglio di seguirlo

Creare siti Flash accessibili: iniziamo ad informarci

Pubblicato il 19/3/2010 alle 17:23

Realizzare siti Flash accessibili e usabili è un dovere ma non tutti i Flash developers si preoccupano di usabilità e di accessibilità purtroppo. Una cosa molto importante è informarsi, rendersi conto che realizzare siti Flash accessibili e usabili si può, con un pò di impegno e buona volontà si possono fare molte cose

Come ben sai, se ti sei imbattuto in un sito Flash non accessibile e poco usabile la colpa non è della tecnologia ma di chi ha realizzato il sito

Se non l’avete già visto, vi segnalo un video che Adobe mette a disposizione e che illustra gli strumenti per rendere gli oggetti Flash accessibili. Trovate il video a questa pagina: Adobe Flash CS4 Professional accessibility

Tenete d’occhio l’Adobe Accessibility blog (in lingua inglese) ed anche EmaWebDesign poichè, nelle prossime settimane, continueremo a parlare di Flash, SEO e accessibilità.

Se non vuoi perdere neanche un articolo puoi iscriverti al Feed RSS.

Adobe Flash vs HTML5 chi vincerà? E Jobs sta ancora puntando il dito contro?

Pubblicato il 11/3/2010 alle 22:59

Oggi voglio dirvi cosa penso della questione Steve Jobs vs Adobe. Il caro Flash è il “male” sentenzia zio Steve…Flash è il nemico di SEO/usabilità/accessibilità/ecc. sentenziano tutti…tutti quelli che non capiscono una mazza di ActionScript

Questo post nasce dopo la lettura di quest’articolo Video Flash VS Video HTML 5, the Winner is FLASH di ItaliaSW, articolo che vi consiglio di leggere ovviamente.

Io ho riflettuto molto sul perchè Flash non veniva, non viene e non verrà supportato da iPhone/iPod/iPad e l’unica risposta che riuscivo a darmi è che Apple aveva ed ha ancora paura di scoprire troppo le proprie carte collaborando con Adobe. Apple non divide con nessuno il potere sui propri gioiellini. E poi sappiamo tutti che QuickTime prese una bella “mazzata” quando arrivò il software di casa Adobe. Flash và sempre in crash? Flash stressa troppo la CPU? Maddai, Flash ha i suoi problemini come tutti i software ma non mi sembra che sia questo disastro che dice Jobs.

Poi si sà, se Jobs dice una cosa, sul web, tutti a ripetere la stessa  fino alla noia. Se domattina, Jobs, cambiasse le carte in tavola con un’uscita tipo “Flash è il paradiso, viva Flash”, sul web tutti acclamerebbero il nuovo salvatore, il meraviglioso e inimitabile Flash

Certo che per uccidere il buon Flash c’è bisogno comunque dell’eroe che viene a liberarci tutti dal male, chi meglio di HTML5 può vestire i panni dell’eroe di turno? (Capitan ventosa era impegnato altrimenti temo che arrivava lui )

Ebbene, come potete leggere dall’articolo di ItaliaSW, Jan Ozer uno che di video encoding nè capisce qualcosina, ha effettuato un pò di test dal quale è risultato che forse, più che Flash, è HTML5 ad avere qualche problemino di performance. Da questi test sembra che Flash batta quasi sempre HTML5 in performance, quindi, non si capisce il perchè delle accuse di Zio Steve anche se in realtà abbiamo capito tutti che Apple non vuole “aprirsi” troppo…nei confronti di Adobe poi

Tornando ai web designer che si sforzano di dire a destra e a manca che Flash è il male, ho sempre constatato che chi parlava male di Flash era sempre colui che non sapeva utilizzare tale software, colui che non riusciva a scrivere due righe di ActionScript in nessun modo. Vabbè, troppo facile tirare acqua al proprio mulino…ragazzi, non è meglio cercare di colmare le lacune invece di puntare il dito contro?

Io sono un Flash Developer, sono esperto di AS2 e AS3, dovrei essere di parte e lo sono. Ma non ho mai criticato niente e nessuno, ad esempio, non conosco e non ho mai utilizzato Silverlight. Dovrei parlarne male per questo? Un giorno, la mia irrefrenabile curiosità, mi porterà a scoprire anche quest’altra tecnologia made in Microsoft. Solo allora potrò farmi un’idea ma in nessun caso mi metterò a dire che Flash è il bene e Silverlight è il male. Ognuno è libero di utilizzare i software che preferisce e, se ci sono differenze di prestazioni, bug o altro, pazienza non si può avere sempre la perfezione.

E poi, cavolaccio, un pò di riconoscenza a Flash che ci ha portato i portali di video sharing e i FlashGames

Prossimamente, qui su EmaWebDesign, vedremo come realizzare un sito full Flash rendendolo il più possibile amico di SEO e Accessibilità…non chiedetemi quando ma presto ci daremo un’occhiata insieme

Che, tra l’altro, certi siti full Flash sono davvero strafighi

Flash MP4 Player: riproduzione di file MP4 con ActionScript2

Pubblicato il 7/1/2010 alle 15:43

Nel tutorial di oggi ti illustro come puoi riprodurre filmati MP4 con Flash CS3 ed ActionScript2. Puoi anche scaricare il sorgente

Iniziamo cliccando col tasto destro nella libreria e scegliendo “Nuovo Video…” come illustrato nella seguente immagine:

Trasciniamo un’istanza del video sullo stage e assegnamo come nome di istanza “video“.

Creiamo un nuovo layer dove posizioniamo un campo di testo con nome di istanza “output” e due pulsanti con nomi di istanza “bttPause” e “bttPlay“. Il primo pulsante arresta/riprende la riproduzione, il secondo fà partire il video dall’inizio.

Creiamo un nuovo layer dove inseriremo il seguente codice AS:

var file_video = “nome_filmato.mp4“;

var nc:NetConnection = new NetConnection();
nc.connect(null);
var stream_ns = new NetStream(nc);

stream_ns.onStatus = function(evt:Object):Void
{
if(evt.code == “NetStream.FileStructureInvalid”)
{
output.text = “Struttura MP4 non valida”;
}
else if(evt.code == “NetStream.NoSupportedTrackFound”)
{
output.text = “Il file MP4 non contiene dati audio o video) supportati!”;
} else
output.text = evt.code
}

// Visualizzazione del filmato
video.attachVideo(stream_ns);
stream_ns.play(file_video);

// Sound
var snd:Sound = new Sound();
snd.setVolume(100);
snd.attachSound(stream_ns);

// Buttons
bttPause.onPress = function() {
stream_ns.pause();
}

bttPlay.onPress = function() {
stream_ns.play(file_video);
}

Abbiamo finito il video player è pronto.

Nella variabile “file_video” inserite il nome del filmato (compresa l’estensione .mp4) del filmato da riprodurre.

download: Flash MP4 Player (16.07KB) added: 07/01/2010 clicks: 270 description: File Flash CS3 con videoplayer per la riproduzione di file MP4.

Web Developer: open source o cms fai da te?

Pubblicato il 23/12/2009 alle 13:18

Oggi le web agency, quando cercano sviluppatori con offerte di lavoro o di collaborazione, pretendono che il candidato sia in grado di lavorare con cms open source come Drupal, Joomla, WordPress ecc.

Perchè questo? Perchè la maggior parte delle web agency non possono permettersi di sviluppare siti e applicazioni “su mirura”, lavorano con cms open source di cui, magari, si sviluppa un template o si implementa qualche plugin per una particolare esigenza. Ovviamente per ridurre tempi  e costi.

Un giovane web developer allora non deve essere solo in grado di sviluppare un cms da zero ma deve saper mettere mano ai cms open source?

Come sempre dipende dagli obiettivi

Un giovane web developer, se vuole diventare un professionista con la P maiuscola, deve essere preparato su tutto e avere tutte le competenze utili:

1) Deve essere in grado di sviluppare web application da zero, qualsiasi sia il livello di difficoltà. Non devi mai accontentarti di essere in grado di sviluppare un piccolo cms che riesce ad interagire con un DB, devi porti come obiettivo quello di poter sviluppare qualsaisi tipo di web application a prescindere dal linguaggio di programmazione da utilizzare ecc.

2) Devi saper analizzare il problema “reale” del cliente, saper scrivere una buona analisi del problema. Aiutati con Modello E/R e tabelle dati.

3) Devi saper mettere mano ai cms open source perchè, anche se sei un eccellente developer e sei in grado di sviluppare qualsiasi tipo di web application, ci sarà sempre chi ti chiederà di lavorare con Drupal o con Joomla, quindi, studia questi cms e impara a “smanettare” con questi strumenti che tanto piacciono in quanto “gratuiti“.

Infine un ultimo consiglio

Se non conosci ActionScript e non hai mai lavorato con Flash, non ascoltare chi parla male del software di Adobe. Flash non è il “male” come qualcuno vuole far credere. E’ un potente strumento con cui si può realizzare di tutto: siti, applicazioni, games, video ed altro. Impara ad utilizzarlo, impara AS2 e AS3 e, soprattutto, impara a rendere i tuoi siti in Flash “amici” di SEO e Accessibilità perchè è possibile

EWD Flash Embed una comoda classe JS per embeddare filmati Flash

Pubblicato il 3/12/2009 alle 16:27

Oggi ho deciso di condividere una risorsa che potrebbe risultare molto utile soprattutto per chi lavora con Flash e i file SWF. Si tratta di una classe JavaScript, che ho realizzato con il paradigma OOP (programmazione orientata agli oggetti), di soli 4KB con cui potrai embeddare filmati Flash nelle tue pagine web in modo davvero semplice e veloce.

Il nome di questa classe è EWD Flash Embed ed è una valida alternativa ad altre risorse già note come SWFObject.

La classe JS è semplicissima da utilizzare (basta leggere la documentazione per tutti i dettagli) è cross-browser, W3C compliant e soprattutto è gratuita: la licenza con cui la rilascio è la Creative Commons Attribuzione-Non commerciale-Non opere derivate 2.5 Italia.

Ecco un esempio di utilizzo:

var fl = new flash();
fl.width(200);//Larghezza filmato
fl.height(200);//Altezza filmato
fl.src(“filmato_flash.swf”);//Nome del file
fl.align(“middle”);//Allineamento
fl.play(true);
fl.scale(“showall”);
fl.noplugin(“Per visualizzare correttamente questa pagina hai bisogno del Flash Player!”,true);
fl.embed(“mio_div”);//ID dell’elemento dove embeddare il filmato

Per scaricare la classe e per tutte le info e i dettagli potete visualizzare la pagina ufficiale: EWD Flash Embed

I migliori post della settimana #42

Pubblicato il 18/10/2009 alle 13:20

Vediamo quali sono stati i posts più interessanti di questa settimana:

1) Embed di filmati Flash con Flashembed

2) Google non usa i meta tag keywords per il posizionamento

3) Mettersi In Proprio: 7 Consigli Per Novelli Microimprenditori Del Web

4) 6 modi per rendere WordPress più facile da usare per i tuoi clienti

5) Come Lavora un SEO – Intervista a Michal Gawel (SEOLAB)

Web Developer / Web Designer / SEO Specialist / Napoli :: EmaWebDesign utilizza WordPress con tema EWD 2.0 :: Articoli (RSS) e Commenti (RSS)



Questo blog (e tutti i suoi contenuti) è pubblicato sotto una Licenza Creative Commons. Leggi il disclaimer per tutte le info.

L'autore del blog è Emanuele Calì, web developer, web designer e SEO specialist. Per maggiori info sull'autore potete visualizzare la pagina about. Per informazioni su servizi inerenti siti web, grafica o SEO & Web Marketing potete visualizzare la pagina servizi.