Rudy Digital Jockey :: Aka Ru.Di.J Music Style : Chillout - DeepHouse - Garage - House - Tech - Minimal - Minimal Deep - Techno Deep - Techno Minimal - Techno - Electro My Space Friends : http://www.myspace.com/rudydij Web : http://www.rudy.dj or http://www.rudydj.com MSN: rudy.dj@hotmail.it SKYPE : Ru.Di.J CLUB : Unique Resident Dj @ Wish Club ::: Official COCORICO After Hours ::: - Riccione

Wed 24 Sep 08 @ 5:58 pm

Come realizzarsi una skin per VDJ - ::: LESSON 2 :::

Ora entriamo nel dettaglio di come va realizzato il file grafico.
Abbiamo già deciso che la nostra skin sarà in formato 1024x768 pixel
Cominciamo dunque i nostri primi calcoli partendo da quella che chiameremo TOP BAR.
Generalmente misura dai 19 ai 20 pixel di altezza, noi utilizzeremo 21 pixel.
In questa barra ci posizioneremo i tre classici controlli della finestra per chiuderla, ridimensionarla e nasconderla. Ci aggiungeremo anche il logo Virtualdj e il tasto di accesso al pannello di configurazione.
SUGGERIMENTI E CONSIGLI : In generale almeno uno o due pixel lungo tutto il contorno della skin e come spaziatura tra i vari moduli è consigliabile lasciarlo.
Una delle caratteristiche utili del nostro programma di grafica dovrebbe essere la possibilita di inserire linee guida o comunque l\'indicazione della posizione del cursore negli assi X e Y. In questo modo potremmo essere precisi nel disegno e oltretutto potremmo mentre disegnamo prendere già i punti di riferimento da annotarci, per le dimensioni di ogni singolo tasto o pannello.

Perche è importante il progetto ?
La risposta è molto semplice perche tutta la skin ed i suoi controlli tramite l\'XML è basata su le coordinate della grafica che realizzate.
Per Semplificare.... il vostro file finale sarà come una tavola da battaglia navale dove ogni nave avrà la sua posizione e la sua dimensione.
Nel nostro caso ogni singolo elemento della skin è paragonabile ad una nave nello schema della battaglia navale. Avrà quindi una sua posizione e una sua dimensione.
Proprio come nella battaglia navale gli elementi non possono sovrapporsi, o meglio, ma lo vedremo in seguito possono farlo ma con delle regole ben precise.

Ora passiamo quindi a spiegare la teoria di base dell XML per le skin.
L\'XML è un linguaggio di programmazione o meglio una dichiarazione di variabili che il software legge ed interpreta per personalizzare comandi o funzioni.
Come in ogni software dobbiamo quindi analizzare come si comportano le finestre perche su questa base daremo le istruzioni a vdj, su come comportarsi con nostra skin.
Parto quindi portando il primo esempio che applicheremo alla skin, e prendo come riferimento il tasto di controllo finestra \"ridimensiona\". Gia lo conosciamo perche è onni presente in ogni finestra che si apre nel nostro schermo.
Analizziamolo e vediamo come funziona.
Guardandolo e basta è un quadrato o un pulsante con un quadrato piu grande in primo piano e uno più piccolo in secondo piano, quando è che cambia?

- Un primo cambiamento lo fa quando ci passiamo sopra il mouse, cosa succede?.. per esempio cambia colore.
- Un secondo cambiamento lo fa quando premiamo il pulsante destro, ma se lo teniamo premuto ancora l\'azione non viene compiuta. Con alcune grafiche da l\'idea del tasto premuto.
- Un terzo stato lo assume quando dal mouse rilasciamo il tasto. Generalmente viene compiuta l\'azione.
- Ed un quarto stato lo assume cambiando l\'immagine al suo interno in un rettangolo con la barra superiore più spessa.



Supponiamo ora che sia il tasto PLAY della nostra skin. Anche questo assume 4 stati
- 1° quello quando il cursore non è sopra e il tasto non è premuto.
- 2° quello quando il cursore non è sopra ma il tasto è attivo o è stato premuto.
- 3° quello di quando il cursore è sopra.
- 4° e quello in cui il tasto e premuto ma ancora non è stato rilasciato.

Tre di queste posizioni assumeranno i loro nomi specifici, nel dettaglio la
- 2° sarà SELECTED
- 3° sarà OVER
- 4° sarà DOWN

Questi 4 stati ci fanno intuire che ogni nostro tasto dovrà ricevere specifiche direttive per ogni una di queste posizioni. Capiamo anche un altra cosa che essendo quattro effetti grafici diversi la nostra skin o gli elementi della skin andranno disegnati 4 volte nelle loro 4 posizioni.

SUGGERIMENTO E CONSIGLIO : il quarto stato puo anche essere tralasciato almeno in alcuni pulsanti, l'effetto grafico è meno realistico ma funziona lo stesso.

Il nostro file grafico quindi avra la larghezza in pixel che abbiamo scelto (1024) ma una altezza di almeno (768x4) 3072 pixel, un po di spazio in più lo mettiamo per sicurezza se poi non lo sfruttiamo siamo sempre in tempo per eliminarlo. Stabiliamo quindi che la dimensione finale del nostro file grafico da associare alla skin sarà di 1024x3400 pixel. Lo sfondo lo abbiamo disegnato bianco e lo lasciamo di questa colorazione.
Lesempio di quest'ultimo ragionamento lo abbiamo aprendo il file grafico .bmp di una skin base di VDJ dove si vede che per una skin da 1024x768 in realta il file grafico è molto piu alto e contine le 4 skin nelle varie posizioni più uno spazio per altre funzioni.



Si parte ...
Disegnamo quindi la nostra TOP BAR, abbiamo detto due pixel di margine. Quindi 1024 meno 2 pixel a desta e altri due a sinistra la nostra barra sarà di 1020x21 pixel.
::::::::::::::: D'ora in poi per praticità al posto di scrivere pixel userò l'abbreviativo px :::::::::::



Torniamo quindi alla nostra battaglia navale grafica. Lo dobbiamo fare anche perche come per tutte le finestre di windows questa è la zona in cui una finestra ridotta, quando deve essere spostata nello schermo deve essere sensibile al trascinamento del mouse, la chiameremo quindi “GRABZONE” e per evitare che l'utente clicchi nei px di bordo lasciato, faremo credere al software che anche quelli fanno parte di quest'area.

Siamo arrivati quindi a scrivere la nostra prima parte di codice XML.

::: LESSON1 :::
::: LESSON2 :::
::: LESSON3 :::

::: LESSON4 ::: Under contruction