Jeśli planujecie nagrywać obraz z telefonu to powinniście zaprzyjaźnić się z zakładką Touch Callout. Bowiem to dzięki niej w prosty sposób będziecie w stanie pokazać wszelkie gesty wykonywane na ekranie telefonu czy też tabletu.

Jako że system iOS nie udostępnia na tem moment informacji o pozycji palca na ekranie. W związku z czym, nie da się w sposób automatyczny wygenerować animacji pokazującej tapnięcie użytkownika w ikonę na ekranie telefonu. Podobnie ma się sprawa z wszelkimi gestami jakich możemy używać w systemie i aplikacjach. Dlatego ScreenFlow dał nam do dyspozycji specjalną zakładkę, która ma rozwiązać ten problem.

Elementy Interfejsu

Zakładka na pierwszy rzut oka wygląda na dość rozbudowaną. Jednak po przejrzeniu dostępnych opcji można stwierdzić, że da się ją dość szybko opanować.

Wygląd zakładki Touch Callout
I tak w nagłówku znajdziemy nazwę zakładki, opcję dodawania akcji oraz ustawienia.

Nagłówek zakładki Touch Callout
Najciekawszy element w nagłówku to opcja ustawień. Bowiem prócz standardowego resetowania ustawień zakładki, otrzymujemy także bardzo pokaźny zestaw gotowych szablonów akcji.

Lista opcji w ustawieniach
Dzięki zdefiniowanym szablonom możemy zaoszczędzić sporo czasu. Jeśli jednak lista ta była by nie wystarczająca, istnieje możliwość dodania własnych szablonów.

Sekcja pierwsza

Sekcja ta jest odpowiedzialna za wygląd elementu lub wielu elementów, symulujących nasze palce.

Wygląd pierwszej sekcji zakładki Touch Callout
Count – określa ilość palców,

Fill – kolor wypełnienia,

Outline – kolor ramki oraz jej grubość,

Size – rozmiar elementu,

Spacing – odległość elementów od siebie (opcja dostępna w przypadku prezentacji więcej niż jednego palca),

Opacity – poziom przezroczystości,

Rotation – kąt obrotu (opcja dostępna w przypadku prezentacji więcej niż jednego palca),

Sekcja druga

W sekcji tej określamy, czy akcja ma stan końcowy oraz jak ma wyglądać animacja pomiędzy zmianami stanów.

Wygląd sekcji drugiej zakładki Touch Callout

Tym samym wybierając opcję Callout Has End State mówimy aplikacji, że akcja ma stan początkowy oraz stan końcowy. Co dość wyraźnie widać jeśli w opcjach widoku wybierzemy tylko Show Start & End States

Wygląd interfejsu przy włączeniu opcji Callout Has End State

W takim przypadku będziemy widzieli dwa koła, jedno z krzyżykiem w środku co oznacza stan początkowy. Drugie z kropką oznaczającą stan końcowy. Ustawiając je w różnych miejscach na ekranie spowodujemy ich animację z jednego stanu do drugiego. Co możemy podejrzeć włączając w opcjach widoku Show Interpolated State.

Animacja pokazująca zmianę pomiędzy stanem początkowym i końcowym

Dodatkowo w sekcji możemy ustawić dwie opcje, pierwsza to opóźnienie rozpoczęcia animacji:

Zaznaczona opcja Wait

Druga to Curve czyli dynamika animacji i mamy do wyboru następujące opcje:

Lista parametrów do wyboru dla opcji Curve

Sekcja trzecia

Ostatnia sekcja jest powiązana z poprzednią i odpowiada za animację stanu końcowego.

Wygląd sekcji trzeciej zakładki Touch Callout

Jako że animacja dotyczy stanu końcowego to w związku z tym można ją ustawić tylko w przypadku, gdy mamy ustawiony stan końcowy Callout Has End State. Sekcja ta umożliwia nam zmianę parametrów:

Size – rozmiar elementu,

Spacing – odległość elementów od siebie, opcja dostępna w przypadku prezentacji więcej niż jednego palca,

Opacity – poziom przezroczystości,

Rotation – kąt obrotu, dostępny w przypadku prezentacji więcej niż jednego palca,

Wbudowane szablony

Jak wspomniałem na początku wpisu, ScreenFlow dostarcza standardowe szablony najpopularniejszych akcji. Zobaczmy jak możemy wykorzystać je w praktyce.

Single Tap

Na pierwszy ogień idzie szablon iOS Touch: Single Tap, który jest odpowiednikiem dotknięcia ekranu paluchem 😉 I może on wyglądać następująco:

Dzięki takiemu efektowi osoba oglądająca nasze materiały od razu będzie wiedziała, co zostało wybrane w interfejsie.

Zoom In / Zoom Out

Kolejny efekt to gest powiększenia / oddalenia z którym spotykamy się na codzień w wielu aplikacjach. W ScreenFlow wizualizacja tych gestów może wyglądać następująco:

Zoom In

Zoom Out

Proste i skuteczne pokazanie co właśnie zrobiliśmy na ekranie naszego smartphona.

Swipe Left / Swipe Right

Ostatni szablon jaki chciałem Ci zaprezentować to przesuwanie palcem w prawo oraz w lewo po ekranie. Czyli coś co robimy milion razy dziennie i nie zdajemy sobie sprawy, że ktoś mógłby nie wiedzieć co chcemy mu pokazać. Przykładowe wizualizacje poniżej pokazujące zmianę pulpitu na iPhonie.

Swipe Left

Swipe Right

Podsumowanie

Jak widać zakładka Touch Callout dostarcza najprostsze szablony z których można skorzystać i mieć w ciągu kilku minut wideo z telefonu wzbogacone o gesty. Tworząc czy to tutoriale aplikacji, czy też instrukcje do gier, zakładka ta znacznie ułatwi nam życie.

Close