Share
Hype 3, di Tumult, è un'applicazione OS X per la creazione di animazioni HTML5. Se hai mai utilizzato gli strumenti iconici della timeline di Flash, l'interfaccia di Hype 3 ti sembrerà molto familiare. In questo tutorial faremo rapidamente conoscenza con l'applicazione, quindi creeremo un'animazione di base per la progettazione dei materiali utilizzando gli strumenti disponibili.
Hype 3, al momento della scrittura, costa $ 49,99 per l'applicazione standard, o, se hai bisogno di funzionalità più avanzate, Hype 3 Professional è disponibile per $ 99,99. È possibile scaricare una versione di prova di 14 giorni per gli scopi di seguito.
E, scusa, questo è solo Mac.
Come utente Mac, sarai perfettamente a tuo agio con il layout dell'app. Usiamo la versione standard di Hype 3 (la versione pro ha un'interfaccia utente più scura e piena), quindi esaminiamo le parti principali:
L'interfaccia di Hype 3Quando apri l'applicazione ti verrà assegnato un documento vuoto per impostazione predefinita. Inizia a capire quanto grande ti piacerebbe la tua tela.
La scheda "Scene"Sotto il Scena scheda vedrai alcune opzioni per impostare la scena corrente. Ho scelto di dare le dimensioni del canvas di 600x400px. Fatto questo, fai clic sul selettore di colori sotto sfondo e cambiala in # 424242.
Nota: lavoreremo solo con una scena e una sequenza temporale in questo tutorial, ma è possibile avere più scene, con numerose linee temporali e passare da una all'altra.
Animeremo uno dei pulsanti di azione mobile di Google Material Design, quindi vai al Elementi icona del menu e selezionare il Ellisse:
Usa il cursore del mouse per disegnare sullo stage cambio vincolerà le proporzioni a un cerchio (proprio come qualsiasi applicazione grafica). In base alle linee guida sulla progettazione dei materiali, il pulsante di azione fluttuante di grandi dimensioni deve essere largo 56 px, con un'icona di 24 pixel. Rendi il tuo proporzionale a questi numeri:
Mancia: vai a Visualizza> Mostra righello per far apparire i governanti accanto al tuo palco. Trascina alcune guide, dai righelli sul palco, per aiutarti a posizionare gli oggetti.
Con l'ellisse selezionata, sotto il Elemento scheda è possibile modificare il colore di sfondo (ho usato # 00E676 dalla tavolozza dei colori di Material Design) e rimuovere il suo bordo.
Anche sotto il Elemento scheda, vedrai che puoi aggiungere un'ombra al cerchio. Ho dato una sfocatura a 5px e spostato di 5px sull'asse Y. Ha un colore di # 2E2E2E, sebbene non sia possibile selezionare alcuna modalità di fusione. Ora sembra molto "Material Design", penso che sarete d'accordo:
Per aggiungere un simbolo "più" al pulsante, ci sono alcune opzioni disponibili. Potremmo usare gli strumenti di disegno per realizzarlo da soli, ma gli strumenti sono limitati (specialmente se sei abituato alla libertà di Adobe Illustrator o Sketch). Invece, andremo a prendere l'icona SVG da Google.
Seleziona l'icona "aggiungi", scegli la variante bianca, quindi scaricala.
Ora puoi trascinare il file SVG direttamente nel tuo documento, a quel punto verrà aggiunto come livello immagine.
Con l'icona SVG selezionata, sotto Metrica scheda, assicurati che sia la dimensione corretta per la tua animazione:
La nostra icona SVG non è stata importata come vettore modificabile. Invece, se guardi il Elementi scheda, vedrai che è una risorsa separata e viene applicata come immagine di sfondo. Questo significa che non possiamo cambiare il suo colore, o qualsiasi altra cosa del genere (vergogna).
Inoltre, questo approccio può causare problemi in alcuni browser, anche se Hype 3 ti avviserà di ciò:
Come con molte applicazioni grafiche, ora puoi selezionare i due livelli che abbiamo aggiunto alla nostra timeline, quindi andare a Disponi> Gruppo organizzarli un po 'meglio Fare doppio clic sul nome del livello di gruppo per rinominarlo:
Hype 3 fornisce un paio di metodi per animare oggetti e le loro proprietà. Inizieremo con il più semplice, quindi andiamo avanti e colpiamo il grande, rosso Disco pulsante:
Ora trascina il indicatore di riproduzione attraverso la timeline, fermandosi al frame 24.
Nota: vedrai i secondi segnati lungo la timeline, ognuno dei quali comprende 30 fotogrammi.
Con l'indicatore di riproduzione ora sul fotogramma 24, seleziona l'icona "aggiungi", vai a Metrica scheda nella barra laterale destra, quindi trovare il Rotazione sezione e modificare il Z valore a 45 °. Questo ruoterà l'icona, in modo che ora assomigli ad una croce (×).
Ora puoi fare clic sul Disco pulsante di nuovo, per terminare il processo.
Hype 3 avrà automaticamente aggiunto un keyframe di proprietà all'inizio della timeline (questo è lo stato iniziale) e uno alla fine dell'animazione (lo stato finale). In questo caso, abbiamo solo modificato il Angolo di rotazione (Z) proprietà, quindi è qui che vengono visualizzati i fotogrammi chiave.
Se premi play o trascini la testina lungo la timeline, vedrai l'icona animare agevolmente tra i due stati di proprietà.
Per semplificare la visualizzazione di ciò che accade sulla timeline, aumentare il valore della scala della timeline utilizzando il cursore in alto a destra:
Con la nostra animazione di proprietà selezionata (fai clic su di essa) possiamo modificare il tipo di andamento utilizzato nell'animazione. Di default sarà facilità in-out, il che significa che l'animazione inizierà lentamente, accelererà, quindi rallenterà nuovamente verso la fine.
Cos'altro dovremmo animare? Facciamo sembrare che il nostro pulsante stia facendo qualcosa: riveleremo una carta quando il pulsante sembra essere stato cliccato.
Utilizzare il Elementi menu per aggiungere a Rettangolo sul palco. Denominare il livello "Carta". Dagli un colore di sfondo (# 757575) e posiziona il livello sotto il gruppo di pulsanti. Posizionalo fuori dal palco, verso il basso, e riduci la sua Opacità a 0 (questa volta animeremo un paio di proprietà).
Ora, invece di colpire Disco, questa volta faremo le cose manualmente. Con l'indicatore di riproduzione all'inizio dell'animazione e il livello scheda selezionato, fare clic su Aggiungi keyframe sul Opacità strato di proprietà. Quindi sposta la testina fino alla fine dell'animazione e aggiungi un altro fotogramma chiave.
Mentre sul fotogramma chiave finale, nel Elemento scheda, dai al rettangolo un'opacità del 100%. Ora avrai un'animazione pulita tra i due stati.
Avendo animato l'opacità del rettangolo, ora animare la sua posizione (vogliamo farlo scorrere verso l'alto). Questo si ottiene con la proprietà Origin (Top), quindi ripeti il processo che abbiamo appena fatto, aggiungendo un fotogramma chiave all'inizio dell'animazione, uno alla fine, quindi modificando la posizione del rettangolo sul fotogramma chiave finale.
Dovresti vedere un tracciato disegnato, che indica il movimento preso dal rettangolo:
Al momento, tutto accade allo stesso tempo, non appena inizia la scena, ma possiamo cambiarlo. Facciamo in modo che ci sia un breve ritardo, quindi l'icona ruota rapidamente, quindi la scheda scorre gradualmente.
Trascina le barre dell'animazione sulla timeline superiore, in modo che possano differire i vari elementi in modo diverso:
Nota: non dimenticare che puoi modificare l'andamento per dare effetti diversi. Dai un'occhiata alle linee guida di Google su Authentic Motion per avere più ispirazione.
Una volta completata l'animazione, vai su File> Esporta come HTML5 o File> Esporta come film. Le opzioni disponibili sono abbastanza auto-esplicative; scegli di generare una directory con HTML insieme alle risorse JavaScript e SVG, GIF animate, MP4 e così via.
Ricorda che quando esporti come film, qualsiasi interazione che hai aggiunto (non abbiamo in questo caso) potrebbe rovinare la sequenza.
Tempo per un incarico! Seguendo questo tutorial sei stato armato con le abilità per portare questa animazione molto più lontano. Scarica la fonte e troverai i file di avvio necessari per portarti a questo punto, quindi:
Le linee temporali sono molto utili per visualizzare l'animazione mentre costruisci. Oltre a ciò che abbiamo fatto qui, Hype 3 consente anche tutti i tipi di interazione, eventi e controllo della timeline (ma è tutto un altro tutorial). Divertiti a giocare con questi strumenti, a costruire e a mostrarci cosa ti viene in mente nei commenti!
Accentsconagua