sei/2018 - Custom Klynt

Strumenti

Personalizzare gli elementi standard dell'interfaccia di Klynt

La personalizzazione può avvenire aggiungendo regole al file <cartella del progetto>/Resources/css/player.css dove <cartella del progetto> e il nome della directory dove si trova il vostro progetto Klynt.

Qio di seguito gli elementi che possono essere modificati.

Elemento dell'interfaccia Identificato da... Selettore da utilizzare nel foglio di stile
Bottone "Made with Klynt" con link al sito Attributo data-type="klynt" [data-type="klynt]
Logo mostrato durante il caricamento (immagine di background dell'elemento)  Attributo id="logo" #logo 
Splash screen (lo schermo mostrato durante il caricamento) Attributo id="splashscreen" #splashscreen
Animazione mostrata durante il caricamento Attributo id="loader" #loader
Etichetta con percentuale di caricamento  Attributo class che contiene loader-label .loader-label

Eliminare il bottone "Made with Klynt" dal menu

Per eliminare il bottone Made with Klynt dal menù standard di Klynt (l'editor della versione edu non lo consente) basata assegnare none alla proprietà display del selettore corrispondente all'elemento così:.

/* Nasconde il bottone 'Made with Klynt'*/
[data-type="klynt"] {
	display: none;
}

Personalizzare lo splashscreen

Per cambiare il logo è necessario impostare il background dell'elemento logo. Consiglio di copiare il logo desiderato nella cartella Resouces e quindi assegnare all'oggetto logo un nuova immagine di sfondo:

#logo {
    background-image: url("../logo.png");
    background-position: center;
}

Posso poi personalizzare gli altri due elementi che compongono lo splashscreen: l'etichetta di testo che contiene il progresso percentuale del caricamento e l'animazione mostrata. Qui cambio il font e il colore dell'etichetta con lo stato del caricamento, la sposto al centro del logo e nascondo l'animazione.

.loader-label {
	font: 24px 'Overpass Mono', monospaced;
	color: rgba(255, 255, 255, 1);
	opacity: 0.9;
	position: absolute;
 	left: calc(50% - 75px);
	top: calc(50% - 130px);
	width: 150px;
	height: 24px;
	text-align: center; 
}

#loader {
    display: none;
}

Nota bene: Quando il progetto verrà caricato su Internet, durante il caricamento potrebbe apparire per un attimo lo splashscreen di default. Questo è dovuto all'ordine con cui Klynt carica i file. È possibile ovviare a questo problema modificare (con cautela) il player. sostituendo la riga 52 del file <cartella del progetto>/Player/js/klynt.js:

var css = ['Player/css/player/splashscreen.css', 'Player/css/editor/splashscreen.css'];

con

var css = ['Player/css/player/splashscreen.css', 'Resources/css/player.css'];

Utilizzare classi personalizzate

Ad ognuno degli elementi che compongono una sequenza Klynt posso assegnare una o pi classi di stile definite nel file <cartella del progetto>/Resources/css/player.css. 

Basta inserire il nome di una o più classi definite nell'apposito spazio. NB.: lo stile definito dall classe non sarà visibile nell'editor ma solo quando il progetto verrà lanciato.

Esempio: inserire un animazione

Il codice riportato qui definisce una animazione con nome puls-orizz che muove un oggetto verso destra di 50 pixel e. dopo una breve pausa, lo riporta alla posizione iniziale:

/*
    DEFINIZINE DELL'ANIMAZIONE pulse-orizz
    Sposta l'elemento a sinistra do 50 pixel e dopo 
    una breve pausa lo riporta alla posizione iniziale
*/

@-webkit-keyframes pulse-orizz {
    0% {
                -webkit-transform: translateX(0);
                        transform: translateX(0);
    }

    45%, 55% {
                -webkit-transform: translateX(50px);
                        transform: translateX(50px);
    }
    100% {
                -webkit-transform: translateX(0px);
                        transform: translateX(0px);
    }
}

@keyframes pulse-orizz {
    0% {
                -webkit-transform: translateX(0);
                        transform: translateX(0);
    }

    45%, 55% {
                -webkit-transform: translateX(50px);
                        transform: translateX(50px);
    }
    100% {
                -webkit-transform: translateX(0px);
                        transform: translateX(0px);
    }
}

La classe definita da questo codice assegna ad un elemento html l'animazione puls-orizz utilizzando l'algoritmo di animazione ease-in-out e con infinete ripetizioni.

/*
    Gli elementi con classe hpulse vengono animati con
    l'animazione pulse-orizz. L'animazione dura un secondo 
    usa "ease-in-out" ed è ripetuta indefinitivamente
*/
.hpulse {
    -webkit-animation: pulse-orizz 1s ease-in-out infinite;
            animation: pulse-orizz 1s ease-in-out infinite;
}
Nota bene: Le animazioni sono compatibili solo con l'impostazione Fixed Size. Se in un elemento è impostata la proprietà Prorporzional size, l'animazione verrà ignorata.. 

Risorse

  

Torna all'inizio