Asteclick

Segnalo questo sito, a sua volta segnalatomi dall'amico Davide ( www.matheria.net ), nel quale, con un pò di fortuna e strategia, ci si possono aggiudicare degli acquisti di oggetti a prezzi praticamente vicini allo zero. Il sito è Asteclick, il concetto quello dell'asta al ribasso. Se azzecchi il prezzo più basso e sei l'unico ad averlo proposto, hai fatto bingo! :)
Continua...

[as2] Rilevare le collisioni con l'oggetto Math: fra un cerchio e una linea

La logica per determinare questo tipo di collisione è la seguente:

A - La linea è statica e il cerchio si muove

B - Una palla o cerchio, quando in movimento, segue una traiettoria su di una ipotetica linea. Utilizzeremo pertanto alcuni concetti precedentementi introdotti (vedi i vari post sulle collisioni), per determinare dove (la posizione xy) la linea o traiettoria della palla incontra il segmento

C - Successivamente useremo la trigonometria per individuare in quale preciso punto si toccano

D - Osserveremo in quel posizione si trova il cerchio, per determinare quando una collisione avrà luogo. Se otterremo un valore < = 1 frame, allora sarà avvenuta una collisione





L'intersezione avviene dove il centro del cerchio incontra la linea, ma in realtà, abbiamo bisogno che la collisione avvenga prima (pensiamo ad una palla che rimbalza su di un piano)



Il punto di contatto è determinato da una linea perpendicolare che va dal centro del cerchio al segmento. Questa linea è uguale a meno l'inclinazione del segmento di contatto.
Supponendo una inclinazione = 3 del segmento, l'inclinazione della linea perpendicolare sarà = - 1/3





A questo indirizzo potete scaricare un fla di esempio



Continua...

[as2] Rilevare le collisioni con l'oggetto Math: fra due linee

Osserviamo l'equazione di una linea:

y= m.x+b

m= inclinazione della linea
b= punto di intersezione con l'asse delle y



Due linee si intersecano quando la loro inclinazione non è uguale

Supponendo di avere due linee:





y = m1.x+b1

y = m2.x+b2



... di conseguenza, per sapere in quale punto sull'asse delle x si incrociano le linee


m1.x+b1 = m2.x+b2

x = (b2-b1)/(m1-m2)






Aspetto interessante da sottolineare è la distinzione tra linea e segmento. La linea ha una lunghezza infinita, mentre un segmento corrisponde ad una porzione di linea racchiusa tra due punti.

Se due linee si intersecano, ma non i due segmenti presi in considerazione per la collisione, non avremo collisione. Se invece sia le linee che i segmenti si intersecano, avremo una collisione.


Ecco il codice flash per rilevare la collisione tra due linee


_root.createEmptyMovieClip("clip",1);
clip.lineStyle(0,0x000000,100);
//creiamo due oggetti per le due linee
var line1:Object={};
line1.m=1;
line1.b=100;
//
var line2:Object={};
line2.m=5
line2.b=50;
//
function findY(line:Object, x:Number):Number{
var y:Number=line.m*x+line.b;
return y;
//trace(y);
}
//
function drawLine(line:Object):Void{
//scegliamo una x
var x:Number=300;
//troviamo la y
var y:Number=findY(line, x);
//trace(y);
//iniziamo a disegnare la linea
clip.moveTo(x, y);
//scegliamo un'altra x
var x:Number=0;
// e troviamo la sua y
var y:Number=findY(line, x);
//trace(y);
//adesso possiamo terminare il disegno della linea
clip.lineTo(x, y);

}
//
function findIntersection(line_a:Object, line_b:Object):Void{
//questa sotto è la formula per trovare la x di intersezione
//se abbiamo due linee
//y=m1*x+b1 e y=m2*x+b2
//avremo che m1*x+b1=m2*x+b2 che risolta mi da
//x=(b2-b1)/(m1-m2)
var x:Number=(line_b.b-line_a.b)/(line_a.m-line_b.m);
//per trovare invece la y del punto è sufficiente risolvere l'equazione della linea che abbiamo visto prima y=m1*x+b1
var y:Number=line_a.m*x+line_a.b;
dot_mc._x=x;
dot_mc._y=y;
}
//lanciamo la funzione
drawLine(line1);
drawLine(line2);
findIntersection(line1, line2);




Nell'esempio sottostante andiamo invece a verificare se l'intersezione avvenga fra due linee o fra due segmenti delle due linee. Nel primo caso non avremo collisione,nel secondo si. Per fare questo dobiamo definire le due coppie di x dei due segmenti, ovvero diciamo i "bordi" di essi



_root.createEmptyMovieClip("clip",1);
clip.lineStyle(0,0x000000,100);
//creiamo due oggetti per le due linee
var line1:Object={};
//inclinazione
line1.m=1;
//punto di intersezione con l'asse dell y
line1.b=100;
//le due x dei due punti del segmento 1
line1.x1 = 50;
line1.x2 = 200;
//
var line2:Object={};
//inclinazione
//mettete ad esempio =5 per avere intersezione fra linee ma nn fra segmenti
line2.m=3
//punto di intersezione con l'asse dell y
line2.b=-150;
//le due x dei due punti del segmento 2
line2.x1 = 100;
line2.x2 = 150;
//
function findY(line:Object, x:Number):Number{
var y:Number=line.m*x+line.b;
return y;
//trace(y);
}
//
function drawLine(line:Object):Void{
//scegliamo una x
var x:Number=line.x1;
//troviamo la y
var y:Number=findY(line, x);
//passiamo la y del primo punto all'oggetto
line.y1=y
//trace(y);
//iniziamo a disegnare la linea
clip.moveTo(x, y);
//scegliamo un'altra x del secondo punto
var x:Number=line.x2;
// e troviamo la sua y
var y:Number=findY(line, x);
//vedi sopra per la y
line.y2=y;
//trace(y);
//adesso possiamo terminare il disegno della linea
clip.lineTo(x, y);

}
//
function findIntersection(line_a:Object, line_b:Object):Void{
//questa sotto è la formula per trovare la x di intersezione
//se abbiamo due linee
//y=m1*x+b1 e y=m2*x+b2
//avremo che m1*x+b1=m2*x+b2 che risolta mi da
//x=(b2-b1)/(m1-m2)
var x:Number=(line_b.b-line_a.b)/(line_a.m-line_b.m);
//per trovare invece la y del punto è sufficiente risolvere l'equazione della linea che abbiamo visto prima y=m1*x+b1
var y:Number=line_a.m*x+line_a.b;
dot_mc._x=x;
dot_mc._y=y;
//
if((x>=line_a.x1 && x<=line_a.x2) || (x<=line_a.x1 && x>=line_a.x2) || (y>=line_a.y1 && y<=line_a.y2) || (y<=line_a.y1 && y>=line_a.y2)){
var segment_a:Boolean=true;
}
if ((x>=line_b.x1 && x<=line_b.x2) || (x<=line_b.x1 && x>=line_b.x2) || (y>=line_b.y1 && y<=line_b.y2) || (y<=line_b.y1 && y>=line_b.y2)){
var segment_b:Boolean=true;
}
if(segment_a && segment_b){
trace("c'è collisione");
}else{
trace("si intersecano ma nn c'è collisione");
}
}
//lanciamo la funzione
drawLine(line1);
drawLine(line2);
findIntersection(line1, line2);




Continua...

[as2] Rilevare le collisioni con l'oggetto Math: fra due cerchi (indipendente dai frame)

Come già osservato con il metodo hitTest(), se un oggetto si muove abbastanza velocemente da non trovarsi esattamente su di un frame al momento del controllo della collisione, allora nessuna collisione sarà rilevata.

Con questo metodo possiamo prevedere se una collisione potrebbe avvenire fra due due fotogrammi.

Basandovi sul principio secondo il quale se la distanza fra due cerchi è < = alla somma dei loro raggi allora c'è una collisione, dobbiamo:




1 - Scrivere l'equazione della posizione xy dei due cerchi basata sulla velocità x e y

2 - Usare l'equazione di cui sopra per scrivere una equazione che vincoli la distanza fra i due cerchi

3 - Usare la somma dei raggi per la distanza e utilizzarla in funzione del tempo

4 - fare questa operazione ad ogni frame. Se il tempo è < = 1 allora la collisione è avvenuta fra il precedente e il corrente frame.



Di seguito il codice:



game = {};
game.numBalls = 2;
for (var i = 1; i<=game.numBalls; ++i) {
var name = "ball"+i;
game[name] = {};
game[name].clip = _root[name];
game[name].xpos = game[name].clip._x;
game[name].ypos = game[name].clip._y;
game[name].radius = game[name].clip._width/2;
game[name].xmov = 0;
game[name].ymov = 0;
}
game.ball1.xmov = 1;
game.ball1.ymov = 2;
game.ball2.ymov = 1;
function moveBalls() {
for (var i = 1; i<=game.numBalls; ++i) {
var ob = game["ball"+i];
ob.tempx = ob.xpos+ob.xmov;
ob.tempy = ob.ypos+ob.ymov;
}
}
function renderBalls() {
for (var i = 1; i<=game.numBalls; ++i) {
var ob = game["ball"+i];
ob.xpos = ob.tempx;
ob.ypos = ob.tempy;
ob.clip._x = ob.xpos;
ob.clip._y = ob.ypos;
}
}
function ballToBallDetection(b1, b2) {
//settiamo le velocità
var xmov1 = b1.xmov;
var ymov1 = b1.ymov;
var xmov2 = b2.xmov;
var ymov2 = b2.ymov;
//variabili di posizione
var xl1 = b1.xpos;
var yl1 = b1.ypos;
var xl2 = b2.xpos;
var yl2 = b2.ypos;
//costanti
var R = b1.radius+b2.radius;
var a = -2*xmov1*xmov2+xmov1*xmov1+xmov2*xmov2;
var b = -2*xl1*xmov2-2*xl2*xmov1+2*xl1*xmov1+2*xl2*xmov2;
var c = -2*xl1*xl2+xl1*xl1+xl2*xl2;
var d = -2*ymov1*ymov2+ymov1*ymov1+ymov2*ymov2;
var e = -2*yl1*ymov2-2*yl2*ymov1+2*yl1*ymov1+2*yl2*ymov2;
var f = -2*yl1*yl2+yl1*yl1+yl2*yl2;
var g = a+d;
var h = b+e;
var k = c+f-R*R;
//equazione quadratica
var sqRoot = Math.sqrt(h*h-4*g*k);
var t1 = (-h+sqRoot)/(2*g);
var t2 = (-h-sqRoot)/(2*g);
if (t1>0 && t1 <= 1) {
var whatTime = t1;
var ballsCollided = true;
}
if (t2>0 && t2<=1) {
if (whatTime == null || t2 < t1) {
var whatTime = t2;
var ballsCollided = true;
}
}
if (ballsCollided) {
//collisione
trace("collisione");
}
}
_root.onEnterFrame = function() {
moveBalls();
ballToBallDetection(game.ball1, game.ball2);
renderBalls();
};


Continua...

[as2] Rilevare le collisioni con l'oggetto Math: fra due cerchi (frame based)

Se la distanza tra due cerchi è < = alla somma dei loro raggi, abbiamo una collisione.

La tecnica di rilevamento dipendente dai frame fa sì che in ogni frame si controlli se ci sia una collisione, in relazione a dove si trovano gli oggetti.






Il codice:



//definiamo gli oggetti
var cerchio1:Object = {};
cerchio1.clip = cerchio1_mc;
cerchio1.x = cerchio1.clip._x;
cerchio1.y = cerchio1.clip._y;
cerchio1.radius = cerchio1.clip._width/2;
cerchio1.xmov = 3;
cerchio1.ymov = 1;
//
var cerchio2:Object = {};
cerchio2.clip = cerchio2_mc;
cerchio2.x = cerchio2.clip._x;
cerchio2.y = cerchio2.clip._y;
cerchio2.radius = cerchio2.clip._width/2;
cerchio2.xmov = -1;
cerchio2.ymov = 0;
//muoviamo i cerchi
function muoviCerchi():Void {
for (var i = 1; i<=2; ++i) {
var cerchio = this["cerchio"+i];
cerchio.x += cerchio.xmov;
cerchio.y += cerchio.ymov;
cerchio.clip._x = cerchio.x;
cerchio.clip._y = cerchio.y;
}
}
//funzione di calcolo della collisione
function cerchioToCerchio(cerchio1:Object, cerchio2:Object):Void {
var xDiff:Number = cerchio1.x-cerchio2.x;
var yDiff:Number = cerchio1.y-cerchio2.y;
var distance:Number = Math.sqrt(xDiff*xDiff+yDiff*yDiff);
var sommaRaggi:Number = cerchio1.radius+cerchio2.radius;
if (distance< = sommaRaggi) {
trace("collision detected");
} else {
trace("");
}
}
_root.onEnterFrame = function() {
muoviCerchi();
cerchioToCerchio(cerchio1, cerchio2);
};


Continua...

[as2] Rilevare le collisioni con l'oggetto Math: fra un punto e un cerchio

Supponendo che il cerchio e il punto siano due movieClip, si può affermare che:

se la distanza tra il punto e il centro del cerchio è minore del raggio del cerchio, allora, il punto collide con il cerchio







Procedura:

1 - Calcolo la differenza tra la X del cerchio e la X del punto e così anche per la Y (lati A e B)

var xDiff:Number=cerchio._x-punto._x;
var yDiff:Number=cerchio._y-cerchio._y;


2 - Applico il teorema di pitagora per calcolare la distanza fra il centro del cerchio e il punto (lato C)

var distance:Number=Math.sqtr(xDiff*xDiff+yDiff*yDiff);

3 - Se la distanza è minore del raggio c'è collisione


Vediamo la collisione traducendola in un esempio:

istanziate nello stage 3 clip, un cerchio, istanza cerchio_mc e due punti, punto1_mc e punto2_mc

Posizionate uno dei due punti all'interno del cerchio, la'ltro all'esterno.

Questo il codice:



//creiamo 3 oggetti per memorizzare le proprietà dei mc. Usare gli oggetti ci consente di separare tali dati dall'interfaccia, in modo che possiamo cancellare i mc dallo stage senza perdere queste info, che possiamo ritilizzare in un sefcondo momento
//
var punto1:Object = {};
//la sintassi di cui sopra corrisponde a scrivere var punto1:Object=new Object();
punto1.x = punto1_mc._x;
punto1.y = punto1_mc._y;
punto1.name=punto1_mc._name;
//
var punto2:Object = {};
punto2.x = punto2_mc._x;
punto2.y = punto2_mc._y;
punto2.name=punto2_mc._name;
//
var cerchio:Object = {};
cerchio.x = cerchio_mc._x;
cerchio.y = cerchio_mc._y;
cerchio.radius = cerchio_mc._width/2;
//
//funzione che calcola la collisiohne
function collPuntoCerchio(punto:Object, cerchio:Object):Void {
var xDiff:Number = cerchio.x-punto.x;
var yDiff:Number = cerchio.y-punto.y;
var distance:Number = Math.sqrt(xDiff*xDiff+yDiff*yDiff);
if (distance < cerchio.radius) {
trace(punto.name+": collision detected!");
} else {
trace(punto.name+": no collision..");
}
}
//
collPuntoCerchio(punto1,cerchio);
//
collPuntoCerchio(punto2, cerchio);


Continua...

Pubblicato nuovo artwork!

Ho pubblicato un nuovo lavoro su imagekind, spero a qualcuno piaccia!

Questo il link
Continua...

LogMeInFree, software gratuito per il controllo remoto del desktop

un amico, cito la fonte sennò poi mi si offende :) , il brujio, mi ha segnalato questo sito, dove si può scaricare un software totalmente gratuito per il controllo remoto del desktop.

Credo proprio che lo proverò!
Continua...

[as2] Rilevare le collisioni con hitTest()

Il concetto chiave per comprendere l'utilizzo di hitTest() è il bounding box, ovvero il contorno di un movieclip




Con il metodo htiTest() si possono rilevare 3 tipi di collisioni:

- Fra due movieClip

- Fra un movieClip e un punto

- Fra una forma e un punto



Collisioni fra due movieClip

Questo tipo di collisione avviene se i bounding box di 2 clip si intersecano, indipendentemente dal fatto che anche il contenuto di essi si "tocchi"



myMovieClip.hitTest(targetMc)

Ecco un esempio:



con il relativo codice:


function inizia() {
this.onEnterFrame = function() {
forma2_mc._x = _xmouse;
forma2_mc._y = _ymouse;
if (forma2_mc.hitTest(forma1_mc)) {
test_txt.text="contatto"
} else {
test_txt.text="";
}
};
}
inizia();


Collisioni tra un movieClip e un punto

myMc.hitTest(x,y)

Questo tipo di collisione avviene quando un punto, identificato nello spazio attraverso le sue coordinate x e y, si trova nel bounding box di un mc.
Nell'esempio sottostante, quando il mouse si trova nel bounding box del clip (evidenziato con un riquadro grigio), facciamo partire una animazione:




il codice:


_root.onMouseDown = function() {
var mx = _xmouse;
var my = _ymouse;
if (balloon_mc.hitTest(mx, my)) {
balloon_mc.play();
}
};


Da notare come l'animazione parta anche cliccando al di fuori della forma ma dentro al riquadro o bounding box.

Collisioni tra una forma e un punto

myMc.hitTest(x,y,true);

L'aggiunta del parametro true consente di non considerare il bounding box, bensì un oggetto all'interno di un clip. Vediamo come cambia l'esempio precedente. Provate a cliccare in un'area fra la forma e il bounding box, non accadrà nulla. L'area interessata alla collisione è diventata la forma presente all'interno del clip:



il codice:

_root.onMouseDown = function() {
var mx = _xmouse;
var my = _ymouse;
if (balloon_mc.hitTest(mx, my, true)) {
balloon_mc.play();
}
};


Continua...

[as2] Rilevare le collisioni: hitTest() vs oggetto Math

Inizio con questo post una mini guida sulle collisioni in flash.
Il libro che ho letto e dal quale ho tratto spunto è
"Flash MX game design demystified" di Jobe Makar (Macromedia Press).

Una collisione ha luogo quando due forme distinte condividono uno o più punti nello spazio.

Alcuni tipi di collisioni:




Abbiamo a disposizione due metodi di rilevamento:

- Il metodo hitTest();

- La matematica



HitTest ha alcuni limiti:

- Non è possibile determinare la collisione fra forme contenute in due distinti movieClip

- Gli oggetti devono muoversi per generare una collisione, mentre con l'oggetto Math si può tenere traccia della posizione di un movieClip memorizzandola in una variabile ancora prima che il movimento abbia effetto.

- hitTest() dipende dal frameRate, nel senso che 2 movieClip devono collidere in un determinato frame, mentre è plausibile pensare che tale collisione possa avvenire un pò prima o un pò dopo.
Quando si verifica una ipotesi del genere, i due oggetti si "attraverseranno" inesorabilmente senza che venga rilevata alcuna collisione!

Osservate ad esempio cosa accade, dopo circa una 30ina di secondi alla palla che rimbalza nel filmato sottostante:





Nei prossimi giorni pubblicherò alcuni post con esempi pratici sulle due metodologie.


Continua...

[as2] setInterval e i movimenti controllati dal tempo

L'handler onEnterFrame non è il solo evento disponibile per gestire animazioni che si basano sul tempo. Spesso è preferibile usare setInterval, che consente, fra l'altro, di creare animazioni che scorrono a velocità differenti, e indipendenti dal frame rate del filmato.

I vantaggi nell'utilizzo di setInterval:

- Possiamo gravare in modo minore sul processore, perchè non abbiamo bisogno di aumentare il frame rate per rendere più fluida una animazione.

- Possiamo creare animazioni che vanno a velocità differenti

- Flash non perde tempo a ridisegnare lo schermo per via dell'alta frequenza dei fotogrammi (cosa che invece succederebbe se andassimo ad aumentarla)

- Sganciandosi dalla logica del frame rate, lavoariamo sul tempo, e le animazioni sono temporizzate in modo più preciso e meno dipendente dalle performance del processore


Alcuni esempi di utilizzo:

var intervallo:Number=setInterval(funzione, intervallo, argomenti);

La funzione viene chiamata ogni tot millisecondi (parametro intervallo), e gli argomenti sono quelli che possono essere passati opzionalmente alla funzione, separati da virgola.

SetInterval è un handler di eventi, diverso da un normale handler di una istanza, come onEnterFrame. Per abbinare un metodo a una istanza di un movieClip con setInterval:

var intervallo:Number=setInterval(oggetto, metodo, intervallo, argomenti);

Possiamo passare al parametro oggetto l'istanza di un movieclip e il metodo da chiamare su questa istanza nell'intervallo prefissato




Nell'esempio mostrato sopra chiamiamo moveBall, un metodo del clip ball_mc, per far muovere il clip lungo lo stage:

var intervallo:Number=setInterval(ball_mc, "moveBall", 2);
ball_mc.moveBall = function():Void {
this._x++;
if (this._x>=Stage.width-this._width) {
clearInterval(intervallo);
}
updateAfterEvent();
};

Il seguente esempio mette a raffronto una animazione frame based con una time based:



Questo il codice:



function mover():Void{
this._x+=speed;
if(this._x>=500){
clearInterval(this.interval)
}
updateAfterEvent();
}
//
function enterFrameMover():Void{
this._x+=speed;
if(this._x>=500){
delete this.onEnterFrame;
}
}
//
function disegnaPalletta(clip:MovieClip, x:Number, y:Number):MovieClip{
var mc:MovieClip=this.createEmptyMovieClip(clip.toString(), this.getNextHighestDepth())
mc.lineStyle(40, 0xcccccc, 100);
mc.moveTo(-1,0);
mc.lineTo(1,0);
mc._x=x;
mc._y=y;
return mc;
}

var speed:Number=1;
var palla1_mc:MovieClip=disegnaPalletta(palla1_mc, 200, 100);
var palla2_mc:MovieClip=disegnaPalletta(palla2_mc, 200, 200);
//passo la funzione come metodo del mc
palla1_mc.intervalMover=mover
//nome dell'intervallo
palla1_mc.interval=setInterval(palla1_mc, "intervalMover",1);
//palla 2 si muove con l'enterFrame
palla2_mc.onEnterFrame=enterFrameMover;



Continua...

Let's Course - Tappa di Milano

Mercoledi scorso ho partecipato alla tappa milanese del corso gratuito tenuto dalla società Let's Course.

Nonostante il poco tempo a disposizione sono stati trattati in modo coinvolgente alcuni argomenti, sicuramente da approfondire, quali l'utilizzo del framework Blueprint per la costruzione di pagine html, e di CodeIgniter per lo sviluppo di siti dinamici in PHP.

Sul versante grafico, un paio di funzionalità non troppo note ma molto utili di Photoshop: La palette "Composizione Livelli" e i "Dati Variabili".

Prossimamente farò dei post su alcuni di questi argomenti.
Continua...

La teoria dei colori e applicazioni sul web

Quando si realizza il layout di un sito, uno degli elementi importanti da valutare a monte, in fase di progettazione, è la scelta dei colori.

Spesso si fanno scelte dettate da gusti e convinzioni personali, per non parlare delle convinzioni dei clienti...., senza la consapevolezza di cosa i colori comunichino e l'osservanza di alcune regole basilari.

La percezione fisica del colore avviene quando la luce illumina un oggetto e viene interpretata dal cervello. Si tratta di una percezione fortemente soggettiva, resa ancor più variabile se pensiamo a come percepiamo i colori nel mondo reale, attraverso i nostri occhi, rispetto a come li percepiamo ad esempio su un televisore o un monitor.

Il processo secondo il quale l'occhio percepisce i colori è detto sintesi sottrattiva.
Ogni oggetto assorbe, riflette e trasmette la luce, e i nostri occhi percepiscono che la luce è colore.
La sintesi sottrattiva si basa sulla combinazione di 3 colori primari: il rosso, il giallo e il blu.
Tutte le sfumature di colore provengono da questi colori o dalla loro combinazione.
Unendo coppie di colori primari otteniamo i colori secondari, mentre l'unione di due colori primari nerl rapporto di 2:1 genera colori intermedi o terziari.

Secondo la sintesi sottrattiva, il bianco è pura luce riflessa, il nero è totale assenza di luce.

Il processo in base al quale un colore è percepito si basa sull'assorbimento di luce di quel colore, secondo appunto una sintesi sottrattiva.


Quello che avviene invece nel colore digitale, pensiamo ad esempio ai nostri monitor o alla televisione, si basa su di una percezione diversa, detta sintesi additiva. In pratica ogni colore è il risultato dell'aggiunta di stimoli luminosi alla luce. I colori primari nella sintesi additiva sono il rosso, il verde e il blu (RGB).

Quando guardiamo una immagine su di uno schermo, essa è formata da migliaia/milioni di piccoli puntini o pixel luminosi rossi, verdi e blu. I nostri occhi non li riescono a distinguere singolarmente, ci appaiono mischiati insieme, ottenendo la percerzione di un determinato colore.

L'assenza di stimoli luminosi genera il colore nero (valore RGB 0,0,0 ), il bianco è invece composto da proporzioni uguali di rosso, verde e blu (valore RGB 255, 255, 255).

Facendo un parallelismo con i colori organici, se mischiamo rosso, blu e verde in quantità uguali, otteniamo il marrone, la risultante invece di un colore digitale con uguali quantità di colori primari rossi verdi e blu genera, come detto, il bianco.

La fedeltà dei colori digitali rispetto a quelli organici, che si trovano in natura, dipende dalla qualità dei supporti hardware, ma essendo creati dalla luce risulteranno sempre diversi dalla "realtà", direi più accesi e freddi. Questo è un elemento di cui tener presente nelle nostre scelte.

Il rosso apparirà più simile all'arancio ( pensate al rosso ferrari quando guardate un gran premio in tv!), il verde tenderà leggermente al giallo, e il blu (colore tipicamente ostico se da web dovete passare alla stampa) contiene più rosso, avvicinandosi maggiormente al viola rispetto al blu organico.

Esaminiamo adesso alcuni concetti di base dei colori.


Le proprietà del colore

Gli elementi che rendono unico un colore sono 3:

- frequenza

- valore

- intensità

La tinta
E' la carta d'identità di un colore, ciò che lo rende unico nello spettro dei colori. corrisponde alla frequenza della lunghezza d'onda di un colore

Valore cromatico
L'aggiunta di bianco (o luce) crea una tinta. La sottrazione di luce (maggiore quantità di nero) crea una sfumatura. Il valore cromatico è la quantità di luce aggiunta o sottratta a un colore.

Saturazione
Corrisponde alla luminosità di un colore, la sua intensità o croma. Un colore è saturo quando è nel suo stato puro, senza l'aggiunta di nero o di altri colori

Complementarità
Esistono molti siti e tool che permettono di verificare, per un dato colore, quali siano i colori complemetari, le triadi e quelli analoghi. Sebbene spesso ci si basi sulle nostre sensazioni, è bene sapere che:

- I colori complementatri si trovano uno di fronte all'altro sulla ruota cromatica, e il loro contrasto è alto ( la scelta di un colore di sfondo e di quello del font dovrebbero offrire un buon contrasto per non irritirare chi legge)

- I colori complementari separati compaiono ai lati di un colore complementare, e offrono un contrasto meno accentuato dei complementari

- Le triadi sono colori equidistanti, armonici e piacevoli ( quando scelgo il set di colori mi baso spesso sulle triadi)

- I colori analoghi sono uno accanto alla'ltro, offrono poco contrasto, possono essere facilmente combinati e possono essere di aiuto nella scelta di temi colore per siti "monocromatici" o con una dominante di colore

- I colori armonici creano una sensazione positiva, si accostano bene tra loro

- I colori discordanti danno invece una sensazione di irritazione e nervosismo, sono eccessivamente contrastanti (esempio il nero e il giallo)


La temperatura del colore

Nel libro "Flash Web Design, Flash V5 Remix" di Hilmann Curtis, ricordo di aver letto un concetto che a mio parere si sposa bene anche con il concetto di colore e l'importanza delle nostre scelte. Quando Curtis parla del progetto che deve realizzare con il cliente, disegna un bersaglio su di un foglio e annota ogni aggettivo, frase o commento che contribuiscano a "colpire" il centro emotivo del progetto. Se il cliente dice di volere un sito elegante, formale, professionale, si aspetterà, inconsciamente, di vedere colori ben diversi da un sito aggressivo e informale. La ricerca dei colori deve basarsi sull'emotività del cliente da un lato, e sul contesto e il pubblico a cui si rivolge dall'altro. Siccome i colori "parlano", esprimono dei concetti, potranno aiutarvi a centrare il bersaglio.

In questo contesto, la temperatura dei colori che sceglierete potrà essere il veicolo su cui trasmettere i concetti e l'emotività manifestati dal cliente.

- I colori caldi sono quelli la cui tinta si trova nello spettro compreso tra il giallo e il rosso

- La tinta dei colori freddi si trova nello spettro tra il verde e il blu

- I colori neutrali sono il nero, il grigio, il bianco, e i toni di terra come i marroni

Prima di chiudere questa panoramica, senza alcuna pretesa scientifica o artistica ... :) cito, dal libro "Il colore nel web" di Molly E. Holzschlag (da cui ho tratto molte delle informazioni che ho riportato in questa mini guida) un elenco di colori, abbinando ad ognuno di essi i concetti che richiamano:

ROSSO (in Cina, il simbolo della festa e della buona sorte):

• forza
• energia
• amore
• calore
• passione
• aggressività
• pericolo

BLU (colore dell'immortalità in cina, sacralità per gli Ebrei, colore di Krishna per gli Induisti):

• fiducia
• tradizione
• sicurezza
• tecnologia
• pulizia
• tristezza
• ordine

VERDE (tende a calmare e a fungere da antidepressivo. Negli Stati Uniti è associato ai soldi, ma non in altri paesi del mondo):

• natura
• terra
• salute
• buona sorte
• gelosia
• rinnovamento
• denaro

GIALLO (colore sacro e imperiale nelle culture asiatiche, rappresenta la gioia e la felicità in molte culture occidentali. Le donne tendono a rispondere positivamente a molti valori del giallo):

• ottimismo
• speranza
• filosofia
• disonestà
• vigliaccheria
• tradimento

VIOLA (associato al lutto o alle religioni alternative o New Age. Meglio evitarlo nella maggior parte dei casi. Interessante come il viola si trovi raramente in natura):

• spiritualità
• mistero
• regalità
• forza
• trasformazione
• crudeltà
• arroganza
• omosessualità

ARANCIONE (negli Stati Uniti significa che un prodotto è economico, ma è meglio evitarlo quando si progettano siti che vogliono essere sofisticati, eleganti e lussuosi):

• energia
• equilibrio
• calore

MARRONE (è di solito molto neutrale ed è associato alla natura):

• terra
• affidabilità
• comodità
• resistenza

GRIGIO (molto usato come colore neutralizzante, i toni argentati esprimono ricercatezza):

• intelletto
• futurismo
• eleganza (toni argentati)
• modestia
• tristezza
• decadimento

BIANCO (la salvezza, la sacralità e la purezza in moltissime culture del mondo, ma può significare lutto in alcuni paesi occidentali e in molti paesi orientali. Meglio usarlo con attenzione. Dato che si tratta di un colore indispensabile per il contrasto e il design, è bene unirlo ad altri colori dall'impatto più forte e deciso):

• purezza
• pulizia
• precisione
• innocenza
• sterilità
• morte

NERO ( rappresenta il lutto in molte culture così come la malvagità e gli spiriti oscuri. Paradossalmente, il nero è considerato sofisticato ed elegante specialmente in aree ricche cosmopolite):

• forza
• sessualità
• sofisticatezza
• mistero
• paura
• infelicità
• morte

Continua...

Correzione occhi rossi, tecnica alternativa

Se non siete soddisfatti dello strumento automatico di rimozione occhi rossi in photoshop, esiste una tecnica più raffinata, usando i canali.




Eseguite una selezione con il lasso attorno all'area rossa, non importa essere precisi




Anche se non è necessario eseguire le due seguenti operazioni, andiamo ad osservare, nella palette dei canali, il canale rosso,

...e quello verde

Come si può notare, nel canale rosso viene evidenziata l'area "danneggiata", nel canale verde, la "naturale" correzione.

Torniamo alla visualizzazione RGB dell'immagine e, con la selezione sempre attiva, clicchiamo sul menu Image -->Apply Image, selezionate il canale Green e usate come blending mode "Darken"

Questo il risultato finale

Continua...

Uno strumento per i commentatori di blog

Pare che sia diventata una vera e propria passione, molti utenti in rete si dilettano più a commentare blog che a possederne di propri. A questo proposito, una società svizzera, Cocomment, permette di scaricare un componente da installare nel browser per registrare e monitorare tutti i vostri commenti in un solo click!

Questo il sito: www.cocomment.com
Continua...

Scrivere codice HTML per email commerciali o Newsletter

Se vi è capitato di dover realizzare la grafica e scrivere il codice html per una email formato html da utilizzare ad esempio come newsletter, avrete notato quanti problemi di compatibilità ci siano rispetto ai vari client e ai lettori "browser based" dei vostri provider. Ce ne sono molti di più dei browser, e seguono regole di interpretazione del codice in un modo non standardizzato.



In rete si possono trovare molte risorse sull'argomento, cito un paio di link (ma basta fare una ricerca), come http://css-discuss.incutio.com/?page=StyleInEmail,
http://css.html.it/articoli/leggi/1615/email-commerciali-con-html-e-css/1/,
http://www.blogmarketing.it
oppure la guida di mailchimp (gratuita, il software invece no :) )

Le regole base da seguire per creare una mail che vada bene per tutti i lettori non sono molte, ma costringono a dei compromessi!

Prima di tutto dovrete scrivere codice secondo il DOCTYPE HTML3.2, con un uso limitato di CSS1 e l'uso di tabelle il meno nidificate possibile per montare la grafica.

Di seguito faccio un elenco di altri accorgimenti utili da adottare:

- Linkare le immagini con indirizzi assoluti, posizionandole su di un server

- Creare layout di misure non superiori a 600 px di larghezza (le finestre di preview sono spesso molto piccole! )

- Cercare di creare codice semplice

- Evitare l'uso dei colspan e cellspan

- In alternativa, creare più tabelle (esempio una per l'header, una per il corpo, una per il footer)

- Molti client web ignorano i tag html, head e body (pensateci prima di inserire dichiarazioni di stile solo nell'header! Una idea può essere quella di dichiarare gli stili nell'header e anche inline nei tag)

- I colori di sfondo utilizzati come attributi del tag body vengono spesso ignorati (create una tabella al 100% in altezza e larghezza e date ad essa un colore di sfondo)

- Se create un layout allineato al centro con una tabella di base al 100% come indicato al precedente punto (l'allineamento avverrà nel td, < td align=" center " > ), ricordatevi di riallineare tutti i contenuti a livello di singole celle nelle restanti tabelle ( td align=" left " )

- E' preferibile utilizzare CSS in linea (all'interno dei singoli tag)

- Evitare l'uso dei DIV

- Evitare l'uso di paragrafi < p > sotituendoli con tag < font >, < span > e < br > per gli a capo

- Ridefinire il tag font dentro ai link e subito dopo

- Mailreader come quelli di libero necessitano dell'uso di tag < font > per mantenere un minimo di formattazione, usateli anche a costo di essere ridondanti rispetto a tag < span > similari

- Registratevi un pò di indirizzi mail dei vari provider e andate a simulare degli invii osservando il comportamento dei vari web-client


Continua...