wtorek, 6 lipca 2010

Nowy SketchFlow - kontrolki mockup i coś ponadto

Co nowego w SketchFlow, który obecnie trafił do pakietu Expression Studio Ultimate? Nie ma już nic nowego interesującego? A nieprawda mój kolego!

Zacznijmy od najbardziej godnej uwagi moim zdaniem nowości, która … nie jest wymieniana przez oficjalną dokumentację. Jednak osobowości takie jak John Papa czy Tim Heuer mówiąc o nowościach w SketchFlow piszą o niej w pierwszej kolejności. Sprawa dotyczy kontrolek mockup. Pewne zamieszanie wynika z tego, że domyślnie są udostępnione jedynie w przykładzie MockupDemonstration. Postępując według wskazówek podanych na blogu zespołu zajmującego się linią Expression, jesteśmy w stanie bardzo łatwo udostępnić tę funkcjonalność dla dowolnego projektu SketchFlow.

01_SketchFlow_01

Czym są kontrolki mockup? Są to szkielety dobrze nam znanych z życia codziennego kontrolek. Dzięki nim możemy jeszcze szybciej zamodelować UI. Kontrolki mockup nie zawierają w zasadzie same w sobie logiki, bardziej są to szablony, których składowym możemy dopiero nadać konkretne działanie - najczęściej za pomocą odpowiednich zachowań. 

Tworząc obecnie prototyp w SketchFlow nie musimy wyważać wyważonych już drzwi m.in w przypadku dłuższego kawałka tekstu, ikon, kursorów, przycisków z ikonami, menu, okien dialogowych, formularza do logowania, odtwarzacza multimedialnego, przycisków do stronicowania, oraz …  pulpitu, okna przeglądarki internetowej i eksploatora Windows…

Źródła biblioteki kontrolek mockup zostały udostępnione na codeplex. Stanowią one dobrą bazę szkoleniową z pisania rozszerzeń na czas designu dla Blenda np. własnych edytorów propercji. 

Wokół kontrolek mockup powstało kilka interesujących projektów, z których najbardziej interesujący jest Sketchables - rozwiązanie do szybkiego tworzenia bardziej złożonych kontrolek tego rodzaju, np. różnego rodzaju list czy tabelek DataGrid. Jej autor, człowiek związany z Blendem,  pokazuje na YouTube edycję UI kontrolek za pomocą paru słów czy specyficznego języka. Niestety, na razie nie udostępnił jeszcze publicznie tego projektu …

01_SketchFlow_02

Z innych nowości w SketchFlow chciałbym wspomnieć o nowych możliwościach w animacjach SketchFlow. Obecnie możemy podczas definiowania animacji określić, że na danej ramce ma nastąpić pauza w odtwarzaniu.

Dysponujemy też nowym SketchFlowAnimationTrigger, który pozwala reagować na zmianę ramki, pauzę lub zakończenie animacji SketchFlow. W moim przykładzie animuję puzon, który zatrzymuje się w największym powiększeniu na środku ekranu i wydaje wtedy dźwięk -:)

Animacja SketchFlow technicznie bazuje na stanach wizualnych, a tranzycje między stanami w Blend 4 posiadają efekty tranzycji. Mamy więc możliwość definiowania efektów przejścia pomiędzy ramkami animacji. W moim przypadku puzon rozpływająco przechodzi z pozycji startowej na środek ekranu.

01_SketchFlow_03

To nie wszystko. W nowym SketchFlow odnajdziemy różne przydatne usprawnienia m.in. publikowanie na SharePoint z obsługą feedbacku z dostępem współdzielonym, eksport feedbacku do Worda, ulepszenia w SketchFlow Player. Dla prototypowania w SketchFlow bardzo przydatne są warunkowe zachowania oraz data store.

Opis nowych elementów w SketchFlow w innym nieco ujęciu, przydatne linki oraz praktyczny przykład opublikowałem tutaj.