Come creare e pubblicare documenti in HTML5 Canvas – Facile e pratico
Ci sono molti programmi famosi in tutto il mondo che fanno parte di Adobe Inc. Questa volta imparerai qualcosa in più su cos’è Adobe Animate CC.
Che cos’è Adobe Animate CC?
È uno dei più famosi dell’azienda. Questo strumento consente di creare e manipolare grafica vettoriale come Corel Photo Paint. Questo programma è uno studio di animazione ideale per la distribuzione di contenuti digitali interattivi.
Strumenti di progettazione
Ha un variegato arsenale di strumenti che ti permette di andare un po’ oltre nelle tue creazioni. Alcune delle funzionalità che puoi ottenere nella sua interfaccia sono:
- Grafica vettoriale e raster.
- Suono.
- Codice Panorama.
- Flusso video.
- Audio bidirezionale (solo se utilizzato insieme a Macromedia Flash Communication Server).
Il suo utilizzo nelle grandi aziende
I nomi dei principali canali televisivi hanno utilizzato questo programma per la creazione e la progettazione di film e serie. Alcuni dei più noti sono:
- Cartoon Network: Lo straordinario mondo di Gumball, Adventure Time, Foster’s Mansion per amici immaginari.
- Disney: Kick Buttowski, Gravity Falls, Ralph Spaccatutto.
- Nickelodeon: Danny Phantom, The Loud House, The Fairly Odd Parents.
- Pixar: Animazione dei titoli di coda di film come Wall-E, Gli Incredibili e Ratatouille.
Applicazione HTML5
Questo programma era precedentemente noto come Adobe Flash Professional, Macromedia Flash e FutureSplash Animator. Non è stato fino a dicembre 2015 che la società ha annunciato che sarebbe stata rinominata come Adobe Animate, come un modo per scollegare i programmi precedenti con Adoble Flash Player e la creazione di HTML5.
Attraverso Canvas è stata consentita la generazione di grafici o render dinamici sia per la grafica 2D che bitmap.
Crea e pubblica documenti in HTML5 Canvas
Se stai cominciando ad interessarti a questo mondo di creazione e design, questa volta potrai conoscere i primi passi che devi compiere per progettare un documento e pubblicarlo in HTML5 Canvas.
Processo di creazione
Per creare un documento HTML5 Canvas, puoi, dalla home page di Adobe Animate, fare clic sull’opzione HTML Canvas nella sezione Crea nuovo.
Se per qualche motivo non riesci a vedere questa casella, puoi eseguire il processo di creazione come segue:
- Vai alla scheda File.
- Nuovo.
- Seleziona il tipo di tela HTML5.
- Fare clic su accetta.
Processo di progettazione
Una volta che hai la scena su cui puoi progettare, è il momento di utilizzare i diversi strumenti che Adobe Animate ti offre. Se stai appena iniziando a utilizzare questo programma, dovresti essere paziente quando esplori le opzioni.
Iniziare a progettare
Idealmente, per iniziare a imparare a utilizzare Adobe Animate, dovresti iniziare a utilizzare gli strumenti matita, poiché sono i più facili da manipolare.
Da questa funzione, puoi iniziare a disegnare e animare. Per aggiungere fotogrammi vuoti, premi F7 e continua a disegnare finché non completi l’animazione che desideri rendere.
Salva il tuo design
Una volta completato il processo di creazione e progettazione, procedi al salvataggio. Per poi pubblicarlo. In questo senso, devi cliccare su:
- Scheda File.
- Mantenere.
- Crea una nuova cartella per il tuo disegno.
- Premi Ctrl + Invio per mostrarti l’animazione nel tuo browser.
Processo di pubblicazione
Torna ad Adobe Animate per visualizzare le opzioni di configurazione per pubblicare il design che hai creato. Per questo:
- Fare clic su file.
- Impostazioni di pubblicazione.
- Apparirà una finestra di dialogo, in cui assegnerai un nuovo nome al tuo disegno (se hai chiamato il tuo disegno, per esempio, animazione, impostalo su animazione2).
- Assicurati che tutte le caselle nella sezione File di output siano selezionate.
- Fare clic su accetta.
- Torna alla scheda File e seleziona l’opzione Pubblica.
In questo modo, quando torni nella cartella che avevi creato per il tuo disegno, troverai 2 nuovi file: HTML e JavaScript con il nuovo nome che hai assegnato alla tua animazione.
