Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
gurugugnola

Handoff Animation - Viewer 3d Interattivo

Recommended Posts

Handoff animation – viewer 3D

Le handoff animation sono un metodo di animazione molto avanzato, permette di animare timeline multiple di una proprietà allo stesso tempo; il seguente esempio servirà per capirne meglio l'utilizzo.

Essendo Treddi.com un forum dedicato alla grafica 3D ho scelto di creare una semplice applicazione per visualizzare modelli 3D in maniera interattiva (la proprietà che viene animata è la rotazione), quest'applicazione potrebbe essere comoda per crearsi un reel di modellazione interattivo, o per un sito internet in cui l'azienda ha l'esigenza di mostrare i propri prodotti o altro ;) invece che animare una trasformazione (come nell'esempio), si potrebbe animare il colore di un oggetto o qualsiasi altra proprietà.

La scena che ho creato è molto semplice, ho disegnato una freccia e l'ho copiata (rinominandola). Queste 4 frecce saranno i controlli per le rotazioni del modello 3D.

Ho importato il modello dello Gnack in formato .obj: non ho applicato particolari materiali o texture e non ho nemmeno aggiunto luci in scena; anche se ricordo che blend supporta tutto ciò… niente di complesso, non vi aspettate la GI ;);)

HandOff01.jpg

Ho creato 4 nuove timeline: destra, sinistra, alto, basso. In ognuna timeline ho creato un unico keyframe al time 1 e ho ruotato di 90° nella direzione corrispondente

HandOff02.jpg

HandOff03.jpg

HandOff04.jpg

Nel pannello "trigger" ho creato 4 triggers (come in figura) e a ognuno ho assegnato l'azione di far partire la timeline corrispondente.

HandOff05.jpg

Ho salvato e premuto F5 per vedere l'anteprima dell'applicazione. La rotazione da una posizione all'altra grazie alle handoff animation (che non hanno keyframe al time "zero") è continua, l'applicazione in automatico calcola le animazioni da uno stato all'altro anche se interrompete la rotazione in corso.

Per ottimizzare l'applicazione dovrei posizionare il centro della rotazione al centro dell'oggetto.

A questo link potete scaricare il file .exe dell'applicazione ;)

post-3829-1186394309_thumb.jpg


Edited by philix

Share this post


Link to post
Share on other sites

PLAY/PAUSE VIDEO

Vi propongo un altro semplice esempio senza aprire un'altra discussiione... volevo spiegare come comandare un video attraverso 3 tasti (play, pause,back).

Prima di tutto con il comando "add existing item" inserisco il filmato che voglio visualizzare, per posizionarlo nell'artboard clicco 2 volte sul nome del filmato presente nella lista "files" e lo ridimensiono. Creo 3 "simple button" che trovo nell'asset library, li rinomino e cambio il "content" (rispettivamente play, pausa e back). La scena che verrà visualizzata è già pronta, se pubblicassi ora però il filmato partirebbe all'avvio dell'applicazione.

pp01.jpg

Ora devo aggiungere i vari trigger e le azioni. Quando la finestra è caricata faccio partire il filmato e subito dopo lo metto in pausa

pp02.jpg

Al click dl mouse sul tasto pausa corrisponde la pausa del filmato

pp03.jpg

Al click del mouse sul tasto back corrisponde l'azione "begin" del filmato in modo tale che ritorni al primo frame del video e riparta

pp04.jpg

E infine al click del mouse sul tasto play corrisponde l'azione "resume" in modo tale che riprenda la riproduzione dal momento della pausa

pp05.jpg

Salvate il progetto e premete F5 ;)


Edited by philix

Share this post


Link to post
Share on other sites

Ho fatto alcune modifiche al viewer 3d.

come button per le rotazioni ho utilizzato delle immagini (Menù Tool -> Make button), con il comando Edit control parts (template) -> Edit template" ho modificato i vari stati del button: ho cambiato la scala quando viene premuto e ho aggiunto nel pannello "Properties -> tab Appearance -> Bitmap effect -> Outer Glow"

HandOff06.jpg

Ho selezionato "window" e nel pannello "Properties" ho messo tutti "no brush" e l'opzione "Allows Trasparency", in modo tale che la mia applicazione non abbia una finestra rettangolare ne uno sfondo

HandOff07.jpg

Per il tasto "Close" della finestra non è molto semplice 8almeno x me che a programmazione sono zero :( ) e mi sono dovuto far aiutare da un programmatore. Ho creato il button e nel pannello properties -> tab Events" ho aggiunto l'event handler "ApplicationClose" al click, l'ho copiato negli appunti e poi (qui è subentrato il mio amico ^_^ ) incollato con MS Visual C°# 2005 Express edition nel file "NoWindow.csproj".

HandOff08.jpg

... e questo è l'aspetto dell'applicazione in funzione

HandOff09.jpg


Edited by philix

Share this post


Link to post
Share on other sites

Data binding

DB01.jpg

Questo SW fa dei controlli e scrive i risultati in un file .XML di log, l'interfaccia deve mostrare alcuni di questi dati, quindi una volta disegnati gli "elementi grafici" ho posizionato un "ListBox" e nelle "Advance property options" del settaggio "item source" ho cliccato su Data Binding

DB02.jpg

Nella finestra "create Data binding" con il tasto "+XML" ho selezionato il file di log .XML

DB03.jpg

Ho selezionato il Data source appena "caricato" e nel pannello "Fields" ho selezionato il log (array")

DB04.jpg

A questo punto con il tasto "define data template" dobbiamo decidere quali dati visualizzare e come. Per il log ho scelto una semplice Grid (di default è uno stack panel, quindi i dati venivano "listati" o in verticale o in orizzontale) per avere maggiori controlli sul posizionamento dei dati visualizzati. Per gli elementi child ho lasciato impostato "textblock" in modo tale che non possano essere modificati dall'utente, ho deselezionato il dato relativo al message body perché verrà visualizzato in seguito su un'altra finestra di "dettaglio" x ogni singolo messaggio d'errore.

DB05.jpg

Se premete "ok" vedrete nell'artboard che i dati sono impilati in verticale, mentre a noi servono divisi x colonne in base al tipo di dato.

DB06.jpg

Nel pannello properties ho messo il background e il border brush trasparenti per vedere i divisori che avevo disegnato in precedenza. Nel pannello "object and timeline" selezionate il listbox e con il tasto destro aprite il pop menù, selezionate "Edit other template -> Edit generated items (item template) -> edit template" per andare a modificare la visualizzazione e la posizione dei child element del listbox

DB07.jpg

Selezionate il grid e allargatelo quanto vi serve, poi selezionate il primo elemento child (nel mio caso gli ID) e nel pannello "Properties" allineatelo in alto e a sinistra (una delle richieste del programmatore era che il dato degli ID in questa finestra fosse nascosto e ciccabile, quindi sempre nel pannello properties ho selezionato l'opzione "visibility = Hidden" e "cursor=hand" in modo tale che fosse cmq individuabile). Ora selezionate l'ultimo textblock (nel mio caso la data e l'ora) e dategli un allineamento in alto e a destra (controllate che i valori sottostanti dei margini siano tutti a zero), mentre il dato che dovrà essere visualizzato al centro (nel mio caso il message header) potrete spostarlo modificando il valore del margine dal bordo sinistro del grid che lo contiene

DB08.jpg

Ora nel pannello "object and timeline" con il tasto "scope up" tornate sull'artboard e il "gioco è fatto", il listbox visualizzerà i dati richiesti presenti nel file .XML e verranno ordinati nella tabella.

A questo punto dovrei aggiungere un'azione al textblock che visualizza gli ID in modo tale che mi apra una nuova finestra dove visualizzare il dettaglio (il message body) della riga selezionata… ancora non ho idea di come farlo :P ma ci penserò dopo le ferie e vi farò sapere ;)


Edited by philix

Share this post


Link to post
Share on other sites

Sulle potenzialità del data Binding ho trovato anche questo interessante tutorial, è spiegata abbastanza bene la funzione "IsSynchronizedWithCurrentItem" che probabilmente mi sarà utile nel progetto del post precedente per richiamare il "message body" della riga selezionata... naturalmente ho seguito questo tutorial personalizzandolo un pochino ;)

catalogotreddiko0.jpg

Share this post


Link to post
Share on other sites
non riesco ad installare l'applicazione...non oarte

......mi mandaalla segnalazione errori!!!!!che posso fare? :blink2::wallbash:

Per "applicazione" intendi MS Blend? In questo caso dovresti contattare la Microsoft... se invece intendi il file .exe del "viewer3d" (che cmq non va installato) che ho messo in download prova a fare tutti gli aggiornamenti del sistema operativo, se hai Vista non dovresti averne bisogno, oppure prova a installare la demo di Blend

Share this post


Link to post
Share on other sites
non ho ben capito.....ma alloracome funziona 3d viever?

3d viewer è una semplice applicazione, che ho creato con il programma Microsoft Expression Blend, per ruotare in maniera interattiva un modello 3d... potrebbe essere utilizzata ad esempio per crearsi un catalogo 3d multimediale, un "reel di modellazione" o altro ancora...


Edited by gurugugnola

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...
Aspetta! x