CreateJS: sviluppo web apps, componenti e giochi in HTML <canvas>

Transcript

1 CreateJS: sviluppo web apps, componenti e giochi in HTML <canvas> LIVELLO: PRINCIPIANTE PREREQUESITI: Il partecipante dovrà possedere una certà familiarità con l uso di HTML e 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. DURATA: 8 ore ( 7 ore corso + 1 Q&A ) 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, videogames, 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: 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

2 La suite è supportata ufficialmente da Adobe, Microsoft, Mozilla e AOL, ed è inoltre utilizzata da Adobe Flash CC per gestire il processo di conversione ed esportazione dei file Flash in formato HTML5 OBIETTIVI FORMATIVI: In questo corso il discente apprenderà le nozioni fondamentali per lo sviluppo in HTML5 Canvas utilizzando la suite CreateJS. In particolar modo si acquisiranno le basi per l utilizzo delle librerie EaselJS e TweenJS per la creazione di interfacce grafiche animate e interattive. Gli stessi concetti saranno applicabili in altri contesti, dallo sviluppo di giochi alla creazione di grafici data driven personalizzati. Tutti gli argomenti sono affrontati dal punto di vista teorico e accompagnati da moltissimi esercizi dimostrativi che saranno sviluppati e descritti durante il corso. MATERIALE DIDATTICO Ad ogni partecipante sarà consegnato il codice sorgente di tutti gli esercizi affrontati durante il corso. DAY 1: CreateJS e HTML5 <CANVAS> development Panoramica Strumenti di sviluppo Download Libraries overview Quick start Introduzione ad HTML5 Canvas Progetti HTML5 Canvas in EaselJS

3 EaselJS: strumenti per il disegno Drawing API e sistema di coordinate Chaining Tiny API Shapes Rectangle Complex Rectangle Circle e Ellipse Line Polystar Arc Linee e Bordi lineto, MoveTo stroke styles caps / joints Riempimenti 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 Utilizzare il testo Creare testi dinamici Le proprietà della classe Text Testi multilinea Bitmap Text

4 Gestione immagini Caricamento, visualizzazione e gestione immagini 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 Precaricare gli assets necessari al funzionamento di un app o videogioco Creare un preloader animato TweenJS e animazioni Utilizzo della classe Ticker e refresh del canvas Introduzione a TweenJS Utilizzo delle tween Animare elementi e containers Easing

5 Creare data driven Chart: Creare dinamicamente diagrammi data driven ingrando animazioni e interazioni. Creare applicazioni Cross platform per 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 Sviluppo applicazioni: 360 cross platform: Applicazione responsiva per smartphone, tablet e desktop. Caricamento modelli 3D statici ( sequenze jpeg ) Rotazione modelli 3D con gesture touch e drag n drop Menu selezione colori Informazioni prodotto