Creare bottoni o grafica vettoriali

Quando sviluppiamo un programma, anche l'occhio vuole la sua parte. Se invece dei pulsanti normali volessimo utilizzare una grafica accattivante, potremmo utilizzare delle immagini. Il problema delle immagini e che non possono essere ingrandite o rimpicciolite senza problemi di definizione.
Ad esempio:

L'immagine ingrandita appare sempre "pixellosa"

Se invece usiamo le immagini vettoriali, non abbiamo problemi di ingrandimenti. Una grafica vettoriale non è composta da una serie predefinita di puntini colorati (pixels), ma da equazioni delle curve che compongono le immagini e per questo sono sempre definite, qualunque ingrandimento vogliamo applicare.
Questo sistema è utilissimo sopratutto per chi sviluppa su dispositivi mobili, come tablet o cellulari, permettendo di adattare la grafica ad ogni esigenza senza dover pensare alla risoluzione del dispositivo.
I controlli per disegnare forme creano oggetti vettoriali:

possiamo sfruttarli per creare controlli con grafica vettoriale.
Come esempio creeremo un pulsante bellissimo.
Cominciamo col creare un rounded rectangle (il secondo pulsante da sinistra):

Poi utilizzando il property inspector gli assegniamo un colore per il backgroundcolor (cliccate su opaque o non vedrete nulla):

Impostiamo la linesize a 0 (line thickness sul menu) in modo da far scomparire il bordo
Adesso esageriamo, andiamo su Graphic effect e selezioniamo inner glow. Giochiamo con i valori per ottenere questo:

Con questo effetto sembra in 3D. Se cambiate il colore dell'effetto inner glow in bianco, questo è il risultato:

Abbiamo appena cominciato col creare un bottone alla moda: sempre rimanendo sulle proprietà dell'inner glow, cambiamo il blend mode impostandolo a color dodge.
Ora aggiungendo gli effetti  inner shadow (bianca e poco opaca) e una drop shadow (size 1, distance 2, poso opaca) potete arrivare a questo:

Il pulsante è bellissimo, può essere ridimensionato come più ci piace e se ci aggiungete il seguente codice, vi sorprenderà ancora di più:

on mouseEnter
   set the backgroundcolor of me to "118,0,255"
end mouseEnter

on mouseLeave
   set the backgroundcolor of me to "0,118,255"
end mouseLeave

on mouseDown
   set the backgroundcolor of me to "180,0,120"
   move me relative 0,1
end mouseDown

on mouseUp
   set the backgroundcolor of me to "118,0,255"
   move me relative 0,-1
end mouseUp