Cosa sono gli shape hints?

Utente HTML.it
chiede

Cosa sono gli shape hints?

Redazione HTML.it
risponde

Gli shape hints (suggerimenti forma), sono uno strumento che serve a pilotare, almeno in parte, uno shape tween (interpolazione di forma). In pratica, si settano alcuni punti, nella figura iniziale, per poi settare i corrispondenti nella figura finale. Quello che il lettore cercherà di fare, è di far finire il punto iniziale laddove è il corrispondente nell’ultimo frame dell’animazione.

Questo sistema non ha assolutamente niente di scientifico, anzi, spesso il risultato non ha nulla a che vedere con quello che ci si era prefissato.

Disegniamo una figura libera nel primo frame della timeline. Andiamo al frame 20, ad esempio, e premiamo F6. Nel frame 20, modifichiamo la figura finale, torniamo al frame uno, e creiamo l’interpolazione di forma. Ora, andiamo al menu Modify/Transform/Add Shape Hint (Ctrl+Shift+H): sullo stage, verrà aggiunto un cerchietto rosso con la lettera “a”.

Primo frame, hint non posizionato

Primo frame, hint non posizionato

Posizioniamo il cerchietto nel punto iniziale, e andiamo all’ultimo frame dell’animazione. Avremo ancora lo stesso cerchietto, sempre rosso, che dovremo posizionare nel punto finale. Una volta agganciato al punto, il cerchietto diventerà verde, mentre quello nel primo frame giallo, per dirci che l’impostazione è completa. Ora possiamo aggiungere ulteriori punti, e i cerchietti avranno nuove lettere in ordine alfabetico.

Ultimo frame, hint posizionato

Ultimo frame, hint posizionato

Quello che otterremo alla fine, sarà il primo frame come la figura a sinistra, e l’ultimo frame come la figura a destra.

Primo frame

Primo frame

Come sarebbe logico supporre guardando la figura, lo shape tween, senza hints, dovrebbe essere il seguente:

Invece, guardando gli shape hints, vedremo che la lettera “a” attraversa la linea che congiunge “b” e “c”. E allora otterremo: