Ho trovato un po’ di tempo fa un interessante prototipo di progetto sull’Augmented Reality applicata al mondo dell’arredamento.
Mi sono dato il tempo di provarlo e non ho potuto fare altro che meravigliarmi anche se la qualità globale risente ancora di molti limiti che dipendono molto dalle tecnologie utilizzate per realizzarla… quindi superabili.

L’idea di fondo è affascinante GUARDA QUI!

Vuoi provare?

Scarica i marker da stampare… e poi vai a questa pagina: http://www.robinwestergren.com/ikea/
Inquadra con la webcam una porzione di pavimento vuoto e piazzaci il marker stampato.

Condividi su...

Shines appunto: l’idea è quella di simulare luci o bagliori con un movimento del tutto casuale e quanto più naturale e come spesso accade le cose semplici sono le più efficaci!
Infatti si tratta solo dell’applicazione della sintesi additiva dei colori… una idea e pochissimo codice… vediamo.

Beh, facciamo così… diciamo che non vi svelo proprio tutto tutto… ma quello che sta alla base: poi metteteci del vostro ok?

1. Aprite un nuovo progetto su Flash, impostate lo sfondo su nero e create tre cerchi senza bordo a cui date un riempimento di tipo gradiente: uno rosso, uno blu e uno giallo.
2. Trasformateli in movieClip selezionateli tutti e dal pannello delle proprietà selezionate come proprietà Blend “Add”.
3. Ora scrivete due righe di ActionScript per far muovere a piacere i tre clip sullo stage e guardate cosa accade quando si sovrappongono.

Ed ecco qui il risultato!

Semplice no?

Condividi su...

Augmented Reality (AR)

Continua a leggere »

Condividi su...

In parallelo all’uscita uffciale della suite CS4 di Adobe viene rilasciato anche il nuovo Flash Player 10.
Tante le novità introdotte dalla nuova versione di Flash e che quindi sono ora supportate dal nuovo Flash Player: ne ho discusso in modo approfondito nel post relativo a Flash CS4.

Di seguito vi riporto una serie di link utili per sviluppatori e curiosi sulle novità del nuovo player:

• Download Flash Player 10
• Esempi di Flash Player 10 in azione
• Introduzione all’Adobe Flash Player 10 (in inglese)
• Controllo della versione Flash dell’utente mediante SWFobject (in inglese)
  
• Guida a Flash Player 10 per amministratori di reti e professionisti IT (in inglese)
• Cambiamenti alla sicurezza di Flash Player 10 (in inglese)

Condividi su...

Flash Player è una grave mancanza sul telefono Apple che sta avendo grande successo soprattutto negli Stati Uniti: la comunità degli sviluppatori chiede da sempre che il player venga supportato da iPhone ma scelte strategiche di Apple hanno fino ad oggi escluso questa possibilità. Con questa iniziativa Adobe cerca di invogliare Apple a convertirsi? Non si sa chi ne guadagnerebbe di più tra i due colossi.

In Febbraio, Flash era “giusto dietro l’angolo”. In Marzo, era considerato “too slow” per Steve Jobs, e Flash Lite troppo limitato. Un paio di settimane dopo, l’Adobe CEO Shantanu Narayen disse che malgrado la riluttanza di Apple, Adobe avrebbe comunque continuato a guardare avanti: “Flash è sinonimo di Internet experience, e siamo decisi a portare Flash su iPhone. Abbiamo analizzato e pensiamo di poter sviluppare il Flash Player per l’iPhone per conto nostro”, ha detto. Poi in Giugno, lo stesso Narayen annunciò che Apple aveva un emulatore di Flash Player per iPhone. E così via tra smentite e cambi di rotta…

Condividi su...

Finalmente la versione 8 del nuovo sito di Webgriffe è online: è stato un lungo parto, posticipato diverse volte anche a causa della mole di lavoro che abbiamo avuto nell’ultimo anno, ma alla fine ci siamo riusciti.

Il dietro le quinte.

Beh, la scusa ufficiale è senz’altro che il parecchio lavoro fa inevitabilmente slittare i progetti interni, ma c’è da dire che l’idea creativa e la finalizzazione della grafica e dello stile comunicativo sono durate per quasi un anno di proposte, modifiche, cancellazioni, rifacimenti, ripensamenti, dubbi, illuminazioni, test ed esercizi di stile.
Siamo partiti a riprogettare il sito dallo stile della versione 7 (anche se era sostanzialmente un sito mono pagina in cui pubblicavamo gli ultimi lavori quando ne avevamo il tempo)  con lo sfondo nero e quelle luci colorate che abbiamo chiamato “shines” (bagliori, illuminazioni).
Siamo passati attraverso 9 versioni provvisorie: 8.1, 8.2, 8.3, 8.4… fino alla 8.9 che poi si è rivelata la scelta vincente. Di seguito una immagine con gli screenshot delle varie versioni.

Abbiamo progressivamente abbandonato il colore nero e le tendenze del momento (gli effetti glare, riflessioni, sfondi neri, ecc.) per dedicarci a uno stile più essenziale e, in fin dei conti, che sentiamo più nostro. Il bianco e la pulizia dei contenuti: testi brevi, caratteri grandi e ben leggibili. Nel periodo intercorso tra la versione 8.1 e la 8.9 sono apparse sulla scena tecnologie che più volte ci hanno fatto ripensare e rimettere mano al progetto: i framework di animazione 3D in Flash, librerie AJAX sempre più potenti, Microsoft Silverlight, iPhone… Abbiamo optato per un layout a tutto schermo e liquido piuttosto che bloccare i contenuti in dimensioni fisse.
Il grande dilemma è stato anche quello di scegliere tra HTML e Flash. Sempre in una ottica di originalità di stile e di libertà espressiva abbiamo scelto ancora una volta Flash Player: sviluppiamo al 90% per Flash Player con software come Flash e Flex e crediamo fermamente nelle potenzialità offerte da questa tecnologia. Troppe aziende che come noi si propongono come web agency hanno sposato l’HTML e il concetto di sito/blog HTML: ci vogliamo distinguere e vogliamo mostrare cosa si può fare a partire dal nostro sito.

L’idea

Il nome Webgriffe è stato coniato nel 2000 con il significato di tendere alla produzione di progetti e soluzioni non di massa, ma a carattere più artigianale e su misura: la metafora con l’alta moda e le griffe è proprio questa. Consapevoli del fine forse irraggiungibile che ci siamo proposti continuiamo a perseverare in questa direzione proponendoci ai nostri clienti e ai nostri partner come persone su cui contare e di cui potersi fidare perché con empatia lavoriamo per realizzare progetti e studiare soluzioni utili, semplici da usare e che determino un ritorno dell’investimento per il cliente.
Da questa metafora con la moda (spesso infatti diciamo ai nostri clienti che realizzeremo per loro un vestito su misura e niente di pre-confezionato) nasce l’idea della passerella: notare che si tratta di persone distinte, vestite da impiegati o persone d’affari, che sfilano sul monitor. Il messaggio subliminale è “Sfila nel web con un nostro abito addosso” e anche “Distinguiti e non uniformarti alla massa”.

Caratteristiche

Dato per assodato che la tecnologia di base fosse Flash Player e la fonte dei dati (testi, immagini, portfolio ecc.) totalmente dinamica attinta da database si è passati allo sviluppo delle funzionalità del sito web.
Non possiamo che iniziare con l’impostazione di base del sito che si fonda su contenuti video a tutto schermo. Questa scelta e in particolare la metafora della passerella ci darà modo di personalizzare periodicamente il sito adattandolo a particolari festività o ricorrenze (Natale, Estate, ecc.) con un approccio più scherzoso e ironico… aspettate e vedrete.
Aggiunta anche la possibilità di passare alla modalità fullscreen per una esperienza ancora più immersiva: basta click su Windows o CTRL+click su Macintosh.
Abbiamo integrato il deep-linking e quindi la possibilità di navigare il sito anche grazie ai comuni pulsanti del browser (avanti e indietro per intenderci) e anche la possibilità di linkare direttamente a “pagine” del sito e metterle nei preferiti. La user experience quindi è ristabilita ai livelli a cui tutti gli utenti sono abituati.
Grazie a Google Analytics sono state implementate le statistiche di accesso e di utilizzo del sito in modo da tracciare tutti i click dell’utente e studiarne i comportamenti e le preferenze relative ai contenuti.
Finalmente il portfolio dei progetti (anche se non completo per accordi di riservatezza) torna ad essere il cuore del sito: ogni progetto è ora identificato da un colore, un eventuale video dimostrativo, screenshot, link, testi descrittivi e testo di referenza del cliente che comunica il suo grado di soddisfazione sul lavoro svolto.
Non manca l’area blog e la possibilità di abbonarsi all’RSS feed: abbiamo infatti creato un aggregatore dei blog aziendali che si possono leggere direttamente dal sito o da un qualsiasi Feed Reader.
Ristabilita la newsletter aziendale attraverso la quale comunicheremo con gli iscritti e divulgheremo notizie dal web, case histories e ovviamente comunicazioni commerciali. A breve termine ci sarà una evoluzione dei canali di comunicazione tra Webgriffe, clienti e partner grazie a un nuovo progetto interno ancora in fase di sviluppo… ma ci teniamo la sopresa!

Cosa ne pensate?
Critiche costruttive e pareri sono ben accetti.

Condividi su...

Con la versione CS4 Flash si può dire che finalmente è diventato un software Adobe: sì, era ancora molto presente l’impostazione Macromedia e l’integrazione con gli altri tool della suite CS4 era minima. Passi da gigante sono stati fatti nell’interfaccia dell’IDE, aggiunti nuovi strumenti per le animazioni e il supporto nativo per il 3D… ma questa è solo una infarinatura: c’è molto di più.  Seguitemi…

Innanzi tutto quello che sto per scrivere si riferisce a quanto disponibile nella versione beta di Flash CS4 e quindi qualcosa potrà cambiare nella release finale e se sarà così allora sarà mia cura segnalarlo nei prossimi post.

Nuovo ambiente

La prima differenza che si nota al lancio di Flash CS4 è il nuovo IDE (click sull’immagine qui a fianco per uno screenshot): ora di default la timeline è al piede della pagina e il pannello delle proprietà è in una colonna sulla destra con le varie sezioni divise con un layout stile accordion. Nella parte alta (dove c’era la timeline) si notano i tab per la gestione dei file aperti e sopra a questi all’estrema destra un menu per passare da un layout personalizzato o preimpostati. A fianco di questo c’è il campo per la ricerca libera per l’help, la guida o la documentazione.

Una rapida occhiata al pannello delle proprietà: quando è selezionato lo stage si nota che il framerate di default ora è di 24 fps, inoltre (come accade in After Effects) cliccandoci sopra e spostandosi a destra e a sinistra si cambia facilmente il valore… oppure basta un semplice doppio click e digitale il valore desiderato.

La ricerca è ora integrata anche nella libreria e in aggiunta a questo quando si crea un nuovo oggetto è possibile scegliere immediatamente in che cartella della libreria inserirlo.

Parliamo dei nuovi pannelli disponibili: ad esempio dal menu Window>Extensions>Kuler sarà visualizzato un pannello che vi consentirà l’accesso a Kuler per la gestione dei temi colore. Anche con Flash CS3 era possibile ma era necessario installare una extension aggiuntiva. Con il pannello Kuler è possibile quindi visualizzare i temi più popolari, i nuovi e fare una ricerca. Ma non solo… è possibile creare direttamente da qui il proprio tema, aggiungere i colori alla tavolozza colori personalizzata ecc.

Lavorando con gli oggetti sullo stage si nota che Flash CS4 Professional usa Adobe Flash Player per file il render dello stage con una resa realistica del risultato finale identico a quello che si vede testando il filmato.

Animazione

Grandi novità. Adobe ha completamente rivisto il funzionamento e la gestione delle animazioni sulla timeline. Per intenderci si è passati da una timeline-based animation a una object-based animation. Facciamo un esempio di come funzionano le cose ora:

1. Disegno un rettangolo sullo stage.
2. Lo converto in MovieClip. (se non lo fate ve lo chiede automaticamente Flash)
3. Tasto destro sul MovieClip e click su Create Motion Tween.
4. Ora muovo il rettangolo in un altro posto dello stage.

Sulla timeline vengono creati di default 25 frame di animazione con qualcosa di simile a un keyframe alla fine… ma non è un keyframe! Sullo stage vedrete un motion costituito da tanti puntini che collega la posizione iniziale e finale del MovieClip. Personalmente mi è tornato in mente Director e la sua gestione delle animazioni sulla timeline… a voi no? La motion path è ora un vero e proprio oggetto che potete trascinare, spostare, scalare e modificare come una curva di Bezier… non vi basta? Allora sappiate che potete dare alla motion path un instance name e comandarla via ActionScript!
Se non vi piace lavorare con le curve di Bezier potete tranquillamente sostituire la motion path che viene creata di default con quella da voi creata usando lo strumento penna o matita o linea.

Altra grande miglioria: se volete cambiare la durata temporale dell’animazione (per quanto complessa essa sia) semplicemente basta “tirare” il punto finale dell’animazione e allungarla o accorciarla a piacere. Tutto si adatterà in proporzione… fino ad ora bisognava andare a spostare a mano tutti i keyframe.

Per i conservatori amanti della timeline-based animation è ancora possibile lavorare alla vecchia maniera facendo tasto destro sulla timeline e scegliere tra Create Classic Tween oppure Create Shape Tween.

Editor delle animazioni

Ancora in modo simile ad After Effects l’editor delle animazioni permette di controllare ogni caratteristica delle vostre object-based animation: posizione, rotazione, scala, alpha, distorsione, filtri, effetti colore e opzioni 3D (vi basta?). Tutto in modo indipendente: si può muovere un oggetto da sinistra a destra nel tempo di 1 secondo e applicargli un fade alpha da 100 a 0 in mezzo secondo mentre cambia colore e diventerà rosso fra 3 secondi. Questo è il potere della object-based animation.

Ma non finisce qui!

Inverse Kinematics

Inverse Kinematics è il nome utilizzato per l’animazione di strutture articolate costituite da oggetti collegati insieme (come le braccia e le gambe al corpo di un burattino) che si devono muovere compatibilmente a questi vincoli imposti. Per esempio animare un burattino per farlo ballare era abbastanza complicato fino a Flash CS4 perché bisognava considerare globalmente l’animazione di ogni parte del corpo del burattino perché il movimento di un arto provoca il cambiamento dell’animazione degli altri e così via, ma con Inverse Kinematics possiamo ora connettere queste parti senza curarci di come interagiscono tra loro. Per collegare i vari pezzi è stato introdotti lo strumento “Bone” (osso). Collegate le varie parti tra loro è sufficiente editare le proprietà che descrivono come queste interagiscono tra loro: se è permessa solo la rotazione, o solo il movimento su X e Y, oppure se ci sono limiti di movimento come una rotazione limitata a soli 45 gradi invece che girare liberamente.
Grazie al render sempre attivo sullo stage è possibile testare immediatamente la vostra creazione di Inverse Kinematic senza dover fare un test del movie.

Ci sono altri strumenti che sono stati aggiunti a questa nuova versione di Flash. Gli strumenti Deco e Spry che permettono di creare riempimenti personalizzati attingendo come sorgenti grafiche oggetti in libreria. Altri strumenti nuovi sono stati introdotti per la gestione del 3D…

3D in Flash

Flash possiede due strumenti per gestire il 3D, ma ovviamente non è un vero 3D. È una simulazione di un ambiente 3D ottenuta manipolando gli oggetti 2D in uno spazio prospettico: quindi riusciamo a far ruotare oggetti sugli assi X e Y, spostarli in profondità ma non a disegnare un cubo e a ruotarlo (non con questi strumenti nativi). L’implementazione del 3D è qualcosa di fantastico e molto atteso da tutti gli sviluppatori Flash. Grazie agli strumenti 3D Rotation e 3D Translation siamo quindi in grado di simulare movimenti in un ambiente tridimensionale, con animazioni e punti di fuga variabili a nostro piacimento.

Bisogna chiarire una cosa: questo supporto 3D non è assolutamente paragonabile a ciò che si può fare con 3D framework più evoluti come PaperVision.

XFL

Sempre nell’ottica di migliorare la compatibilità e la condivisione dei file tra le varie applicazioni Adobe che lavorano su livelli è stato introdotto un nuovo formato di documento XFL che Flash è in grado di interpretare: Indesign e After Effects possono esportare in questo formato che quindi può ora essere importato in Flash. Probabilmente questo sistema soppianterà anche l’attuale importazione di file di Photoshop, Illustrator ecc. garantendo nessuna perdita di qualità.

Pubblicazione

Cambia lo il JavaScript che automaticamente viene creato per l’inclusione degli SWF in pagine HTML ed ora è molto più simile a SWFObject che al vecchio sistema. Ci sono inoltre due differenti tipologie di pubblicazione Flash Player 10: quella standard e quella con il nuovo motore di visualizzazione dei testi. Altra caratteristica molto importante è la pubblicazione diretta in AIR senza bisogno di Integration Kit e componenti aggiuntivi.

Link utili

• Pagina ufficiale di Flash CS4
• Tutte le caratteristiche sul sito Adobe
• (UPDATE) La video presentazione di Flash CS4 di ActionScript.it

Condividi su...

Vi segnalo una interessante applicazione Flash, pubblicata sul sito del New York Times, che in modo semplice e chiaro ci da una idea delle medaglie conquistate da ogni nazione nelle Olimpiadi da Atene 1896 a Pechino 2008. La trovo davvero una gran bella realizzazione considerando la mole di dati che ci stanno dietro, l’interattività e soprattutto la chiarezza che ne risulta.

Condividi su...

Cos’è Flashforward?
Davvero non lo conoscete? SI tratta di uno dei più importanti festival al mondo sul tema Flash, con conferenze e seminari annessi. I maggiori sviluppatori e creativi di tutto il mondo sono in gara per aggiudicarsi l’ambita freccia arancione che identifica il lavoro più eccezionale realizzato in Flash.
Ci sono tante categorie differenti per coprire la vastità di cose che si possono fare con Flash: Applicazioni, Cartoni/Storie/Narrazioni, Code, Arte/Sperimentazione, Gioco, Motion graphic, Navigazione, Suono, Typography, Video

Buona visione!

Condividi su...

Google (e Yahoo si sta attrezzando) ha sviluppato un algoritmo in gradi di navigare il contenuto in Flash e indicizzarne tutto il contenuto testuale presente. Questo grazie alle nuove librerie “Searchable SWF” rilasciate da Adobe in seguito all’apertura delle specification del formato SWF.
Gli sviluppatori non devono fare nulla! I movie Flash saranno indicizzati senza dover rimetter mano a codice… su questo ci credo poco, almeno finché saremo costretti ad utilizzare Javascript per includere gli SWF nelle pagine web.

Dal rapporto dettagliato fornito da Google infatti questo mio dubbio trova fondamento: “Googlebot does not execute some types of JavaScript. So if your web page loads a Flash file via JavaScript, Google may not be aware of that Flash file, in which case it will not be indexed.”
Oltre a questo leggo che anche i contenuti esterni tipo XML, SWF ecc. sono indicizzati separatamente e che ci sono al momento dei limiti alle lingue indicizzabili, ma per fortuna Google assicura che a breve anche questi ultimi limiti verranno superati.

Con questo Flash farà cadere l’ennesimo muro di scetticismo!
Convertitevi! Siete ancora in tempo ;-)

Condividi su...