Flash jako narzędzie do tworzenia pomocy dydaktycznych.
Transkrypt
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