Login :       Password :       Remember me

scarabokio

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



Fri 26 Sep 08 @ 6:38 pm


::::::::::::::: LESSON 3 ::::::::::::::::::

Siamo arrivati quindi a scrivere la nostra prima linea di codice XML.
UNA PREMESSA sui termini che useremo: Parto dal più importante.

IL TAG
Ogni comando e/o i suoi parametri vengono chiusi tra Tag, e servono al programma per delimitare la funzioni associate a quel determinato parametro o comando. Ne esistono di vari tipologie.
Hanno un loro sintassi ben specifica nell'XML. Non rispettare questa sintassi genererebbe un errore e tutta la nostra skin non funzionerebbe.
Ogni tag va aperto e chiuso, sia che si tratti si un unica linea di un paramtro sia che si tratti di un tag che racchiude una serie di parametri comanadi.
Detto cosi è articolato, ma con il primo esempio sarà semplice capire. E per farlo uso ad esempio il BB CODE o il SINTAX HELP del forum di VDJ.
Supponiamo di voler creare un immagine con link associato da inserire nel nostro messaggio.



Come si puo vedere necessitiamo di due istruzioni, una per indicare 'URL dell immagine da visualizzare ed un altra per indicare al compilatore che cliccando su quell'immagine deve reindirizzarci ad un indirizzo specifico.



Nel caso del BBCODE i tag sono rappresentati racchiusi tra parentesi quadre. Come possiamo vedere abbiamo un primo tag di nome URL che vene aperto, al suo interno si dichiara l' indirizzo di destinazione in fase di click. Si apre poi un secondo tag che riguarda l'immagine, nel nostro caso l'indirizzo contenuto è quelle dell'inidizzo web in cui l'immagine si trova. A questo punto si chiude il tag IMG insernedo IMG tra parentesi quadre e facendo precedere la scritta dal simbolo SLASH.
Chiuso questo tag, va chiuso anche l' altro che avviamo aperto e cio quello dell URL la sintassi utilizzata è la stessa Parentesi quadra aperta, slash, comando e chiusa parentesi quadra. A questo punto la nostra linea di comando è completa e funzionante.
Da quest ultimo esempio abbiamo visto anche esistono gruppi di tag combinabili, e che hanno sintassi diverse tra loro.

Premessa questa cosa siamo pronti per iniziare.

La “LINE 0” del nostro XML
Questa linea è estremamente importante per tutto il nostro codice. Nella prima linea dichiariamo al software le prime informazioni sulla nostra skin, Nessuna di queste può essere omessa.

Quote :
<Skin name="didattica" version="510" width="1024" height="768">


E molto semplice gli diciamo il nome della skin, che sarà quello visualizzato nel pannello di CONFIG di VDJ nella sezione dove si seleziona la skin da attivare, e dovrà essere anche lo stesso nome che diamo al file .bmp se i due nomi differiscono la skin non funziona e verrà visualizzato un ERROR IN LINE =0

Ora passiamo alla seconda linea del nostro XML

Quote :
<copyright>- (c)2008 – Nome della autore -</copyright>


Tra i Tag “copyright" possiamo scrivere il nostro nome. Se modifichiamo una skin, è netiquette lasciare il nome dell autore originale inserendo il proprio come “Reworked By ... ”

Può esserci utile per la lettura del codice inserire linee di riferimento che ci indichino il contenuto delle linee successive. Nel nostro caso per esempio Le prossime linee di programma definiranno la parte superiore della skin. Per identificarlo possiamo usare ad esempio il carattere asterisco ripetuto in sequenza. In questo modo:

Quote :
**********************
TOP
**********************


La prima definizione importante da fare è quella di cui già abbiamo parlato nella parte finale della seconda lezione, e che abbiamo chiamato “GRABZONE

Il Tag GRABZONE.
Con questo tag indichiamo al software, che comunicherà al sistema, la o le zone in cui la finestra può venire trascinata sul desktop. Come abbiamo Indicato le zone di azione si definiscono indicando posizione e dimensione del rettangolo che le contiene. Nel nostro caso la grabzone è la parte superiore avrà come origine le coordinate X/Y corrispondenti a X (asse orrizontale) uguale a zero e ad Y (asse verticale) uguale a zero.
La dimensione del nostro rettangolo è l'intera larghezza della skin, quindi 1024 px, per un altezza pari a :
2 px che abbiamo lasciato come bordo superiore, più
21px che è la dimensione della nostra narra verde disegnata e gli aggiungiamo
1px sotto come margine di sicurezza,
per un totale di 24 px.
Dichiariamo con l'XML, questa informazione a Virtual dj nel seguente modo.

Quote :
<grabzone>
<size width="1024" height="24"/>
<pos x="0" y="0"/>
</grabzone>


Abbiamo scoperto quindi come dire a VDJ la dimensione Tag ( size ) e la posizione di un area o di un oggetto. Scoprendo anche che la dimensione è composta dalle variabili width che corrisponde a larghezza, e da eight che corrisponde all'altezza.
Per comunicare la posizione basta la coordinata dell angolo superiore sinistro rispetto all asse X e Y della nostra battaglia navale.

Il Tag LOGO
Come già preannunciato l'inserimento del LOGO VirtualDJ in una skin è obbligatorio, e la sua dimensione,se non erro deve avere un altezza superiore o uguale ai 15 pixel. Noi lo useremo da 19 pixel di altezza. Quanto alla lunghezza trattandosi di un elemento obbligatorio sarà VDJ stesso a stabilire l'esatta proporzione in quanto l'immagine del logo è residente nel programma e non siamo noi a disegnarla. Il nostro compito è solo quello di dichiarare quanto grande la vogliamo e dove.

Quote :
<logo>
<size width="0" height="19"/>
<pos x="3" y="3"/>
</logo>


Ho fatto in modo che il logo venga posizionato nella parte superiore della skin all interno del nostro riquadro in cui abbiamo immaginato la barra dei controlli finestra.
Il risultato grafico è questo :



La Nostra porzione di codice scritta fino ad ora è :

Quote :
<Skin name="didattica" version="510" width="1024" height="768">
<copyright>- (c)2008 - Atomix Productions -</copyright>

***************************
** TOP BAR
***************************

<grabzone>
<size width="1024" height="24"/>
<pos x="0" y="0"/>
</grabzone>

<logo>
<size width="0" height="19"/>
<pos x="3" y="3"/>
</logo>
</skin>


Da notare che abbiamo aggiunto il Tag di chiusura nominato SKIN, che avevamo aperto nella linea zero di codice.


NOTA PER IL LETTORE
Immagino che a questo punto la voglia sia quella di vedere il nostro disegno caricato su VDJ come skin.
Ci vuole ancora un po di pazienza !!!
.. se ci pensate ci sono altri elementi che dobbiamo inserire prima che VirtualDJ possa leggere il nostro codice. Oltre ad averli già disegnati nell'immagine precedente, prima di chiudere questa lesson, scriveremo il codice per renderli operativi. Non possiamo tralasciare per due ragioni essenziali. Per esempio: il tasto CONFIG, se non lo mettiamo non avremo accesso al pannello skin, per ritornare ad un altra skin dopo avere visto la nostra che al momento non è operativa percui è initilizzabile. O meglio per tornare ad un altra skin, dovremmo tenere aperta alla schermata di avvio la finestra che ci consente di selezionare la skin di partenza. In ogni caso sarebbe un passaggio scomodo.
Gli altri tre tasti hanno le funzionalità per chiudere VDJ e comunicano a windows le modalità di modifica della finestra stessa.
Questi sono gli elementi che non dovrebbero mancare mai e che ci consentono, da ora in poi, di vedere il nostro lavoro come viene, direttamente su VDJ.


Il PRIMO BOTTONE

In base alla nostra skin il primo bottone che troviamo è il tasto che chiude la finestra e arresta il programma. Facciamo i nostri calcoli in base alla nostra grafica che abbiano disegnato. Come si capisce dall immagine sopra, il nostro tasto è un quadrato, avendo la stessa dimensione del logo le sue misure saranno di 19x19 pixel,ed abbiamo stabilito quanto occupa . Abbiamo stabilito di lasciare almeno 2 px di bordo tra oggetto ed oggetto. Quale sarà la posizione dell oggetto?
Il calcolo è semplice: 2px il bordo esterno,1px tra il bordo ed il logo vdj, 72 px il logo vdj e di in fine i 2 px. di spazio tra logo e bottone. Per un totale di : 77 pixel. A queso punto la nostra coordina X sarà 77, mentre la Y sarà 3 come per il logo.
Abbiamo detto che un bottone assume 4 stati (lesson1) e quindi per ogni stto dobbiamo indicare la posizione grafica dello stesso tasto. La dimensione rimane invariata in tutti quattro gli stati del bottone, quello che cambia è la posizione. Per la stessa regola dei 2 pixel, anche nel disegno tra una skin e l' altra lasceremo 2 pixel (Non è necessario m è consigliabile).
Per cui il secondo stato del nostro bottone avrà la stessa distanza dal bordo sinistro (asse X) e una distanza maggiore dal bordo superiore (asse Y). Maggiore di quanto? .. semplice! L'altezza della nostra skin ( 768px ) più i 2 px di spazio, lasciati nel disegno tra le due skin. Per un totale di 770px, in riferimento al bordo.
Avete notato di quanti fattori bisogna tenere conto già per disegnare solo la seconda posizione del primo bottone. Per questo l XML ci consente anche un sistema di riferimento, all interno di un unico comando, che al posto di riferirsi alle coordinate su tutta la skin, fa come riferimento la coordinata di base fornita nel XML per la prima immagine. In questo modo sappiamo che aggiungendo 768+2 pixel si ottiene la coordinata della seconda immagine. Per la terza basterà moltiplicare 770x2 = 1441 ed avremo la posizione Y nella terza skin disegnata, viene da se che moltiplicando 770x3 = 2211 avremo la coordinata Y nella quarta Skin disegnata. Mettiamo ora per iscritto quanto abbiamo calcolato fino ad ora, ed avremo ottenuto il nostro primo bottone.

Il Tag “BUTTON”

E' un tag un po particolare e nella sua fase di apertura ha la possibilità di assegnare alcuni parametri all'oggetto. In questo primo esempio vedremo quello principale che il parametro ACTION.
Ecco il codice del Tag di apertura.

Quote :
<button action=”close”>


Quindi “close” è il comando che fa chiudere sia la finestra che VDJ.
Inseriamo ora la dimensione e la posizione dell'oggetto nella prima skin

Quote :
<size width=”19” eight=”19”/>
<pos x=”77” y=”3”/>


Come avevamo calcolato prima !
Ora definiamo le posizioni dell immagine grafica associata agli altri tre stati dell oggetto. Come abbiamo detto esistono due modi di indicarli, quello assoluto che fa riferimento alla totalità della skin, e quello relativo che invecie fa riferimento alla posizione del primo stato.
Il codice per il posizionamento assoluto è :

Quote :
<selected x="77" y="770" />
<over x="77" y="1441" />
<down x="77" y="2211" />


Per il posizionamento relativo sara sufficiente mettere un segno + o un – prima del vlore da sommare per avere lo spostamento rispetto al punto di origine. E quindi il nostro codice sarà.

Quote :
<selected x="+0" y="770" />
<over x="+0" y="1441" />
<down x="+0" y="2211" />


Entrambe i codici sono corretti e funzionanti. Ora possiamo chiudere il nostro tag button.
Avremo cosi uno di questi due codici nel nostro XML

ASSOLUTO
Quote :
<button action="close">
<size width="19" height="19"/>
<pos x="77" y="3"/>
<selected x="+0" y="770" />
<over x="+0" y="1441" />
<down x="+0" y="2211" />
</button>

RELATIVO
Quote :
<button action="close">
<size width="19" height="19"/>
<pos x="77" y="3"/>
<selected x="77" y="+767" />
<over x="77" y="+1438 />
<down x="77" y="+2208" />
</button>

OPPURE MISTO
Quote :
<button action="close">
<size width="19" height="19"/>
<pos x="77" y="3"/>
<selected x="+0" y="770" />
<over x="+0" y="1441" />
<down x="+0" y="2211" />
</button>


Ora il nostro tasto CLOSE funziona!
I tasti che seguono, eseguono tre operazioni la massimizzazione sia per espandere a pieno schermo la finestra che per ridurla, e poi abbiamo la minimizzazione per ridurre ad icona.

D'ora im poi utilizzeremo il sistema relativo in quanto la semplicità della nostra skin lo rende la soluzione pìù pratica.

Le relative ACTION dei nostri due button sono : “maximixe” per il ridimensionamento e “minimize” per la riduzione ad icona. Gli script sono i seguenti.

Quote :
<button action="maximize">
<size width="19" height="19"/>
<pos x="98" y="3"/>
<selected x="+0" y="770" />
<over x="+0" y="1441" />
<down x="+0" y="2211" />
</button>
<button action="minimize">
<size width="19" height="19"/>
<pos x="119" y="3"/>
<selected x="+0" y="770" />
<over x="+0" y="1441" />
<down x="+0" y="2211" />
</button>


Per il nostro bottone CONFIG la ACTION che apre la finestra di VDJ (non personlizzabile) è “settings”. Funziona come gli altri tre l' unica cosa che cambia oltre alla funzione sono le dimensioni dell oggetto che misura una larghezza di 73px per un altezza di 19px

Quote :
<button action="settings">
<size width="93" height="19"/>
<pos x="140" y="3"/>
<selected x="+0" y="770" />
<over x="+0" y="1441" />
<down x="+0" y="2211" />
</button>


Riasummendo il nostro codice fino ad ora prodotto otteniamo questo :

Quote :
<Skin name="didattica" version="510" width="1024" height="768">
<copyright>- (c)2008 - Atomix Productions -</copyright>

***************************
** TOP BAR
***************************

<grabzone>
<size width="1024" height="24"/>
<pos x="0" y="0"/>
</grabzone>

<logo>
<size width="0" height="19"/>
<pos x="3" y="3"/>
</logo>

<button action="close">
<size width="19" height="19"/>
<pos x="77" y="3"/>
<selected x="+0" y="770" />
<over x="+0" y="1441" />
<down x="+0" y="2211" />
</button>
<button action="maximize">
<size width="19" height="19"/>
<pos x="98" y="3"/>
<selected x="+0" y="770" />
<over x="+0" y="1441" />
<down x="+0" y="2211" />
</button>
<button action="minimize">
<size width="19" height="19"/>
<pos x="119" y="3"/>
<selected x="+0" y="770" />
<over x="+0" y="1441" />
<down x="+0" y="2211" />
</button>
<button action="settings">
<size width="93" height="19"/>
<pos x="140" y="3"/>
<selected x="+0" y="770" />
<over x="+0" y="1441" />
<down x="+0" y="2211" />
</button>

</skin>


Ora possiamo finalmente salvare sia il codice che l' immagine per posizionarli in modo tale che VDJ li possa leggere e caricare.
Anche qui abbiamo due opzioni in fase di programmazione di una skin consiglio la seconda.
La prima e quella di comprimere in un file .zip il file XML e il file BMP. Il risultato compresso lo andremo a copiare nella cartella ..documenti/virtualdj/skin. Vi ricordo che il file xml il bmp e il nome della skin dichiarati del primo tag devono essere identici.

La seconda opzione che per noi è quella piu pratica e di copiare direttamente i nostri due file all interno della cartella ..documenti/virtualdj/skin. Otterremo lo stesso risultato.

Ora non ci resta che aprire VDJ, andare nel pannello config, e selezionare al vostra skin.

Per questa prima volta metto a disposizione per il download un file zip con l'XML e il BMP. In modo da consentirvi la verifica di quanto fatto fino ad ora. Non sarà un abitudine anche per le prossime lesson in quanto come avrete capito, e come vi avevo preannunciato fare una skin richiede molti calcoli, e quindi è meglio che iniziate a farli da soli per vedere se avete capito bene come si fa e per prendere la divuta pratica prima di realizzare skin più particolareggiate.

SCARICA ESEMPIO QUI <<<<DOWNLOAD>>>>

::: LESSON1 :::
::: LESSON2 :::
::: LESSON3 :::
::: LESSON4 ::: Under contruction



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



Wed 24 Sep 08 @ 2:49 pm


Ru.Di.J Techno Chart from DigitalJockey.it

ARTIST - TRACK (Version) - LABEL

1) Roberto Chiriqui - My Own Way (Original Mix) - Reix Recors

2) Autistic - Pusher EP (All Track) - Les Gold Series

3) Microdinamic/ Maxim Dangles - Alkaline - Polar Noise

4) Elia - Mexico (Original Mix) - Franz Franz

5) Dj Timeline / Ragdoll - Soundwave - Blue Fin

6) Aziz - Triple Distort (Original Mix) - Mosquito records

7) The Pitchers - Bo Bo (Original Mix) - Gepo

8) Spartaque - Maska (original Mix) - Perfect Groove Foundation

9) Jairo Lenis - Apocalipsis (Origina Mix) - DFBH Records

10) Plastic Sound - I'm Calling (fader Mix) - J-D Records

11) Fonz prod - Cockt (original Mix) - solid:Work

12) Mafia Mike/Marcello Marchitto/David Clain - Butterfly (Lowgrade Acid Mix/Side B remix) - Einweg Records

13) Elektroheads - Put on shades on (original Mix) - Beat therapy Records

14) Kanio / Difi - 24 Bit Bleep (Kanio RMX) - U.F.O

15) Pig & Dan - Hope (original Mix) - Cocoon Records



TOP TRACK of the Month : Rolldabeez - Ta Lai (Original Mix) - Presslab Records

FOCUS ON : Marc Houle - Meatier Shower (original Mix) - Minus



Tue 16 Sep 08 @ 4:25 pm


PREMESSA
Quanto segue è un piccolo corso sul come crearsi una propria skin... non ha la pretesa di essere un manuale, ma nei vari capitoli che verranno compilati ci sarà l'indicazione di come sia meglio procedere per realizzarsi la propria skin o una pubblicabile.

Questo blog verrà scritto in più steps , a seconda delle disponibilità di tempo che avrò da dedicargli.
Premetto fin da ora che, alcune mie scelte sono personali e quindi potrebbero esserci altre soluzioni per fare le stesse cose in modalità diverse.
Premetto in oltre che mi occuperò di Skin riguardanti esclusivamente la parte Audio... il video lo lascio ad altri. Che se vorranno contribuire con un loro tutor per larealizzazione della parte video potranno farlo.
Leggere la parte introduttiva e non solo le immagini della lesson è consigliabile per evitare di ripetere il lavoro rendendolo noioso.
Scrivendolo di notte qualche errore potrebbe esserci quindi pazientate e segnaltemelo via PM

L'obiettivo finale è quello di crearsi una skin basic.... ogni alterazione e miglioria grafica sarà la fantasia vostra, unita all'impiego dei software di vostro piacimento che farà la differenza.

Le prime LESSON saranno pubbliche, le fasi intermedie richideranno una Licenza Limited o Home per essere visibili, mentre le fasi avanzate saranno visibili solo ai Pro User. No licenza... No Skin Party !!!!!!

INDICE

PRIMA SEZIONE
- I SOFTWARE
- I MATERIALI NECESSARI
- ALTRO

SECONDA SEZIONE
- LA PROGETTAZIONE
- I VINCOLI
- LE VARIABILI IRRINUNCIALBILI

::::::::: LESSON 1° :::::::::::

PRIMA SEZIONE

I SOFTWARE
Per conoscenza, io uso Fireworks CS3 per la grafica .... ma va bene anche il paint di windows, o corel o photo shop. E come editor per l'XML uso Dreamweaver CS3 ma va bene una qualsiasi editor compreso wordpad o il blocco notes.

I MATERIALI NECESSARI
Procuratevi un blocco di fogli di carta, meglio se quadrettati, una penna e una matita con la sua gomma, un righello, e una calcolatrice, possibilmente con cifre e tasti grandi perché i calcoli da fare sono un bel po.

ALTRO
Per esperienza se avete appuntamenti o cose da fare procuratevi anche una bella sveglia o tenete sott'occhio l'ora, spesso quando si creano skin si perde la cognizione del tempo e fare notti bianche o non accorgersi del tempo che passa sono una cosa piuttosto normale.
Lo scrivo e poi vi accorgerete che le cose stanno cosi.

SECONDA SEZIONE

LA PROGETTAZIONE
Il crearsi una skin generalmente nasce dall esigenza di creare un interfaccia che racchiuda o che consenta al nostro metodo di mixing di avere tutto a portata di mano e di occhio. Quindi è necessario avere bene in chiaro cosa vogliamo mettere nella skin, quali controlli quale tipo di visualizzazione sia della wave form che dei vari elementi di cui necessitiamo.
ATTENZIONE :
Aggiungere o togliere elementi al lavoro iniziato può comportare un lavoro immane, per cui il consiglio e quello di lavorare bene in questa sezione perché è un po come mettere delle fondamenta ad una casa... se sono fatte bene, la casa va su bene altrimenti si rischia il crollo.
Scelti gli elementi li si deve disporre nel modo più consono, tenendo conto di alcuni particolari che ora affronteremo.

I VINCOLI
Nel progetto grafico va tenuto conto che alcuni elementi hanno forme specifiche e che non possono essere omessi dalla skin.
Il browser per esempio è diper se un elemento grafico a se stante. La PLAY LIST, LA SIDE LIST, LA FUNZIONE CERCA E LA FINESTRA PRINCIPALE con quella di NAVIGAZIONE sono elementi definiti e non personalizzabili.
L'altro elemento è il logo VIRTUALDJ che no può mancare e deve avere delle dimensioni leggibili, altrimenti la skin non funziona e non viene compilata da VDJ.
P.S. Qualcuno gli mette una maschera sopra, in seguito vedremo come si fanno le maschere. E una cosa che si può fare, ma credo e sono convinto che le opportunità che da questo software in campo di personalizzazione vadano quantomeno premiate mantenendo il logo di virtualdj a vista anche se la skin è nostra... ricordiamoci che è uno dei pochi anzi forse l'unico software che consente ai propri utenti di fare questa operazione.

LE VARIABILI IRRINUNCIABILI
Come in molti linguaggi di programmazione, all inizio del programma alcune variabili vanno settate, ci sono alcuni parametri di Virtual dj che vanno settati nelle prime righe dell XML. SI tratta di poche ma importanti variabili, senza le quali è impossibile procedere.
La prima è la dimensione in pixel della skin che stiamo realizzando. Senza questo il software non avrebbe l'idea dell area in cui muoviamo il cursore. Una Seconda è riferita all'area di trasporto della finestra. Come tutte le finestre di windows anche la skin è trasportabile da un punto ad un altro del monitor. se non definiamo quest'area, generalmente posizionata nella parte superiore rischiamo che la skin si sposti anche cliccando un tasto. Per questa ragione è obbligatoria. Ci sono altre due variabili da settare e che riguardano l'area occupata da i due singoli deck, ma l'affronteremo e la dichiareremo in secondo momento. Esistono poi alcune variabili che non sono obbligatorie ma se non le mettiamo ci troveremo in seri pasticci. Tra le più importanti ci sono le classiche tre caselle presenti in quasi tutte le finestre di windows, per la chiusura, il ridimensionamento e il nascondi, vanno messe altrimenti per chiudere come facciamo ? L'altra è il tasto CONFIG senza il quale non potremmo accedere al menu delle skin e quindi una volta selezionata la nostra skin se non abbiamo questo tasto non potremmo più selezionarne un altra.
Va da se che convenga pensare anche ai tasti BROWSER - EFFECT - RECORD - SAMPLES. (Questi ultimi aprono funzioni all interno del browser e vedremo poi che solo alcuni possono essere modificati, ma generalmente non conviene farlo! )

:::::::::: LESSON 1° ::::::::::

Siamo arrivati alla prima lezione pratica sul come fare una skin....
... avete tutto il materiale che vi serve ? ... partiamo allora!
La prima cosa che dobbiamo fare e scegliere le funzioni di cui abbiamo bisogno. Quella che realizzeremo sarà una skin basica, con solo le funzioni principali, poi le aggiunte o le migliorie le elencheremo a fine sezione con descrizioni dettagliate delle singole funzioni applicabili.
La scelta nella nostra skin avrà come funzioni per il singolo deck :
PLAY - PAUSE/STOP - CUE - JOG -IL PITCH - EFFECT - SAMPLE - e mettiamoci pure il SINQ
Nel mixer metteremo : CROSS FADER - VOLUME CANALE - TAGLI DI FREQUENZA - KILL - VUMETER

Supponiamo di voler creare una skin con risoluzione 1024 x 768. prendiamo quindi il nostro blocco notes e vediamo come disporre i nostri tasti e le nostre funzioni. Per prima cosa disegnamoci un deck e il mixer.



Una volta presa la decisione possiamo iniziare a disporre la nostra skin completa. Cosa manca ?
La waveform, Il nome del barano e le informazioni relative al brano caricato, un particolare utile e che è meglio non tralasciare e quello di un indicatore che ci dica qual'è il deck attivo.
Come sempre dobbiamo decidere prima quali informazioni inserire. Per il nostro esempio ho deciso di inserire :
NOME TRACCIA - ARTISTA - DURATA - BPM - WAVE FORM intera del brano.
prendiamo di nuovo il nostro foglio bianco e vediamo di ridisegnare il prospetto generale.
NOTA : Teniamo sempre conto che la nostra skin verrà suddivisa in aree non sovrapponibili (eccezioni a parte )



Ora posizioniamo gli elementi di cui abbiamo parlato.



Adesso siamo pronti per convertire il nostro progetto disegnato su un foglio (nella realtà) in un file grafico.
Il primo deck che sara simile al secondo apparte certe correzioni per la specularità di acuni controlli lo trasformiamo cosi.



Lo schema generale diventerà questo



Mentre la base di lavoro della nostra skin che poi utilizzeremo come base per tutto il tutorial è questa :



Non prendete paura!!!... so che sarebbe orribile una skin cosi!!!

Ma per capire va bene...
Per rendere l'idea di come potrebbe diventare la skin di sopra, che d'ora in poi chiameremo"DIDATTICA"
ho relizzato un piccolo e sommario bozzetto grafico di una skin che si adatta perfettamente a quella
che ci stiamo creando. Cambia lo stile grafico ma l'essenza è la stessa!
Non ci sono voluti più di 20 minuti per disegnarla cosi... magari una mano meno esperta potrebbe impiegare più tempo.
Ma il concetto è lo stesso.



============================

::: LESSON1 :::
::: LESSON2 :::
::: LESSON3 :::
::: LESSON4 ::: Under contruction



Mon 07 Aug 06 @ 7:31 pm


CONTACT INFO ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::....

PRIMARY WEB SITE : http://www.rudy.dj
SUPPORT WEB SITE : http://www.rudydj.com
MSN : rudy.dj@hotmail.it
My SPACE : http://www.myspace.com/rudydij
My SPACE MUSIC : http://www.myspace.com/rudydigital

HARDWARE SETUP ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::....




LE MIE CONSOLE DIGITALI ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::....



SKIN PERSONALI REALIZZATE :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::....





Mon 07 Aug 06 @ 7:27 pm




My Litle HOME STUDIO



Site map
(C)opyright Atomix Productions 2009

Software
Hardware
VirtualDJ Pro
VirtualVinyl
Numark CUE
AtomixMP3
VDJ HomeEdition
DJC Edition
eJay DJMixStation
DJ-Box
Features
Screenshots
Trial Version
Plugins
Software Updates
Press Material
Developer SDK
Timecode CD
Skins
Sound Effects
Video Effects
Samples
Languages
Grafx
Tools & Drivers
Forums
Users Network
Wiki
Radio
Atomix Productions
VIP DJs
Disclaimer
Ask a question
View your tickets
Wiki