Sterowanie animacją za pomocą klawiatury
Wstęp
Żeby lepiej zrozumieć ideę sterowania animacji oraz odpowiednio podejść do problemu zapraszam do zapoznania się z poniższym FAQ.
FAQ
- Pyt: Czy możliwe jest napisanie kodu który pozwalałby na sterowanie dowolną animacją?
- Odp: Nie. Powodem jest niezliczona ilość sposobów w jaki może być zaprojektowana animacja flash. Animacja może być w całości umieszczona na głównej ścieżce czasowej, zbudowana na scenach, porozmieszczana w zagłębionych MovieClipach, wczytywana z zewnątrz, może być też tworzona całkowicie za pomocą ActionScript, etc...
- Pyt: Jeśli nie można zrobić uniwersalnego sterowania, to po co ten tutorial?
- Odp: Tutorial pokazuje jak napisać kod ActionScript pozwalający na sterowanie animacją znajdującą się w całości na głównej ścieżce czasowej (ang. timeline). Po jego przeczytaniu będziecie potrafili sterować taką animacją. Natomiast kod może być w prosty sposób zmieniony i zaadoptowany do potrzeb konkretnego typu animacji.
Kod ActionScript
Zaczniemy od przykładu kodu, nadającemu przyciskowi ENTER funkcję pauzy podczas odtwarzania animacji:
/* ActionScipt by Devoth */
/* www.devoth.pl */
var keyListener:Object = new Object();
var playingMain:Boolean = true;
keyListener.onKeyDown = function() {
if(Key.getCode() == Key.ENTER) {
if (playingMain) {
_root.stop();
}else{
_root.play();
}
playingMain = !playingMain;
}
};
Key.addListener(keyListener);
Wersja rozszerzona (klawisz lewo przenosi do poprzedniej klatki, prawo do następnej), ze szczegółowym opisem w komentarzach:
/* ActionScipt by Devoth */
/* www.devoth.pl */
// tworzenie obiektu przechwytującego zdarzenie
var keyListener:Object = new Object();
// zadeklarowanie i ustawienie zmiennej przechowującej info
// o tym czy główna ścieżka czasowa jest odgrywana
var playingMain:Boolean = true;
// definicja zachowań podczas naciśnięcia przycisku
// dla obiektu listenera
keyListener.onKeyDown = function() {
// sprawdzenie czy został naciśnięty enter
if(Key.getCode() == Key.ENTER) {
// czy film wtedy grał
if (playingMain) {
// to zatrzymamy
_root.stop();
// a może stał
}else{
// to odgrywamy
_root.play();
}
// ustawienie zmiennej informującej o odgrywaniu
// filmu na przeciwną
playingMain = !playingMain;
}
// sprawdzenie czy został naciśnięty przycisk lewo
if(Key.getCode() == Key.LEFT) {
// no to do poprzedniej klatki
_root.prevFrame();
}
// sprawdzenie czy został naciśnięty przycisk prawo
if(Key.getCode() == Key.RIGHT) {
// no to do następnej klatki
_root.nextFrame();
}
};
// przypisanie listenera do klasy przycisku
Key.addListener(keyListener);
Na prośbę publiczności - wersja gdzie klawisze dół/góra dodatkowo powodują przejście o 5 klatek do tyłu/przodu (opis usunąłem, żeby było bardziej przejrzyście):
/* ActionScipt by Devoth */
/* www.devoth.pl */
var keyListener:Object = new Object();
var playingMain:Boolean = true;
keyListener.onKeyDown = function() {
if(Key.getCode() == Key.ENTER) {
if (playingMain) {
_root.stop();
}else{
_root.play();
}
playingMain = !playingMain;
}
if(Key.getCode() == Key.LEFT) {
_root.prevFrame();
}
if(Key.getCode() == Key.RIGHT) {
_root.nextFrame();
}
if(Key.getCode() == Key.DOWN) {
_root.gotoAndStop(_root._currentframe+5);
}
if(Key.getCode() == Key.UP) {
_root.gotoAndStop(_root._currentframe-5);
}
};
Key.addListener(keyListener);
Podsumowanie
Kluczem do sterowania czymkolwiek jest przechwytywanie zdarzeń klawiatury. Posiadając tą umiejętność można łatwo wprowadzić interakcję do swoich animacji i prezentacji. Mam nadzieję że zrozumienie powyższych wycinków kodu nie przysporzyło wam większych problemów, jeśli coś jest niejasne zachęcam do zwrócenia mi uwagi używając tego formularza kontaktowego.
Masz jakieś pytania lub sugestie, może zauważyłeś błąd w powyższym artykule? Napisz do mnie.