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

Microsoft Expression Blend

Recommended Posts

<< Sesta parte

Animazione e interattività

L'animazione è creata dalla visualizzazione in rapida successione (e a intervalli regolari)di immagini lievemente differenti tra loro.

In Blend l'animazione si basa su Keyframe; per creare un'animazione di un oggetto, ad esempio il movimento da sinistra a destra di un rettangolo dovete: indicare la posizione iniziale del rettangolo nel primo keyframe (supponiamo al secondo 0), indicare la posizione finale del rettangolo nell'ultimo keyframe (supponiamo al secondo 2), indicare un eventuale percorso e eventuali trasformazioni e il SW attraverso un'interpolazione creerà l'animazione.

Blend52.jpg

Sarebbe possibile anche creare animazioni frame x frame, ma è un metodo di lavoro sicuramente + lento (dovreste disegnare ogni frame) e il file risulterebbe anche + pesante.

In Blend inoltre potete decidere se un determinato oggetto deve essere visibile o no in determinati momenti attraverso la proprietà "Visibility" (Properties panel -> tab "Appearance").

Nella Timeline c'è la struttura per le sequenza animate della vostra applicazione; un'animazione in Blend è composta di una timeline in cui sono registrati i vari keyframe, ogni keyframe rappresenta il momento in cui le proprietà dell'oggetto vengono modificate.

Se la vostra animazione non deve essere riutilizzata da qualche altra parte potete crearla direttamente nel documento come in questo esempio:

create un nuovo progetto (menù "File" -> New project), nell'artboard disegnate un rettangolo che sarà il soggetto di questa semplice animazione, premete F7, nel pannello Object and timeline" cliccate sul tasto con il "+" (create new timeline) date un nome alla nuova timeline e premete "ok".

Blend53.jpg

Nel pannello interaction -> tab "Triggers" troviamo di default "When Window.Loaded is raised" e sotto "nome della timeline".begin": sta a significare che una volta caricata la finestra dell'applicazione l'animazione della timeline appena creata andrà in play. Se volete aggiungere una semplice interattività potreste modificare l'event trigger in "When object.PreviewMouseDown is raised" in modo tale da far partire l'animazione della nuova timeline al click del mouse sull'oggetto.

Blend54.jpg

Selezionate il rettangolo e nel pannello "Object and timeline" cliccate sul tasto "Record Keyframe"

Blend55.jpg

Spostate l'indicatore giallo nella timeline fino al frame in cui volete far terminare la vostra animazione e spostate il rettangolo (potete anche applicare delle trasformazioni o modifiche di altre proprietà come il colore), in automatico verrà creato il secondo keyframe e l'animazione interpolata.

Blend56.jpg

Per visualizzare un'anteprima nell'artboard dell'animazione premete il tasto "Play" nel pannello "objects and timeline", altrimenti salvate il project e premete il tasto F5

Per uscire dalla modalità "timeline recording" selezionate "default" nel box sotto la scritta "Objects and timeline"

Blend57.jpg

Se invece avete bisogno di riusare l'animazione + volte nello stesso documento o in altre applicazioni potete crearla in un "user control", l'user control con l'animazione poi può essere inserito nell'artboard come qualsiasi altro control. Per creare un user control le procedure possono essere 2:

1. File -> new project, selezionate "Control Library" come tipo di progetto e selezionate il linguaggio di programmazione del code-behind. A questo punto create la vostra animazione e una volta terminata nel menù "Project" scegliete l'opzione "Build project" (Ctrl + Shift + B) per creare il file .dll che verrà salvato nella cartella \bin\debug. Questo file .dll potrà essere richiamato in altri progetti con il comando Menù "Project" -> "Add reference" in modo d'averlo a disposizione nell'asset library (custom control), da qui potete trascinarlo direttamente nell'artboard

2. potete creare un user control anche all'interno di un progetto esistente attraverso il comando "File- > New Item" (Ctrl + N), scegliete il template "UserControl" e poi seguite la procedura del punto precedente, naturalmente nel progetto in cui avete creato questo user control non ci sarà bisogno di richiamare il file .dll, sarà già presente nell'asset library.

Se volete che tutti i control di un determinato tipo (ad esempio i button) siano animati allo stesso modo potreste creare l'animazione all'interno del "control's template"; ciò non significa che tutti i control saranno identici, usando un "template binding" ogni control potrebbe avere un colore diverso (o altre proprietà). Per aggiungere un'animazione a un button la procedura è la seguente:

disegnate un SimpleButton (Asset Library -> Simple Style) nell'artboard, nel pannello Object and timeline selezionate il button e con il tasto destro scegliete l'opzione "Edit Control Parts (Template) -> Edit Template" per entrare nella modalità di editing del template

Blend58.jpg

Per uscire dalla modalità di editing del template e ritornare al documento cliccate sull'icona "Scope up" nell'interaction panel

Blend59.jpg

Tornati nella modalità di editing del template cancellate l'elemento child "border" e cliccate 2 volte sul grid per attivarlo, in modo tale da poter aggiungere nuovi elementi child.

Blend60.jpg

Disegnate un rettangolo all'interno del grid, cliccate con il tasto destro sul rettangolo e selezionate "Order -> Send to back", nel pannello properties cambiate il colore al rettangolo in quello che sarà il colore di "default" del button.

Blend61.jpg

Nel pannello "Interaction" sotto "Triggers" selezionate il trigger "IsMouseOver = True" e in "Action when activating" cliccate sul tasto con il "+" (add new action) per aggiungere un'animation timeline. Di default l'azione sarà quella di far iniziare la timeline che avete appena creato, lasciate così questa azione.

Blend62.jpg

Spostate il cursore della timeline al secondo uno e modificate il colore del rettangolo, verrà creato in automatico un keyframe

Blend63.jpg

Selezionate di nuovo il trigger "IsMouseOver = True" e in "Action when Deactivating" aggiungete una nuova action. Modificate l'azione da Begin a Stop in modo tale che il tasto ritorni alla condizione iniziale

Blend64.jpg

Salvate e premete F5 per testare l'applicazione, nella finestra dell'applicazione provate a posizionarvi con il mouse sopra il button e poi a uscire dall'area attiva.

Keyframe

Un keyframe indica sulla timeline il momento in cui una proprietà di un elemento è modificata, ci sono 4 tipi di keyframe:

1. object - level keyframe: si applicano a qualsiasi elemento e indicano che una delle proprietà di un elemento child è stata modificata (riga "rectangle" nell'immagine d'esempio)

Blend65.jpg

2. Compound keyframe: indica che una proprietà ha delle proprietà child che sono state animate (riga "traslatino" nell'immagine d'esempio)

Blend66.jpg

3. Simple Keyframe: rappresentano le singole proprietà modificate nel tempo (righe "X" e "Y" nell'immagine d'esempio), si lavora con questi keyframe per settare determinate azioni come ad esempio quelle di loop (cliccate con il tasto destro su questi keyframe e selezionate "Repeat Count", nella finestra potrete settare il numero di ripetizione o "forever" con il tasto accanto a destra del text box)

Blend67.jpg

4. Implicit keyframe: sono presenti quando un'animazione è interrotta da un'altra e la seconda non ha un marker al secondo 0 (zero)

Cliccando con il tasto destro sui keyframe si possono impostare le opzioni di interpolazione (Erase In, Erase Out, Hold out, Linear) che controllano l'accelerazioni e decelerazioni dell'animazione.

Il frame rate determina quanti frame ci sono in un secondo, l'applicazione viene eseguita al massimo frame rate possibile. È possibile settare il valore di snap del cursore della timeline, questo valore si setta dallo "Snapping" (icona in alto a destra nel pannello "object and timeline".

Motion Path

Usando il tool "convert to motion Path" è possibile creare un percorso da far seguire a un oggetto.

Disegnate nell'artboard un elemento che sarà l'oggetto dell'animazione e dategli un nome, disegnate un percorso da seguire (potete usare il tool pen, pencil, ellipse, rectangle, line), aggiungete una timeline.

Selezionate il percorso e scegliete l'opzione "menù Object -> Path -> Motion path", come target selezionate il primo oggetto e premete "ok". Per modificare il tempo di riproduzione del movimento espandete il nodo nella timeline e nella riga "Motion path" spostate le barrette blu d'inizio e fine

Blend68.jpg

La struttura della timeline permette di avviare diverse animazioni allo stesso momento:

aprite un nuovo progetto e premete F7 per entrare nell'animation Workspace.

Disegnate un'ala di farfalla, copiatela, flippatela; selezionate le 2 ali e raggruppatele in un grid, a questo punto rinominatele.

Disegnate il corpo della farfalla e un percorso ellittico x il volo della farfalla, con Convert to motion path" collegate il corpo e le ali al percorso e impostate il volo sullo stesso numero di frame, ora potete rendere invisibile o cancellare la path che vi è servita per creare il percorso.

Con il tasto destro del mouse cliccate sui i frame dei 2 "<> Motion path" e settate il counter su "forever". Se premete il tasto F5 potrete vedere un'anteprima della vostra applicazione, una volta caricata la finestra dell'applicazione la farfalla inizierà a girare in tondo.

Blend69.jpg

Nel pannello "Object and timeline" aggiungete una nuova timeline con il tasto "+" e chiamatela "flap", con il tasto "record keyframe" settate un keyframe al frame 0 (zero) e 1, spostate il cursore della timeline al frame 0,5, selezionate il grid "Ali" e con il tasto "alt" premuto nell'artboard scalate in X e in Y le ali in modo tale che sembrino quasi chiuse. (Se scalate un elemento con il tasto "alt" la scala verrà applicata dal centro dell'elemento).

Nella timeline cliccate con il tasto destro sui frame della riga "<> Scale X" e "<> Scale Y" e settate il repeat counter su "forever".

Blend70.jpg

Premendo F5 potete avere un'anteprima della vostra applicazione in cui la farfalla vola in tondo sbattendo le ali.

Triggers

I trigger servono a modificare lo stato di un oggetto nell'artboard in risposta a un evento o a un cambiamento di proprietà. Possono essere usati per comandare la riproduzione di una timeline, di default una timeline parte al caricamento ma potreste decidere ad esempio di farla partire al click del mouse (o qualsiasi altra azione).

Durante lo svolgimento di un'applicazione gli oggetti subiscono dei cambiamenti al proprio stato (ad esempio un button)

Blend71.jpg

Solitamente lo stato di un elemento cambia in seguito a delle azioni (con il mouse o da tastiera) da parte dell'utente. Questi valori (.ISMouseOver, .IsPressed…) non sono proprietà visibili da parte dell'utente quindi bisogna collegare delle proprietà visive (ad esempio il cambiamento di colore o di forma, come nell'esempio precedente dell'animazione all'interno di un button).

Esistono 2 tipi di trigger:

1. property trigger: il meccanismo x il quale un cambiamento di una proprietà innesca un cambiamento (statico o animato) in un'altra proprietà

2. Event trigger: la modifica (statica o animata) di una proprietà viene innescata da un evento

In quest'immagine d'esempio ci sono 2 "property trigger" (IsMouseOver e IsPressed) e un "Event trigger" (target-element.loaded). il property trigger "IsMouseOver" è selezionato e potete vedere le proprietà che va a modificare (properties when active) e la timeline che va a controllare (Timeline1)

Blend72.jpg

Event handlers: sono i metodi per l'avvio di una procedura che coinvolge diversi settaggi di una proprietà o una timeline e in risposta a un determinato evento. Vengono definiti nel code-behind file del vostro documento e sono scritti in C# o in MS Visual basic .NET

Coded animation: le applicazioni create in Blend fondamentalmente sono applicazioni Windows Presentation Foundation (WPF), quindi è possibile creare e modificare i propri progetti anche direttamente da codice. L'applicazione precedente della farfalla in linguaggio XAML si presenta così (riporto solo la prima parte di codice):

 <Window


			xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"


			xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"


			x:Class="UntitledProject14.Window1"


			x:Name="Window"


			Title="Window1"


			Width="640" Height="480" Background="#FFFFFFFF">




			<Window.Resources>


						<Storyboard x:Key="Timeline1">


								   <DoubleAnimationUsingPath BeginTime="00:00:00" Duration="00:00:04" RepeatBehavior="Forever" Storyboard.TargetName="Ali" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Source="X">

Nell'ottava parte parlo di Control e Style

post-3829-1186134706_thumb.jpg


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