training-header-createjs

CreateJS: web apps e componenti in HTML < canvas >

LIVELLO:

PRINCIPIANTE

DURATA:

8 ore

PREREQUISITI:

Il partecipante dovrà possedere una certà familiarità nell’utilizzo di Javascript. Le similitudini con il linguaggio Actionscript sono moltissime e di conseguenza anche tutti gli sviluppatori Flash, Flex e AIR si sentiranno subito a loro agio.

OVERVIEW:

CreateJS è una suite Javascript open source che semplifica notevolmente lo sviluppo di applicazioni HTML5 Canvas ed è adatto allo sviluppo di siti e interfacce grafiche creative e originali, infografiche, videogiochi 2D, banner animati, moduli interattivi per la formazione e in tutti gli scenari in cui è necessario svincolarsi dai limiti dell’HTML e del DOM.

CreateJS è composto dalle seguenti librerie Javascript:

  • EaselJS: semplifica lo sviluppo di applicazioni mobile e desktop in HTML5 Canvas.
  • TweenJS: un set di API per creare animazioni in HTML5 e HTML5 canvas
  • SoundJS: gestione audio (effetti sonori e soundtrack) in siti e applicazioni HTML5
  • PreloadJS: coordina tutto il processo di caricamento degli asset di un’applicazione

La suite è supportata ufficialmente da Adobe, Microsoft, Mozilla e AOL, ed è inoltre utilizzata all’interno di diversi software Adobe per gestire il processo di conversione ed esportazione in formato HTML5.

OBIETTIVI FORMATIVI:

Durante il corso si acquisiranno le basi per l’utilizzo delle librerie EaselJS e TweenJS. Si affronterà la creazione di interfacce grafiche, animate e interattive, in HTML5 Canvas. Queste interfacce sono applicabili in moltissimi contesti: siti internet dal look&feel accattivante, chart, infografiche, banner e ogni tipo di elemento 2D animato e interattivo, videogiochi, componenti per dispositivi touch e molto altro.

Tutti gli argomenti sono affrontati dal punto di vista teorico e accompagnati da moltissimi esercizi dimostrativi che saranno sviluppati e descritti durante il corso.

CONOSCENZE IN USCITA:

A seguito della formazione il partecipante sarà in grado di creare elementi grafici statici ed animati utilizzando le tecnologie presentate e le nozioni fondamentali saranno applicabili allo sviluppo di applicazioni e siti web, videogiochi e advertising interattivo in HTML5 Canvas utilizzando le librerie Javascript della suite CreateJS.

MATERIALE DIDATTICO:

Ad ogni partecipante sarà consegnato il codice sorgente di tutti gli esercizi affrontati durante il corso.

IL PROGRAMMA:

INSTALLAZIONE E CONFIGURAZIONE

  • Strumenti di sviluppo
  • Download
  • Libraries overview

INTRODUZIONE A CREATEJS e EASELJS

  • Introduzione ad HTML5 Canvas
  • Progetti HTML5 Canvas in EaselJS

GRAPHIC API

Creare elementi grafici interattivi in Javascript e HTML Canvas:

  • Sistema di coordinate
  • Chaining
  • Tiny API

SHAPES
Disegnare forme geometriche in Javascript:

  • Rectangle
  • Complex Rectangle
  • Circle e Ellipse
  • Line
  • Polystar
  • Arc

LINEE, BORDI E RIEMPIMENTI

  • lineTo, MoveTo
  • stroke styles
  • caps / joints
  • Solid, Linear, Radial e image

DISPLAY LIST

  • Introduzione al concetto di display list
  • Display Objects e relativi metodi (addChild,removeChild,..)
  • Utilizzo dei Container per raggruppare elementi
  • Depth e ordinamento elementi
  • Registration Point

TESTI DINAMICI

  • Creare testi dinamici
  • Le proprietà della classe Text
  • Testi multilinea
  • Bitmap Text

GESTIONE IMMAGINI

  • Caricamento
  • preloaders
  • visualizzazione

MOUSE e TOUCH EVENTS

  • eventi mouse e gestione cursore
  • addEventListener e on()
  • Utilizzo: click, mouseover, mouseout,….
  • Creare pulsanti interattivi con ButtonHelpers
  • Implementare il drag’n’drop

PRELOADJS

  • Caricamento assets e creazione preloaders
  • Precaricare gli assets necessari al funzionamento di una web application
  • Creare un preloader animato

TWEEN JS e LE ANIMAZONI:

  • Utilizzo della classe Ticker e refresh del canvas
  • Introduzione a TweenJS
  • Utilizzo delle tween
  • Animare elementi e containers
  • Easing

DATA-DRIVEN CHARTS:
Creare chart data-driven e ogni sue elemento integrando animazioni e interazioni.

RESPONSIVE APPS: WEB, MOBILE e DESKTOP

  • Nozioni fondamentali HTML per sviluppo su dispositivi mobile
  • Sviluppo responsive fullscreen layouts
  • Gestione eventi di resize con smooth transitions
  • Gestione orientamento dispositivi
  • Creazione di un viewer di modelli 3D per dispositivi mobile e desktop (tramite sequenze di immagini 2D)

TECNOLOGIE e LIBRERIE UTILIZZATE DURANTE IL CORSO:

HTML5 Canvas, Javascript, EaselJS, TweenJS, PreloadJS