In un articolo precedente abbiamo rapidamente esaminato installazione e interfaccia di Adobe Edge, ripromettendoci di creare una applicazione vera e propria, cosa che stiamo per fare in questo articolo.
Iniziamo subito aprendo Adobe Edge e creando un nuovo progetto per la nostra animazione: una palla che rimbalza su un campo da calcio, come si vede in questo esempio.
Lo stage
Adobe Edge fornisce in output una struttura HTML5/CSS/Javascript e il contenitore principale della nostra animazione è rappresentato proprio da un <div>.
Possiamo scegliere le dimensioni da applicare al layer principale agendo sulle sue proprietà: ad esempio possiamo deciderne le dimensioni.
Inoltre possiamo decidere se e come visualizzare gli elementi che valicano le dimensioni dello stage.
Caricare le immagini in Adobe Eg
In allegato all'articolo troviamo le immagini che ci servono, un campo da calcio e una palla, possiamo caricarle nel nostro progetto cliccando sul menu File > Import.
Una volta caricate le immagini le ritroviamo nel pannello Elements, annidate sotto lo stage come ulteriori <div>. Non ci resta che cominciare ad utilizzarle: il campo di calcio lo utilizzeremo come sfondo, quindi conviene bloccarlo con un lucchetto, mentre ci concentriamo sull'animazione della palla.
Figura 3. Le proprietà degli oggetti
(clic per ingrandire)
Come mostra la figura, possiamo agire sugli oggetti grazie ad una serie di parametri: posizione, angolo di rotazione, dimensioni, deformazioni, fattori di scala. Ciascuno di questi parametri può essere coinvolto in nelle animazioni, quindi possiamo ingrandire un oggetto e allo stesso tempo ruotarlo e spostarlo.
Nel nostro esempio ci siamo limitati a modificare il fattore di scala della palla, dapprima piccola, poi portata a dimensioni naturali e di nuovo rimpicciolita, con un effetto rimbalzo.
