Unobtrusive SWFObject 2.0

Martedì 25 Marzo, 2008

swfobject SWFObject è uno script Javascript utilizzato per inserire contenuti Flash all’interno delle pagine Web. La sua principale funzione è quella di eliminare la richiesta di attivazione del controllo da parte di Microsoft Internet Explorer (che, comunque sia, è in fase di dismissione - vedi qui) e, più interessante, la capacità di verificare ed installare automaticamente il Flash Player ove richiesto. SWFObject può considerarsi un’ottima alternativa al kit di install/detect fornito dalla stessa Adobe e generabile all’interno dell’IDE Flash (in tutte le sue versioni). Con la versione 2.0, SWFObject migliora le sue performance e il suo utilizzo. Come indicato sulla documentazione ufficiale, spostata su Google Code, le novità di questa release sono talmente tante da renderlo NON compatibile con le precedenti versioni. Questo si traduce di fatto in una revisione completa del codice per chi decidesse di aggiornare una precedente versione SWFObject alla 2.0.

Lo script è ora allineato agli ultimi standard, sia dal punto di vista sintattico che da quello “non intrusivo”. Supporta tutte le precedenti features, come l’installazione rapida del Flash Player, con un codice più chiaro e facile da usare. Il passaggio dei parametri, ad esempio, da Javascript al Player Flash (e quindi al nostro filmato) è ora assai più chiaro e versatile. Inoltre sono stati introdotti due principali modi di funzionamento: statico e dinamico, in base al tipo di pagina e processo di design che stiamo effettuando.

Utile e davvero bon fatto è il tool online che genera il codice SWFObject per noi.

LINK:

Post correlati

Classi, Oggetti e Istanze

Martedì 29 Gennaio, 2008

Ho notato spesso confusione quando si parla di Classi, Oggetti ed Istanze. Chi non è particolarmente istruito sulla programmazione ad oggetti spesso confonde il vero significato di questi termini. Sapevo, tuttavia, che esistono due scuole di pensiero riguardo alla definizione di Classe e Oggetto. A me piace la "scuola" che indica la Classe come definizione di un possibile Oggetto e, quindi, l'Oggetto come Istanza della Classe.

Sembra banale, tuttavia mi è capitato - discorrendo con altri - di trovarmi in "conflitto" (per così dire) e poi cadere in equivoci, quando si usano questi termini, partendo casomai dal presupposto che "l'altro" li intenda esattamente come noi.

Io la vedo in questo modo; una Classe è una definizione! Viene appunto definita una classe di possibili oggetti. La Classe è l'insieme di metodi e proprietà (se volete possiamo aggiungere anche gli eventi - che altro non solo che speciali metodi...) che possiederà l'oggetto.

Ad esempio quando scriviamo in Actionscript, o qualsiasi altro linguaggio ad oggetti:

Actionscript:
  1. class MiaClasse {
  2.     function MiaClass() {}
  3.     function MioMetodo() {}
  4. }

Abbiamo definito una Classe e non un Oggetto. Al limite abbiamo "definito" un "possibile" oggetto. Potremmo addirittura sostenere, e non a torto, che l'Oggetto esiste a runtime mentre la Classe no (in verità esistono Classi dinamiche che possono essere definite - e poi usate per creare oggetti - anche a runtime). Escludo le classi statiche, ovviamente che - alla fine - altro non sono che sotto-istanze (o istanze nascoste) e quindi oggetti veri e propri.

Quando invece abbiamo:

Actionscript:
  1. var mioOggetto:MiaClasse = new MiaClasse();

Ecco che mioOggetto è una istanza di MiaClasse()! Cioè mioOggetto è un Oggetto - appunto - di tipo MiaClasse().

Ne deriva, proprio nella filosofia ad oggetti, che di Oggetti di tipo MiaClasse() ne posso avere quanti ne voglio, cosa che non può essere - per la definizione stessa - di MiaClasse(). Ad esempio, se vale ed ha senso la relazione:

Actionscript:
  1. var mioOggetto_1:MiaClasse = new MiaClasse();
  2. var mioOggetto_2:MiaClasse = new MiaClasse();
  3. var mioOggetto_3:MiaClasse = new MiaClasse();
  4. ...
  5. var mioOggetto_n:MiaClasse = new MiaClasse();

Non ha significato:

Actionscript:
  1. class MiaClasse {
  2.     function MiaClass() {}
  3.     function MioMetodo_2() {}
  4. }
  5.  
  6. class MiaClasse {
  7.     function MiaClass() {}
  8.     function MioMetodo_2() {}
  9. }
  10.  
  11. class MiaClasse {
  12.     function MiaClass() {}
  13.     function MioMetodo_3() {}
  14. }

Istanza e Oggetto, quindi, coincidono e sono usate alternativamente per lo stesso significato in diversi contesti.

Probabilmente non frega molto a nessuno... questione di esigenze di completezza... :)

Post correlati

Aprile 2008: addio all’attivazione dell’ActiveX per Flash

Venerdì 9 Novembre, 2007

Sul blog di Internet Explorer (IE Automatic Component Activation (Changes to IE ActiveX Update)) è stato annunciato un'importante cambiamento che avverà introno ad aprile 2008, con il rilascio di importante patch, compresa la tanto attesa Service Pack 3. Un'anteprima, tuttavia, sarà disponibile entro dicembre 2007 dal centro download di Internet Explorer.

Nell'aprile 2006, infatti, Microsoft aveva introdotto una patch in Internet Explorer che bloccava l'interazione con i componenti ActiveX presenti in una pagina Web. Questo "blocco", alla fine, si risolveva nella richiesta esplicita - diretta all'utente/navigatore -  di attivare il controllo (filmato Flash, QuickTime, etc...) tramite la barra spaziatrice o un click del mouse.

IE Automatic Component Activation (Changes to IE ActiveX Update)

Nel tempo, tuttavia, sono state introdotte tutta una serie di scorciatoie per evitare questa fastidiosa richiesta, scorciatoie ufficiali (proposte ad esempio dalla stessa Macromedia per Flash e da Apple per QuickTime) e non ufficiali (SWFObject o UFO, ad esempio - vedi anche Unobtrusive Flash Objects).
Secondo Microsoft gli sviluppatori non dovranno modificare nulla ad aprile 2008 nei "vecchi" siti che utilizzavano scorciatoie, tuttavia è bene dare un'occhiata al blog di Internet Explorer per i casi particolari.

Microsoft torna quindi sui suoi passi, ed effettivamente ci eravamo chiesti un po' tutti che idiozia fosse questa dell'attivazione del controllo, "pezza" adottata per una carenza nella gestione degli ActiveX (TAG OBJECT) più che a falle nei componenti stessi. Negli altri browser, infatti, l'uso dei Plugin è accompagnato dal più solido TAG EMBED. Ultima nota:

In the coming weeks, we'll be updating the MSDN article with descriptions of the new behavior. Keep an eye out here for when the preview goes live.

Post correlati

Fullscreen in Flash dal browser

Martedì 30 Ottobre, 2007

Flash ha sempre supportato la modalità a schermo interno (fullscreen) sia nel Player stand-alone che nel proiettore. Questa modalità ancor oggi viene pienamente supportata e non ha subito modifiche. Adobe ha invece recentemente introdotto la possibilità di attivare il fullscreen direttamente nei filmati visualizzati nel browser. È stata introdotta una nuova e semplice funzionalità ActionScript che lavora sia con i player stand-alone che con i player browser. Per rendere il fullscreen fuzionante bisogna operare anche lato HTML, aggiungendo un nuovo parametro allowFullScreen nei TAG <object> ed <embed>. Tutto il resto è demandato al motore interno di Flash.
Questa nuova funzionalità ha comunque alcune restrizioni che bisogna conoscere, prima tra tutte l'uso del Flash Player versione 9.0.28.0 o superiore. Inoltre, ricapitolando:

  • Sul Browser dev'essere installata la versione del Player 9.0.28.0 o superiore
  • I developer devono aggiungere un nuovo parametro allowFullScreen nei Tag <object> e <embed>. Questo parametro è impostato normalmente a false e non permette il fullscreen. Per permettere il fullscreen bisogna esplicitamente impostarlo a true.
  • Un Box di dialogo verrà mostrato quando si entra in modalità fullscreen e indicherà all'utente come uscire da tale modalità. Questo Box sarà visibile per pochi secondi, passati i quali scomparirà da solo.
  • L'attivazione del fullscreen da ActionScript può avvenire solo in risposta di un click del mouse o tramite la pressione di un tasto, qualsiasi altra modalità verrà ignorata in ActionScript 2.0 e scatenera una eccezione throw in ActionScript 3.0.
  • Durante la modalità di fullscreen non è possibile utilizzare la tastiera. L'utente finale non può quindi inserire o modificare testi. L'unica risposta alla tastiera è riservata alla combinazione di tasti usata per uscire dalla modalità di fullscreen (la pressione del tasto ESC)

Codice ActionScript

Il codice necessario per impostare il fullscreen è semplicissimo e sfrutta l'oggetto Stage discusso su questo Blog in StageExt Class: filmati ridimensionabili in Flash:

Actionscript:
  1. Stage["displayState"] = "fullScreen";

Continua a leggere... »

Post correlati

Scrivere buon codice OO in Adobe Flash

Venerdì 19 Ottobre, 2007

Ecco alcuni consigli su come scrivere un buon codice Object Oriented (OO) in Adobe Flash, soprattutto per chi ancora usa la versione MX in attesa di passare alla CS3.

Organizzare le cartelle delle classi

Prima di tutto l'organizzazione delle classi rende il lavoro di manutenzione del codice estremamente più semplice. Inoltre è possibile creare una vera e propria libreria personale da poter riutilizzare in altri progetti. Flash usa una nomenclatura legata al filesystem, quindi l'organizzazione in cartelle si rifletterà anche sull'importazione delle classi. Se ad esempio creiamo la sequenza di cartelle "mylibrary/grafica/plot" e inseriamo una nostra classe ActionScript "PlotClass.as", quando andremo ad importare la classe dovremmo usare:

Actionscript:
  1. import mylibrary.grafica.plot.PlotClass;

Se la libreria (cartella) "mylibrary" non si trova nella cartella del nostro filmato o progetto, usare l'impostazioni di pubblicazione di Flash per selezionare il percorso:

Impostazione percoroso librerie

Continua a leggere... »

Post correlati

Javascript Object (parte I)

Sabato 6 Gennaio, 2007

Se si ha bisogno di istanziare più oggetti di una classe, un metodo è quello di definire la classe tramite lo pseudo-costruttore function().

JavaScript:
  1. // class definition
  2. function CmyClass(param1,param2) {
  3.     this.myProperty = param1;
  4.     this.myAdding = param1+param2;
  5.     //
  6.     this.myMethod = function(param1) {
  7.          alert( "add: "+this.myAdding+" - Param: "+param1);
  8.     }
  9. }
  10. //
  11. var obj1 = new CmyClass(10,20);
  12. var obj2 = new CmyClass(20,40);
  13. //
  14. obj1.myMethod("Hi from obj1");
  15. //
  16. obj2.myMethod("Hi from obj2");

Definita la classe - con tanto di parametri iniziali - posso creare n istanze del mio oggetto, personalizzandole durante la creazione con la keyword new.
Posso anche inserire una chiamata ad un metodo durante la fase di inizializzazione dell'oggetto, stando solo attento ad inserirlo per ultimo - vedi riga 14:

JavaScript:
  1. // class definition
  2. function CmyClass(param1,param2) {
  3.     this.myProperty = param1;
  4.     this.myAdding = param1+param2;
  5.     //
  6.     this.myMethod = function(param1) {
  7.          alert( "Result: "+this.myResult );
  8.     }
  9.     //
  10.     this._init = function() {
  11.         this.myResult = this.myProperty*100;
  12.     }
  13.  
  14.     this._init();
  15.  
  16. }
  17. //
  18. var obj1 = new CmyClass(10,20);
  19. var obj2 = new CmyClass(20,40);
  20. //
  21. obj1.myMethod("Hi from obj1");
  22. //
  23. obj2.myMethod("Hi from obj2");

Un modo sbagliato sarebbe - vedi riga 6:

JavaScript:
  1. // class definition
  2. function CmyClass(param1,param2) {
  3.     this.myProperty = param1;
  4.     this.myAdding = param1+param2;
  5.  
  6.     this._init();
  7.  
  8.     //
  9.     this.myMethod = function(param1) {
  10.          alert( "Result: "+this.myResult );
  11.     }
  12.     //
  13.     this._init = function() {
  14.         this.myResult = this.myProperty*100;
  15.     }
  16.  
  17.  
  18. }
  19. //
  20. var obj1 = new CmyClass(10,20);
  21. var obj2 = new CmyClass(20,40);
  22. //
  23. obj1.myMethod("Hi from obj1");
  24. //
  25. obj2.myMethod("Hi from obj2");

Un'altro modo per creare un oggetto al volo (on-fly) è quello di dichiarare una variabile/funzione, mono uso:

JavaScript:
  1. var myObject = {
  2.     myProperty: 10,
  3.    
  4.     myMethod: function() {
  5.         alert("Hi from "+this.myProperty);
  6.     }
  7. };
  8.  
  9. myObject.myMethod();

Questa tecnica è comoda quando si vuole creare una sola istranza di un oggetto, e trattarlo come tale. Questa viene spesso usata nei recenti framework Ajax, come prototype e derivati. A partire da questa, infatti, non è possibile istanziare un nuovo oggetto, in quanto la classe è andata persa.

Si può poi ricorrere all'uso di prototype per estendere una classe, anche vuota. Ad esempio:

JavaScript:
  1. function CmyClass() {}
  2.  
  3. CmyClass.prototype = {
  4.     myProperty: 10,
  5.    
  6.     myMethod: function() {
  7.         alert( "Hi from " + this.myProperty);
  8.     }
  9. }
  10.  
  11. var obj = new CmyClass();
  12.  
  13. obj.myMethod();

Oppure:

JavaScript:
  1. function CmyClass() {
  2.     this.myOldProperty = 1000;
  3.     }
  4.  
  5. CmyClass.prototype = {
  6.     myProperty: 10,
  7.    
  8.     myMethod: function() {
  9.         alert( "Hi from " + this.myProperty);
  10.         alert( "Hi from " + this.myOldProperty);
  11.     }
  12. }
  13.  
  14. var obj = new CmyClass();
  15.  
  16. obj.myMethod();

Post correlati