(Articolo pubblicato originariamente il 21 agosto 2017 – rivisto nel 2025)
Tempo fa mi sono divertito a scrivere una serie di tutorial dedicati alla creazione di pagine web dinamiche in HTML5, realizzate con l’accoppiata Adobe Animate + CreateJS. A essere pignoli, non si tratta di una vera e propria guida organica: manca un indice ragionato, non c’è un filo conduttore didattico preciso. È più un percorso a zig-zag tra i principali strumenti che Animate metteva a disposizione quando si pubblicava in modalità HTML5 Canvas.
Dopo una lunga pausa — dovuta a impegni lavorativi e motivi personali — ho deciso di tornare sul blog e sistemare questi articoli. Niente rivoluzioni: solo un po’ di restyling, qualche nota tecnica e link funzionanti. Perché? Perché anche se queste tecnologie oggi non sono più centrali nel panorama dello sviluppo web, ritengo giusto lasciare una traccia ordinata del lavoro fatto.
Tranne gli ultimi due articoli, gli esempi inclusi in questa guida non sono responsive. All’epoca, lo sviluppo era ancora fortemente orientato alla fruizione su desktop, e confesso che solo dopo diversi test iniziai a considerare seriamente l’ottimizzazione per i dispositivi mobili.
CreateJS non è più mantenuto attivamente dal suo autore, e anche Adobe Animate ha progressivamente spostato l’attenzione su altri flussi di lavoro (WebGL, video, animazioni vector-based, esportazioni Lottie, ecc).
Tuttavia, tutti gli esempi sono ancora funzionanti su browser moderni, e per chi è curioso o nostalgico, possono offrire spunti utili.
Elenco dei tutorial disponibili:
- Introduzione a createJS per Adobe Animate
- Gestire gli eventi in createJS (prima parte)
- Gestire gli eventi in createJS (seconda parte)
- La classe Tween in creetJS
- Uno slideshow in HTML5 con Adobe Animate (prima parte)
- Uno slideshow in HTML5 con Adobe Animate (seconda parte)
- Inserire un’animazione HTML5 in wordpress
- Drag and drop e collisioni con createJS (prima parte)
- Un puzzle in HTML5 e createJS con Adobe Animate
- Drag and drop e collisioni con createJS (seconda parte)
- Pagine HTML5 fullscreen responsive con Adobe Animate
- Ottimizzare un gioco HTML5 per i dispositivi mobili
Tutti gli articoli includono esempi online funzionanti.
Non troverete i file sorgente FLA da scaricare, per motivi tecnici e pratici spiegati altrove nel blog — ma ogni tutorial include listati e spiegazioni per replicare gli esempi da zero.
