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...

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.

Continua...

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...

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...

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

Continua...

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.

Continua...

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 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…

Continua...

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...

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

Continua...