Realizzare un'interfaccia grafica con Klynt e Photoshop
In questo esercizio abbiamo realizzato due tipi di menù. Il primo menù è stato realizzato importando un file preparato in Photoshop e aggiungendo poi l'interattività con Klint, il secondo è stato realizzato utilizzando solo le funzionalità offerte da Klynt.
NB: Nel demo il secondo menù è collegato alla bottone "Cinema".
Import da Photoshop
I passi base per creare un'interfaccia in Klynt utilizzando Photoshop:
- Realizzare l'interfaccia in Photoshop articolandola in livelli a secondo delle proprie esigenze: prevedere un livello per ogni elemento interattivo ed eventualmente un livello per ogni stato di quell'elemento (ad esempio stato normale e stato hover).
- Quando l'interfaccia è completa creare una copia del file e preparala per Klynt:
- L'immagine Photoshop deve avere le stesse dimensioni dal progetto in cui va importata
- Bisogna
unire tutti i gruppi e i livelli composti da più elementi
- Bisogna
rasterizzare tutti i livelli
- In Klynt scegliere nel menù View-> Storyboard e quindi File-> Import Photoshop File.
Il risultato sarà una nuova sequenza in cui ad ogni livello del file Photoshop importato corrisponderà un layer nella timeline di Klynt con l'immagine collocata nella stessa posizione in cui è stata salvata.Tutte le immagine saranno impostate con dimensionamento Proportional size e la loro posizione sarà relativa al centro della sequenza. In questa maniera tutti gli elementi della sequenza si adatteranno alle dimensioni dello schermo mantenendo le stesse proporzioni e la stessa distanza relativa fra di loro.
Realizzazione del Menu Dracula
Progetto
- File importato
- Ognuno dei personaggi è un link ad una sezione del progetto
- Voglio creare un effetto di fumo davanti al menu
- Quando passo col mouse sulle aree sensibili la scritta rossa (che in stato normale non si vede) appare, le figure escono dal fumo e si sente un effetto sonoro.
Realizzazione
- Rendo le scritte trasparenti impostandone la opacità a 0.
- Importo il video
Risorse/menu-dracula/Fumo.mp4
- Colloco il video nella timeline sul un layer immediatamente davanti alle figure. Perché l'effetto funzioni devo trovare il giusto grado di opacità del video. Io ho scelto 30%.
- Creo un layer vuoto subito sopra al video Fumo
- Importo il file audio
Risorse/menu-dracula/Fumo.mp4 e lo colloca su un layer qualsiasi avendo cura che nelle proprietà sia selezionato solo Loop.
- Ora per rendere interattivo il tutto deve mettere degli oggetti sensibili trasparenti davanti al video Fumo che, occupando tutto lo schermo, cattura tutti gli eventi del mouse (o del tocco). Per fare questo uso gli elementi
Hotspot che trovo tra i bottoni e li posiziono sopra al video in corrispondenza dei personaggi. Perché la posizione relativa degli hospot non cambi imposto per tuti gli hotspot come Proportional size e con posizione relativa rispetto al centro della sequenza impostando ad auto Top, Left, Bottom e Right.
- Interazioni da impostare per gli hotspot per l'evento hover (il puntatore del mouse passa sopra l'oggetto):
- Visualizzazione della scritta rossa modificando la proprietà Opacity dell'immagine
- Per estrarre i personaggi dal fumo ne cambio temporaneamente il layer spostandoli sul layer vuoto inserito al punto 4.
- Infine devo far partire l'effetto sonoro.
Risultato:
- Per collegare gli hotspot a sequenze da caricare sul layer principale o sul layer overlay posso usare la proprietà Link impostabile nel pannello delle proprietà dell'oggetto. Il bottone Cinema è collegato al secondo menu.
Menu cinema
Per realizzare il menu cinema abbiamo utilizzato solo le funzionalità proprie di Klynt. Quando il puntatore del mouse passa su una voce del menù cambiano l'immagine di fondo e il colore della scritta.
Importazione risorse
- Abbiamo importato il font Creepster trascinando i file
Risorse/menu-dracula/creepster-v6-latin-regular.ttf e Risorse/menu-dracula/creepster-v6-latin-regular.ttf nell'area font del pannello Project Preferences del progetto.
- Abbiamo importato le immagini di sfondo:
Bela-Lugosi.jpg, bran-castle-dracula.jpg, cop-Nosferatu-def.jpg, Dracula-Coppola.jpg, nosferatu-herzog.jpg con File -> Import Media Files.
Impostazione sequenza
- Abbiamo collocato l'immagine bran-castle-dracula nel primo layer e tutte le altre nei layer successivi.
- Abbiamo personalizzato lo stile Title 1 per utilizzarlo nel menu:
- Il primo layer contiene l'immagine
bran-castle-dracula, i layer immediatamente sopra a questo le altre immagini, e, ancora sopra,i, le voci del menù (testi stile Text 1).
- A ogni testo imposto le interaction in modo che al rollover appaia l'immagine di fondo corrispondente ala voce di menu
- Per il cambio di colore abbiamo creato una classe di stile utilizzabile dentro Klynt aggiungendo delle istruzioni al file
player.css che sta nella cartella Resources/css/ del progetto :
/* This CSS file is CUSTOMIZABLE */
/* Copy-paste and modify the classes you need to modify (files from Player/css/player), this will overwrite the default values */
/* For more informations, you can check our GITHUB @ https://github.com/Klynt/Klynt-Player/wiki/CSSArchitecture */
.bottone-menu:hover {
color: white;
}
- E abbiamo inserito la il nome della classe nella proprietà Class names delle voci di menu (tab advanced):
Risorse
Qui sotto trovi i link alle cartelle condivise. La cartella "Risorse" contiene i file utilizzati per il progetto e un cartella icone che contiene icone scaricata da Internet ridimensionate a 48x48 e 32x32 pixel. Le icone possono essere usate per sperimentare la modifica dell'aspetto dei bottoni predefiniti di Klynt.
La cartella "MenuPhotoshop" contiene l'intero progetto Klynt. Per utilizzare il progetto:
- Seleziona il link alla cartella MenuPhotoshop che trovi qua sotto e quindi scegli Scarica
- One drive ti farà scaricare un Archivio zip che contiene tutti file del progetto
- Decomprimi l'archivio
- In Klynt scegli Browse per caricare un progetto esistente e apri il file
MenuPhotoshop.klynt