L’unico vantaggio che finora vedo nell’usare flash è l’embed dei video in stile youtube. Cosa anch’essa che sta per tramontare!

Bene, oggi mi trovo a sperimentare un nuovo prodotto che tanto mi ricorda i tempi di flash 3, in cui imparavo a fare i primi keyframe nelle animazioni manuali per poi arrivare a fare interi siti super schizzatissimi in un solo frame con tutte le animazioni realizzate in AS!

Ecco che oggi si presenta questa nuova possibilità che sfrutta le potenti novità di CSS3 e HTML5

Sancha Animator permette di animare, fare presentazioni, piccoli filmatini ecc e tutto ciò che esce è html e css… ecco la vera lucuna di falsh in questi anni! niente plugin, niente software di terze parti ecc.

Certo ancora ci sono le grandi controindicazioni. Non tutti i browser supportano le stesse caratteristiche del CSS3. Infatti molte animazioni, con Firefox 3.6 ancora non si vedono. Dobbiamo ricorrere a Chrome o Safari i quali hanno implementato queste caratteristiche.

• Vedi le demo
• CSS3 info
• HTML5 info
• HTML5 alcune demo

Comunque, finisco la prova e commenterò, con un bel po’ di pregiudizi in partenza, lo ammetto!

Soprattutto è molto interessante il sistema che hanno usato per inserire un swf nelle pagine di youtube…

a prima vista sembra essere un swf con sfondo trasparente che copre il video originale. Questo gli permette di simulare il video centrale e far sì che il tipo prenda il cancellino sulla destra. Allo stesso modo ci è permesso di scrivere le cose sul titolo. In sè non è nemmeno troppo coomplessa come cosa ma quello che rimane da capire (a me!) è il “come” abbiano fatto ad avere tanta libertà sul youtube…! investigating… :)

Il video è da seguire… e poi, sperimentare!

Il link diretto a youtube.

Personalmente, avendo sviluppato dal 2000 parecchie applicazioni flash, ritengo ormai con l’avvento delle fantastiche librerie JS e dell’HTML5, ritengo “inutile” l’utilizzo che finora è stato fatto di questa tecnologia per lo sviluppo di siti web. Credo invece che sia ancora una buona piattaforma per sviluppare alcuni tipi di applicazioni specifiche e abbastanza rare che richiedono sia interfaccia grafica che di un buon codice.

Ancora, fintanto che lo sviluppo e la diffusione dei formati open per i video non sarà tale da poterne godere, l’utilizzo di flash per i video sembra essere una gran cosa… ma coma la mettiamo con la storia dei vari iPhone, iPad ecc? Adobe e Apple si stanno organizzando ma ancora di strada ne manca.

Sto anche valutando per un cliente la possibilità di usare Flex per la realizzazione di un CMS, cosa che ho già dovuto valutare un apio di anni fa con una certa frustrazione! Perchè utilizzare flash et simili per la gestione dei dati? Continerò questo argomento quando avrò più dati!

Intanto invito alla lettura dell’articolo citato.
http://www.smashingmagazine.com/2010/04/12/the-gradual-disappearance-of-flash-websites/

Leggi l’articolo e scarica l’extension

Per poter usare questa extension è necessario però avere il flash player debugger scaricabile dal sito adobe:
http://download.macromedia.com/pub/flashplayer/updaters/9/flashplayer_9_plugin_debug.exe

La pagine diretta delle extension di firefox per avere questo componente:
https://addons.mozilla.org/it/firefox/addon/3469

Esigenza: deformare un rettangolo via codice in maniera da allungarlo e distorcerlo (skew) lungo la sua asse X.
Capire la matrice non è proprio la cosa più elementare ma grazie al prezioso aiuto trovato sul sito “senocular” sono riuscito a compiere quanto mi serviva!

vediamo un po’ i passi da fare:

per prima cosa vanno importate le librerie necessarie

import flash.geom.Transform;
import flash.geom.Matrix;

Supponendo che mc sia il nostro MovieClip da deformare, istanziamo il nostro oggetto:

var trans:Transform=new Transform(mc);

Adesso ammettiamo che abbiamo un valore W che cambia (che equivale ai pixel di larghezza desiderata per il nostro oggetto). Supponiamo inoltre che vogliamo inclinare il nostro oggetto di 45 gradi verso destra.
I valori da passare a matrix devono essere tra 0 e 2. quindi è necessario trasformare gli interi in numeri con virgola; si notera come a diventi cosi da 195 a 1,95 e che i gradi di inclinazione, il III parametro, sia -0,45:

var a:Number=W*0.1;
var skewM:Matrix=new Matrix(a,0,-0.45,1,0,0);

Adesso cerchiamo di capire a cosa corrispondono tutti quei numerini!!!
Vediamoli nell’ordine (a,b,c,d,tx,ty)

a – x scale
b – y skew
c – x skew
d – y scale
tx – x translation (position)
ty – y translation (position)

Esistono varie funzioni già impostate come matrix.scale(); e altre ma sinceramente mi hanno più confuso che altro perchè vanno a modificare solo alcuni valori di questi 6. Ho preferito modificare tutto in un’unica stringa!

Per capire meglio e a fondo la matrice utilizzata da Flash consiglio vivamente di visitare il sito http://www.senocular.com/flash/tutorials/transformmatrix/

Il sito “laco” mette a disposizione sotto licenza GPL una serie di prototype che introducono nello sviluppo una gamma di funzioni che operano direttamente sui movieclip. Queste permettono una totale gestione via codice dei colori, delle animazioni, delle dissolvenze e dei tempi di transizione che facilitano notevolmente il lavoro di animazione. Chi sviluppa sa bene che se da un lato Macromedia flash è “facilità” la realizzazioen di animazioni per chi non si è mai avvicinato ad una riga di codice ActionScript, quando poi si vanno a realizzare applicazioni dinamiche minimamente più complesse, queste animazioni fatte “a mano” posso creare problematiche non indifferenti a chi sviluppa.
Bene con questi prototype anche i grafici possono, imparando poche righe di codice, sbizzarirsi fino a realizzare cpomplesse animazioni.

Questi i prototype aggiuntivi (alcuni validi solo per la vesione ActionScript 2):
MovieClip.tween(), MovieClip.stopTween(), MovieClip.isTweening(), MovieClip.getTweens(), MovieClip.lockTween(), MovieClip.unlockTween(), MovieClip.isTweenLocked(), MovieClip.alphaTo(), MovieClip.brightnessTo(), MovieClip.brightOffsetTo(), MovieClip.colorTo(), MovieClip.colorTransformTo(), MovieClip.contrastTo(), MovieClip.frameTo(),
MovieClip.scaleTo(), MovieClip.slideTo(), MovieClip.rotateTo().