Flash jako narzędzie do tworzenia pomocy dydaktycznych.

Flash jako narzędzie do tworzenia pomocy dydaktycznych.
Ze względu na łatwość tworzenia interaktywnych animacji i udostępniania ich na stronach
WWW technologia Flash jest często wykorzystywana do tworzenia pomocy dydaktycznych.
Poniżej podanych jest kilka odnośników do miejsc w sieci, w których takie animacje są
udostęnione:
1. Dużo animacji można znaleźć na stronach Wydawnictw Szkolnych i Pedagogicznych:
http://www.wsipnet.pl/edukacja/index.html?did=1. W szczególności na stonie
http://www.wsipnet.pl/kluby/angielski.html?k=612&k2=898 są udostępnione
materiały do nauki angielskiego, a strony
http://www.wsipnet.pl//oip/matematyka/algebra/rownania/img/flash.htm i
http://www.wsipnet.pl//oip/matematyka/algebra/procenty/img/flash.htm zawierają
matriały do nauki matematyki;
2. Animacje do nauki fizyki można znaleźć na stronie http://cmf.p.lodz.pl/mpfiz/efiz/
3. Strona http://www.abdn.ac.uk/~clt003/virtual_animals_project/ zawiera animację
poświęconą różnym gatunkom ryb, do wykorzystania w nauce biologii.
4. Kilka animacji dotyczących różnych dziedzin wiedzy można znaleźć na stronie
http://www.londonmet.ac.uk/tltc/multimedia/multimedia_home.cfm
Zaawansowane animacje wymagają wykorzystania języka ActionScript – dodawanie
skryptów do animacji znacznie zwiększa jej możliwości. W trakcie zajęć zrobimy trzy
przykłady animacji.
Przykład 1: Pomoc do nauki historii.
A) Ustaw rozmiar animacji 400 x 300. Utwórz matrycę zawierającą miniatury portretów
królów Polski wraz z datami panowania oraz, zrobioną z prostokątów „oś czasu” (patrz
rysunek poniżej). Pionowy prostokąt rozdzielający daty umieść na ramce raz i powiel go
(Edycja->Powiel). Zamiast królów z dynastii Jagiellonów możesz wykorzystać zdjęcia
swoich ulubionych królów/prezydentów/premierów/postaci. Zdjęcia i daty zaczerpnij z
Wikipediii. Uwaga: Wikipedia jest bardzo dobrym i bogatym lecz czasami niestety
niewiarygodnym żródłem informacji. Bardzo wygodnie jest zaczynać
poszukiwanie wiedzy od Wikipedii ale wszystkie informacje zaczerpnięte z niej
należy weryfikować w innych źródłach.
1
B) Utwórz, oprócz matrycy pięć ramek. Do każdej z ramek zastosuj utworzoną matrycę.
Dla pierwszej ramki ustaw czas 1 sekunda, zaś dla pozostałych czas Stop.
C) Pierwsza z ramek będzie ramką tytyłową. Umieść na niej napis, do którego dodaj
animację intro.
D) Każda z kolejnych czterech ramek będzie poświęcona każdej z czterech postaci. Utwórz
je według schematu jak poniżej: powiększony wizerunek postaci i tekst. Zamiast dat
możesz umieścić w tekście inne szczegółowe informacje o postaci. Zaczerpnij je z
Wikipedii. Do wizerunku postaci dodaj jako animację intro efekt tween. W tym celu dla
dużego wizerunku postaci wybierz z menu kontekstowego Intro->Tween i wybierz z listy
odpowiedni obiekt na ramce Master Frame. Możesz też sklonować małe obrazki z Ramki
Master na ramki Frame1,...,Frame4 wybierając przy tym opcję Efekt Tween. Obrazki
powiększ.
W utworzonej animacji każda z czterech ramek ładuje się po najechaniu na odpowiednie
zdjęcie.
Uwaga: „Oś czasu” umieszczona w animacji nie przesuwa się. Aby stworzyć przewijającą
się oś należałoby wykorzystać ActionScript.
2
Przykład 2: Prosty quiz z matematyki.
A) Utwórz animację składającą się z pięciu ramek o rozmiarze 300x300. Dla wszystkich
ramek poza pierwszą ustaw czas Stop. Dla pierwszej ramki ustaw czas 1 sekunda.
B) Pierwsza ramka powinna być ramką powitalną. Umieść na niej tekst wskazujący na
tematykę quizu. W przytoczonym przykładzie jest to quiz z matematyki, jednak w swoim
zadaniu wybierz tematykę, która jest Tobie najbliższa. Na ramce umieść znaleziony w
Wikipedii/google obrazek związany z tematyką quizu. Upewnij się, że nie łamiesz w ten
sposób żadnych praw autorskich.
C) Na dwóch kolejnych ramkach umieść pytania z quizu. Powinien to być test
jednokrotnego wyboru (test wielokrotnego wyboru wymaga niestety zastosowania
ActionScript!). Obok każdej z odpowiedzi umieść mały kwadrat. Dla wszystkich tych
kwadratów ustaw kolor najechania (na przykład czerwony). Poniższy przykład zawiera
pytania z matematyki, ale wymyśl pytania z wybranej przez Ciebie dziedziny.
3
D) Dwie ostatnie ramki to ramki związane z błędną odpowiedzią i wszystkimi
odpowiedziami prawidłowymi. Utwórz je według wzoru jak poniżej. Dodaj do obiektów
animacje
intro
i/lub
dżwięki.
Dźwięki
znajdziesz
dzięki
stronie
http://www.findsounds.com/types.html. Na ramce „Błąd” umieść opcję pozwalającą na
rozpoczęcie quizu od początku. Przykładowe rozwiązanie na rysunku poniżej: w animacji
dla szarego prostokąta ustawiono jako akcję kliknięcia skok do ramki 1 oraz kolor
najechania czerwony.
E) Na ramkach z pytaniami dodaj akcje kliknięcia do kwadratów umieszczonych obok
pytań. Dla nieprawidłowych odpowiedzi animacja powinna przeskakiwać do ramki „Błąd”,
zaś dla prawidłowych: przy pytaniu 1 do ramki z pytaniem 2, zaś przy pytaniu 2 do ramki z
gratulacjami.
Uwaga: Zrobienie quizu, który ilość poprawnych i błędnych odpowiedzi pokazuje dopiero
po zakończeniu wymaga ActionScript. Należy to zrobić w opisany poniżej sposób:
i) dla ramki „Frame 1” - tytułowej dodać ActionScript ramki (Ramka->Kod
ActionScript):
i:=0;
ii) dla ramki „Frame 2” dla akcji klikania przy odpowiedziach należy wybrać zamiast
skoku do kolejnej ramki opcję ActionScript i wpisać:
dla niepoprawnej odpowiedzi
gotoAndStop("Frame 3");
dla poprawnej odpowiedzi:
i = i + 1;
gotoAndStop("Frame 3");
iii) dla ramki „Frame 3” analogicznie dla klikania na kwadratach dla niepoprawnej
odpowiedzi należy wpisać kod
gotoAndStop("Frame 5");
z kolei dla poprawnej odpowiedzi
i=i+1;
if(i==2)
gotoAndStop("Frame 4");
4
else
gotoAndStop("Frame 5");
Na ramce „Frame 5” (tej z błędną odpowiedzią) należy umieścić obiekt Edit (ikona na
rysunku poniżej).
Na obiekcie klikamy prawym przyciskiem myszy i wybieramy „Edytuj”. Zaznaczamy tam
„Tylko do odczytu” i odznaczamy „Kontur/tło”. Jako „Nazwa zmiennej” wpisujemy slowo
„bledy” (bez polskich znaków). Ostatnią rzeczą jest wpisanie kody ActionScript ramki
(Ramka->Kod ActionScript):
bledy = „Dobrych odpowiedzi: ”+i;
Przykład 3: Wieże Hanoi
Gra „Wieże Hanoi” to prosta łamigłówka polegająca na tym aby przenieść krążki różnej
średnicy z jednego słupka na drugi posługując się przy tym trzecim słupkiem jako
buforem. W trakcie przenoszenia krążki o mniejszej średnicy nie mogą być umieszczane
pod krążkami o większej.
A
B
C
Gra napisana w JavaScript znajduje się na stronie
http://wipos.p.lodz.pl/zylla/games/hf.html.
Przeniesienie n krążków w grze wymaga 2n-1 posunięć. Grę można rozwiązać
rekurencyjnie:
Krok 1: Przeniesienie n-1 krążków ze słupka A na słupek B posługując się słupkiem C.
Krok 2: Przeniesienie jednego, największego krążka ze słupka A na słupek C.
Krok 3: Przeniesienie n-1 krążków ze słupka B na słupek C posługując się słupkiem A.
Zadaniem jest wykonanie animacji Flash przedstawiającej rozwiązanie dla 4 krążków.
Będzie to tylko sekwencja ruchów prowadzących do rozwiązania. Wykonanie gry wymaga
ActionScript.
5
A) Utwórz ramkę MasterFrame o rozmiarze 600x300 zawierającą słupki. Słupek składa się
ze zgrupowanego prostokąta i elipsy będącej jego górnym zakończeniem. Na rysunku
poniżej szerokość prostokąta i długość górnej osi elipsy wynosi 25.
B) Na ramce 1 utwórz cztery krążki. Krążek skłąda się ze zgrupowanych dwóch elips i
prostokąta. Krążek powiel 3 razy. Dla każdej z kopii krążka ustaw szerokość (Obiekt ->
Rozciągnij) i kolor. W przykładowym rozwiązaniu szerokości 4 krążków wynoszą
odpowiednio 156, 136, 116, 96.
6
C) Na pierwszej ramce nałóż krążki na jeden z słupków (patrz rysunek poniżej). Ustaw
odpowiednie nakładanie się krążków za pomocą opcji „Na wierzch” z menu
kontekstowego.
Aby krążek sprawiał wrażenie nałożonego na słupek, wykorzystaj mały prostokąt
zgrupowany z elipsą o szerokości równej szerokości słupka:
D) Uwórz kolejne ramki prezentujące kolejne kroki rozwiązania gry (ile powinno być
ramek?). W tym celu na każdą kolejną ramkę skopiuj krążki z poprzedniej ramki a
następnie przenieś odpowiedni krążek. Aby uzyskać efekt nanizania zastosuj technikę jak
na rysunku powyżej. Dla każdej ramki ustaw czas 0.5 sekundy.
7