http://pbar2.republika.pl/index.html

Temat: Narzedzia do tworzenia linii, czworokątów i okręgów.

 

W tej lekcji poznamy jak używać narzędzi kwadrat, owal i linia..

Linia (line tool), kwadrat (rectangle tool) oraz owal (oval tool) działają tak jak w innych programach graficznych.
Wybieramy poprzez kliknięcie narzędzie oval tool icona, po czym mamy szybki dostęp do ustawień koloru krawędzi i wypełnienia tworzonego koła. Kursor w tym momencie przybiera kształt małego krzyżyka
.

Klikamy na obszarze roboczym (scene) i przeciągamy trzymając wciśnięty lewy klawisz myszy do ustawienia takiej wielkości koła jaką sobie życzymy.

Panel ustawień pokazuje ustawienia aktualnie zaznaczonego obiektu. Jeśli chcemy zobaczyć ustawienia innego obiektu znajdującego się na edytowanym dokumencie to klikamy go, bądź zaznaczamy narzędziem arrow tool icona. Kursor przybierze wtedy postać
i zaznaczamy obszar, na którym znajduje się obiekt.
Najeżdżamy kursorem na ikonę
(stroke color) i zmieniamy kolor obwiedni. W celu uzyskania większej palety kolorów klikamy na ikonę
. Najeżdżamy kursorem na ikonę
i dostęp do zmiany koloru wypełnienia jest przed nami otwarty. Tak samo jak w stroke mamy możliwość wyboru z większej palety kolorów.

Najeżdżamy kursorem na ikonę stroke height
i ustawiamy grubość obwiedni koła. Następnie ustawiamy się nad ikoną stroke style
i mamy możliwość zmiany stylu, w jakim ma być wyświetlana obwiednia.

Po kliknięciu na ikonę custom
istnieje możliwość modyfikacji dodatkowych ustawień wybranego obiektu.

W celu utworzenia nowego koła bądź elipsy kliknij na obszar roboczy i przeciągnij kursor. Na rysunku widoczne jest koło zaznaczone arrow tool i otworzony panel właciwoci.

Narzędzia linia (line tool) i kwadrat (rectangle tool) są bardzo podobne w użyciu do koła. Tak samo wybieramy z przybornika i na takiej samej zasadzie tworzymy obiekty tymi narzędziami. Jednakże oba te narzędzia mają inne modyfikatory.
Klikamy na ikonę narzędzia kwadrat
(rectangle tool). W opcjach tego narzędzia pokazała się nam ikona
.

Po kliknięciu otwiera się okno, w którym mamy możliwość zmiany promienia kąta, z jakim będą zaginały się narożniki.

Na rysunku pokazane są dwa kwadraty. Pierwszy z nich narysowany jest z opcją zmiany promienia narożników 35 stopni, drugi narysowany jest bez tej opcji.

W celu precyzyjnego ustawienia obiektów na obszarze roboczym bardzo pomocna jest także opcja, do której dostęp mamy we właściwościach properties, gdzie do ustawienia mamy cztery pozycje: szerokość, wysokość, ustawienie w układzie współrzędnych osi x i y.

Temat: Narzędzie ołówek (Pencil Tool)

 

W tej lekcji omówione zostanie narzędzie ołówek (pencil tool).

Jest to wyjątkowe narzędzie w przyborniku programu Flash. Można nim rysować proste, krzywe, bądź dowolne kształty.

Wybieramy narzędzie Pencil tool
z przybornika. Kursor zamieni się w mały ołówek
. W opcjach tego ołówka mamy możliwość ustawienia trzech trybów pracy: prostego (starighten), wygładzonego (smooth) oraz odręcznego (ink).

Każda krzywa narysowana z trybem prosty będzie modyfikowana przez program na ciąg prostych.

Na rysunku pokazane są trzy krzywe. Pierwsza narysowana jest w trybie prostym, druga wygładzonym i ostatnia w trybie odręcznym.

Możemy się nie martwić, że obiekt który miałby przypominać kwadrat mało go przypomina. Używając opcji straighten wystarczy narysować "mniej więcej" kontury naszego czworoboku , aby program Flash sam postarał się o resztę.

          

Tak samo jak w poprzednio omawianych narzędziach, tak i tutaj mamy możliwość modyfikacji koloru, grubości linii i stylu jakiego ma używać nasz edytowany obiekt poprzez otworzenie panelu ustawień.

LEKCJA 4

Temat: Narządzia pędzel (Brush Tool) i wiaderko z farbą (Paint Bucket Tool)

 

Narzędzia pędzel (Brush Tool) i wiaderko z farbą (Paint bucket tool).
Bardzo przydatnym narzędziem okazuje się także pędzel (Brush Tool)
. Podobnie jak ołówek posiada wiele trybów pracy.

Wybieramy narzędzie brush tool z przybornika, kursor przybierze postać kulki
. Tak jak w większości narzędzi możemy edytować kolor poprzez kliknięcie na fill color - wypełnienie kolorem. Istnieje także możliwość zmiany wielkości naszego kursora poprzez kliknięcie na ikonę
, a także kształtu pędzla
.
W opcjach tego narzędzia mamy możliwość ustawienia jednego z pięciu trybów wypełnienia.

Malowanie normalne (normal),

Malowanie wypełnień (fills),

Malowanie poza obiektem (behind),

Malowanie wyselekcjonowanych wypełnień (selection), gdzie najpierw musimy zaznaczyć określony obszar narzędziem arrow tool, czyli strzałką. Następnie wybieramy narzędzie pędzel.

  
  
  

Malowanie wewnątrz (inside).
UWAGA !!!
Ważne jest, aby zacząć zaznaczanie od miejsca, które chcemy wypełnić.

  
  
  

Kolejnym narzędziem jest wiaderko z farbą (paint bucket). Narzędzie to służy do zmieniania koloru wypełnienia już istniejącego lub do wypełniania pustych pól otoczonych liniami.

Wybieramy narzędzie paint bucket tool-wiaderko z farbą z przybornika. Kursor przybierze wtedy wygląd wylewającej się z wiaderka farby
. Podobnie jak w narzędziu brush tool-pędzel wiaderko z farbą posiada różne tryby pracy gap size.

Tryby pracy wiaderka z farbą: tryb niezamykania przerw (don`t colse gaps), tryb zamykania małych przerw (close small gaps), tryb zamykania średnich przerw (close medium gaps) oraz tryb zamykania dużych przerw (close large gaps). Wszystkie te opcje oznaczają, możliwość wypełniania danego obiektu, który nie musi być całkowicie "zamknięty". Wystarczy, że zaznaczymy odpowiednią opcję i mamy problem z głowy. Bez potrzeby sprawdzania, czy użyte przez nas wiaderko nie "zaleje" całego naszego obszaru roboczego.

W celu wypełnienia obiektu (tu: kwadrat) kolorem, (tu: gradientem)

Rysujemy przykładowy kawdrat i wybieramy narzędzie paint bucket tool-wiaderko z farbą.

Wybiramy kolor

Klikamy w miejscu, gdzie ma być najjaśniejsza część wypełnienia gradientem.

LEKCJA 5

Temat: Wypełnienia obiektów.

 

Kolejna lekcja pokaże jak używać narzędzia Fill Transform Tool transformacja wypełnienia. Kursor będzie wyglądał następująco
. Pamiętajmy, że opcja ta działa tylko przy wyborze kolorów typu gradient
dostępnych w fill color-kolorach wypełnienia (dolna część palety kolorów).

Wybieramy z przybornika narzędzie transformacji wypełnienia
i klikając zaznaczamy obiekt, w którym chcemy zmienić wypełnienie.

     

Po kliknięciu na obiekt zostanie on otoczony okręgiem właściwości narędzia transformacji wypełnienia. Pierwsze narzędzie to width handle-uchwyt szerokości
. Przeciągamy kursor w dowolnym kierunku w celu sprawdzenia jego właściwości.

Następnie klikamy na drugi tryb modyfikacji size handle-uchwyt rozmiaru. Kursor zmieni się w małe kółko ze strzałeczką w środku
. Chwytamy kólko zmiany rozmiaru i przeciągamy w dowolnym kierunku.

Ostatnim trybem jest obrót wypełnienia-rotation handle wokół osi, której wyznacznikiem jest punkt znajdujący się na środku edytowanego obiektu. Kursor w tym wypadku przybiera postać czterech strzałek
. Chwytamy kółko zmiany obrotu wypełnienia i przeciągamy w dowolnym kierunku.

W celu przesunięcia środka edytowanego obiektu klikamy na kółko znajdujące się na środku koła narzędzia transformacji wypełnienia, kursor zamieni się w mały krzyżyk
i przesuwamy w wybranym przez nas kierunku.

W wyniku tego mamy możliwość zmiany transformacji wypełnienia z innego punktu odniesienia.

Warto wypróbować to narzędzie także z załączoną opcją SNAP.

LEKCJA 6

Temat: Narzędzie butelka z tuszem (Ink Bottle Tool).

 

W tej lekcji poznamy narzędzie Ink Bottle tool (butelka z tuszem)
. Po wybraniu tego narzędzia kursor przybierze postać wylewającej się buteleczki z tuszem
. Narzędzie to służy do zmiany ustawień krawędzi wybranego obiektu.

Tworzymy obiekt typu linia, owal lub kwadrat.

Wybieramy narzędzie butelka z tuszem i w oknie Properties, zmieniamy opcje kształtu.

Klikamy odpowiednio: na ikonę stroke color, aby zmienić kolor obwiedni, na ikonę stroke height, aby zmienić rozmiar oraz na ikonę stroke styles, aby zmienić styl wyświetlanej obwiedni.

Klikamy wewnątrz obiektu (jeśli obiektem jest linia klikamy na nią), w którym chcemy zmienić atrybuty obwiedni i oto wynik.

Od tej chwili obwiednia nowo narysowanego kształtu będzie utworzona z ustawionymi przez nas wcześniej ustawieniami.

 

LEKCJA 7

Temat: Narzędzie Gumka.

W tej lekcji pokazane zostanie użycie narzędzia eraser-gumka do mazania.

Narzędzie eraser posiada pięć możliwości wymazywania (eraser mode): tryb normalnego (normal) wymazywania, czyli wszystko w zasięgu gumki; wymazywanie wypełnień (erase fill); wymazywanie linii (erase lines); wymazywanie wyselekcjonowanych wypełnień (erase selected fills); wymazywanie wnętrz (erase inside).

Posiada także opcję wymazywania zaznaczonego obszaru lub linii (faucet)
, a także zmianę kształtu narzędzia (erase shape)
.
Tworzymy obiekt i wybieramy narzędzie eraser
z przybornika narzędzi. Kursor standardowo zmieni się w kulkę
, której kształt i wielkość możemy zmienić klikając na ikonę

Pierwszy rysunek pokazuje użycie trybu normalnego erase normal.

Drugi rysunek pokazuje użycie trybu wymazywania wypełnień erase fills.

Trzeci rysunek pokazuje użycie trybu wymazywania linii erase lines i wynik jego działania.

     

Następne rysunki ukazują użycie trybu wymazywania wyselekcjonowanych obszarów-wypełnień dokumentu erase selected fills. W tym celu musimy najpierw wyselekcjonować dany obszar narzędziem arrow tool. Następnie wybieramy narzędzie gumki i ustawiamy tryb wypełniania selekcji. Pierwszy rysunek to zaznaczanie obszaru, kolejny wymazywanie i ostatni wynik wymazywania.

     

Ostatni tryb to wymazywanie wewnątrz erase inside. Ważną rzeczą jest w tym trybie, aby zacząć wymazywać w miejscu, w którym mamy zamiar wymazywać, a nie poza nim.

     

Dodatkowymi opcjami są wymazywanie całości wypełnienia faucet, dzięki której jednym kliknięciem możemy wymazać całe wypełnienia danego obiektu. W tej opcji kursor zamieni się na mały kranik. Oto dwa rysunki przedstawiające działanie narzędzia gumki z tą opcją.

     

 

 

LEKCJA 8

Temat: Operowanie narzędziem Arrow Tool.

W tej lekcji przedstawione zostaną narzędzia strzałka (arrow tool) oraz lasso (lasso tool).

Przed każdą zmianą, bądź przesunięciem danego obiektu musimy najpierw go zaznaczyć. Aby to uczynić wybieramy narzędzie strzałkę (arrow tool)
lub narzędzie lasso (lasso tool)
z przybornika. Narzędzia zmieniają wygląd kursora odpowienio: strzałka dostaje mały dodatek w postaci małego prostokącika
, a w czasie używania drugiego narzędzia kursor zamienia się w małe lasso
. Jednakże oba te narzędzia zamieniają się w to samo, w momencie gdy ma być przemieszczany obiekt. Kursor na ten czas wygląda jak strzałka z małym krzyżykiem
.
Mając przygotowany wcześniej obiekt klikamy na jego wypełnienie i trzymając wciśnięty lewy klawisz "chwytamy" wypełnienie i przesuwamy je w wybranym przez nas kierunku.

     

Podwójne kliknięcie wewnątrz edytowanego obiektu zaznaczy wypełnienie wraz z obwiednią. W celu przesunięcia postępujemy z obiektem jak powyżej.
Kliknięcie wewnątrz edytowanego obiektu, a następnie podwójne kliknięcie na obwiednię spowoduje zaznaczenie obwiedni, która po chwyceniu gotowa jest do przemieszczenia.
Kolejną opcją jest kliknięcie na obiekt z wciśniętym klawiszem SHIFT. Spowoduje to możliwość zaznaczenia wyselekcjonowania interesujących nas obwiedni.

Po zaznaczeniu obiektu mamy możliwość wygładzenia smooth
lub wyprostowania straighten
jego krawędzi.

Zaznaczamy przygotowany obiekt strzałką-arrow z przybornika i klikamy na wygładzanie.

Poniższy rysunek przedstawia wynik zastosowania opcji wygładzania.

Następny rysunek przedstawia zastosowanie opcji prostowania na obiekcie przed momentem wygładzanym.

Wybieramy narzędzie lasso (lasso tool) z przybornika, zaznaczamy opcję magiczną różdżkę (magic wand)
i zakreślamy obszar obiektu, który chcemy wyróżnić.

Wyróżniony obiekt "chwytamy" i przesuwamy w określone przez nas miejsce.

Oto wynik wyselekcjonowania i przemieszczenia części naszego obiektu.

Narzędzie lasso ma jeszcze jeden tryb pracy: tryb wielokąta polygon mode
.
Po uprzednim utworzeniu obiektu wybieramy narzędzie lasso, zaznaczamy tryb wielokąta i określamy selekcję obszaru klikając lewym klawiszem myszy, w celu zaznaczenia . Narzędzie to będzie zaznaczać linie proste, aż do momentu gdy podwójnie klikniemy.

"Chwytamy" i przenosimy znanym już nam sposobem zaznaczony obszar w określone przez nas miejsce.

 

 

LEKCJA 9

Temat: Narzędzia strzałka.

W tej lekcji poznamy dokładniej narzędzie strzałki (arrow tool)
fla toolb arrow.gif z użyciem panelu właściwości properties.
Tworzymy obiekt z wypełnieniem, następnie wybieramy z przybornika narzędzie strzałki arrow tool i klikamy dwukrotnie na obramowanie w celu jego zaznaczenia. Otwierając menu Window->Properties mamy możliwość edytować kolor, szerokość i styl linii-krawędzi. Tak samo możemy edytować wypełnienie, klikając na nie jednokrotnie strzałką
Pierwszy rysunek przedstawia właściwości linii, drugi wypełnienia.

Narzędzie strzałka pozwala także zmieniać kształt. Tworzymy obiekt i wybiramy z przybornika narzędzie strzałkę arrow tool. W celu zmiany kształtu klikamy na jeden z narożników obiektu i ciągniemy ten narożnik, trzymając wciśnięty lewy klawisz myszy do momentu ustawienia żądanego kształtu. Do standardowego kursora podczas tej operacji dodane zostaną diwe małe linie połączone ze sobą

Wynikiem tego powstanie zmodyfikowany obiekt przedstawiony poniżej.

W możliwością zmiany kształtu jest "chwycenie" boku obiektu. W tym wypadku kursor w postaci strzałki zamiast dwóch linii, będzie posiadał małą krzywą fla_toolb_cursor_arrow_krzywa.gif.
Tak samo jak w ćwiczeniu powyżej chwytamy, tym razem bok i ciągniemy do otrzymania określonej modyfikacji.

I wynik tej modyfikacji.

 

 

 

LEKCJA 10

Temat: Transformacja obiektów.

W tej lekcji poznamy narzędzie dowolnej transformacji kształtu (free transform tool)
. Narzędzie to służy do zmiany wielkości, obracania, rozciągania i zukośniania linii lub obiektów znaczonych.

Tworzymy obiekt i wybieramy z przybornika narzędzie dowolnej transformacji kształtu (free transform). Kursor przybierze postać taką samą jak w momencie, gdy wybieramy narzędzie strzałkę-arrow tool.

Opcje zaznaczania w tym narzędziu działają tak jak przy używaniu strzałki. Klikamy podwójnie, w celu zaznaczenia obiektu.

W celu obrócenia obiektu "chwytamy" jeden z narożników i przeciągamy, wraz z wciśniętym lewym klawiszem myszy, w lewo lub prawo obserwując zachowanie się obiektu. Puszczamy klawisz myszy w momencie dotarcia do punktu docelowego obracania obiektu. W czasie obracania kursor przybierze wygląd strzałki, której początek chce dogonić koniec
.

Standardowo obiekt edytowany będzie się obracał wokół swojej osi, której środek wyznacza małe kółeczko. Kółeczko to może być przemieszczane. Aby to zrobić należy najechać na nie kursorem i kliknąć, chwytając jednocześnie przemieszczając je w określone przez nas miejsce.
Kolejny tryb tego narzędzia jest rozszerzanie obiektu lub linii. W tym celu klikamy raz na wypełnienie obiektu, zaznaczone zostanie w tym wypadku tylko wypełnienie.
"Chwytamy" punkt mieszczący się na jednym z boków naszego obiektu i trzymając klawisz
wciśnięty rozciągamy wypełnienie lub zwężamy do wymaganych rozmiarów. Chwytając za narożnik spowodujemy proporcjonalną zmianę rozmiaru obiektu.

Wynik rozciągania wypełnienia.

Kolejny tryb pracy tego narzędzia jest ukośnienie. Zaznaczamy podwójnym kliknięciem obiekt w celu zaznaczenia całego obiektu. W tej opcji kursor zamieni się na moment w dwie przylegające do siebie strzałki skierowane w przeciwne kierunki
. "Chwytamy" bok obiektu i przesuwamy w kierunkach prostopadłych do boku obiektu.

Następny tryb to zniekształcanie obiektu. Podczas pracy w tym trybie zaznaczać musimy z opcji tego narzędzia ikonę zniekształcenia
. Wybieramy jeden z narożników obiektu, kursor zamieni się w grot strzały
.

Ostatni tryb to załączenie obwiedni (envelope)
z opcji tego narzędzia. Zaznaczenie tej opcji spowoduje otoczeni edytowanego obiektu dużą ilością punktów, z których każdy może zostać przez nas edytowy.

Wynikiem tej transformacji jest poniższy rysunek.

Opcje użyte w narzędziu dowolnej transformacji kształtu (free transform tool) dostępne są także w panelu transform.

 

LEKCJA 11

Temat: Segmentacja.

Kolejna lekcja przybliży nam segmentację segmenting i grupowanie grouping obiektów.
Przygotowujemy dwa obiekty (koło i kwadrat) tego samego koloru i przenosimy jeden z nich (kwadrat) nad drugi (koło). Program Flash spowoduje połączenie obu obiektów w jeden z brakiem możliwości ich rozłączenia.

Przygotowujemy dwa obiekty (koło i kwadrat) tego różnego koloru i przenosimy jeden z nich (kwadrat) nad drugi (koło). Spróbujmy teraz odłączyć kwadrat od koła. Dwa odmienne kolory tych obiektów spowoduje, że stanie się możliwe ich rozłączenie. Wynikiem takiego zabiegu będzie jednak wykrojenie części koła na rzecz całego kwadratu.

Inaczej rzecz się dzieje, gdy obiekty poddawane takim operacjom jak przedstawione powyżej będą zgrupowane (obwiednia wraz z wypełnieniem, lub grupa obiektów).
Tworzymy jeden obiekt (kwadrat), na który będziemy nakładać kilka zgrupowanych obiektów. Na początek zaznaczamy narzędziem strzałki grupę obiektów i grupujemy je w jeden przy pomocy opcji z menu Modify->Group.

Zgrupowane obiekty przenosimy nad koło i na powrót chwytamy zabierając je znad koła. Widzimy, że oba obiekty zostają takie jak przed przeniesieniami.
Powyższe dwie operacje przedstawiają rysunki zamieszczone poniżej.

Zgrupowane obiekty możemy edytować jako jeden klikając na nie i otwierając panel właściwości properties. Przy załączonej edycji zgrupowanych obiektów reszta obiektów na obszarze roboczym będzie zaciemniona.

Po zakończonej operacji przemian klikamy poza obręb grupy obiektów, reszta obiektów na obszarze roboczym wróci do "swoich" kolorów.

Wszystkie powyższe lekcje pokazały podstawowe zagadnienia z narzędziami dostępnymi w programie Flash.

 

LEKCJA 12

Temat: Tworzenie linii i krzywych.

 

Tworzenie precyzyjnych linii i krzywych za pomocą narzędzia pióro pen.

W celu utworzenia linii lub krzywej możemy użyć specjalnego narzędzia o nazwie pióro (pen)
. Kursor w czasie używania tego narzędzia zamieni się w małe pióro
.
Klikamy na obszarze roboczym w miejscu, w którym ma zacząć się krzywa. Następnie wybieramy drugi punkt rysowanej linii. Po wyznaczeniu punktu utworzy się prosta "edytowalna", pomocna przy zmienianiu kształtu naszej krzywej. Wynikiem tego będziemy "trzymać" jeden koniec tej prostej do momentu ustalenia kształtu jaki ma przybrać nasza krzywa.

Oto wynik rysowania krzywej narzędziem pen.

Wszystkie ustawienia naszej krzywej są dostępne w panelu właściwości. Ciekawostką jest, że jest możliwość zaznaczenia także wypełnienia. Spowodowane to jest tym, że istnieje możliwość połączenia punktów krzywej i „zamknięcie obiegu” co spowoduje utworzenie obiektu składającego się z obwiedni i wypełnienia.

I wynik utworzenia obiegu zamkniętego.

 

LEKCJA 13

Temat: Tekst.

W programie Flash istnieje możliwość dodania tekstu, który następnie daje się modyfikować na wszelkie możliwe sposoby. Mamy możliwość zmiany czcionki, rozmiaru, stylu, układu liter w dokumencie, a także koloru i orientacji w dokumencie. W czasie pracy z tekstem kursor przybierze wygląd krzyżyka z literką A
.
Wybieramy narzędzie tekst z przybornika i klikamy w wybranym przez nas miejscu na obszarze roboczym w celu rozpoczęcia pisania. Tekst będzie się rozciągał w miarę potrzeb związanych z większą liczbą wpisanych znaków.

Cały tekst będzie się zawierał w jednej linii dopóki nie ustawimy parametrów ramki pisania. Możemy to uczynić poprzez chwycenie narożnika, z małym kółkiem, edytowanego tekstu i ustawimy żądany rozmiar.

Otwierając panel właściwości properties mamy dostęp do wielu modyfikatorów tj.: zmiana czcionki, rozmieszczenie tekstu, zmianę koloru etc.

Możemy formatowć określone grupy tekstów razem. W tym celu zaznaczamy je strzałką (wcześniej wybierając narzędzie strzałki) i z dodatkowym wciśniętym klawiszem SHIFT zaznaczamy interesujące nas grupy tekstowe. Modyfikacja będzie się odnosiła do wszystkich zaznaczonych grup.

Podczas wpisywania tekstu mamy możliwość wybrania trzech trybów: tekstu statycznego static text, dynamicznego dynamic text i wejściowego input text.

Tekst statyczny nie możliwości modyfikowania, tekst dynamiczny jest aktualizowany poprzez serwer i ostatni tryb tekst wejściowy daje możliwość edycji po stronie użytkownika.
Porgram Flash ma unikalną możliwość przekształcania tekstu w krzywe. Aby zmienić tekst na krzywe zaznaczamy dany tekst i wybieramy z menu modify opcję rozbij na części-break apart w wyniku czego każdy element tekstu będzie oddzielną częścią.

Każdy element tekstu zamienionego na krzywe możemy teraz oddzielnie edytować.

Każdy tekst ma możliwość ustawienia także marginesów, poprzez wybranie z panelu właściwości opcji format.

 

 

LEKCJA 14

Temat: Symbole.

W kolejnych trzech lekcjach zapoznamy się z symbolami.
Symbole graficzne (Graphic)
.

Program Flash daje możliwość tworzenia trzech typów utworzonych symboli: symbole graficzne (Graphic), symbole przycisków (Buttons) oraz klipów filmowych (Movie clip).

Tworzenie symbolu graficznego.

Symbole graficzne są takimi symbolami, których zawartość pozostaje statyczna. Zastosowanie ich skupia się przede wszystkim do zamieszczania nieruchomych obrazów w filmach.
Otwieramy nowy dokument i z menu Insert wybieramy opcję wstaw nowy symbol (New symbol). Ukaże się nam poniższe okno z właściwościami przyszłego symbolu.

Zaznaczamy opcję graphic w celu wybrania symbolu graficznego i zmieniamy nazwę w okienku name na "sym graficzny". Pod tą nazwą symbol będzie teraz widniał w bibliotece Flasha. Po potwierdzeniu kliknięciem przycisku OK, okno zostaje zamknięte i pojawia się okno edycji symbolu. Program przełączył się teraz w tryb edycji symbolu, o czym świadczy informująca nas belka nad obszarem roboczym.

przy tworzeniu symboli lub przy konwertowaniu ich do symboli możemy tego dokonać jedynie w trybie edycji symbolu edit symbol. Na środku obszaru roboczego znajduje się mały krzyżyk, tak zwany punkt pasowania registration point, który definiuje środek tworzącego się właśnie symbolu. Jeśli zdarzyłoby się kliknąć na napis "scene1", przełączający do trybu normalnego, spowoduje to że nasz symbol zniknie. Znaleźć możemy go w bibliotece wybierająć menu Window->Library.

Klikając dwukrotnie na nazwę symbolu powrócimy do edycji naszego symbolu. Następnie wybieramy narzędzie tekst z przybornika. Ustawiamy opcje tekstu w panelu właściwości i klikając w obrębie obszaru roboczego wpisujemy dowolny tekst. Wybieramy narzędzie strzałkę Arrow tool powodująca automatyczne zaznaczenie tekstu.

Klikamy na panel informacji info i widzimy osie x i y, które informują nas jak daleko znajduje się nasz symbol od środka ekranu, czyli dokłądniej mówiąc punktu pasowania.

klikamy na mały kwadracik pośrodku siatki podświetlony na biało i zmieniamy ustawienia osi x i y na 0, każdorazowo potwierdzając wpis klawiszem ENTER. Wynikiem tego będzie wyśrodkowanie tekstu względem punktu pasowania.

Powracamy do trybu normalnego (klikamy na zakładkę "scene1"). Zastosowanie panelu biblioteki jest podobne do przeglądarki plików graficznych. Możemy dodawać
i usuwać niepotrzebne symbole (po zaznaczeniu danego symbolu klikamy na mały śmietnik
). Mamy możliwość dodania folderu
, a także zmianę właściwości symbolu
.

W celu umieszczenia symbolu na scene chwytamy go w panelu biblioteki i przeciągamy na obszar roboczy. Tworzymy na scenie klony-kopie naszego głównego symbolu. Ciekawostką jest fakt, iż plik końcowy będzie miał wielkość tylko jednego obiektu, a nie trzech, co wynika z tego, że klony te tak naprawdę są tylko określeniem współrzędnych, w których Flash ma umieścić kopię głównego obiektu. Modyfikacja obiektu-symbolu w bibliotece spowoduje modyfikację wszystkich jego kopii w dokumencie.
W celu modyfikacji klikamy podwójnie na symbol w bibliotece i wykorzystując już znane właściwości z poprzednich lekcji modyfikujemy symbol.

 

 

LEKCJA 15

Temat: Tworzenie symboli typu przycisk (Button).

 

Przyciski są bardzo ważnym elementem stron internetowych i stanowią kluczowy składnik sprawnie działającego systemy nawigacyjnego lub menu zamieszczonego na stronie internetowej. Odwiedzając setki stron internetowych nie zauważamy przycisków nawigacyjnych, jednakże co stałoby się gdyby ich nie było?
Tworzymy nowy symbol i zaznaczamy opcję przycisku button w ramce właściwości.

O tym, że obiekt został symbolem mogą świadczyć trzy fakty: czworobok z zaokrąglonymi rogami otoczony jest ramką, która identyfikuje symbol; pojawił się nowy symbol w bibliotece; w chwili wywołania okna edycyjnego możemy stwierdzić, że kursor po najechaniu nad nasz symbol zamienił się w małą rączkę

Symbol przez nas tworzony zamieniony został w kopię, a główny symbol przeniesiony został do biblioteki. Jednakże zmieniło się coś jeszcze. Inaczej wygląda listwa czasu animacji timeline.

Listwa czasowa animacji każdego symbolu, typu przycisk, obejmuje tylko cztery ujęcia. Każde z tych ujęć steruje innym etapem w zachowaniu się przycisku. Są to: normalne położenie (up), gdy najeżdżamy nad niego kursorem (over), gdy naciśniemy nań kursorem (down), stan specjalny reagujący na kliknięcie użytkownika (hit). Wszystkie te ujęcia nazywane są stanami przycisku.
Program Flash automatycznie, po tym jak zdefiniujemy symbol w tryb przycisku button, utworzy pierwszy stan up. Aby nasz przycisk stał się interaktywny musimy przekonwertować kolejne stany do ujęć kluczowych. Poinformujemy tym sposobem program o sposobie zachowania przycisku.
Tworzymy ujęcia kluczowe na kolejnych stanach poprzez klikniecie na linię czasową danego stanu i z menu podręcznego wybranie insert keyframe wstaw ujęcie kluczowe.

Przesuwamy się nad ujęcie over i klikamy na linię czasową tego stanu przycisku. Automatycznie zostanie zaznaczony przycisk, gotowy do edycji. Zmieniamy kolory przycisku według uznania.

Podobnie postępujemy ze stanem down. Klikamy na listwę czasową tego stanu i zmieniamy także według naszego uznania kolory przycisku. Będzie on tak wyglądać w momencie kliknięcia na niego.

Stan hit naszego przycisku pozostawimy na razie bez zmian. W tym momencie możemy przetestować nasze dzieło wybierając polecenie test movie z menu control (lub wciskając kombinację klawiszy CTRL+ENTER).

Zamykamy okno animacji poleceniem close z menu file i powracamy do okna edycji.
Domyślnie program Flash ustawia wygląd przycisku w stanie hit na podstawie zawartości z poprzedniego ujęcia. Klikamy na listwie czasowej ujęcia hit i przy użyciu narzędzia prostokąt rectangle rysujemy wokół naszego przycisku prostokąt o dowolnym kolorze, który przysłoni nasz przycisk. Nie musimy się martwić o to, że nasz ostatni prostokąt zakrywa przycisk. W programie Flash jest on niewidoczny, a dokładniej określa on pole aktywacji naszego przycisku.

Możemy przetestować teraz jeszcze raz naszą animację. Zauważmy, że "rączka" pokazuje się wcześniej, zanim jeszcze dojedziemy do przycisku. Jest to wynikiem tego właśnie zabiegu, który wykonaliśmy przed momentem z narysowanym prostokątem zakrywającym nasz przycisk.

Aby nasz przycisk był interaktywny, musimy po skończeniu tworzenia przycisku wybrać z menu edit/edit document.
Spowodujemy teraz, że nasz przycisk przeniesie nas do klatki, o wybranym numerze, do której chcemy przejść w czasie trwania animacji. Jeśli panel akcji actions jest zamknięty klikamy na przycisk prawym przyciskiem myszy i wybieramy opcję actions. Następnie klikamy na książeczkę actions, dalej movie control i wybieramy goto.

Sprawdzamy jeszcze tylko, czy zaznaczona jest opcja go to and play i mamy już możliwość przeniesienia naszej animacji podczas oglądania do klatki 13.
Umieszczamy teraz animację na oddzielnej warstwie, w warstwie z naszym przyciskiem umieszczamy taką samą ilość klatek. I pozostaje nam już tylko sprawdzić nasz przycisk podczas trwania animacji (ctrl+ENTER).

 

 

LEKCJA 16

Temat: Tworzenie symboli typu - Movie Clip.

Otwieramy nowy dokument i wybierając narzędzie kwadrat, tworzymy go, następnie konwertujemy do symbolu (zaznaczamy go całego i klikając na niego prawym przyciskiem myszy wybieramy z menu podręcznego - convert to symbol) w trybie movie clip o nazwie "kwadrat film".

Klikamy teraz podwójnie na nasz kwadrat i znajdujemy się w edycji klipu filmowego. Tworzymy w klatce 25 listwy czasowej ujęcie kluczowe (klikamy na listwie na tą klatkę i wciskamy klawisz F6). Utworzyliśmy w ten sposób dwa ujęcia o odmiennej zawartości. Wypełniając w ten sposób ujęcia pomiędzy naszymi kluczowymi ujęciami stworzymy animację. Następnie klikamy poza obszar kwadratu i modyfikujemy go np.: narzędziem strzałki.

Klikamy na listwę czasową i w ustawieniach (panel właściwości) w opcji tweening wybieramy tryb kształtu shape. W okienku frame wpisujemy nazwę naszej animacji "kwadrat".

W wyniku tego zabiegu zmieni się listwa czasowa animacji.

Możemy teraz przetestować nasz symbol (CTRL+ENTER) w teście animacji, w obszarze roboczym (ENTER) lub też w bibliotece. Klikając na nasz clip możemy zauważyć dodatkowe dwa przyciski w prawym górnym rogu okna podglądu symbolu służące do odtwarzania animowanego symbolu.
Istnieje oczywiście możliwość edycji kolorów obwiedni i wypełnienia, rozmiaru, obrotu etc.

 

LEKCJA 17

Temat: Warstwy.

W tej lekcji przedstawione zostaną warstwy.

Warstwy umożliwiają tworzenie głębi obrazu. Dzięki nim możemy rozdzielać obiekty oraz fragmenty animacji, które mogłyby pomieszać się podczas jej tworzenia. Każdy element klipu animacji flasha może być umieszczony na oddzielnej warstwie, co bardzo ułatwia edycję. Każda warstwa działa niezależnie od innych.
Przypuśćmy, że naszym zadaniem jest stworzenie animacji jadącego autostradą samochodu (pokazanego z boku). Każdą część tego filmiku możemy zamieścić na oddzielnej warstwie począwszy od horyzontu, poprzez barierki ustawione wzdłuż drogi, przemieszczające się słońce i ptaki, po nasz samochód. W wyniku takiej operacji możemy bez problemu przełączyć się na warstwę z ptakami i edytować ją bez uszczerbku dla innych elementów naszego filmu.
W programie Flash warstwy są wymienione po lewej stronie listwy czasowej. Poniższy przykład ukazuje widok listwy czasowej z dwoma warstwami, z czego "Layer 1" jest warstwą aktywną. Oznacza to, że jest ona gotowa do edycji. Możemy to stwierdzić po tym, iż znajduje się na niej mały ołówek.

Klikamy na przycisk dodania nowej warstwy (insert layer)
i widzimy, że Flash automatycznie umieścił nową warstwę powyżej tej ostatnio edytowanej. Dodatkowo możemy stwierdzić, iż samoczynnie także ustawił ilość klatek dopasowując do poprzedniej warstwy.

Każda warstwa może być usunięta poprzez zaznaczenie jej i kliknięcie na przycisk małego kosza na śmieci
. Dodając następną warstwę Flash będzie nadawał jej nazwę kolejną, licząc także te warstwy, które zostały usunięte, np.: mamy na linii czasowej trzy warstwy, gdy dodamy następną będzie ona miała numer czwarty "Layer 4", jednakże gdy usuniemy warstwę "Layer 3" oraz "Layer 4", następna utworzona powinna nazywać się "Layer 3", ale tak się nie stanie. Kolejna warstwa będzie nazywać się "Layer 5". Cała zabawa z kasowaniem warstw i dodawaniem może trochę przysporzyć kłopotu. Wyjściem z tego może być możliwość jaką jednak maja warstwy, mianowicie edycja ich nazw. Aby to zrobić klikamy podwójnie na nazwę warstwy "Layer 1", co pozwoli na zmianę jej nazwy i wpisujemy nową.

Na warstwie drugiej utworzymy małe kółko, a więc możemy już zmienić także jej nazwę. Zanim jednak zaczniemy rysować przesuwamy się na koniec linii czasowej. Tworzymy małe kółko na warstwie "kółko" zaznaczonej do edycji modyfikujemy je według naszego uznania. Spoglądając na listwę czasową możemy stwierdzić, że automatycznie zostało utworzone ujęcie kluczowe w klatce 1 warstwy "kółko", pozostałe jej ujęcia zostały zapełnione kółkami. Jeśli chcielibyśmy wstawić kółko tylko do 15 klatki, musielibyśmy wstawić jedynie w niej ujęcie kluczowe. W przedstawiony powyżej sposób sprawiliśmy, że kółko będzie widoczne przez całą animację.
Warstwa, która znajduje się wyżej jest bliżej użytkownika ją oglądającego. Nasze kółko znajduje się na kwadracie i jest widoczne od początku do końca animacji. Aby zmienić wyświetlanie wystarczy tylko "przenieść" daną warstwę poniżej innej, która ma być wyświetlana "bliżej" użytkownika. Klikając na wybraną warstwę przenosimy ją trzymając cały czas wciśnięty lewy klawisz myszy do momentu ustawienia określonej lokalizacji. W identyfikacji położenia może być pomocny szary pasek pokazujący się podczas tej operacji.

Widok po przeniesieniu warstwy "kwadrat" ponad warstwę "kółko".

Kolejny rysunek przedstawia animację podczas przemian znajdującą się w 15 klatce.

 

LEKCJA 18

Temat: Operowanie warstwami.

 

Warstwy posiadają możliwość pracy w trzech trybach. Domyślnie są one nieaktywne, ale szybko przekonamy się o ich znaczeniu w środowisku Flasha. Tryby pracy warstwy reprezentowane są w postaci dwóch kropek i kwadracika, znajdujących się po prawej stronie nazwy. Pierwsza kolumna umożliwia wyświetlanie i ukrywanie warstw
. Kolejna jest odpowiedzialna za ich blokowanie i odblokowanie
. Ostatnia służy do załączania widoku zarysów obiektów na warstwach
.
Kliknięcie na ikonie
spowoduje ukrycie wszystkich warstw. Natomiast kliknięcie na kropce znajdującej się w kolumnie pod tą ikoną spowoduje ukrycie warstwy, na wysokości której zaznaczona została kropka. W momencie ukrycia warstwy kropka oznaczająca tryb będzie ukryta pod krzyżykiem. W taki sam sposób działa tryb zamykania warstwy do edycji. Mamy możliwość zamknięcia wszystkich warstw poprzez kliknięcie na kłódkę
, lub kliknięcie na kropkę reprezentującą daną warstwę w tym trybie. Zainicjowanie ostatniego trybu (kliknięcie na ikonę
) ukazuje wszystkie obiekty na wszystkich warstwach w obrysie. Tak jak poprzednio klikając na mały kwadracik przy danej warstwie ukazuje się nam tylko obrys obiektów na warstwie, na której zaznaczyliśmy ten tryb.
Poniższy rysunek ukazuje niewidoczną warstwę "kółko", zablokowanie wszystkich warstw do edycji oraz obrys obiektu na warstwie "kwadrat", co można stwierdzić po małym pustym kwadraciku.

 

LEKCJA 19

Temat: Tworzenie animacji.

W programie Flash mamy możliwość stworzenia dwóch rodzaji animacji. Animacji "klatka po klatce" oraz animacji uzupełnianej. W pierwszej możliwości "klatka po klatce" animację tworzymy wstawiając w każdej klatce obiekt. Kolejne ujęcie różni się delikatnie od poprzedzającego je. W animacji uzupełnianej jak sama nazwa wskazuje uzupełnane są wszystkie ujęcia pomiędzy tymi, które są zdefiniowane przez użytkownika jako ujęcia kluczowe. Program Flash ma możliwość zmiany koloru, obrotu, rozmiaru, a także innych atrybutów animacji występujących pomiędzy startem, a końcem pojawiającego się ruchu.
W tej lekcji poznamy animowanie metodą uzupełniania, dającą możliwość kreowania ruchu i zamiany go w klip filmowy przy minimalnym rozmiarze pliku i przy niewielkim nakładzie pracy.

Ujęcie kluczowe jest specyficznym ujęciem informującym program o tym, że w danym miejscu zachodzi zmiana, bądź to przycisku lub animacji. Podczas tworzenia klipu w tej animacji , tworzymy jedynie miejsca kluczowe dla naszej animacji, natomiast resztę "roboty"
zlecamy programowi Flash. Ujęcie nie zawierające grafiki uznawane jest jako czyste. Poniższy rysunek przedstawia na warstwie "Layer 1" pełne ujęcie kluczowe, na warstwie "Layer 2" puste ujęcie kluczowe oraz na trzeciej warstwie "Layer 3" brak ujęć kluczowych.

Przy tworzeniu animacji we Flashu musimy pamiętać, aby obiekty które chcemy animować były zgrupowane (np.: w kwadracie obwiednia i wypełnienie musi stanowić jedność) lub były przekonwertowane w symbole.
Tworzymy więc obiekt, zaznaczamy narzędziem arrow całość obiektu i grupujemy go poleceniem group z menu modify. Umieszczamy obiekt w miejscu rozpoczęcia jego animacji.

Następnie klikamy prawym przyciskiem myszy na linię czasową klatki 20 i z menu podręcznego wybieramy insert keyframe dodaj ujęcie kluczowe. Przesuwamy nasz obiekt w miejsce docelowe i klikając prawym przyciskiem myszy na listwę czasową w przedziale klatek od 2 do 19 wybieramy z menu podręcznego opcję create motion tween utwórz uzupełnianie ruchu.

W celu sprawdzenia animacji używamy klawisza: ENTER-aby zobaczyć animację na obszarze roboczym; CTRLl+ENTER-aby zobaczyć ją w oknie testowym.
Tak samo jak przy tworzeniu symbolu movie clip mamy możilowść edytowania obiektu na wszystkie możliwe sposoby. Począwszy od zmiany koloru wypełnienia i obwiedni, przez zmianę rozmiaru, rotację, po rozciąganie i przeistaczanie w całkowicie inny obiekt. Nie martwiąc się o nic możemy bez obawy modyfikować obiekt, który zostanie automatycznie zmieniony w wyniku transformacji, którą zrobi za nas program Flash.
Na linii czasowej animacji widać podstawowe informacje na temat naszego klipu: pozycja w której klatce się teraz znajdujemy current frame, ilość wyświetlanych klatek na sekundę frame rate oraz czas trwania animacji elipsed time.

Nasza animacja jest już gotowa. Możemy ją więc ekspotrować do określonych formatów, które dostępne są po wybraniu z menu File->Export to movie eksportuj do klipu.

 

 

LEKCJA 20

Temat: Tworzenie animacji z użyciem ścieżki.

W programie Flash istniej także możliwość przemnieszczania obiektów po ścieżce wyznaczającej drogę.
Przed załączeniem narzędzia do tworzenia obiektu, warto włączyć opcję snap przyciąganie. Będzie ona pomocna przy łączeniu ścieżki z obiektem.
Tworzymy obiekt i grupujemy (ctrl+G). Klikając podwójnie na nazwę warstwy z naszym obiektem zmieniamy nazwę na "ball"-piłka. W klatce 25 tworzymy ujęcie kluczowe insert keyframe z menu podręcznego lub z menu Insert->Keyframe. Następnie z menu insert wybieramy opcję motion guide, czego wynikiem będzie powstanie nowej warstwy typu guide przewodniej, służącej do tworzenia animacji po ścieżce. Warstwa z naszym obiektem przyjmie tryb pracy guided przewodzonej, służącej do zamieszczania obiektów poruszających się po ścieżce.

Przechodzimy do warstwy "Guide:ball" i wybierając narzędzie line tool linia rysujemy linię. Kolor i grubość nie ma znaczenia, ponieważ ścieżka nie będzie wyświetlana podczas animacji. Klikamy na listwę czasową warstwy "ball" 1 klatka i po podwójnym kliknięciu na obiekt (celem jego zaznaczenia) przenosimy go na początek naszej ścieżki. Właśnie w tym momencie pomocnym okaże się załączona opcja snap, która spowoduje, że nasz obiekt zostanie pzyciągnięty do początku ścieżki, gdy zbliżymy się do niego wystarczająco blisko. Oznaką tego będzie dodatkowe małe kółko przy kursorze

Pozostaje już tylko połączyć oba punkty, klikając prawym przyciskiem myszy na listwie czasowej warstwy "ball" pomiędzy klatkami 2, a 24 i wybierając opcję create motion tween uzupełnij animację. Nasz klip jest gotowy.
Wygląd naszej listwy i obszaru roboczego w klatce 15 przedstawia rysunek poniżej.

---