Ok, abbiamo visto, diciamo come prototipale a livello avanzato.

Possiamo spingerci ancora un po' oltre vediamo l'ultimo elemento che non abbiamo visto della prototipazione sui feed, ma che è quello appunto dello smart anime.

Vale a dire che partendo da una pagina con un certo oggetto possiamo arrivare a una pagina b con questo oggetto che viene trasformato in maniera automatica.

Utilizzando questo trick potremmo quasi simulare quello che appunto il racconto allo scrolling all'interno di una pagina web.

Dico simulare perché purtroppo su fig, ma non esiste un trigger che scatena lo scroll, ma potremmo comunque simulare lo al click per far vedere poi in fase di sviluppo.

Insomma, chi dovrà realizzare il prodotto finale? Come dovrebbe venire allo scroll? Ma approfondiamo intanto il concetto di smart anime come lo come lo approfondiamo? Andiamo a vedere adesso come potrebbe, diciamo trasformarsi un oggetto in prototipazione.

Grazie a questa funzione supponiamo che noi abbiamo un rettangolo adesso, ovviamente in maniera molto generica all'interno di una determinata pagina e vogliamo che si trasformi in automatico a passando in una seconda pagina.

Quindi come se facessimo una sorta di storyboard di narrazione.

Io vado a duplicare questa pagina semplicemente facendo alte shift ok e vado a prendere questo oggetto che si trovava su questa pagina e lo vado a trasformare.

Mettiamolo per esempio in questo modo, in modo che la l'animazione sia è lampante, come vedete ed è un dettaglio non da poco sia nella pagina dex uno che nella pagina extra due.

Questo stesso elemento si chiama sempre forma.

Ovviamente in questo caso, avendo copiato le due tavole, ha portato si sono mutuati dietro i nomi degli oggetti.

In alcuni casi può succedere che non facciamo questo procedimento, ma semplicemente abbiamo un'altra tavola da collegare e gli oggetti non ce lo siamo portati dietro dalla precedente.

Quello che vi consiglio di fare, di comunque prendere gli oggetti che sono simili e che volete che interagiscano tra di loro nella manipolazione e dargli lo stesso identico nome perché vedrete che i naming, la nemica convention di questi livelli fa la differenza.

Quando vogliamo creare questo tipo di animazione, come facciamo per creare questo appunto smart? Noi prendiamo la tavola numero uno.

Potremmo anche prendere ovviamente un altro tipo di elemento che da rendere cliccabile.

In questo caso facciamo l'intera tavola, la prendiamo e la colleghiamo, ma la tavola numero due l' attenzione qui rispetto agli altri prototipi che abbiamo fatto e che invece di dirgli dissolvi o istant, andiamo su smartphone email.

Che cosa vuol dire appunto, che ci sarà questa manipolazione automatica tra gli oggetti che hanno lo stesso nome.

Andiamo a dare ovviamente una solita curva di easing che andiamo a dare un certo tipo di tempistica.

Andiamo a testare il nostro prototipo facendo play qui.

Guardate che succede, Tak.

Quello che succede è che il soggetto si trasforma magicamente dalla pagina alla pagina B.

Questo può essere molto utile.

Appunto quando dovete simulare, per esempio delle cose più complesse.

Vi faccio vedere, per esempio, che tipo di prototipo potete realizzare in questo modo ve lo faccio vedere già espanso.

Come vedete, quello che sto costruendo qui é una sorta di narrazione fatta di uno storyboard, quindi come se fosse un film.

E ogni tavola ha un pezzo della narrazione che andrà a formarsi.

Se andiamo a vedere questo prototipo qui guardate tutto fatto con smart.

Quindi nello stato a oggetto era in un modo nello stato bello.

Gettano in un altro e simulando come se fossero degli Skrull mal click o degli elementi che entrano in pagina e fanno delle animazioni.

Ecco qua.

Come se se si scrollando.

Ovviamente ci sono anche gli Interactive Components all'interno.

Sto creando questa sequenza di animazioni come sono state create.

Ovviamente prima ha fatto vedere il caso più semplice è un rettangolo stretto e alto ad uno stretto e posizionato a destra.

Ma per creare questo genere di animazione è veramente molto semplice.

Cioè, quello che bisogna fare è semplicemente cambiare la natura dell'oggetto precedente.

Se, per esempio questo oggetto qui che vedete il che stadi che poi verrà riproposto qui, io lo faccio partire con una maschera da sinistra verso destra.

Questo oggetto l'ho semplicemente reso più più piccolo, mettendolo al limite della sua visualizzazione quasi un pixel.

E questa cosa fa? Sì che quando poi lo vado a vedere nella schermata successiva, farà questa sorta di apertura del mio rettangolo.

Ok, questa cosa qui è fatta dal fatto che nella schermata precedente questo oggetto era molto più piccolo e compresso in quella successiva si trova espanso e a visualizzazione al cento per cento.

Proviamo a farlo rapidamente se volessi fare una sorta di simulazione di come questa pagina scrolla Io prendo parto da questa pagina che a tutti gli oggetti vado e questa seconda pagina per esempio vado a spostare la posizione di questo e magari gli dico anche che con opacità zero in questo modo non la vedo più che questi oggetti si vengono a spostare e a mettere più in alto.

Ok? E anche questo oggetto sotto ora chiaramente, come vedete da qui a qui quello che sta succedendo è che sta semplicemente salendo oggetto, ma non c' è nessuna trasformazione per fare in modo che questa trasformazione sia ancora più evidente.

Quello che mi conviene fare è che nella pagina precedente questi oggetti magari siano a trasparenza zero in questo modo andiamo a vedere quando vado a collegare le pagine.

Adesso la collego sempre con lo stesso in south poi vediamo sempre al click guardate, clicco e vedo questa transizione qui perché gli oggetti all'inizio erano trasparenti e poi pian piano che stanno avanzando all'interno della pagina si stanno trasformando.

Avrei potuto lavorare anche su un'altra tipologia di cambiamento.

Adesso invece che fare solo che questo oggetto va in trasparenza potrei prendendo lo strumento scale scalarlo.

Ok, lo faccio molto, molto grande e gli dico sempre opacità zero Guardate che succede se adesso rivedo il prototipo.

Ok, sto che simulando quasi uno zoom out to minh all'interno della pagina.

Il segreto è tutto fare in modo che gli oggetti dalla pagina precedente subiscano una variazione alla pagina successiva.

In questo o in questo caso, la narrazione diventa più evidente.

La stessa cosa potrei fare in una terza pagina quando vado a prendere questo questi altri oggetti li faccio spostare più in basso, più in alto.

Anche qui potrei lavorare con la scala, farli piu' piccoli li facciamo anche trasparenti e questo oggetto verde potremmo fare che fa in questo modo, per esempio, e nella pagina precedente possiamo fare ad esempio che è trasparente ancora così ho la variazione dalla pagina con i gay stadi a questa pagina successiva.

Come faccio anche qui.

Basta prendere la pagina come un prototipi due andare nella sezione prototipi e collegarla con un clic sempre con smartphone i might Lui farà questa manipolazione automatica.

Proviamo tutto quanto faccio un click, ne faccio un altro, ok, così sto creando una simil narrazione di scrolli telling Mi raccomando, attenzione alla variazione dei nomi, perché supponiamo che questo che questo complesso qui adesso io non lo chiamo più che stadi come nella pagina precedente, ma lo chiamo è Pippo.

Guardate cosa succede al mio prototipo.

Come vedete, in questo caso gli oggetti si sono palesati, ma non si sono manipolati partendo da una posizione da una grandezza X è una grandezza Y.

Questo perché semplicemente Fig.

Ma non ha riconosciuto una connessione tra di loro in quanto non hanno piu' lo stesso nome.

Basterà mettergli lo stesso nome che gli stadi.

E vedete che una volta che vado a riprovare il mio prototipo, tutto riferirà in maniera naturale.

Quindi, mi raccomando, utilizzate anche lo smartphone email, perché può essere molto utile per costruire una narrazione non solo in caso di sito, ma potreste utilizzare la stessa identica modalità per fare una presentazione, diciamo avanzata all'interno del vostro file.