1.

Co można ciekawego zrobić we Flashu

www.neostream.com
www.beksinski.pl
www.triumph.pl
www.reserved.pl
www.progressivo.pl/htm/portfolio.php
www.miniclip.com

2. Rysowanie i transformacje we Flashu

Macromedia Flash jest programem do grafiki wektorowej, udostępniającym możliwość

programowania zmian tej grafiki w czasie (animowania grafiki). Jako program wektorowy
każdy kształt w nim utworzony jest składa się z konturu (zapisany za pomocą krzywych) i
wypełnienia jeśli kontur jest zamknięty. Rysowanie odbywa się na scenie (biały obszar po
środku) i na obszarze peryferyjnym (szary obszar na około obszaru białego).
UWAGA: obiekty lub ich fragmenty, które znajdują się na obszarze białym będą widoczne w
końcowej animacji. Jeśli obiekt lub jego część znajduje się na obszarze szarym to nie będzie
widoczny w końcowej animacji.
Wskazówka: jeśli stworzymy animację obiektu który przemieści się z obszaru szarego do
obszaru białego, to na stronie internetowej użytkownik będzie miał wrażenie, że obiekt
wjechał spoza sceny.

Rysowanie ołówkiem
To narzędzie może być używane do rysowania linii lub kształtów tak jak prawdziwy ołówek.
Właściwości rysowania ustawiamy w panelu properties.

Zaletami rysowania we Flashu jest fakt, że narysowana krzywa może być wygładzona, lub
przybliżona odcinkami prostymi w zależności od wybranej opcji. Straighten przybliża
odcinkami prostymi, Smooth wygładza, Ink nie modyfikuje linii.

Istnieje możliwość modyfikowania kształtu linii lub jej węzłów za pomocą białej strzałki
lub po zaznaczeniu czarną strzałką za pomocą dostępnych opcji: smooth i
straighten

Rysując linię we Flashu, jest ona automatycznie dzielona na kawałki. Każdy z kawałków
można selekcjonować, przekształcać lub przemieszczać indywidualnie. Dodatkowo linia,
która jest rysowana tak, że przecina inną linię lub wypełnienie działa jak nóż dzieląc tę linię
lub kształt na dwie osobne części.

Wskazówka: rysując linię lub przesuwając obiekt, jeśli wciśniemy klawisz „SHIFT”
uzyskamy ruch horyzontalny lub wertykalny
Wskazówka: aby zapobiec niszczeniu dopieszczonych kształtów przez inne kształty bądź linie
należy je umieszczać na osobnych warstwach, lub grupować.

Ćwiczenie1:
Narysuj pętlę wykorzystując opcje smooth, straighten i ink, a następnie za pomocą czarnej
strzałki zaznacz poszczególne jej elementy. Zobacz jak modyfikować węzły linii za pomocą
białej strzałki. Zaznacz czarną strzałką element pętli i zacznij ją modyfikować opcją smooth i
straighten.

Rysowanie linii, prostokątów i owali

Rysowanie powyższych kształtów odbywa się analogicznie jak ołówkiem, z tą różnicą, że za
pomocą myszy wyznacza się obrys kształtu. Flash automatycznie wypełnia owale i prostokąty
bieżącym kolorem wypełnienia. Właściwości tych kształtów mogą być ustalane przed
rysowaniem w panelu properties każdego z narzędzi.

Rysowanie prostokąta ma jeszcze jedną opcję która umożliwia zaokrąglanie jego narożników.

Aby rysować linię, owal lub prostokąt najpierw wybierz dane narzędzie, następnie ustaw jego
właściwości i narysuj kształt w obszarze roboczym.

Wskazówka: Chcąc narysować okrąg lub kwadrat należy przytrzymać podczas rysowania
klawisz SHIFT.
Wskazówka: Rysując prostokąt można automatycznie uzyskiwać zaokrąglone rogi, jeśli
podczas rysowania przytrzymamy klawisze strzałek UP lub DOWN.
Wskazówka: Podczas rysowania linii, jeśli przytrzymamy klawisz SHIFT to będziemy
rysowali linię nachyloną pod kątem 45 stopni.
Ćwiczenie 2:
Narysuj prostokąt z zaokrąglonymi rogami i doskonały okrąg tak jak na rysunku. Następnie
zaznacz za pomocą czarnej strzałki wystającą część prostokąta i odsuń ją w lewo. Następnie
zmień na przeciwne kolory wypełnienia koła i prostokąta.

Używanie narzędzia pędzel

To narzędzie służy do wprowadzania pociągnięć pędzla zgodnie z właściwościami

ustawionymi w okienku właściwości:
Pierwsza opcja decyduje w jakim obszarze można malować

Paint Normal – maluje ponad kształtami i wypełnieniami w tej samej warstwie.

Paint Behind – maluje w wolnych przestrzeniach sceny pozostawiając istniejące kształty i
wypełnienia nie naruszone.
Paint Fills – zamalowuje wypełnienia pozostawiając kształty nienaruszone.
Paint Selection – zamalowuje wyselekcjonowane wypełnienia.
Paint Inside – zamalowuje wypełnienie, od którego zostało rozpoczęte zamalowywanie ale
nie zamalowuje linii.

Pozostałe opcje pozwalają zdecydować o rozmiarze i kształcie pędzla.

Wskazówka: Chcąc rysować poziome lub pionowe pociągnięcia pędzla należy przytrzymać
klawisz SHIFT.

Warstwy:

Kształty we Flashu można rysować na warstwach:

Kilka obiektów może znajdować się na jednej warstwie (wtedy mogą się wzajemnie
zniekształcać) lub znajdować się na warstwach osobnych (zalecane). Każda warstwa ma
swoją ścieżkę czasową, w której będziemy definiowali animację obiektów dla
poszczególnych warstw.

Kolejność warstw ma wpływ na kolejność wyświetlania obiektów. Czym warstwa znajduje

się wyżej w hierarchii tym obiekty na niej się znajdujące wyświetlane są bliżej obserwatora.
Warstwy dodajemy przyciskając ikonę a kasujemy przyciskając . Kolejność warstw
zmieniamy metodą DRAG AND DROP. Można zmienić nazwę warstwy poprze podwójne
kliknięcie napisu „Layer„.

Wskazówka: zaleca się umieszczanie różnych obiektów na różnych warstwach i gromadzenie

ich tematycznie w warstwach typu katalog

Dla obiektów na każdej warstwie można ustawiać właściwości :

Widoczności – czy obiekty na danej warstwie mają być widoczne
Blokady – czy obiekty można zmieniać czy są zablokowane
Obrysu – czy dla obiektów danej warstwy ma być rysowane wypełnienie czy tylko kontur

Ćwiczenie 3:
Proszę narysować ciężarówkę z kołami i szoferką oraz napisem „PIECZYWO” na skrzyni.
Następnie w dwóch innych warstwach proszę narysować drzewa, z których część będzie
znajdowała się przed ciężarówką a część za (kolejność warstw).

Transformacje we Flashu

Transformacje we Flashu można wykonywać za pomocą narzędzia free transform . Po

zaznaczeniu obiektu, który chcemy transformować i wybraniu narzędzia free transform
można dokonać różnych transformacji w zależności od położenia myszki, w którym
zainicjujemy transformację. Kursor myszy należy zbliżyć do czarnych kwadracików leżących
na obwiedni prostokąta otaczającego wyselekcjonowany obiekt.

Dodatkowo narzędzie free transform ma swoje opcje, które można wybrać indywidualnie.

Rotate and skew – obraca i pochyla obiekt

Scale – skaluje obiekt
Distort – modyfikuje przez czworokątną obwiednię
Envelope – pozwala modyfikować ściany obwiedni aby były krzywymi

Ćwiczenie 4:
Proszę zmodyfikować utworzoną w ćwiczeniu 3 ciężarówkę zmieniając jej proporcje.
Podobne modyfikacje proszę dokonać dla drzew aby je możliwie zróżnicować.

Ścieżka czasowa:

Dla każdej warstwy istnieje ścieżka czasowa, dzięki której można definiować animacje
obiektów w nich zawartych. Klatki w ścieżce czasowej są ponumerowane co 5.

Animacja tworzona jest na bazie klatek kluczowych. Klatki kluczowe to kluczowe zestawy
wartości
cech obiektów. Cechą obiektu może być jego pozycja, kolor, przezroczystość lub kształt.
Klatka kluczowa jest symbolizowana na ścieżce czasowej przez kółko . Jeśli to kółko jest
puste to oznacza, że dana klatka kluczowa nie zawiera żadnego zestawu cech kluczowych.
Jeśli kółko jest zapełnione to oznacza, że dana klatka kluczowa ma przypisany pewien
zestaw kluczowych cech. Pomiędzy klatkami kluczowymi są tak zwane klatki normalne.
Klatki normalne nie podlegają edycji przez użytkownika.

Tempo odtwarzania animacji jest uzależnione od ilości klatek na sekundę (fps) ustawionych
w panelu properties

i ilości klatek na przestrzeni których odbywa się animacja (na poniższym rysunku animacja
trwa 24 klatki z tempem odtwarzania 12 klatek na sekundę co daje 2 sekundy filmu).

Tworzenie animacji pozycji:

W pierwszej klatce kluczowej narysuj dowolny okrąg (po utworzeniu projektu taka klatka jest
domyślnie tworzona).

Następnie klikając prawym klawiszem myszy na klatce 24 wybierz opcję insert key frame.

Ścieżka czasowa powinna wyglądać następująco:

Złap za okrąg i przesuń go w prawą stronę. Ustawiamy w ten sposób nową kluczową wartość
pozycji obiektu w klatce 24. Kluczowe wartości mogą dotyczyć zarówno pozycji jak i rotacji
obiektu.

Zaznacz wciskając lewy klawisz myszy wszystkie klatki animacji. Zaznaczamy w ten sposób
obszar klatek jest zakresem na przestrzeni którego będzie odbywała się animacja.

Kliknij prawym klawiszem na czarnym zaznaczonym obszarze i wybierz opcję Create Motion
Tween. Zlecamy w ten sposób Flashowi stworzenie 24 klatkowej animacji pozycji, która
będzie przemieszczała kółko z lewej strony sceny na prawą stronę. Przy tempie odtwarzania
12 fps animacja będzie trwała 2 sekundy.

Ścieżka czasowa powinna wyglądać następująco.

Aby przetestować animację można złapać lewym klawiszem myszy czerwoną głowicę i
przesunąć wzdłuż ścieżki czasowej, lub wcisnąć klawisz ENTER.

Dany plik można zapisać z rozszerzeniem .fla. Taki plik jest plikiem projektowym i zajmuje
dużo miejsca.
W sieci Internet umieszcza się pliki skompresowane i zapisane z rozszerzeniem .swf
(shockwave). Aby wygenerować plik z rozszerzeniem .swf należy z menu File(Plik) wybrać
opcję Publish (skrót Ctrl+Enter).
Publikowanie shckwave-a odbywa się zgodnie z opcjami ustawionymi w File->Publish
Settings. Plik z rozszerzeniem .swf tworzony jest w tej samej lokalizacji, w której zapisany
jest plik z rozszerzeniem .fla.
Wybierając opcję z menu tworzony jest dodatkowo plik z rozszerzeniem .html, w którym
osadzony jest plik shockwave-a.
Uwaga: domyślnie animacja będzie wykonywana nieskończoną liczbę razy.

Ćwiczenie 5:
a) Proszę wykonać animację przemieszczającego się po scenie okręgu
b) Proszę wykonać animację obracającego się kwadratu
c) Proszę stworzyć animację ciężarówki skonstruowanej w ramach ćwiczenia 3 i 4. Tak aby
przejeżdżała z lewej strony sceny na jej prawą stronę.