Categoria ‘Grafica & Design’


Il nuovo sito Adobe.it

Adobe.it

Il sito Adobe.it si rinnova, si riveste cancellando l’ibrido Macromedia-Adobe realizzato subito dopo l’acquisizione della software house di Flash! Impaginazione orginale (a battuta a sinistra), uso di DHTML e Flash, ovviamente.

image Photoshop

Tutte le sezioni sono state ridisegnate con un’originale uso dei background. Da rinavigare assolutamente!

Continua...

Creare un fiocco di neve in Flash

Alcuni lettori mi hanno chiesto come è stato creato il fiocco di neve, così realistico, del Widget natalizio. Chi ha scaricato il sorgente probabilmente già lo sa… comunque è stato davvero semplice. Prima di tutto ho selezionato lo Strumento Pennello in Flash ed ho disegnato un punto.

Fiocco di neve Fiocco di neve

Ho trasformato questo in un simbolo ed ho applicato due effetti nella giusta sequenza: smussatura e sfocatura:

Fiocco di neve Fiocco di neve

Il risultato è stato: Fiocco di neve

A questo MovieClip (simbolo) ho associato una semplice classe CNeve, che crea di fatto l’intelligenza del fiocco stesso:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class CNeve extends MovieClip {
    private var _interval;
    private var _maxy:Number;
    //
    function CNeve() {
        _interval = setInterval(this, "_move", 25);
        _maxy = Math.round((Stage.height+256)/2)+_getRndRange(-20, -7);
    }
    //
    private function _getRndRange(min:Number, max:Number):Number {
        var randomNum:Number = Math.floor(Math.random()*(max-min+1))+min;
        return randomNum;
    }
    //
    private function _move() {
        _y += _getRndRange(1, 5);
        _x += ((_getRndRange(-50, 50))>0) ? 1 : -1;
        _rotation += _getRndRange(1, 5);
        if (_y>_maxy) {
            clearInterval(_interval);
        }
        updateAfterEvent();

    }
}

Il metodo _move() contiene l’intelligenza del fiocco, ovvero la funzione di caduta, estremamente semplice. Variando la funzione randomica _x += ((_getRndRange(-50, 50))>0) ? 1 : -1;, ad esempio inserendo un _getRndRange(-550, 50), si può aggiungere un effetto effetto vento, cioè i fiocchi cadono con una pendenza particolare. In particolare si possono mandare i fiocchi a destra e a sinistra usando un codice di questo tipo:

1
_x += ((_getRndRange( _getRndRange(-350, -50), _getRndRange(50, 350) ))>0) ? 1 : -1;

La rotazione (_rotation += _getRndRange(1, 5);), poi, conferisce un ulteriore dettaglio al fiocco stesso.
Quando creo un fiocco (vedi funzione creaFiocco() più sotto) ho aggiunto anche un alpha=90 e uno scale randomico, per avere fiocchi di neve di diverse dimensioni.

1
2
3
4
5
6
7
8
9
10
11
12
// crea fiocco
function creaFiocco() {
    var s = randRange(20, 100);
    var x = randRange(-Math.floor((Stage.width - 320) / 2), Math.round((Stage.width + 320) / 2));
    var y = -Math.floor(((Stage.height - 256) / 2)) - 10;
    c_mc.attachMovie("neve","neve_" + index,index,{_x:x, _y:y, _xscale:s, _yscale:s, _alpha:90});
    index++;
    if (index > 1000) {
        index = 1;
        c_mc = createEmptyMovieClip("c_mc", 2);
    }
}

E questo è tutto… ;) Dimenticavo… Auguri a tutti e Buone feste… ;)

Continua...

Orologio analogico in Flash

Loading Flash Player...

Oggi propongo un’interessante variante del “classico” orologio analogico in Flash. Questa versione contiene una transizione Tween all’avvio del filmato. Mi sono ispirato al Gadget presente in Windows Vista che esegue, appunto, questo bel effetto all’avvio.
Il codice è scritto in Actionscript 2.0 ed è stato compilato con il nuovo Adobe Flash CS3. Questo a dimostrazione che la nuova suite CS3 è pienamente compatibile con le precedenti versioni di Flash, un punto estremamente importante per chi ha deciso di prendere in considerazione l’aggiornamento del prodotto.
Per il sorgente cliccate qui.

Continua...

10 motivi per passare ad Adobe Flash CS3

2007-11-21_170314 Per alcuni sviluppatori basta sapere che esiste una nuova versione del loro pacchetto di sviluppo preferito per correre ad acquistare l’aggiornamento. Altri, e non a torto, mantengono una maggiore calma e "pretendono" di conoscere gli effettivi miglioramente della nuova versione prima di modificare le proprie abitudini. Nel caso di Adobe Flash CS3 non c’è molto da attendere, visto gli innumerevoli cambiamenti che ha subito il pacchetto da quando Macromedia è stata acquisita da Adobe.
Ecco, quindi, 10 semplici, ma importanti, motivi che, a mio personale parere, bastano per convincersi ad eseguire l’aggiornamento ad Adobe Flash CS3. Mi soffermerò, ovviamente, solo sulle caratteristiche che mi hanno colpito personalmente; questo non vuole essere un elenco esaustivo di tutte le numerose novità introdotte con la suite CS3, solo un volo radente per anticipare qualche features della versione CS3.

1. Installazione

L’installazione è gradevole e rapida, rispetto alle precedenti versioni. Si integra, tra l’altro, con tutti i prodotti Adobe (Dreamweaver CS3, Photoshop CS3 extended, ecc…) il che rende le operazioni di installazione/rimozione ed aggiornamento un vero piacere.

2. Compatibilità a ritroso

Una questione spesso sottovalutata, ma sempre tenuta in considerazione nella storia di Flash: la possibilità di gestire le precedenti versioni del prodotto. In Flash CS3 ci sono tutti gli strumenti sia per migrare che per manipolare le precedenti versioni dei nostri filmati. Troviamo questa possibilità sia nel debug (un debug separato per Actionscript 2.0 e Actionscript 3.0) sia in fase di compilazione del filmato. Scrivere da subito applicazioni Flash in Actionscript 3.0 potrebbe essere controproducente in determinati contesti. Se il vostro sito target ha un traffico notevole potrebbe capitare che molti utenti non hanno ancora installato le ultime versioni del Player Flash per il browser e quindi non vedrebbero il filmato. Tuttavia, come già detto, Flash CS3 permette di sviluppare applicazioni Flash mantendedo la compatibilità a ritroso e quindi non vedo in questo un grosso ostocalo nell’upgrade del prodotto.

3. Interfaccia grafica e IDE

Pannello ridotto ad icona Nuovo pannello Flash CS3 L’IDE di Flash CS3 (come quella di Dreamweaver CS3) è stata rivisitata al meglio. I pannelli (vedi figura qui a sinistra), spesso scomodi nelle precedenti versioni, sono stati completamente ridisegnati e adesso il loro uso è notevolemente meno invasivo. Pannelli in modalità icona Inoltre la possibilità di ridurre ad icona i pannelli (vedi figura qui a destra) è una vera trovata che rende l’interfaccia gradevole e funzionale. Quando un pannello si trova in modalità icona occupa molto meno spazio e con un semplice click è possibile aprire il pannello principale prima sempre visibile.
Tutta l’IDE, insomma, è stata rivista compresa la zona centrale con la finestra per l’editing grafico e del codice. Non vi segnalo tutti i cambiamenti altrimenti vi rovinerei la sorpresa…

Nuova IDE Flash CS3

Continua...

ActionScript 3.0 Performance

Io sono un estimatore di Adobe Flash CS3 e quindi di ActionScript 3.0. Ecco un demo, presentata alla conferenza Adobe in Giappone, che dimostra le capacità del nuovo motore di rendering sviluppato da Adobe, giusto per smentire strane voci su un “superamento” da parte di Microsoft Silverlight. Cliccate e muovete il Mouse, aumentando il numero di sfere!

Loading Flash Player...

Davvero notevole…

Continua...

Adobe Flash 3D simulator

Guardate che bella simulazione 3D (a volo d’uccello pilotabile con il mouse) in tempo reale realizzata in Adobe Flash!

Loading Flash Player...

Continua...

Effetto arricciatura sulle immagini

Effetto arricciatura L’autore di questa libreria Unobtrusive è lo stesso di Reflex (Reflex 1.1: aggiungere effetto di riflessione alle immagini). Questa volta propone un simpatico effetto di “arricciatura” (curl) sulle immagini fotocon varie opzioni tra cui l’animazione dell’arricciamento al passaggio del mouse sul bordo dell’immagine. La tecnica utilizzata è sempre quella delle CANVAS utilizzate in tutti gli script disponibili sul sito. Per scaricare il curl script clicca qui.

Continua...

Windows tools: il meglio del freeware

iColorFolder 1.4.2 

I felici possessori di Mac hanno sempre avuto un sistema operativo in grado di gestire i colori delle cartelle. Finalmente con iColorFolder, utility open source, anche su Windows XP sarà possibile impostare colori e grafica delle cartelle.

image

 

Dexpot 1.4.0

Permette di gestire Desktop virtuali in modo assai efficente. Mette a disposizione tutta una serie di utility per la gestione delle finestre e moltissimi funzioni avanzate per rintracciare anche finestre nascoste, regolare la trasparenza e molto altro. Questo software consente moltissime personalizzazioni e di eseguire uno slide show di tutti i Desktop creati e permette di creare regole per la gestione delle finestre nei relativi Desktop. Inoltre è possibile visuallizzare tutti i Desktop (massimo 20) in un colpo solo!.

image

 

Visual Task Tips

Permette di ottenere una miniatura, un’anteprima quindi, delle finestre iconizzate nella barra delle applicazioni, esattamente come accade in Windows Vista. La caratteristica particolare di questa applicazione risiede nella dimensione dell’anteprima, estremamente chiara e visibile e nella capacità di visualizzare in tempo reale le modifiche alla finestra visualizzata, come animazioni in Flash, progress bar, etc…

 

Vista Wallpaper Collection

Sul sito Web di Hamad Darwish, fotografo, sono presenti alcuni scatti che realizzati per Microsoft due dei quali sono fanno parte proprio di quelli  a corredo di Windows Vista. Potete scaricare 22 sfondi davvero magnifici da utilizzare su qualsiasi sistema operativo, XP compreso.

image 

FileHamster

Dedicato sopratutto agli sviluppatori, ma non solo, questo semplice e leggero software permette di tenere traccia delle versioni dei file. Il suo uso è davvero semplice: basta selezionare dall’applicativo una cartella o un file da tenere “sotto controllo”. Da quel momento sarà possibile repristinare una versione precedente. È possibile decidere quali file o cartelle “preservare” tramite classiche wildcard (come *.* o _*) e il numero di revisioni. Funziona, in pratica, con qualsiasi tipo di documento: PSD, DOC, PDF, HTML, etc… Quindi utile a chi scrive documenti, ai grafici che usano Photoshop e agli sviluppatori software.

image

Continua...

Ridimesionamento dinamico intelligente delle immagini

Due ricercatori della Adobe, Dr. Ariel Shamir e Dr. Shai Avidan, hanno sviluppato un’eccezionale algoritmo di ridimensionamento intelligente della immagini. Particolarmente impressionante (vedi video qui sotto) è la capacità di oscurare e modificare completamente un’immagine, grazie ad un “resize” estremamente evoluto e selettivo. In altre parole questa tecnica permette di ridimensionare un’immagine in modo non-lineare. Alcune zone dell’immagine, quindi, vengono mantenute in scala fornendo un’effetto davvero curioso.

Continua...

JingProject, lo Screencast-o-matic online di immagini e Video

jing JingProject è un servizio online corredato da un software (da scaricare) che permette di “catturare” immagini e video dal nostro Desktop.
L’applicazione è disponibile sia per Windows che per Mac ed è realizzata davvero bene. Si possono catturare finestre o porzioni di schermo, sia come immagine (modificabile tramite un minimal editor incorporato) che come Video. Immagini e Video possono essere salvati sul proprio HardDisk o, alternativamente, è possibile condividerle in rete creando rapidamente un account su JingProject. Le immagini o i video saranno così disponibili per la condivisione tramite email, IM o il Blog!

Vedi video introduttivo!

Il progetto è davvero interessante e realizzato bene, anche se non è l’unico disponibile online. Ecco uno schema del suo funzionamento.

Continua...



Stop SOPA