Undolog.com

Da Apple al Web 2.0 le immagini "riflesse" hanno inondato Intrenet. Spesso abusate sono tuttavia sempre di grande effetto. Saperle realizzare bene non è impresa complicata e, con un pizzoco di fantasia, si possono rendere meno "ovvie" e "scontate"... se proprio non ne potete fare a meno.

Le basi del Reflex

Prima di tutto vediamo come impostare una riflessione base. La tecnica per impostare una riflessione base, almeno quella che preferisco e che uso continuamente, è di semplice e rapida implementazione. Questo metodo permette la massima libertà di modifiche successive e mantiene la trasparenza nel caso vogliate salvare l'immagine in PNG 24 con trasparenza.

1. Come sempre apriamo Phosotoshop e carichiamo l'immagine che vogliamo riflettere su un layer apposito
2. Duplichiamo il nostro layer (trascinate il layer da duplicare sull'icona ) e nominiamolo "shadow" o "reflex"
3. Dal menu "Modifica" selezionate "Trasforma" / "Rifletti verticale"
4. Trascinate il nuovo layer "reflex" sotto al layer originale e spostiamolo alla base del layer originale
5. Selezioniamo il layer "reflex" e, tenendo premuto il tasto ALT, aggiungiamo una maschera cliccando sull'icona "mask" nella tool window dei layer; il layer "reflex" dovrebbe sparire
6. Selezioniamo la maschera nel layer "reflex" e cliccate sull'icona di riempimento
7. Impostiamo una sfumatura da nero o bianco a trasparente:
8. Tracciamo la sfumatura dal centro del layer originale al centro del layer "reflex"

Continua a leggere... »

Post correlati

• Photoshop tutorial: pianeta con sole che sorge (3)
• Photoshop tutorial: icone stile web 2.0 in 3 passi (9)
• Photoshop tutorial: effetto foglio piegato (8)
• I nuovi strumenti di Adobe Photoshop CS3 Extended (0)
• Flash CS3: creare un effetto Reflex su qualsiasi MovieClip (7)

Normalmente non lo faccio, tuttavia visto che anche su undolog si tratta grafica & design, non posso esimermi da segnalare il restyling del blog di UPI on Paper. Inoltre, disegnando anch’io, quando vedo una “mano” bella è più forte di me! Con il nuovo layout, poi, le illustrazioni di UPI sono ancora più godibili.

Post correlati

• Painter: semplice applicazione per disegno in Flash CS3 Pro (1)
• MyToons Shared (0)
• Xopus: editor XML in WYSIWYG (0)
• Windows tools: il meglio del freeware (1)
• What is in the box? (0)

La tecnica di Text Replacement che presento oggi è, per certi aspetti, davvero interessante. A differenza della classica sostituizione per immagine tramite CSS, questa tecnica usa un filmato Flash per sovrascrivere i titoli del nostro sito. Nonostante sia un pochino più articolata, in quanto richiede la creazione di un filmato Flash e l'uso di Javascript, permette di ottenere una serie di vantaggi non indifferenti:

• Mantiene l'accessibilità del sito sfruttando un True-Unobtrusive-Javascript in modo che crawler e spider continuino a vedere la pagina come semplice e corretto HTML
• Non richiede la creazione di n immagini per n titoli. Basta un solo filmato per sostituire tutti i titoli del nostro sito, con un notevole risparmio in termini di Download
• Permette di creare anche titoli semplici ma con Font normalmente non utilizzati sul Web
• Il testo può essere reso in HTML, grazie alle caratteristiche di Flash
• Il testo è selezionabile
• Essendo un filmato Flash si può inserire interattività e animazioni di qualsiasi sorta

Noterete, anche, che in questa procedura i CSS non sono praticamente presi in considerazione!

Continua a leggere... »

Post correlati

• Unobtrusive Flash Objects (1)
• Web2.0: Gran Paradiso-Firefox 3.0 e Apollo (2)
• Unobtrusive SWFObject 2.0 (1)
• Unobtrusive Simple TabStrip (1)
• UMap Flash Component (Beta v0.6) (0)

Il modo corretto di inserire titoli in grafica in una pagina Web è quello per sostituizione tramite i fogli di stile (vedi Progressive Enhancement in Accessibilità e Usabilità: unobtrusive Javascript). Questa tecnica permette di rendere accessibile il contenuto del sito a prescindere dalla visualizzazione grafica imposta dai fogli di stili. Inoltre, crawler e spider, avranno una lettura corretta dell’HTML ignorando la sostituzione grafica offerta all’utente finale. Inserire direttamente un’immagine (TAG img), infatti, rende il testo del titolo inaccessibili ai normali lettori ASCII (crawler, spider, blog plugin, screen-reader, etc…).
Continua a leggere... »

Post correlati

• Tecniche di Text Replacement in Flash (0)
• Reverse Engineering: i compressori di codice (2)
• Wordpress: come scrivere un reply to comment usando jQuery (13)
• Web2.0: Gran Paradiso-Firefox 3.0 e Apollo (2)
• Web2.0: Adobe ci prova con Apollo? (2)

Su OnAir di Undolog è adesso possibile utilizzare la funzione on-demand messa a disposizine dal player di Mogulus.

Segnala video

Se avete video da segnalare contattatemi, sarò felice - se possibile - di inserirli nel palinsesto di Undolog/OnAir

Post correlati

• Suggerimenti per Mogulus (10)
• Net TV: cosa sta cambiando e cosa cambierà? (1)
• Net Software (0)
• N3TV Interactive Platform (0)
• Mogulus Studio 1.2 Beta (0)

Questa volta (vedi Piclens in Flash con Papervision3D 2.0) pubblico il codice (PicLens.as), ho dovuto rivedere alcune parti di codice, allineandomi così agli ultimi rilasci di Papervision3D 2.0 Great White ed ho eseguito alcuni aggiustamenti e aggiunte. Ho inserito in questa demo anche una serie di Knob, manopole, per modificare runtime alcuni parametri.

Simulazione del moto PicLens

Per avvicinarmi il più possibile al movimento orizzontale di PicLens originale, ho usato un piccolo stratagemma inserendo un "non visibile" DisplayObject3D come target per la camera:

In pratica la camera punta sempre il DisplayObject3D posto dietro la serie di immmagini. Quando la camera si muove (con un movimento accelerato/inerziale) anche il DisplayObject3D la segue, ma con un leggero ritardo. Questo mi ha permesso di rendere l'effetto di moto morbido e del tutto simile a quello realizzato su PicLens originale:

Non ho utilizzato nessun Tween, ma una più semplice e performante funzione:

Nel demo è possibile modificare alcuni parametri: focus, zoom e target. Quest'ultimo è la posizione del DisplayObject3D rispetto alle 99 immagini! Modificando questa posizione si noteranno cambiamenti nel movimento dell'intera scena.
Focus e Zoom sono invece proprietà dell'ambiente Papervision3D.

Interazione

Provate a cliccare sulle immagini...

Post correlati

• Piclens in Flash con Papervision3D 2.0 (2)
• Papervision3D: BasicView (0)
• Installare Papervision3D 2.0 Great White: TortoiseSVN (5)
• FIVe3D: effetti speciali su un cubo! In attesa di Flash 10 (2)
• Papervision3D: gestire le Bitmap come in FIVe3D (0)

Potrebbe sembrare un argomento scontato e ormai esaurito, eppure con Flash CS3 e la nuova gestione della classi documento (package) permesse con Actionscript 3.0, non è del tutto immediato creare un preloader funzionante. L'ultima release di Flash, infatti, gestisce il caricamento del filmato in modo diverso dalle precedenti versioni. In rete potrete trovare diverse proposte e soluzioni per ricreare un preloader "vecchio stampo". Tuttavia i vari esempi che ho trovato non mi soddisfano pienamente in quanto richiedono di alterare il filmato in modo da farlo funzionare come un preloader classico. In pratica quando si sviluppa bisogna sempre rammentare "questa cosa la devo fare così altrimenti il preload non funziona"! E per i filmati già compilati, poi?

Loader

La soluzione che ho adottato, almeno per adesso, è stata quella di creare un filmato esterno (il mio loader - vedi esempio) in grado di caricare qualsiasi altro filmato esterno, compresa un'immagine! Questa soluzione, nonostante richieda in pratica due filmati (il loader e il filamato vero e proprio), diventa economica solo se si riesce a creare un loader in grado di essere usato più e più volte; cioè in grado di caricare qualsiasi filmato, a qualsiasi risoluzione e a qualsiasi framerate.

Continua a leggere... »

Post correlati

• undolibrary: libreria Actionscript 3.0 su Google Code (0)
• Undolibrary MatrixArray: un’estensione della classe Array (0)
• Reflex e ReflexMe: da Classe base a Classe (0)
• Leggere i parametri di un filmato in Actionscript 3.0 (1)
• Yahoo! ASTRA: suite di componenti per Flash e Flex (0)

A due anni di distanza dall'apertura ufficiale di questo blog, voglio svelare il motivo del nome. Nessuno me l'ha mai chiesto direttamente, o forse tutti se lo sono domandato. Quando scelsi il nome, per un blog dedicato allo sviluppo, ho pensato a qualcosa che non riguardasse la "programmazione" in senso stretto.
Undolog è composto da "undo" e "log". Log in quanto "Weblog" e "Undo" perchè credo che l'informatica ha introdotto due strumenti imbattibili, che hanno davvero cambiato il modo di lavorare di tutti, nessuno escluso: il Copia & Incolla e l'Annulla, aka "Undo" appunto.
Control+Z o Mela+Z che si voglia, l'operazione di Undo "salva la vita" (si fa per dire) di molti ogni giorno! Pensare (pensateci e provate a farlo) di eliminare il Copia & Incolla e l'Annulla per un solo giorno... sarebbe follia!! Alla fine, quindi, spero anch'io che qualche post su questo blog abbia "salvato la vita" a qualcuno.
Tanti auguri Undolog...

Post correlati

• Rinascono gli elementi di undolog.com (2)
• Ottimizzare il caricamento di un sito Web (7)
• OnAir: la diretta su Internet (0)
• Nasce N3TV: NetTV 2.0 (4)
• N3TV Interactive Platform (0)

Nel post Flash CS3: creare un effetto Reflex su qualsiasi MovieClip avevamo visto com'è possibile scrivere una classe, che estende un MovieClip, per collegarla a DesignTime ad un qualsiasi MovieClip in libreria. Ho scoperto, tuttavia, che può risultare più utile ed economico fare il percorso contrario. Ho creato una classe Reflex (Reflex.as), con l'intenzione di usarla esclusivamente da codice. Ho creato questa classe pensando di passare nel costruttore il puntatore ad un MovieClip. La nuova classe Reflex contiene in sostanza lo stesso codice prima inserito nella ReflexMe, ma leggermente modificato in modo da poter funzionare espressamente da codice:

Continua a leggere... »

Post correlati

• undolibrary: libreria Actionscript 3.0 su Google Code (0)
• Undolibrary MatrixArray: un’estensione della classe Array (0)
• Flash CS3: creare un effetto Reflex su qualsiasi MovieClip (7)
• Creare un preloader generico in Actionscript 3.0 (6)
• 10 motivi per passare ad Adobe Flash CS3 (3)

Ho scritto una classe CountDown per Actionscript 3.0. Per provarla ho creato un esempio sfruttando le capacità di rendering testuale di FIVe3D.

Clicca per aprire il filmato Flash

Download sorgente

Il sorgente countdown.zip comprende sia la classe CountDown che l'esempio (CountDownDemo) in 3D scritto FIVe3D. Nell'esempio proposto è anche possibile modificare la data finale tramite un campo testo editabile. La classe CountDown verrà inserita quanto prima in Undolibrary.

Continua a leggere... »

Post correlati

• FIVe3D: effetti speciali su un cubo! In attesa di Flash 10 (2)
• Papervision3D: BasicView (0)
• Yahoo! ASTRA: suite di componenti per Flash e Flex (0)
• Undolibrary MatrixArray: un’estensione della classe Array (0)
• UMap Flash Component (Beta v0.6) (0)