Polish (Polski) translation by Władysław Łucyszyn (you can also view the original English article)
Pierwsze wrażenia są bardzo ważne w portalu gier Flash; jeśli twoja gra nie chwyci gracza w ciągu pierwszych kilku sekund, ma mnóstwo innych gier do wyboru. Ponieważ menu jest pierwszym punktem interfejsu, pomoże ci wszystko, co możesz zrobić, by było mniej nudne. W tym samouczku stworzymy menu zawierające głębokość zamiany, płynne efekty przewijania i dwa różne projekty przejścia.
Końcowy podgląd wyników
Oto dwa projekty, nad którymi będziemy pracować:
Pierwszy projekt będzie miał kolejne ekrany przechodzące z różnych kierunków, w zależności od tego, która opcja zostanie kliknięta.
Drugi projekt przenosi wszystkie ekrany od dołu: bardziej elastyczny wybór, jeśli masz więcej niż cztery opcje.
Wprowadzenie: Co sprawia, że jest "aktywny"?
Są dwie główne rzeczy, które sprawiają, że to menu jest "aktywne". Pierwszym z nich są efekty przewijania na przyciski: niezależnie od tego, ile przeskalowały po uruchomieniu, zmniejszają one skalę od określonego rozmiaru (w przeciwieństwie do animacji utworzonej na osi czasu). Po drugie, kod drugiego stylu ma być elastyczny i łatwy do rozszerzenia na własne potrzeby.
Krok 1: Konfiguracja
Pierwszą rzeczą, którą musimy utworzyć, jest nowy plik Flash (ActionScript 3.0). Ustaw jego szerokość na 600px, jej wysokość na 300px, a klatki na sekundę na 30. Kolor tła można zostawić jako biały.
Teraz zapisz plik; możesz nazwać to, co chcesz, ale nazwałem moje menuBounce.fla
.
W następnej sekcji utworzymy osiem klipów MovieClip używanych w menu. Dla porównania, oto lista wszystkich kolorów używanych w samouczku:
- Biały - #FFFFFF (
0xffffff
) - Złoto - #E8A317 (
0xe8a317
) - Jasne złoto - #FBB917 (
0xfbb917
) - Niebieski - #1569C7 (
0x1569c7
) - Jasnoniebieski - #1389FF (
0x1389ff
) - Zielony - #347235 (
0x347235
) - Jasnozielony - #3E8F1B (
0x3e8f1b
) - Czerwony - #990000 (
0x990000
) - Jasnoczerwony - #C10202 (
0xc10202
) - Matowy szary - #222222 (
0x222222
)
Krok 2: Tworzenie MovieClips
Na początek utworzymy "backs" (klipy filmowe, które będą wyświetlać rzeczywiste ekrany), ale zanim zaczniemy, włączmy kilka bardzo przydatnych funkcji Flash.
Kliknij scenę prawym przyciskiem myszy i wybierz polecenie Siatka > Pokaż siatkę. Domyślnie utworzy siatkę 10px na 10px na scenie. Następnie ponownie kliknij prawym przyciskiem myszy na scenie i wybierz opcję Przyciąganie > Przyciągaj do siatki.
Teraz możemy zacząć rysować! Wybierz narzędzie Prostokąt i narysuj prostokąt złoty o wymiarach 600 x 300 pikseli. Następnie wybierz to wypełnienie, kliknij prawym przyciskiem myszy i wybierz Konwertuj na symbol. Nadaj nazwę goldBack
, ustaw typ filmu na MovieClip, a rejestrację w lewym górnym rogu.
Następnie kliknij prawym przyciskiem myszy MovieClip i wybierz Powiel trzy razy, aby utworzyć trzy kolejne kopie. Teraz koloruj je kolorem jasnoniebieskim, jasnozielonym i jasnoczerwonym. Następnie nadaj im nazwy: blueBack
, greenBack
i redBack
.
Aby akończyć backs'y powinniśmy dodać jakiś tekst wewnątrz każdego MovieClip: na goldBack napisz "PLAY", na blueBack napisz "INSTRUKCJE", na greenBack napisz "OPCJE", a na redBack wpisz "KREDYTY". Kiedy już napisałeś tekst, poleciłbym go rozdzielić, aż stanie się wypełnieniem (to eliminuje potrzebę osadzania czcionek i sprawia, żeprzejście staje się bardziej płynne). Twoje plecy powinny wyglądać podobnie do poniższego:



Teraz zacznijmy od klikalnych kwadratów! Wybierz narzędzie Prostokąt i narysuj kwadrat o jasności 100 x 100 pikseli. Wybierz wypełnienie, kliknij prawym przyciskiem myszy i Konwertuj na symbol. Nazwij MovieClip goldSquare
, ustaw typ filmu na
MovieClip, a rejestrację w lewym górnym rogu. Nadszedł czas, aby napisać tekst na placu, ale tym razem zamiast rozbijać tekst, zostaw go na razie. Wstaw klatkę kluczową i zmień kolor wypełnienia na złoty. Teraz rozłącz tekst na obie ramki, aż staną się wypełnieniem.
Teraz kliknij prawym przyciskiem myszy MovieClip i wybierz Duplikuj symbol trzy razy. Następnie powtórz ten sam proces z poprzednich dla pozostałych trzech kolorów, nazwanych odpowiednio MovieClips blueSquare
, greenSquare
i redSquare
. Twoje kwadraty powinny wyglądać podobnie do poniższego:

Krok 3: Pozycjonowanie MovieClips
Zacznij od usunięcia wszystkiego poza sceną. Następnie przejdź do Wstaw > Nowy symbol. Nazwij go menuBounceMC
, ustaw typ na MovieClip, zarejestruj się w lewym górnym rogu i wyeksportuj jako MenuBounceMC
.
Teraz przeciągnij wszystkie plecami z biblioteki i umieść je w następujący sposób:
- goldBack: (-600,0)
- blueBack: (0,-300)
- greenBack: (0,300)
- redBack: (600, 0)
Jeśli zamierzasz użyć projektu jednokierunkowego, umieść wszystkie cztery oparcia w jednej z tych pozycji. Użyłem (0, 300).
Teraz przeciągnij wszystkie kwadraty z biblioteki do MovieClip i umieść je w następujący sposób:
- goldSquare: (120,150)
- blueSquare: (240,150)
- greenSquare: (360,150)
- redSquare: (480, 150)
Ostatnią rzeczą, którą musimy zrobić przed rozpoczęciem kodowania, jest przypisanie nazw instancji. Ustaw nazwy instancji kwadratów jako square0
, square1
, square2
, square3
, począwszy od lewej. Następnie ustaw nazwy instancji dla pleców zgodnie z odpowiadającym kwadratem tego samego koloru. Tak więc goldBack
otrzyma nazwę instancji back0
, ponieważ goldSquare
ma nazwę instancji square0
.
Krok 4: Konfigurowanie klas
Po zakończeniu tworzenia i pozycjonowania MovieClips możemy zacząć konfigurować dwie klasy, z których będziemy korzystać.
Najpierw przejdź do właściwości pliku Flash i ustaw jego klasę na MenuBounce; następnie utwórz nowy plik ActionScript 3.0 i zapisz go jako MenuBounce.as
.
Teraz skopiuj poniższy kod; Wyjaśnię to po:
package{ import flash.display.MovieClip; import flash.events.Event; public class MenuBounce extends MovieClip{ public var menuBounceMC:MenuBounceMC = new MenuBounceMC(); public function MenuBounce(){ addChild(menuBounceMC); } } }
Jest to podstawowa klasa dokumentów, do której dodaliśmy trochę dodatkowego kodu, który tworzy instancję MenuBounceMC i dodaje ją do sceny.
Teraz utwórz nowy plik ActionScript 3.0 i zapisz go jako MenuBounceMC.as
. Teraz skopiuj poniższy kod, abyśmy mogli go skonfigurować.
package{ import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; public class MenuBounceMC extends MovieClip{ public var activeSquare:MovieClip; public var activeBack:MovieClip; public var squaresArray:Array = new Array(); public var backsArray:Array = new Array(); public var speed:Number = 20; public function MenuBounceMC(){ } } }
Każda zmienna ma określony cel:
-
activeSquare
: Który kwadrat jest przewracany -
activeBack
: Który z powrotem został wybrany do przeniesienia -
squaresArray
: Tablica zawierająca wszystkie kwadratowe MovieClips -
backsArray
: Tablica zawierająca wszystkie tylne MovieClips -
speed
: Ile pikseli tył jest przenoszony przez każdą ramkę
Wszystkie te zmienne zostały ustawione, z wyjątkiem topSquare
(który jest ustawiony w innych funkcjach) i tablic. Więc musimy wepchnąć wszystkie MovieClipy do tablicy. Dodaj następujące linie wewnątrz konstruktora:
squaresArray = [square0, square1, square2, square3]; backsArray = [back0, back1, back2, back3];
Jednak ta metoda może być trochę uciążliwa, jeśli zamierzasz używać dużej liczby MovieClipów w menu - powiedzmy 50. Alternatywą byłoby całkowite utworzenie MovieClips za pomocą kodu i wciśnięcie ich podczas dodawania ich do menu. Ale w naszym celu używania tylko ośmiu MovieClip-ów działa dobrze.
Ostatnim zestawem rzeczy, które musimy dodać, aby ukończyć konfigurację, są nasze detektory zdarzeń, które wyzwalają wszystkie przejścia i efekty przechodzenia. Dodaj te linie poniżej linii push()
.
addEventListener(MouseEvent.MOUSE_OVER, bounceOver); addEventListener(MouseEvent.MOUSE_OUT, bounceOut); addEventListener(MouseEvent.CLICK, bounceClick); addEventListener(Event.ENTER_FRAME, bounceUpdate);
Krok 5: Tworzenie manipulatorów MouseEvent
Zacznijmy od utworzenia trzech łatwiejszych funkcji:
public function bounceOver(event:MouseEvent):void { } public function bounceOut(event:MouseEvent):void { } public function bounceClick(event:MouseEvent):void { }
Wewnątrz funkcji bounceOver()
zacznij od dodania instrukcji if, aby upewnić się, że żadne z powrotem nie jest obecnie "aktywne" - to znaczy, przejście, przejście na zewnątrz lub siedzenie na wierzchu:
if(activeBack == null){ }
Pozostała część całego kodu w funkcji bounceOver()
zostanie zapisana wewnątrz instrukcji if. Teraz obliczamy, czy obiekt zawinięty (event.target
) jest kwadratem, sprawdzając, czy jest on w squaresArray[]
:
if(squaresArray.indexOf(event.target) != -1){ }
Zakładając, że jest, wykonujemy prawdziwe mięso funkcji:
activeSquare = event.target as MovieClip; activeSquare.gotoAndStop(2); setChildIndex(activeSquare, numChildren - 1);
Najpierw ustawiamy zmienną activeSquare
, aby wskazywała na kwadrat, o którym mowa. Następnie zatrzymujemy animację tego kwadratu na drugiej klatce, która wyświetla obraz "najazdu". Na koniec przesuniemy ikonkę, aby być na szczycie wszystkiego, używając setChildIndex().
Przechodzimy teraz do funkcji bounceOut()
. Tym razem zaczynamy od sprawdzenia, czy obiekt, z którego rozwijana jest mysz, jest aktualnie aktywnym kwadratem:
if(event.target == activeSquare){ }
Wewnątrz bloku if dodaj następujący kod; przerywa animację kwadratu na pierwszej klatce, a następnie ustawia activeSquare z powrotem na wartość null
, abyśmy mogli przewrócić nad inną:
activeSquare.gotoAndStop(1); activeSquare = null;
Następnie przejdź do funkcji bounceClick()
. Ta funkcja będzie używana do inicjowania wszystkich przejść. Zacznij od sprawdzenia, czy jest już aktywny powrót:
if(activeBack == null){ }
Zapobiega to kliknięciu innego kwadratu podczas przejścia. Jeśli jest aktywny powrót, kliknięcie powinno cofnąć to, abyśmy mogli kliknąć inny kwadrat:
if(activeBack == null){ }else{ activeBack = null; }
Zakładając, że nie ma aktualnie aktywnego back, po raz kolejny dodaj blok-if, aby sprawdzić, czy kliknięty obiekt był kwadratem:
if(activeBack == null){ if(squaresArray.indexOf(event.target) != -1){ } }else{ activeBack = null; }
Jeśli użytkownik kliknął kwadrat, musimy ustawić odpowiedni tył jako "aktywny" z powrotem. Ponieważ indeks każdego elementu w backsArray[]
pasuje do indeksu każdego elementu w squaresArray
, jest to proste:
if(activeBack == null){ if(squaresArray.indexOf(event.target) != -1){ activeBack = backsArray[squaresArray.indexOf(event.target)] as MovieClip; } }else{ activeBack = null; }
Teraz musimy po prostu przesunąć aktywny wstecz, aby był na szczycie wszystkiego:
if(activeBack == null){ if(squaresArray.indexOf(event.target) != -1){ activeBack = backsArray[squaresArray.indexOf(event.target)] as MovieClip; setChildIndex(activeBack, numChildren - 1); } }else{ activeBack = null; }
Krok 6: Tworzenie programu obsługi zdarzeń ostatecznych
To jest ostatnia funkcja, którą zamierzamy stworzyć. Zacznijmy od dodania efektu skalowania w przypadku przewracania lub wyrzucania kwadratu:
public function bounceUpdate(event:Event):void { for each (var square in squaresArray) { if(square == activeSquare){ if(square.scaleX <= 1.5){ square.scaleX +=0.05; square.scaleY +=0.05; } }else{ if(square.scaleX >= 1){ square.scaleX -=0.05; square.scaleY -=0.05; } } } }
Tutaj stworzyliśmy pętlę for-each, aby przejrzeć każdy kwadrat w tablicy i sprawdzić, czy jest to aktualnie aktywny kwadrat. Jeśli tak, skalujemy go tak, aby był większy lub równy 1,5 raza jego regularnego rozmiaru; jeśli nie, zmniejszamy go, aż wróci do normalnego rozmiaru. (Z technicznego punktu widzenia ten kod może pozwolić na to, by był nieco mniejszy niż jego standardowy rozmiar, ale w praktyce jest to niezauważalne).
Teraz jest to miejsce, w którym niektórzy z was pójdą waszymi oddzielnymi drogami; jeśli tworzysz projekt 1, przejdź do kroku 7a, a jeśli tworzysz projekt 2, przejdź do kroku 7b.
Krok 7a: Wykończenie projektu 1
Gratulacje, wybrałeś projekt 1! Ten projekt jest prosty i łatwy do naśladowania - zakładając, że masz dokładnie cztery kwadraty i oparcia. Dosyć więcej i staje się bałagan do utrzymania.
Zamierzamy użyć długiej serii zagnieżdżonych instrukcji if-else - bardzo niechlujnie, wiem. Ale powiem ci, jakie są tego powody! Każdy tył ma inną pozycję początkową i kierunek przejścia. W skrócie, nie możesz użyć pojedynczej pętli for do przesuwania wszystkich obiektów MovieClip, chyba że masz jedną instrukcję if, aby sprawdzić, które z powrotem się porusza, inną, aby ustawić oś ruchu (x lub y), a trzecią ustawić prędkość (dodatnia lub ujemna). Okay, możemy przechowywać wszystkie te informacje we właściwościach kwadratów lub coś podobnego, ale myślę, że jest to podejście, w którym zastosowanie ma "Keep It Simple, Stupid".
if(activeBack == back0){ if(back0.x < 0){ back0.x += speed; } }else{ if(back0.x > -600){ back0.x -= speed; } } if(activeBack == back1){ if(back1.y < 0){ back1.y += speed; } }else{ if(back1.y > -300){ back1.y -= speed; } } if(activeBack == back2){ if(back2.y > 0){ back2.y -= speed; } }else{ if(back2.y < 300){ back2.y += speed; } } if(activeBack == back3){ if(back3.x > 0){ back3.x -= speed; } }else{ if(back3.x < 600){ back3.x += speed; } }
Kod jest łatwy do zrozumienia; patrzy na każde plecy i przesuwa je na scenę lub ze sceny, we właściwym kierunku, w zależności od tego, czy jest aktywne.
Krok 7b: Finishing Design 2
Gratulacje, wybrałeś Design 2! Ten projekt jest o wiele bardziej elastyczny i sprawia, że jest o wiele łatwiej, jeśli chodzi o dodawanie kolejnych kopii i używanie mniejszej ilości kodu. W tym projekcie użyjemy kolejnej pętli do zbadania każdego z powrotem w backsArray
:
for each (var back in backsArray){ if(back == activeBack){ if(back.y > 0){ back.y -= speed; } }else{ if(back.y < 300){ back.y += speed; } } }
Teraz powinno to być dość łatwe do zrozumienia. Cykle w plecy i sprawdza każdy, czy jest aktywny. Jeśli tak, kod przesuwa go w górę na stół montażowy i przestaje go przenosić, gdy zostanie całkowicie włączony (to znaczy, gdy osiągnie wartość y=0
lub wyższą). Jeśli tył nie jest aktywny, kod przesuwa go z powrotem, aż osiągnie pozycję wyjściową.
Wniosek
Oto wyzwanie: biorąc pod uwagę 16 kwadratów (i 16 pleców), możesz zrobić to tak, aby kwadraty 1, 5, 9 i 13 tworzyły odpowiednie przejścia od lewej strony, kwadraty 2, 6, 10 i 14 powodują przejście od góry i tak dalej? Będziesz musiał połączyć oba podejścia, a także sprawdzić pozycję aktywnego kwadratu/tyłu w swojej tablicy.
Dziękujemy za poświęcenie czasu na przeczytanie tego samouczka. Mam nadzieję, że podobał ci się gotowy produkt i nauczyłeś się czegoś o tworzeniu aktywnych, elastycznych menu!