Jak utworzyć nowy plik (dokument) w programie Flash CS6. Tworzenie gier flash Jak stworzyć animację flash

Stworzenie lampy błyskowej ndash; sprawa jest dość skomplikowana. Wymaga to wiedzy z wielu dziedzin: programowania, grafiki komputerowej, podstaw optymalizacji i promocji stron, trzeba dobrze znać sam flash, w końcu zarówno na poziomie znajomości środowiska programistycznego, jak i języka programowania Action script 2.0. lub skrypt akcji 3.0, który ma obecnie wyższy priorytet.
Flash aplikacje są rozwijane w Adobe Flash Professional ndash; to program multimedialny, który służy do tworzenia treści takich jak aplikacje internetowe, filmy, gry, aplikacje na urządzenia mobilne i inne urządzenia wbudowane.
Błysk ndash; unikalne zjawisko. Wcześniej produkt ten nosił nazwę „Macromedia Flash”, po przejęciu przez firmę Adobe, od 2005 roku program ten stał się znany jako „Adobe Flash”. Animacja Flash służy do przesyłania strumieniowego stron internetowych. Czasami spłukać ndash; jest to część strony html i zdarza się, że cała strona jest w całości wykonana we Flashu lub cała witryna została z nim stworzona. Powstałe pliki Flash to specjalne pliki swf („ShockWave Flash”), które wymagają specjalnych bezpłatnych wtyczek do przeglądarek, aby wyświetlić zawartość, można je łatwo i szybko pobrać i zainstalować z oficjalnej strony Adobe. Zaletą filmów flash było bardzo szybkie ładowanie i praca z animacją wektorową z interaktywnością. Flash można wczytać przed wyświetleniem całego wideo na ekranie, czyli możesz zaimplementować opcję, gdy zaczniesz oglądać animację, a reszta „strumieni” na ekranie jest ładowana w tle.
Wykorzystana grafika flash w wektorze plus kod programu umożliwiają wykonanie w pełni funkcjonalnej aplikacji, która może zastąpić niektóre raster, fragmenty wideo, kody programów, ale uczynić ją znacznie bardziej optymalną, mniejsze wykorzystanie przepustowości dla strumieni, mniejsza moc procesora jest konsumowany. Oprócz renderowania wektorowego, Flash Player (odtwarzacz wymagany do oglądania filmów Flash) zawiera maszynę wirtualną (ActionScript Virtual (AVM)) do obsługi skryptów interakcji w czasie wykonywania, a także obsługuje wideo, mp3.
Rozważmy istniejące typy grafiki i podkreślmy zalety grafiki wektorowej, z którą bezpośrednio współpracuje Flash.
Całą grafikę można podzielić na trzy typy: rastrowe, wektorowe, 3D. W rastrowej grafice, jak na monitorze TV, każdy obraz składa się z zestawu małych elementów ndash; piksele ndash; to skrót od elementu obrazu.
Zasada grafiki kropkowej jest bardzo prosta: jak dziecko rysuje komórki w szkole, tylko tutaj te komórki są znacznie mniejsze. Tego typu grafika jest prosta zarówno w implementacji, jak i obróbce i prezentacji, jest technicznie wygodna w implementacji, automatyzacji wprowadzania lub digitalizacji informacji obrazkowych.
Ale grafika rastrowa ma wady: jest obszerna, w rezultacie waga pliku staje się duża, a gdy obraz jest zmniejszany lub powiększany, jakość obrazu jest tracona.
Kodowanie graficznej informacji w wektorowej grafice jest różne: wszystkie wizerunki są wyszczególnione jak kontury ndash; obiekty matematyczne. Te kontury są niezależnym obiektem, który można przesuwać, zmieniać rozmiar, skalować i dowolną liczbę razy. Linie są ustalane przez punkty początkowe, formuły, które wskazują same linie. Dzięki temu przy zmianie wzoru proporcje są zawsze dokładnie zachowane. Grafika wektorowa jest również grafiką obiektową, ponieważ rysunek składa się z pojedynczych obiektów - linii prostych i krzywych, elipsy, prostokątów, kształtów zamkniętych i otwartych itp., które mają własne cechy grubości konturu, koloru, stylu linii itp. d.
Grafika wektorowa jest oszczędna pod względem zasobów, informacje o niej przechowywane są w postaci wzorów, a nie informacji dla każdego punktu, opisy kolorystyczne nie zwiększają znacząco rozmiaru pliku. Grafiki wektorowe można łatwo modyfikować, praktycznie bez utraty jakości obrazu. Są obszary grafiki, w których zachowanie wyraźnych konturów ma podstawowe znaczenie, na przykład przy tworzeniu logotypów, czcionek itp.
Wektor w pełni wykorzystuje rozdzielczość wszystkich urządzeń wyjściowych, takich jak drukarka. Obraz zawsze wygląda na wysoką jakość, wyraźny, wszystko będzie zależeć tylko od samej drukarki.
Zaletą grafiki wektorowej można również nazwać fakt, że łatwo ją przekształcić w grafikę rastrową, ale nie odwrotnie! Może zawierać obiekty grafiki rastrowej, chociaż nie można jej przetwarzać w ten sam sposób.
Poważną zaletą grafiki wektorowej jest sposób integracji tekstu i obrazów, odpowiednio jedno podejście do nich, możliwość stworzenia produktu końcowego. Najpopularniejszymi edytorami grafiki wektorowej są CorelDRAW, Adobe Illustrator i oczywiście Adobe Flash.
Wektor jest ograniczony podczas tworzenia realistycznych obrazów: wyraźny i kreskówkowy ndash; tak, ale oto jak sformułować sosnę lub chmurę. Pojawia się również problem przy wprowadzaniu informacji graficznych: na przykład skaner przesyła informacje o obrazie piksel po pikselu: położenie i kolor każdego punktu w zależności od reakcji wiązki światła. Nie może pokryć obiektu po obiekcie, a nie wszystkie obrazy, jak pisałem powyżej, mogą być sformalizowane.

Błysk stał się powszechnie popularny ndash; banery kreskówkowe pojawiają się prawie na każdej stronie internetowej. Są interaktywne, odtwarzają animacje i zajmują mało miejsca na dysku, co jest ważne podczas pracy w sieci.
Animacja jest tworzona przez wyświetlanie każdej klatki flash przez określony czas. Kiedy jest wiele ramek, powstaje iluzja ruchu. Wcześniejsze technologie flashowe pojawiały się w animacjach GIF, ale możliwości Flasha są znacznie szersze. Tak więc z jego pomocą możesz tworzyć elementy nawigacyjne, dźwięczne kreskówki, animowane logo, kalkulatory, całe witryny z zestawem różnych interaktywnych elementów i jakie cuda animacji można stworzyć we flashu: wyglądają bardzo imponująco, a inne technologie internetowe nie mogą pochwalić się takimi możliwościami.
Animacje Flash nazywane są filmami. Możliwości animacji nie ograniczają się do animacji, animowane są różne obiekty: menu, obrazki, linki, teksty.
Po uruchomieniu programu otwiera się okno z obszarem roboczym i paskiem narzędzi oraz dodatkowymi oknami, które można połączyć w trakcie pracy. Wyświetlane są również zakładki do pracy z osią czasu, ustawienia sprawdzania błędów itp. W programie filmy tworzone są poprzez rysowanie lub importowanie gotowych rysunków, umieszczane są w specjalnym obszarze okna roboczego ndash; scena (Stage), a klatki są tworzone przy użyciu osi czasu (oś czasu).
W filmie może być kilka scen; po uruchomieniu filmu są one odtwarzane w kolejności, w jakiej zostały utworzone, chyba że kolejność ta została celowo zmieniona. Pozwala to wygodnie i szybko zmieniać poszczególne odcinki, zmieniać ich kolejność.
Sama animacja odbywa się poprzez zmianę kolejnych klatek, zmianę ich zawartości, czyli dodawanie do klatki obiektów o wymaganych parametrach. Obiekty na scenie można obracać, ustawiać położenie, kolor, przezroczystość, ich kształt, wielkość, to samo można zrobić z innymi obiektami.
Animację można tworzyć w następujący sposób:
Animacja klatka po klatce ndash; rysunek w każdej ramce jest wykonywany ręcznie, a ramki idą w rzędzie;
obliczył (Animacja z animacji) ndash; tworzone są tylko klatki początkowe i końcowe (tzw. klatki kluczowe), a pomiędzy nimi sam program buduje klatki; dwa rodzaje takiej animacji: ruch (Tweening ruchu, gdy zmieniają się parametry ruchu, obrót, rozmiar, pozycja), kształty (Tweening kształtu);
programowo ndash; gdy parametry zmiany obiektu są ustawiane za pomocą poleceń języka programowania Action Script.
W trakcie pracy nad filmem oryginalne dane zapisywane są w specjalnym pliku z rozszerzeniem .fla. Obejmuje to scenę ze wszystkimi obiektami, a także dodatkowe parametry dotyczące obiektów, które nie były zawarte w filmie, ale zostały w nim utworzone, a także opcje dźwięku, komentarze, kody skryptów, ustawienia programu itp. Po utworzeniu takiego źródła trzeba je przetłumaczyć na format odpowiedni dla Internetu ndash; mianowicie SWF, więc publikujemy film lub kompilujemy kod. Spowoduje to usunięcie z pliku informacji, które nie są potrzebne do odtwarzania w żądanej formie filmu. W ten sposób rozmiar pliku staje się minimalny i szybko ładowany przez użytkownika. Taki plik można otworzyć osobno przez ndash; odtwarzacz odtworzy go, ale możesz połączyć go z dowolną stroną html jako obiekt.

Film czytuje tworzony od prefabrykowanych ndash elementów; standardy (symbole) lub symbole. Odniesienie to obraz, przycisk, animacja, klip filmowy, który jest wielokrotnie używany w filmie. Można je tworzyć lub importować. Raz stworzone, symbole są przechowywane w specjalnym magazynie ndash; biblioteka. W procesie montażu filmu, w tych miejscach, gdzie jest to konieczne, wstawiane są instancje (Instancje) standardów (które są przechowywane w bibliotece), a nie za każdym razem w całości. Możesz je wstawiać dowolną liczbę razy i w dowolnym miejscu. W takim przypadku możesz dowolnie zmieniać parametry instancji: położenie, rozmiar, skalę, obrót, zgięcie, przezroczystość, ton itp., podczas gdy same symbole odniesienia nie ulegają zmianie. To jest bardzo wygodne ndash; nie musisz za każdym razem tworzyć elementu od nowa ani go kopiować, element jest jeden, a jego modyfikacji jest tyle, ile chcesz. A podczas procesu publikowania plik końcowego wideo, który jest tworzony w formacie swf, jest montowany w taki sposób, że w jednym miejscu będzie bezpośrednio obiekt referencyjny, a cała reszta ndash; po prostu wskazuje na to. Wyobraź sobie, jak bardzo zmniejsza się w ten sposób waga wideo w porównaniu do kopiowania niemal identycznych elementów.
Standardami są:
byk; Klip filmowy (moviklip) ndash; zawiera dźwięk, grafikę, animację, może być programowo skryptowany;
byk; Grafika (Grafika) ndash; rysunki statyczne, animacje, dźwięk, ale nie sterowane programowo;
byk; Przycisk (przycisk) - zawiera zdjęcia, dźwięk; w porównaniu z innymi typami odniesień do symboli zawiera tylko cztery ramki, które pokazują zmiany stanu przycisku w przypadku wystąpienia różnych zdarzeń myszy.
Przed bezpośrednim utworzeniem symbolu odniesienia należy ustawić jego typ, później można go zmienić.
Oprócz symboli referencyjnych i ich wystąpień, film może zawierać obrazy z plików zewnętrznych, czcionki.
Całe wideo w Adobe Flash ndash; jest to sekwencja ramek (Ramek), są one wyświetlane po kolei z określoną prędkością. Pracują z pomocą osi czasu. Po lewej stronie na skali są warstwy, których nazwy muszą być ustawione, po prawej ndash; zestaw pustych ramek, które są wypełniane jako obiekty, są tworzone i umieszczane na scenie. Gdy tylko rama wypełni się obiektami, zmienia kolor na szary. Klatki kluczowe są oznaczone czarną kropką. Na linii czasu bieżąca rama jest zaznaczona czerwonym znacznikiem ndash; grająca głowa, przez którą pionowo przechodzi cienka czerwona linia, która przecina wszystkie warstwy i laquo, widzi traquo; aktualna ramka w każdym z nich. To właśnie te klatki, czyli ich zawartość w postaci klipów filmowych, jest wyświetlana na ekranie.

Aby wdrożyć interaktywność i możliwość tworzenia pełnoprawnych witryn, Adobe Flash wykorzystuje język programowania Action Script.
Aby film był interaktywny, Flash wykorzystuje programy skryptowe (script-script), które zawierają zestaw instrukcji (akcji) w ActionScript i są wykonywane, gdy wystąpią określone zdarzenia: użytkownik naciśnie przycisk, dotrze do określonej klatki filmu, reakcje na ruch myszy, jej kółko, umieszczenie wskaźnika nad określonym obszarem i wiele innych. Polecenia skryptowe określają, jak Flash reaguje na zdarzenie.

Polecenia skryptowe, które są wykonywane po zaimplementowaniu zdarzenia, są określone dla klipu, ramki, przycisku i odbywa się to na specjalnej karcie u dołu ekranu Działania (polecenia) (Ramka działań, Klip filmowy działań), Przycisk Działania.
Możliwe zdarzenia:
Naciśnięcie klawisza ndash; gdy użytkownik naciska klawisze klawiatury, parametrem funkcji jest nazwa klawisza.
Unosić się (Przetoczyć się) ndash; gdy wskaźnik myszy znajduje się nad obiektem, ale mysz nie jest wciśnięta;
Uwolnij ndash; jeśli przycisk myszy zostanie zwolniony, gdy wskaźnik znajdzie się nad zaprogramowanym przyciskiem, to znaczy, jeśli użytkownik kliknie manipulator laquo;mouseraquo;;
Naciśnij ndash; jeśli przycisk myszy (lewy) zostanie naciśnięty, gdy wskaźnik znajduje się nad zaprogramowanym przyciskiem. W tym przypadku brany jest pod uwagę obszar aktywacji, a nie jego widoczny obraz, jest to określane w ramce Hit;
Usuń (Wytocz) ndash; nad przyciskiem znajdował się wskaźnik myszy, nie został on wciśnięty i mysz jest odsunięta od przycisku programowalnego;
Shift (Drag Out) - przycisk myszy jest umieszczany nad obiektem, wciskany i usuwany;
Uwolnienie Zewnątrz ndash; jeśli przycisk myszy został naciśnięty na obiekcie, a następnie został zwolniony przez użytkownika poza obiektem;
Przeciągnij nad ndash; wskaźnik jest ustawiony na obiekcie, lewy przycisk myszy jest wciśnięty i nie zwolniony, ale wskaźnik jest prowadzony za obiektem, a następnie powraca.

Język ActionScript 3.0, w porównaniu z ActionScript 2.0, jest bardziej nowoczesny, ponieważ opiera się na podstawach programowania obiektowego. Gdzie głównymi pojęciami są klasa, obiekt, jego atrybuty lub właściwości, a także metody tkwiące w tym obiekcie.
ActionScript jest wykonywany za pomocą maszyny wirtualnej (Virtual Machine ActionScript), która jest częścią Flash Playera.
Podstawą każdego kodu programu jest zmienna, która w ActionScript jest ustawiana w następujący sposób: var ndash; specjalne polecenie Flash, co oznacza, że ​​w tej sekcji wyznaczana jest zmienna i określany jest jej typ; imię ndash; nazwa zmiennej, podana w formacie tekstowo-numerycznym, ale nie rozpoczynająca się liczbą; wpisz ndash; wskazanie typu zmiennej (numeryczny - Liczba, logiczny ndash; Boolean, tekst - Łańcuch, itp.). czyli określisz: Var x: String;
Pamiętaj, aby dodać dwukropek po nazwie zmiennej i średnik na końcu wiersza. W trakcie wykonywania kodu można zmienić wartość i odpowiednio typ zmiennej.
Zmienna przechowująca dużą ilość danych nazywana jest tablicą. W AC 3.0. jest określony przez typ Array: Var Mas: Array.
Wszystkie elementy tablicy są ponumerowane od 0, więc aby uzyskać dostęp na przykład do pierwszego elementu, należy określić Mas. Oznacza to, że w nawiasach kwadratowych wskazujesz pozycję żądanego elementu w tablicy.
Sam kod będzie składał się z funkcji, które opisują sekwencję poleceń, które występują na danym zdarzeniu ndash; kliknięcie myszą, naciśnięcie klawisza, osiągnięcie jakiejś wartości itp.
Funkcja jest określana za pomocą słowa zastrzeżonego funkcja, następnie określasz jej nazwę - nazwa - dowolna nazwa tekstowo-numeryczna, ale nie zaczyna się od liczby, następnie w nawiasach () możesz określić parametry funkcji ndash; co jest karmione do tego jako wejście, mogą być nieobecne, wtedy dwukropek i typ danych, które funkcja zwraca lub void ndash; gdy funkcja nic nie zwraca. Następnie umieść cały kod funkcji w nawiasach klamrowych ( ). I uzyskujesz dostęp do funkcji, określając jej nazwę i parametry, jeśli to konieczne: nazwa (). „Warunki w AC 3.0. są ustawiane przez operator if: if(x==y), czyli w nawiasach okrągłych, musisz określić sam warunek porównania. Pętle definiuje się za pomocą funkcji for(), gdzie jej parametry są podane w nawiasach: zmienna licznika, krok jej zmiany.
Każdy obiekt charakteryzuje się swoimi parametrami lub właściwościami; możesz dołączyć detektory zdarzeń do obiektów we flashu za pomocą funkcji addEventListener. Słuchacz ten obsłuży zdarzenia zachodzące z obiektem, a jeśli reakcje na nie zostaną opisane w funkcji przez programistę, program odpowiednio zareaguje.

To tylko niewielka część tego, co musisz wiedzieć, kiedy zaczynasz tworzyć witrynę flash. Nie musisz tworzyć strony od zera, istnieją specjalne szablony, które możesz kupować i modyfikować zgodnie z własnymi potrzebami (na przykład witryna templatemonsters). Tam projekt jest już w pełni opracowany, trzeba zmienić treść, a we wdrożeniu oprogramowania można przeprogramować wszystko, co będzie potrzebne. Następnie trzeba kupić domenę i hosting, umieścić plik html, w którym jest podłączony swf.
Czytaj książki (na przykład książka laquo; 100% tutorial M.Flash MXraquo; pomogła mi w pracy i artykuły), ucz się od kolegów na forach (demiart, flasher.ru), a także jaki powinien być twój pierwszy Asystent to pomoc na oficjalnej stronie Adobe. ActionScript w języku Opsian jest bardzo szczegółowy i szczegółowy, pokazane są przykłady, a materiał prezentowany jest również w języku rosyjskim.
Po utworzeniu filmu musisz go opublikować. Opcje publikowania programu można ustawić w menu Plik Opcje publikowania. Wskazuje w jakich formatach przesyłać wideo, jakie są ustawienia jakości grafiki i dźwięku i wiele innych. Gdy masz już plik swf, możesz go używać jako kompletnej gotowej aplikacji. Aby zmienić, zaktualizować utworzone wideo, musisz edytować źródło ndash; plik fla i opublikuj ponownie.

Na szczęście większość aktywnych internautów może stworzyć grę we flashu. Dla początkujących nawet początkowe umiejętności programowania bardzo w tym pomagają (nawiasem mówiąc, ich zdobycie nie jest takie trudne - byłoby pragnienie). To prawda, że ​​będziesz potrzebował trochę czasu, aby opanować jednego z wielu specjalnych projektantów gier flash (na przykład Macromedia Flash).

Wiele stron z oprogramowaniem zawiera między innymi właśnie takich konstruktorów. Zainstalowanie ich na komputerze z reguły nie stwarza dla użytkownika żadnych specjalnych problemów. Pamiętaj, że wybrany program powinien być zarejestrowany i zainstalowany ze wszystkimi niezbędnymi zmianami – wtedy będzie Ci służył wiernie, czyli nieprzerwanie. Większość projektantów gier jest tworzona w języku angielskim, ale możesz poszukać cracka lub wersji w języku rosyjskim. Często w samych ustawieniach znajduje się okno, w którym możesz ustawić swój język ojczysty.

Jak stworzyć grę flash: wstępne przygotowanie

Jeszcze zanim usiądziesz do opanowania projektanta, powinieneś już mieć przybliżony scenariusz gry, fabułę. Warto zawczasu pomyśleć o animacji i projektowaniu – to znacznie zaoszczędzi Twój czas. Zanim stworzysz swoją grę flashową, zdecyduj, jaki będzie jej typ. Aby uzyskać inspirację, odwiedź witryny zawierające biblioteki gier flash.

Profesjonaliści zalecają początkującym tworzenie prostych aplikacji, takich jak gry zręcznościowe. I dopiero wtedy będzie można przejść do bardziej złożonych rodzajów gier, a nawet tworzyć własne strategie. Możesz wybrać rodzaj przyszłej zabawki w tym samym konstruktorze, gdzie wszystkie gatunki są wygodnie posortowane. Aktywuj np. arkadę (dwukrotne kliknięcie).

Jak stworzyć grę flash: praca z projektantem gier

Otwórz szablon i przeciągnij na niego żądane obiekty z sekcji Obiekty animowane i Obiekty statyczne. Utwórz tło, wybierając teksturę i kolor. W przypadku obiektów wybierz kolory za pomocą palety kolorów. Użyj odtwarzacza animacji, aby sprawdzić, które inne funkcje nie są włączone. W ustawieniach ustaw poziomy ruchu postaci w grze (w arkadach) lub obiektów (w zabawkach logicznych).

Po wykonaniu wszystkich niezbędnych czynności uruchom debuger. W tym trybie możesz przejść przez własną grę, zaczynając od dowolnego poziomu - jest to ważne, aby przetestować ją pod kątem wydajności. Wyeliminuj wykryte błędy i ponownie sprawdź grę flash. Jeśli wszystko jest w porządku, zapisz zmiany.

Jak stworzyć grę flash: przypomnij sobie grę

Teraz możesz wymyślić oryginalną nazwę dla swojego flashowego pomysłu, napisz krótką adnotację. Użyj projektanta ekranu powitalnego, aby stworzyć spektakularny ekran powitalny dla swojej gry. Zapisz również wszelkie wprowadzone zmiany.

Przejdź przez swoją własną grę flash od początku do końca, aby znaleźć (lub nie znaleźć) błędy i usterki w niej, i nie zaszkodzi krytycznie przyjrzeć się swojemu dziełu. Bardzo ważne jest, aby gra miała logiczne i dobrze zdefiniowane części, jak dobra książka lub film: początek, rozwój wydarzeń, zakończenie.

Wyślij czystą wersję swojej gry do znajomych - niech najbardziej uczciwi krytycy ocenią, jakie wyniki osiągnąłeś. Cóż, po tym możesz już przesłać grę flash do sieci.

Jak stworzyć grę flash, jeśli masz ochotę, ale nie masz wiedzy?

Tym licznym użytkownikom, którzy są tak zaniepokojeni tym problemem, z pewnością chcemy udzielić odpowiedzi. Pamiętaj, że żadna wiedza nie może pochodzić znikąd. Każdy nowy biznes musi gdzieś zacząć. Z czasem zaczniesz rozumieć, jakiej wiedzy brakuje Ci do tworzenia gier. Zaczniesz pytać o radę, szukać rekomendacji, czytać odpowiednią literaturę, dzięki czemu zaczniesz coraz bardziej rozwijać swoje umiejętności. Nie bój się nowego, inaczej nigdy nie osiągniesz tego, czego chcesz. Powodzenia!

Program do tworzenia gier flash bez znajomości języków programowania. Umożliwia tworzenie gier z bloków logicznych i przygotowanych wcześniej obrazków.

Kiedyś, prawdopodobnie już kilka lat temu, na naszej stronie pojawił się program Game Maker, który pozwalał tworzyć gry praktycznie bez znajomości żadnego języka programowania!

Do tej pory ta strona była jedną z najczęściej dyskutowanych z nami i często w komentarzach pojawiają się narzekania, że ​​nie można na niej tworzyć gier, w które można grać online. Dzisiaj powrócimy do tematu tworzenia gier i rozważymy podobny program, który nadal może tworzyć gry flash - Szablony!

Funkcje programu

Za pomocą Stencyla możesz tworzyć gry 2D dowolnego gatunku, ale przede wszystkim silnik programu jest „wyostrzony” pod kątem różnych strzelanek RPG. Strukturalnie program to cały zestaw narzędzi, w których można w razie potrzeby stworzyć grę od podstaw bez korzystania z aplikacji innych firm.

Zamykamy wyskakujące okienko z informacją o nowej wersji programu przyciskiem „Zamknij” lub „Nie pokazuj tego ponownie” (jeśli nie chcemy widzieć tego okna przy każdym uruchomieniu programu) i zamiast tego otrzymujemy następujące okno:

Tutaj mamy możliwość stworzenia własnego konta w społeczności programistów Stencyl. Zasadniczo nie musisz tworzyć konta (w tym celu kliknij przycisk „Przypomnij mi później” poniżej), ale rejestracja daje możliwość pobrania dodatkowych szablonów i działań z magazynu online o nazwie StencylForge, więc nie boli :). Aby założyć konto należy kliknąć przycisk „Załóż konto” i przejść do formularza rejestracyjnego:

Tutaj wypełniamy standardowe pola Twoją nazwą użytkownika, hasłem (dwukrotnie) i adresem e-mail, a następnie klikamy przycisk „Zarejestruj się”. Jeśli wszystko pójdzie dobrze, interfejs okna startowego programu w końcu otworzy się przed tobą.

Uruchom interfejs okna

Zewnętrznie obszar roboczy okna startowego Stencyla jest podzielony na kilka stref:

Na górze tradycyjnie znajduje się pasek menu i pasek narzędzi. Tutaj zebrane są wszystkie główne ustawienia i przyciski sterujące. Pod paskiem narzędzi mamy mały wąski szary pasek. Zawiera zakładki (tak, interfejs Stencyla jest wielozakładkowy, co jest bardzo wygodne) oraz przyciski do szybkiego przełączania się między nimi (po prawej).

Główny obszar roboczy podzielony jest na dwie części: po lewej stronie znajduje się pasek nawigacyjny po sekcjach programu, a po prawej zawartość główna (na ekranie głównym - lista gier), która zmienia się w zależności od aktualnie aktywnej tryb pracy. Na dole znajduje się jeszcze kilka dodatkowych przycisków, które umożliwiają:

1. Otwórz folder, w którym Stencyl przechowuje wszystkie zasoby utworzonych gier i samych gier (przycisk „Wyświetl folder gier” w lewym dolnym rogu).
2. Uruchom szkolenie z pracy z programem („Start Crash Course” na zielonym panelu w prawym dolnym rogu). Nawiasem mówiąc, obok znajduje się również przycisk, aby ukryć ofertę odbycia szkolenia („Nie pokazuj tego ponownie”).
3. Otwórz aktualnie wybraną grę z listy, co jest podobne do dwukrotnego kliknięcia ikony gry („Otwórz grę” w prawym dolnym rogu).

Aby na własną rękę zgłębić możliwości Stencyla, możesz odbyć szkolenie (i przydałoby się je zaliczyć), a także otworzyć jedną z gotowych gier, która najlepiej pasuje do Twojego pomysłu i zobaczyć, jak tam wszystko działa. I proponuję przestudiować działanie programu na przykładzie stworzenia gry o przygodach symbolu naszej strony i jego wirtualnej mieszkanki - Fridy Best!

Jak rozpocząć tworzenie gry w Stencyl

Jeśli przed przystąpieniem do tworzenia gry spojrzałeś na standardowe przykłady gier na Stencyl, być może zauważyłeś, że zasadniczo wszystkie są dość proste, jednoekranowe i mają widok z boku. Zrobimy dynamiczną strzelankę top-down ze strzelaniem myszką! Wszystko jest jak w "dużych" grach :).

Dla swojego projektu możesz zmienić logikę jednego z gotowych szablonów, ale my nie szukamy prostych sposobów i dlatego - tylko „od zera”, tylko „hardcore” :). W tym celu kliknij na pasku narzędzi obszaru roboczego (lub w menu "Plik" - "Utwórz nową") przycisk "Utwórz nową grę" i przejdź do następującego okna:

Tutaj możemy wybrać szablon gry według gatunku z wstępnie wybranym zestawem funkcji i działań dla Twojego projektu. Jednak stworzymy grę od zera, więc wybierz element „Puste gra” i kliknij przycisk „Dalej”.

W kolejnym kroku musimy dokonać kilku podstawowych ustawień:

W polu „Nazwa” musimy podać nazwę naszej gry, a w sekcji „Rozmiar ekranu” ustawić wymiary pola gry podając jego szerokość (szerokość) i wysokość (wysokość) w pikselach. Następnie kliknij przycisk „Utwórz” i przejdź bezpośrednio do interfejsu edytora gry:

Domyślnie przed nami otwiera się zakładka „Dashboard”, na której po lewej stronie zbierane jest całe drzewo zasobów gry, a po prawej sam obszar roboczy. Myślę, że w tym miejscu należałoby poczynić pewne wyjaśnienia dotyczące struktury „drzewa”.

Składa się z czterech gałęzi, z których pierwsze dwa zawierają standardowe zestawy zasobów (RESOURCE) i logikę (LOGIC), a ostatnie dwie mogą opcjonalnie przechowywać ręcznie ładowane pakiety zasobów (RESOURCE PACKS) i rozszerzenia (EXTENSIONS).

Gałąź główna to tutaj gałąź RESOURCES. Zawiera następujące sekcje:

1. Typy aktorów - tutaj przechowywane są duszki wszystkich postaci w grze oraz konfigurowane są akcje ich animacji i interakcji ze sobą.
2. Tła - w tej sekcji możemy przechowywać wszystkie niezbędne tła do gry. Co więcej, tło może być zarówno dla tła (tło), jak i dla pierwszego planu (foreground), co pozwala na nakładanie się na siebie tła, uzyskując w ten sposób np. efekt paralaksy.
3. Czcionki - sekcja, w której możemy wgrać różne piękne czcionki, aby stworzyć oryginalne napisy. Jednak warto wziąć pod uwagę, że Stencyl może działać tylko z zestawem znaków angielskich, więc aby dodać rosyjskie litery do pliku czcionki, musimy zastąpić nimi niektóre znaki łacińskie.
4. Sceny to miejsce do tworzenia i edycji poziomów gry. To tutaj możemy ustawić wygląd dowolnej sceny oraz umieścić wszystkie postacie, bonusy i inne elementy gry.
5. Dźwięki - odpowiednio repozytorium wszystkich dźwięków używanych w grze.
6. Tilesets - specjalna gałąź przechowująca kafelki - specjalne sprite'y, które możemy wykorzystać do budowania poziomów gry.

Tworzenie i konfigurowanie kafelków

Nie ma jednoznacznej opinii na temat kolejności realizacji tej czy innej gry. W tym momencie jest to wygodne dla każdego, ale polecam następujący algorytm:

Stwórz pierwszą scenę - stwórz postać - stwórz wrogów - stwórz power-upy - stwórz pozostałe etapy

Aby stworzyć scenę w Stencylu, musisz narysować jej wygląd w gałęzi Sceny. Aby jednak rysować, najpierw musimy mieć klocki, którymi możemy „rysować”. Te bloki w programie nazywane są płytkami (płytkami) i są przechowywane w sekcji Zestaw klocków:

Zestaw klocków to prosta macierz obrazów, które do niego ładujesz. Możesz wgrać albo gotową matrycę (zdjęcie składające się z kilku jednakowych obrazów w jednym lub kilku rzędach) albo uzupełnić istniejące zestawy osobnymi zdjęciami.

Najpierw musimy stworzyć nowy zestaw kafelków (przycisk „Utwórz nowy” w sekcji Zestawy klocków), po czym ujrzymy okno, jak na powyższym zrzucie ekranu. Aby przesłać obraz, musimy kliknąć przycisk „Wybierz obraz” i wybrać wstępnie przygotowany plik z żądanym obrazem (obrazami) w otwartym oknie Eksploratora.

Po załadowaniu obrazu ustawimy jego parametry układu oraz wymiary w szerokości i wysokości, po czym (jeśli wszystko jest wyświetlane poprawnie) można dodać obraz do zestawu, naciskając przycisk „Dodaj”.

Dla każdego obrazu (kafelka) w macierzy możesz skonfigurować parametry interakcji z postaciami i obiektami w grze. Aby to zrobić, wybierz żądany kafelek i przejdź do następującego okna:

Sekcja „Granice kolizji” otworzy się w górnej części prawego okienka. Tutaj możemy wybrać dowolny kształt, który wskazuje granice interakcji naszego obiektu z postaciami z gry. Domyślnie wszystkie płytki posiadają parametr „Kwadrat” (kwadrat), co sprawia, że ​​płytka jest całkowicie nieprzejezdna i solidna. Jeśli chcesz, aby płytka była „przezroczysta” dla postaci (np. podłoga), wystarczy ustawić parametr „Bez kolizji”.

Oprócz obramowań dla każdego kafelka można ustawić animację, dodając ramki za pomocą przycisku „Wstaw ramki” na dolnym panelu. Domyślnie szybkość animacji wynosi 100 milisekund, ale tę liczbę można dowolnie zmieniać dla każdej klatki.

Aby to zrobić, po prostu kliknij dwukrotnie żądaną ramkę lewym przyciskiem myszy iw oknie, które się otworzy, zmień wskaźniki opóźnienia według potrzeb. Możliwa jest również korekta zaznaczonej ramki za pomocą wbudowanego edytora graficznego, który otwierany jest przyciskiem „Edytuj ramkę”.

Renderowanie scen w Stencyl

Po utworzeniu zestawu płytek logiczne jest przejście do następnego kroku - tworzenia gotowej przestrzeni gry z dodanych obrazów. Możesz to zrobić, klikając przycisk „Utwórz nowy” w sekcji Sceny. Po naciśnięciu przycisku przejdziemy do okna ustawień sceny:

Tutaj na pewno musimy ustawić unikalną nazwę dla naszej sceny w polu „Nazwa”, określić wymiary (szerokość i wysokość w kafelkach (domyślnie) lub piksele) oraz opcjonalnie (czyli na własne życzenie) ustawić tło kolor nowej sceny. Kliknij "OK" i wejdź do edytora poziomów:

Wygląda jak edytor graficzny. W centrum znajduje się przestrzeń robocza, w której rysujemy nasz poziom. Po lewej iu góry znajdują się małe paski narzędzi. Po prawej stronie znajdują się panele palet, wybór zestawów kafelków i zarządzanie warstwami. Teraz jak to wszystko działa...

Przede wszystkim rysujemy tło naszego miejsca pracy. Aby to zrobić, w prawym panelu aktywuj zakładkę „Paleta”, a na niej zakładkę „Kafelki” i wybierz żądany kafelek z przedstawionej listy. Następnie w lewym panelu wybierz narzędzie Ołówek i narysuj żądane obszary wybranym kafelkiem.

Ze względu na obsługę warstw, płytki mogą na siebie zachodzić, więc najbardziej logiczne jest uporządkowanie poziomu, biorąc pod uwagę fakt, że np. na warstwie „Layer 0” będziemy mieli podłoże tła, powyżej, warstwa z przeszkodami i postaciami, a jeszcze wyższa - warstwa z różnymi licznikami i wskaźnikami gry.

Warstwy można kontrolować za pomocą przycisków pod panelem „Warstwy”. Znajdują się tam przyciski do tworzenia, usuwania, przenoszenia i zmiany nazw warstw. Ponadto każdą warstwę można ukryć lub wyświetlić, klikając przycisk w postaci oka po prawej stronie nazwy warstwy.

Tworzenie postaci

Po utworzeniu naszej pierwszej sceny nadszedł czas, aby wypełnić ją różnymi grywalnymi postaciami. W Stencyl są nazywani „aktorami” i są przechowywane odpowiednio w sekcji „Typy aktorów”. Aktorzy są stworzeni według tej samej zasady, dlatego proces ten rozważymy na przykładzie tworzenia głównej bohaterki naszej gry – Fridy.

Aby dodać nowego aktora, po prostu przejdź do wspomnianej wcześniej sekcji Typy aktorów i kliknij tam przycisk „Utwórz nowy”. Już zwyczajowo jesteśmy ponownie pytani o to, jak chcemy nazwać nowy obiekt gry, po czym przed nami pojawi się okno edycji animacji postaci:

Tutaj po lewej stronie wyświetlana jest lista dodanych animacji aktora (domyślnie jest to pusta ramka „Animacja 0”), a po prawej stronie znajdują się narzędzia do dodawania i konfigurowania tych właśnie animacji.

Wybierz pustą animację (lub dodaj nową, klikając przycisk z plusem na dole) i kliknij pole „Kliknij tutaj, aby dodać ramkę” po prawej stronie. Następnie otworzy się okno dodawania zdjęć, które jest podobne do podobnego okna dodawania nowych płytek do zestawu. Kliknij przycisk „Wybierz obraz”, wybierz żądany obraz i dostosuj jego układ i wymiary (jeśli to konieczne).

Gdy wszystko jest ustawione, kliknij przycisk „Dodaj” w prawej dolnej części okna dodawania - animacja powinna wyświetlić się jako podgląd w lewej sekcji:

Teraz pozostaje tylko dostosować szybkość odtwarzania (dwukrotne kliknięcie dowolnej klatki) i kilka dodatkowych parametrów, takich jak nazwa (Nazwa) animacji (bardzo przydatne przy złożonych projektach), odtwarzanie w pętli (zapętlanie) (domyślnie aktywne ), synchronizacja i punkt bazowy (Origin Point) początek duszka (domyślnie - środek).

Na dolnym pasku narzędzi w prawej sekcji znajdziemy szereg przycisków. Pozwalają:

• dodać nowe klatki do animacji (Importuj klatki);
• edytować wybraną ramkę w zewnętrznym edytorze (Edit Frame (External));
• stworzyć ramkę w zewnętrznym edytorze (Create Frame (External));
• edytować ramkę we wbudowanym edytorze (Edit Frame);
• usuń ramkę (Usuń ramkę);
• kopiuj ramkę (kopiuj ramkę);
• wstaw ramkę (Wklej ramkę);
• przesunąć jedną klatkę wstecz (Przesuń do tyłu) lub do przodu (Przesuń do przodu).

Ustawianie parametrów i zachowania postaci

Powyżej wykonaliśmy animację biegu Fridy, używając do tego tylko dwóch klatek, które w rzeczywistości są tą samą postacią odbitą poziomo. Teraz musimy upewnić się, że możemy używać myszki i klawiatury do sterowania ruchem naszej bohaterki, a także aby odpowiednio reagowała na zderzenia z przeszkodami, które narysowaliśmy na scenie.

Przede wszystkim skonfigurujmy kolizje. Aby to zrobić, spójrz na linię pod listą otwartych kart i znajdź tam przycisk „Kolizja”.

Domyślnie obszar kolizji to kwadrat otoczony wokół całego duszka animacji. Oznacza to, że zdarzenie kolizji nastąpi na całym obszarze obiektu. Jednak w praktyce nasze zdjęcie najczęściej zawiera dodatkowe elementy (dla Fridy np. blaster), które zgodnie z ideą nie powinny z niczym współgrać. To za pomocą tej sekcji możemy ustawić wszystkie obszary kolizji.

Na początek zmniejszymy obszar wokół Fridy do rozmiarów jej ciała. Tutaj musimy wziąć pod uwagę, że nie możemy przesuwać obszaru za pomocą myszy, a do ustawień używane są cztery parametry numeryczne w sekcji „Aktualny kształt”. Najpierw ustalamy odsunięcie obszaru w poziomie (od lewej krawędzi) i w pionie (od góry), a następnie określamy nową szerokość i wysokość obszaru kolizji.

Poniżej znajduje się kilka dodatkowych parametrów zgrupowanych w sekcji „Właściwości fizyczne”. Tutaj mamy do czynienia z polem wyboru „Czy jest czujnikiem?” oraz pojęcie grup.

Jeśli aktywujesz flagę „czujnik”, wybrany obszar nie będzie już obiektem fizycznym: postać lub jej część stanie się niejako „przezroczysta” dla różnych przeszkód, ale jednocześnie zachowa możliwość uruchomienia dowolnych akcji pod pewnymi warunkami.

Przykładem z życia może być nowoczesna sygnalizacja za pomocą laserów: nie widzimy samego lasera, ale jeśli go dotkniemy, rozpocznie się proces powiadamiania, że ​​wspięliśmy się w niewłaściwe miejsce :).

Teraz po co te grupy… Załóżmy, że nasza postać nie ma w rękach blastera, ale miecz, którym (a dokładniej ona :)) sieka wrogów na kapustę (przy okazji Frida ma laser ostrze w kodzie źródłowym ;)).

Zadanie polega na tym, że gdy dotkniesz wroga mieczem, wróg ginie, ale jeśli spudłowaliśmy, a przeciwnik uderzył Fridę, to część jej energii została odebrana. A głównym problemem jest to, że animacja uderzenia, którą mamy, to tak naprawdę obraz, na którym zarówno Frida, jak i miecz są obecne w tym samym czasie…

Jeśli przywiążemy akcję miecza do obrazu, to ktokolwiek dotknie naszej bohaterki podczas odtwarzania animacji, zginie od ciosu. I właśnie po to, aby podzielić obraz na kilka obiektów o różnych możliwościach i parametrach, wymyślono mechanizm grupowania.

Domyślnie mamy tylko jeden obszar, który odpowiada samej postaci („Taki sam jak typ aktora”). Jednak korzystając z narzędzi do rysowania nad głównym obszarem roboczym, możemy tworzyć nowe obiekty wirtualne i ustawiać dla nich grupę za pomocą przycisku „Edytuj grupy”.

Z kolizjami może to wszystko, a teraz proponuję zająć się najbardziej podstawowym – ustawieniem zachowania aktora na scenie. Aby to zrobić, musimy przejść do sekcji „Zachowania”:

Domyślnie na początku nie ma tu żadnych akcji, ale możemy je dodać, klikając przycisk „Dodaj zachowanie” w lewym dolnym rogu. Zobaczysz listę gotowych do użycia funkcji do sterowania postacią lub interakcji z innymi aktorami na scenie.

Na przykład wybrałem zachowanie „Ruch w 8 kierunkach”, które obejmuje ruch aktora po okręgu w dowolnym kierunku. Teraz wybieramy dodaną akcję z listy po lewej stronie, a po prawej stronie możemy skonfigurować jej parametry.

Dodawanie aktorów na scenę i testowanie poziomu

Jeśli postępowałeś zgodnie z instrukcjami, powinieneś już mieć niezbędne minimalne zasoby do gry. Pozostaje nauczyć się, jak dodawać aktorów na scenę i testować wydajność przestrzeni gry.

Wracamy do edytora stworzonej wcześniej sceny i ponownie aktywujemy paletę (Palette), ale teraz zamiast kafelków włączamy zakładkę „Aktorzy” (Aktorzy). Zobaczymy listę wcześniej stworzonych postaci, które możemy dodać do sceny za pomocą narzędzia Ołówek:

Mamy jedną główną bohaterkę, więc wystarczy jedno kliknięcie ołówkiem, aby dodać ją do sceny. A teraz nadeszła chwila prawdy - pierwsza próba! Aby rozpocząć wstępną kompilację projektu wystarczy kliknąć przycisk „Przetestuj scenę” w prawym górnym rogu zakładki z naszą sceną. Po pewnym czasie (pierwsza kompilacja zawsze trwa dłużej) możemy podziwiać naszą pracę we flash playerze:

Oprócz samego gracza z grą na boku mamy do dyspozycji okno pokazujące logi gry. Z ich pomocą możemy szybko znaleźć problemy w pracy i spróbować je naprawić.

Jak widać, Fridę możemy już ruszać w różne strony, ale sama scena pozostaje nieruchoma i gdy tylko nasza bohaterka wyjdzie poza krawędź widocznej części sceny, znika… Nieporządek :). Możesz rozwiązać problem, dodając zachowanie Fridy „Podążanie za kamerą” lub ustawiając żądane parametry za pomocą zdarzeń.

Przydałoby się też zastąpić standardowy kursor czymś bardziej odpowiednim, na przykład celownikiem. Możemy to zaimplementować, dodając nowego aktora jako celownik, usuwając jego obszar kolizji i dołączając go do sceny za pomocą standardowego zachowania „Niestandardowego kursora myszy”:

System wydarzeń w Stencyl

Proste gry w Stencyl można tworzyć tylko przy użyciu standardowych zachowań (Behaviors), jednak jeśli potrzebujemy czegoś niestandardowego, to już musimy pomyśleć o wykorzystaniu zdarzeń, które są skonfigurowane dla aktorów i scen w sekcji „Zdarzenia”:

W zasadzie zachowania (Behaviors) również budowane są na podstawie zdarzeń, ale posiadają również wizualny interfejs, który ułatwia edycję. Tutaj mamy do czynienia bezpośrednio z blokami funkcjonalnymi, które wykonują określone czynności.

Okno wydarzenia podzielone jest na trzy sekcje:

1. W lewej części znajduje się lista zdarzeń i przyciski do zarządzania (tworzenia/usuwania/przenoszenia) nimi. Aby dodać zdarzenie, musimy kliknąć przycisk „Dodaj zdarzenie”, a następnie wybrać żądaną grupę z listy rozwijanej i określić konkretną funkcję, której potrzebujemy. Po prawej stronie utworzonego wydarzenia znajduje się pole wyboru, które w razie potrzeby pozwala nam je dezaktywować.
2. W prawej sekcji mamy listę wszystkich dostępnych akcji pogrupowanych w 10 sekcji, z których każda jest aktywowana odpowiednim przyciskiem. Dla większej wygody działania w każdej sekcji są posortowane w zakładki tematyczne i mają swój własny, niepowtarzalny kolor. Na dole znajdują się jeszcze trzy zakładki. Domyślnie aktywna jest zakładka „Paleta” (paleta), na której znajdują się listy akcji. Druga zakładka - "Atrybuty" - służy do wyświetlania zmiennych lokalnych (więcej o nich poniżej), a trzecia - "Ulubione" - służy do wyświetlania Twoich ulubionych akcji.
3. Centralna sekcja to obszar roboczy. W tym miejscu tworzymy ostateczne przykłady zachowania postaci, wykorzystując różne kombinacje bloków akcji i zdarzeń, zgodnie z którymi te akcje występują. Łączenie odbywa się poprzez proste przeciąganie bloków na obszar roboczy, a następnie edycję określonych w nich parametrów. Należy pamiętać, że funkcja składa się tylko z tych bloków, które są ze sobą połączone i wchodzą w skład głównego bloku zdarzenia. Tak więc, aby tymczasowo usunąć niektóre aktualnie niepotrzebne (ale przydatne) kombinacje, wystarczy przenieść je z ogólnej struktury na wolną przestrzeń. Jeśli z czasem akcje okażą się zupełnie niepotrzebne, można je całkowicie usunąć, przenosząc je do kosza, który znajduje się w prawej górnej części obszaru roboczego.

Właściwie opisaliśmy już algorytm tworzenia wydarzeń, ale niestety nie mogę podać żadnych uniwersalnych zaleceń - dla każdej gry wydarzenia będą inne i może być ich całkiem sporo... Jako przykład możesz spójrz na kody źródłowe gry o Fridzie, które znajdziesz w archiwum z programem, ale to tylko wskazówka, bo praca nad wydarzeniami to Twoja osobista kreatywność :).

Ustalanie fizyki i właściwości

Ty i ja omówiliśmy już wiele rzeczy, ale nie poruszyliśmy dodatkowych tematów, które mogą być bardzo ważne przy tworzeniu gier - mówię o ustawianiu wszelkiego rodzaju właściwości naszych aktorów i scen. Te parametry są przechowywane w dwóch ostatnich zakładkach. A pierwsza to „Fizyka”:

W przypadku scen i aktorów zakładka ustawień fizyki wygląda inaczej. W zakładce ustawień fizyki sceny znajdują się tylko dwa parametry - ustawienia grawitacji poziomej i pionowej. Wygląd sekcji ustawień parametrów fizycznych aktorów pokazano na powyższym zrzucie ekranu i składa się z pięciu zakładek z różnymi opcjami:

1. Zakładka Ogólne. Tutaj mamy trzy parametry: typ aktora (stacjonarny, platformowy (może poruszać się według podanych zasad, ale inni aktorzy nie mogą go poruszać) i ruchomy), rotacja aktora (może się obracać lub nie) oraz wpływ grawitacji.
2. Zakładka „Ciękość” („Waga”). Na tej zakładce możesz ustawić masę wirtualnego obiektu i jego bezwładność.
3. Zakładka „Materiał” pozwala ustawić dla aktora charakterystykę, która będzie symulować zachowanie rzeczywistego obiektu wykonanego z określonego materiału. Mamy możliwość wybrania jednego z ustawień wstępnych z listy rozwijanej „Materiały wstępne” lub ręcznego ustawienia charakterystyki tarcia i elastyczności naszego aktora.
4. Zakładka Tłumienie daje nam możliwość dostrojenia parametrów interakcji aktora z otoczeniem poprzez wprowadzenie takich wartości jak opór liniowy (np. do powietrza) i kątowy (podczas obrotu).
5. Zakładka „Zaawansowane” daje nam dostęp do różnych dodatkowych ustawień, które nie zostały uwzględnione w poprzednich sekcjach. Tutaj możesz aktywować uproszczony model fizyki (w celu optymalizacji gry), automatyczne wykrywanie obszarów kolizji, zdarzenia ponownego zderzenia oraz możliwość nałożenia pauzy na aktora.

Zrozumieliśmy fizykę, a teraz spójrzmy na właściwości, które są wywoływane przez naciśnięcie przycisku „Właściwości”:

Podobnie jak w poprzednim przypadku, właściwości scen i aktorów będą inne. We właściwościach sceny możemy określić jej nazwę („Nazwa”), wymiary (sekcja „Rozmiar”) oraz kolor tła („Kolor tła”).

We właściwościach aktora oprócz nazwy można określić opis (pole „Opis”) obiektu, grupę, do której należy aktor (sekcja „Wybierz grupę”) oraz warstwę animacji dla urządzeń mobilnych urządzenia (tu nie można nic zmienić, ponieważ darmowa wersja programu nie pozwala na eksportowanie gier do formatów na telefony komórkowe.

Ale to nie wszystkie ustawienia, które są dla nas dostępne w Stencylu. Ogólne ustawienia gry są dla nas dostępne po naciśnięciu przycisku „Ustawienia” na głównym pasku narzędzi:

W oknie ustawień po lewej stronie znajduje się lista grup parametrów, a po prawej obszar główny (czasami podzielony na kilka zakładek) zawierający wszelkiego rodzaju opcje. Tutaj interesują nas następujące sekcje:

1. „Ustawienia” („Ustawienia”). Pierwsza grupa ustawień, która pozwala nam nieco spersonalizować naszą grę. Ta grupa zawiera trzy zakładki. Na pierwszym z nich („Główne”) możemy nadać grze nową nazwę, krótki opis, a także obrazek podglądu i ikonę. W zakładce „Wyświetlanie” konfigurowany jest ostateczny rozmiar przestrzeni gry, a na ostatnim („Zaawansowane”) można włączyć uproszczoną fizykę i ustawić parametry wygładzania krawędzi.
2. „Ładowarka” („Ładowarka”). W tej grupie możemy częściowo (biorąc pod uwagę pewne ograniczenia darmowej wersji) dostosować wygląd preloadera (loadera), który będzie wyświetlany przed pełnym załadowaniem gry. Istnieją już cztery zakładki. W pierwszym („Ogólne” - ogólne) możesz podać link do swojej witryny, włączyć ochronę przed kopiowaniem gry na innych zasobach (w drugiej linii podajemy listę dozwolonych witryn oddzielonych przecinkiem) i jeden z loadera Skórki. W zakładce Wygląd możemy ustawić kolor ekranu bootloadera oraz obraz tła. Korzystając z zakładki „Styl paska”, możesz określić rozmiar paska ładującego, a „Kolor paska” pozwala ustawić odpowiednio jego kolory.
3. „Atrybuty” („Atrybuty”). Ta grupa ustawień jest jedną z najbardziej podstawowych! Tutaj możesz kontrolować zmienne globalne używane w grze (więcej o zmiennych w następnej sekcji poniżej).
4. „Kontrole” („Zarządzanie”). Jak sama nazwa wskazuje, w tej grupie możemy przekonfigurować i dodać przyciski klawiatury, za pomocą których będą wykonywane określone akcje w grze.
5. „Grupy” („Grupy”). Rozważaliśmy już nieco wyżej mechanizm grup. Tutaj mamy możliwość obejrzenia wszystkich utworzonych grup oraz ich edycji.

Właściwie to wszystkie ustawienia, których będziemy potrzebować do tworzenia gier flash w darmowej wersji Stencyla. Ale skoro ten rozdział dotyczy ustawień, grzechem byłoby nie wspomnieć o parametrach samego programu. Możesz uzyskać do nich dostęp, aktywując pozycję „Preferencje” w menu „Plik”:

Program zapewnia obsługę wielojęzycznego interfejsu, jednak na chwilę obecną jest tylko lokalizacja w języku angielskim, więc przeszliśmy od razu do drugiej zakładki - "Workspace". Faktem jest, że w trzeciej wersji Stencyla pojawiła się funkcja, która automatycznie generowała adaptacyjne obrazy z załadowanych duszków.

A domyślnie duszek jest podwojony, co prowadzi do pogorszenia jakości grafiki. Aby temu zapobiec, radzę wyłączyć zmianę rozmiaru obrazu, wybierając opcję Standard (1x) w polu Skala.

Radzę również zajrzeć do trzeciej zakładki - „Redakcja”. Tutaj możesz powiązać czynności przetwarzania grafiki, dźwięku i tekstu z zewnętrznymi, bardziej zaawansowanymi edytorami (zamiast tych wbudowanych w Stencyl).

Trochę o zmiennych

Rozważyliśmy prawie wszystkie niuanse pracy w Stencylu, ale nie poruszyliśmy jednej z najpotężniejszych funkcji - pracy ze zmiennymi.

Zmienne w dowolnym języku programowania pozwalają operować na różnych zdarzeniach, wyrażając je za pomocą określonych liczb (zmiennych liczbowych), warunków (zmiennych logicznych), tekstów (zmiennych łańcuchowych) itp. Główną cechą zmiennych jest możliwość zamiany dowolnej wartości w ustalonych granicach. Prosty przykład zmiennej: osoba towarzysząca w klasie. Dziś może Iwanow, jutro Pietrow, a pojutrze Sidorow :).

W naszym przypadku zmienna „dyżur” może przyjąć jedną z trzech wartości, które zostaną automatycznie podstawione w zależności od określonego warunku (np. kolejność nazwisk na liście).

W Stencyl zmienne mogą być lokalne lub globalne. Możemy zadeklarować zmienne lokalne w ramach jakiegoś zdarzenia lub zachowania i będą one działać tylko dla określonych akcji. Możesz utworzyć zmienną lokalną w edytorze zdarzeń, wywołując sekcję „Atrybuty”:

Tutaj mamy kilka zakładek:

1. Zakładka „Getters” umożliwia ustawienie zmiennych, które otrzymają wartość z dowolnych obliczeń lub instrukcji bezpośrednich.
2. Zakładka „Ustawiacze” umożliwia ustawienie dowolnych wartości dla wcześniej utworzonych zmiennych.
3. Zakładka „Atrybuty gier” przechowuje bloki zmiennych globalnych i, w razie potrzeby, umożliwia dodawanie nowych (chociaż poniżej zastanowimy się, jak to zrobić lepiej).
4. Zakładka Listy daje nam możliwość tworzenia tablic danych.
5. Zakładka Funkcje służy do organizowania tworzonych funkcji.

Algorytm tworzenia zmiennej lokalnej jest prosty: najpierw utwórz nowy blok w zakładce „Getters”, a następnie znajdź nowo utworzoną zmienną w zakładce „Settery” i dodaj z nią blok do obszaru roboczego, przyrównując go do jakiegoś parametr gry. To wszystko - zmienna jest zadeklarowana i otrzymała zestaw poprawnych wartości.

Zmienne globalne (atrybuty gry) w Stencyl są ustawiane natychmiast dla całej gry i można je wywoływać w dowolnym zdarzeniu lub zachowaniu. Jak wspomniano powyżej, możesz je utworzyć w sekcji „Atrybuty” w zakładce „Atrybuty gry”:

Jednak dużo wygodniej jest przeglądać i zarządzać wszystkimi utworzonymi zmiennymi za pomocą sekcji "Atrybuty" w ustawieniach (przycisk "Ustawienia" na pasku narzędzi lub "Pokaż atrybuty gry" w zakładce "Atrybuty gry" w edytorze wydarzeń ):

Tutaj mamy całą listę zmiennych globalnych i możliwe jest tworzenie nowych poprzez naciśnięcie przycisku „Utwórz nowy”. Dla nowej zmiennej możemy od razu ustawić typ (numeric, text, boolean lub array) i wartość początkową bez wychodzenia z okna, co moim zdaniem jest bardzo wygodne.

Używając zmiennych globalnych, bardzo wygodnie jest zaimplementować różne liczniki, ponieważ dane w nich są zapisywane, gdy gracz przechodzi na nowe poziomy i są przechowywane w pamięci, o ile sama gra jest włączona. Zalecam również używanie zmiennych globalnych do śledzenia odtwarzanej animacji.

Po nadaniu aktorowi konkretnego duszka w zdarzeniach, możemy temu duszkowi przypisać określoną wartość w zmiennej poniżej (np. numer seryjny lub nazwa animacji). Zatem wiążąc akcję ze zmienną, możemy ją wywołać w dowolnym momencie, ustawiając tę ​​zmienną na żądaną wartość.

Publikowanie, importowanie i eksportowanie gier

Na koniec, choć krótko, zapoznaliśmy się z podstawowymi zasadami pracy ze Stencylem. Załóżmy, że stworzyliśmy grę, przetestowaliśmy ją i okazało się, że wszystko działa. Teraz do Ciebie należy przekształcenie gry z projektu w prawdziwy plik SWF, który można opublikować w Internecie. Aby to zrobić, wystarczy otworzyć menu „Publikuj” i kliknąć element „Flash” na liście „Sieć”.

Rozpocznie się kompilacja pliku gry, po czym pojawi się żądanie, gdzie i pod jaką nazwą zapisać wynikowy plik flash. Oszczędzamy i to wszystko - gra gotowa :).

Proces odwrotny polega na zaimportowaniu gry. Dzięki funkcji importu możesz otwierać projekty gier innych użytkowników, na przykład, aby zobaczyć, jak realizują tę lub inną funkcję;). Możesz także zaimportować grę z menu Plik. Po udanym imporcie gra pojawi się na głównym ekranie na liście projektów. Jednak tutaj warto zrobić małą rezerwację.

Problem w tym, że nowy Stencyl 3.0 jest tylko częściowo kompatybilny z projektami stworzonymi we wcześniejszych wersjach, więc funkcjonalność zaimportowanego projektu gry może nie być kompletna lub w najgorszym przypadku gra w ogóle się nie uruchomi, dając błąd . Będziesz miał kilka opcji - albo poszukaj i napraw błędy, albo pogódź się z tym i zostaw wszystko tak, jak jest :).

Zalety i wady programu

• łatwość tworzenia gier z niewielkimi lub żadnymi umiejętnościami programowania;
• możliwość tworzenia gier niemal każdego gatunku;
• duży zbiór gotowych zachowań i zasobów gry;
• możliwość wymiany projektów gier;
• nie ma żadnych ograniczeń podczas tworzenia gier flash.

• dość duża zasobochłonność zarówno samego programu, jak i tworzonych gier;
• ograniczona liczba obiektów na scenie – im więcej, tym wolniej gra (aż do braku startu);
• nie ma obsługi czcionek cyrylicy (musisz edytować obrazy wektorowe alfabetu łacińskiego, zastępując je niezbędnymi literami);
• niepełna kompatybilność nowej wersji programu z projektami gier tworzonymi we wcześniejszych wersjach.

Wyniki

Ze wszystkich istniejących obecnie programów do tworzenia gier flash, Stencyl jest najrozsądniejszym kompromisem między łatwością obsługi a szerokim zakresem możliwości. Dobrą wiadomością jest to, że funkcjonalność projektanta w darmowym wydaniu jest praktycznie nieograniczona, co pozwala niemal w pełni zrealizować każdy pomysł.

Nie zapominaj jednak o „prawie”… Faktem jest, że sam Stencyl działa w oparciu o maszynę JAVA, która, jak wiadomo, jest dość wymagająca pod względem zasobów. Jeśli do tego obciążenia dodamy również obciążenie, które tworzy gra, okazuje się, że do normalnej pracy potrzebujemy nowoczesnego, wydajnego komputera.

To pierwsze „prawie”. A drugim jest dorozumiane ograniczenie liczby obiektów na scenie, o czym wspomniałem już mimochodem. Nawet jeśli te obiekty to tylko kafelki, ale jest ich dużo, gra może dać błąd podczas testowania i nie rozpocząć się, dopóki nie zmniejszysz ich liczby.

Podsumowując, można powiedzieć, że Stencyl będzie idealnym silnikiem do tworzenia wszelkiego rodzaju casualowych gier flashowych oraz side-scrollowych strzelanek. Co więcej, po przećwiczeniu tworzenia gier flash, możesz kupić jeden z rodzajów licencji i, po niewielkiej zmianie w mechanice, przenieść grę do formatów obsługiwanych przez Androida i iOS. I to jest prawdziwy sposób na zarabianie pieniędzy, umieszczając grę na Play Market lub App Store!

Na koniec pozostaje tylko życzyć powodzenia wszystkim, którzy zdecydują się poważnie zaangażować się w tworzenie gier. Niech twoje algorytmy zadziałają za pierwszym razem, a kompilator siedzi i milczy, kiedy zaczynasz swoje gry :).

PS Dozwolone jest dowolne kopiowanie i cytowanie tego artykułu pod warunkiem wskazania otwartego aktywnego linku do źródła i zachowania autorstwa Rusłana Tertysznego.

* Używane programy: Flash CS3, Photoshop CS3
* Złożoność: średni
* Szacowany czas realizacji: 3 godziny

Witryna z portfolio ma ogromne znaczenie dla każdego współczesnego artysty, fotografa, projektanta, a nawet muzyka. Wykazuje poważne podejście do biznesu i profesjonalizm. Dziś pokażemy, jak stworzyć oryginalne i stylowe portfolio zdjęć w oparciu o nowoczesny system zarządzania treścią Flash Moto CMS.

Użyjemy samodzielnej wersji Moto CMS, która zawiera różne narzędzia, komponenty, wbudowane przykłady i czyste szablony witryn o różnej strukturze. A my korzystamy z najprostszego szablonu, czyli stworzymy od podstaw stronę z portfolio zdjęć.

W tym przewodniku omówimy następujące tematy:

* Tworzenie kontenerów.
* Twórz gniazda (przycisk Zamknij, prosty przycisk).
* Twórz moduły (odtwarzacz muzyki i galerię obrazów).
* Edytuj moduł wstępnego ładowania witryny
* Tworzenie stron serwisu i wypełnianie ich treścią.

Porozmawiamy również o funkcjach i funkcjonalności Panelu sterowania Moto CMS.

Będziemy potrzebować:
* Adobe Photoshop;
* Adobe Flash CS3;
* Wersja offline Moto CMS (bezpłatna wersja próbna);
* Projekt strony internetowej do. Format PSD.

Podgląd efektu końcowego

Krok 1: Pobierz pliki Moto CMS

Aby rozpocząć tworzenie naszej witryny z portfolio fotografii, musisz pobrać samodzielną wersję Moto Flash CMS. Aby powtórzyć wszystkie kroki z tego przewodnika i zrozumieć możliwości Moto CMS, wystarczy wersja próbna.

Krok 2: Krótki przegląd plików Moto CMS

Oto krótki przegląd plików i folderów Moto CMS:

* składniki. Ten folder zawiera komponenty mxp zarządzane przez Adobe Extension Manager.
* panel sterowania. Zawiera wszystkie pliki Panelu sterowania.
* dokumenty. Ten folder zawiera dokumentację API.
* Przykłady. Zawiera 4 przykłady gotowych stron flash, od najprostszych do najbardziej złożonych, z modułem galerii, modułem aktualności, odtwarzaczem muzyki i wideo, formularzem kontaktowym itp.
* Szablony. 5 szablonów, których możesz użyć do stworzenia strony opartej na Moto CMS. Każdy szablon posiada niezbędny zestaw plików i różni się strukturą. Dzisiaj użyjemy jednego z tych szablonów, a konkretnie szablonu nr 1, jako podstawy naszego portfolio zdjęć.
* przeczytaj plik, który opisuje, jak rozpocząć tworzenie witryny za pomocą Moto CMS.

Krok 3: Uruchom na lokalnym hoście

Naszym następnym krokiem jest uruchomienie szablonu witryny, z którego zbudujemy naszą witrynę portfolio. Aby to zrobić, potrzebujemy lokalnego serwera WWW. Używamy WampServer. Pozwala na budowanie aplikacji internetowych z bazami danych Apache, PHP i MySQL.

Aby uruchomić szablon strony nr 1, po prostu prześlij zawartość folderu na lokalny serwer szablon_01 z katalogu /templates/, a także zawartość folderu panel sterowania.

Następnie przechodzimy do Panelu sterowania Moto CMS, wpisując nasz adres URL w pasku adresu przeglądarki, dodając na końcu /admin

Notatka: W tej chwili nie będzie można wyświetlić tej witryny, ponieważ nie zawiera ona jeszcze żadnych stron. Pojawi się strona błędu 404.

Krok 4: Edytowanie pliku config.xml

Wystarczy zmienić szerokość i wysokość strony oraz ustawić kolor tła.

Rozmiar naszego projektu to 980×800 pikseli. Aby rozmiar zmieniał się na dużym ekranie, musimy ustawić "100%" dla szerokości i wysokości strony. A żeby poprawnie wyświetlał się na ekranie o małej rozdzielczości musimy określić minimalną szerokość i wysokość serwisu (pojawią się paski przewijania). Kolor tła jest czarny (#000000).

Krok 5: Zmień style.css

Teraz musimy otworzyć plik style.css i ustawić kolor tła (czarny). Wszystko inne można edytować za pomocą Panelu sterowania Moto CMS.

Krok 6: Utwórz moduł ładowania wstępnego

Pliki źródłowe moto.xfl i website.xfl znajdują się odpowiednio w folderach flamoto i flawebsite.
Preloader witryny powinien zostać utworzony w moto.xfl. Preloader może być prostym klipsem z 100 ramkami.

W panelu Działania tego klipu piszemy: „Stop ();” dla pierwszej klatki. Następnie animujemy pozostałe klatki tak, jak nam się podoba.

Piszemy również „Stop ();” w akcjach pierwszej klatki osi czasu we fla.

Nie zapomnij określić wymiarów witryny (minimalna szerokość i wysokość) we właściwościach pliku moto.fla.

Naszym następnym krokiem jest stworzenie ładnej animacji znikania preloadera. Na ostatniej ramce musimy uruchomić stronę poprzez aktywację funkcji „showWebsite()”.

Otwórz plik website.xfl i zaktualizuj moduł wstępnego ładowania.

Krok 7: Tło strony

Otwórz Bibliotekę multimediów Moto CMS (Ustawienia > Biblioteka multimediów) i wraz z innymi niezbędnymi obrazami (dla strony głównej, stron głównych lub galerii) prześlij obraz tła za pomocą przycisku „Dodaj multimedia”.

Następnie wróć do Panelu sterowania, utwórz nową stronę i wstaw obraz tła za pomocą przycisku „Zdjęcie”. Przeciągnij obraz i wyśrodkuj go.

Menedżer czcionek umożliwia użytkownikom zarządzanie czcionkami witryny, które są przechowywane jako pliki SWF i można je pobrać.

Przed załadowaniem jakiejkolwiek czcionki musimy ją najpierw przekonwertować do formatu SWF. Do tego użyjemy Kreator czcionek online to poręczna aplikacja internetowa opracowana przez zespół MotoCMS, która umożliwia łatwą konwersję plików TTF i OTF do SWF. Wystarczy wybrać żądany plik czcionki z rozszerzeniem .TTF lub .OTF, dodać go do Kreatora Czcionek Online, kliknąć przycisk „Utwórz czcionkę” i pobrać gotowy plik SWF, po czym możemy go wykorzystać w naszym portfolio strona internetowa .

Stwórz nazwę strony internetowej i slogan

Po przesłaniu nowej czcionki możesz utworzyć tytuł witryny i hasło za pomocą narzędzia Tekst i zastosować żądaną czcionkę. Do stworzenia hasła używamy czcionki Tahoma, rozmiar: 10, kolor: # 727272. Następnie dostosuj nazwę i hasło strony zgodnie z projektem w .PSD.

Krok 9: Dodawanie obrazu do strony głównej

Obraz galerii umieścimy na stronie głównej serwisu. Aby to zrobić, wybierz obraz z Biblioteki multimediów, klikając „Zdjęcie” na lewym pasku narzędzi. W razie potrzeby dostosuj jego lokalizację zgodnie z projektem strony głównej.

Krok 10: Utwórz dolne menu

Za pomocą narzędzia Kształt utwórz szary, wąski prostokąt i użyj narzędzia Tekst, aby utworzyć na nim przyciski. Dostosuj wszystko zgodnie z projektem Twojej witryny.
Zapisz wszystkie zmiany i zobacz wynik, klikając „Podgląd”.
Możesz również użyć wbudowanego modułu menu, aby utworzyć menu.

Krok 11: Utwórz kontenery treści

Notatka: Kontenery to klipy w pliku website.fla, w których zawartość można dodawać dynamicznie. Mogą być 4 rodzaje: 1) kontener z obiektami widocznymi w całej witrynie, 2) kontener z obiektami układu; 3) kontener z obiektami stron; 4) kontener z wyskakującymi obiektami.

Wybrany przez nas szablon witryny nr 1 ma domyślnie dwa kontenery: kontener z obiektami widocznymi w całej witrynie oraz kontener z obiektami stron. Jeśli otworzymy plik website.fla, zobaczymy je:

Kontenery te są zapisywane w pliku structure.xml. Upewnij się, że szerokość to 980, a wysokość 800px.

Kontener z obiektami widocznymi w całym serwisie:

Kontener z obiektami strony:

Aby elementy witryny, takie jak tło, nazwa witryny, slogan i dolne menu były widoczne na wszystkich stronach, musimy umieścić je w kontenerze obiektów obejmującym całą witrynę. Możemy to łatwo zrobić za pomocą Panelu sterowania Moto CMS. Wystarczy kliknąć żądany element i wybrać jego lokalizację - Witryna . (Na całej stronie internetowej).

Krok 12: Utwórz stronę O nas

Utwórz pustą stronę

W lewym górnym rogu kliknij przycisk „Utwórz”, co pozwoli nam stworzyć nową stronę.

Podłączanie niezbędnych przycisków menu do nowej strony

W tym celu wracamy do strony głównej i łączymy przycisk menu z nową stroną. Po prostu zaznacz tekst przycisku menu i kliknij ikonę linku po prawej stronie, aby otworzyć edytor linków. W naszym przypadku przycisk menu Portfolio prowadzi do strony głównej serwisu, a przycisk O nas do strony O nas.

Dodawanie obrazu tła do strony z informacjami

Postanowiliśmy dodać do strony czarne tło. Aby to zrobić, przejdź do Biblioteki multimediów, klikając przycisk „Zdjęcie” na lewym panelu, wybierz tam wstępnie załadowany obraz (zwykły czarny prostokąt) i dostosuj jego położenie na stronie zgodnie z projektem.

Dodawanie tekstu do strony O nas

Dodawanie informacji tekstowych do strony za pomocą narzędzia Tekst. Wbudowany edytor WYSIWYG pokazuje wszystko, co robisz, więc formatowanie tekstu jest proste. Dodanie adresu kontaktowego jest również dość łatwe, wystarczy otworzyć Edytor linków i wprowadzić adres e-mail.

Kiedy skończysz, nie zapomnij umieścić elementów strony O nas w kontenerze z obiektami strony. Wybierz każdy element jeden po drugim i wybierz miejsce docelowe: Strona (zawartość strony).

Krok 13: Zmień obraz modułu wstępnego ładowania

Być może zauważyłeś białe, okrągłe moduły ładowania wstępnego podczas przeglądania stron. Aby je skonfigurować, otwórz plik website.fla i przejdź do biblioteki. Kliknij prawym przyciskiem myszy moduł ładowania wstępnego i wybierz Właściwości.

W oknie właściwości symbolu możesz wybrać element „Edytuj klasę bazową”, a następnie animować preloader tak, jak chcesz. Zostawimy preloader pusty i usuniemy obraz graficzny.

Krok 14: Animacja strony internetowej

Na koniec dochodzimy do najciekawszej części naszego poradnika: animacji strony. W tej chwili, jak być może zauważyłeś, strona jest statyczna, ponieważ ani jeden kontener nie jest animowany. Więc naszym następnym krokiem jest animacja kontenerów i dodanie innych animacji, aby ożywić naszą witrynę.

Animowanie domyślnych kontenerów

Kontener zawartości można łatwo animować na osi czasu. Otwórz plik website.fla i utwórz animację zanikania dla każdego kontenera.

Najpierw ożywimy główny kontener obiektami widocznymi w całej witrynie. To jest warstwa website_holder_1. Robimy prostą animację z przezroczystością, ale czymś ją ozdobimy. Utwórz drugą klatkę kluczową na warstwie, ustaw Alpha 0% dla pierwszej klatki kluczowej (ustaw ją przezroczystą), utwórz klatkę pomiędzy pierwszą a drugą, a następnie dodaj wygładzanie.

Stwórzmy animację dla kontenera z obiektami strony (warstwa page_1_holder_2) w ten sam sposób, ale spraw, aby pojawiła się nieco później.

Dodamy więc jeszcze dwie klatki kluczowe na warstwie, sprawimy, że kontener będzie przezroczysty w pierwszej i drugiej klatce, i utworzymy wygładzenie pomiędzy drugą klatką kluczową a trzecią.

Kiedy skompilujemy i załadujemy stronę, zobaczymy, że każdy element jest już animowany. Ale przy przechodzeniu z jednej strony na drugą nie ma animacji, tylko nietypowe mruganie. Odpowiada za to druga część osi czasu.

W ten sposób wykonujemy animację pojawiania się i znikania kontenera.

Ponieważ czcionka tekstu pochodzi z czcionek systemowych, musimy zmienić tryb mieszania z warstwy normalnej na poziom dla wszystkich wystąpień klipów filmowych na warstwach kontenerów.

Tworzymy dodatkowe kontenery i animujemy je.

W przypadku dobrej strony flashowej ta animacja nie wystarczy, dlatego też inne części strony zostaną animowane, takie jak góra (podświetlona na żółto na poniższym obrazku), dolna (podświetlona na zielono) i sama treść ( na obrazku w czerwonym polu).

Ponieważ górna i dolna część leżą na poziomie całej witryny, dodamy dwa kontenery dla tych dwóch części. Przed dodaniem kontenerów musimy określić ich wielkość i lokalizację. Jest to łatwe dzięki narzędziu Slice w Photoshopie.

Górna część ma wymiary: x=0, y=0, szerokość=980, wysokość=120.

Strefa dolna: x=0, y=765, szerokość=980, wysokość=35.

Górny kontener będzie zawierał nazwę witryny, dolny kontener będzie zawierał menu, a one będą wyświetlane inaczej. Ponadto będą one przyklejać się odpowiednio do górnej i dolnej części ekranu podczas przechodzenia na pełny ekran.

Po ustaleniu wymiarów kontenerów otwieramy plik structure.xml i dodajemy nowe kontenery (na poziomie serwisu), podając ich współrzędne, szerokość, wysokość i głębokość.


Po dodaniu kontenerów do pliku .xml musimy je utworzyć w pliku website.fla. Otwórz plik website.fla i utwórz nowe warstwy dla naszych kontenerów. Kolejność warstw powinna odpowiadać wartościom głębokości, które ustaliliśmy w pliku xml.

Możemy skopiować pusty film z warstwy website_holder_1 i wkleić go do website_holder_3 i website_holder_4.

Ustawiamy te same współrzędne w klipie, jak określono w pliku structure.xml.

Dla trzeciego pojemnika: x = 0, y = 0;

Dla czwartego pojemnika: x = 0, y = 765.

Odkąd skopiowaliśmy klip, stare nazwy pozostały. Zmieniamy je zgodnie z identyfikatorem, aby były łatwe do znalezienia.

To samo należy zrobić dla kontenera 4.

Na osi czasu ustawiamy pierwszą klatkę kluczową dla kontenerów 3 i 4 tak, aby zaczęły pojawiać się później niż kontener z obiektami całej witryny. Następnie tworzymy drugie klatki kluczowe i animujemy między klatkami. Pierwsze klatki kluczowe zawierają pozycję początkową kontenerów, a drugie klatki kluczowe zawierają pozycję końcową kontenerów w witrynie. Główny kontener pojawia się z góry ekranu, więc przenosimy go do pierwszej klatki kluczowej; dolny kontener znajduje się na dolnej stronie, więc przenosimy go również do pierwszej klatki kluczowej. Dodajemy również luzy, aby animować pośrednie.

Oto, co mamy:

Następnie musimy dodać następujący kod na warstwie akcji na poziomie pierwszej klatki kluczowej animacji naszych kontenerów.

Następnie kompilujemy witrynę i aktualizujemy Panel sterowania.

Umieść przedmioty w pojemnikach

Po wybraniu dowolnego obiektu zobaczysz, że na liście możliwych miejsc docelowych w menu rozwijanym pojawią się dwa nowe kontenery: górny i dolny.

W górnym kontenerze należy umieścić nazwę strony z hasłem, w dolnym menu strony z szarym prostokątem.

Zmień zawartość dolnego pojemnika

Teraz pożądane jest, aby na dużym ekranie dolny pojemnik przyklejał się do dolnej części ekranu. W tym celu musimy przenieść animację kontenera do innego klipu, ponieważ jak wiadomo nie możemy programowo przenieść animowanego klipu (animacja nie zadziała). Nazwijmy ten klip website_holder_4_c.

Następnie przejdźmy do głównej sceny, kliknij na pierwsze klatki kluczowe kontenerów 3 i 4 i edytuj kod.

Po skompilowaniu strony widać, że dolny kontener przykleja się do dołu ekranu bez względu na to, jak zmienimy rozmiar ekranu. Jeśli rozdzielczość ekranu jest zbyt mała, dolny kontener nie będzie nachodził na zawartość strony i pozostanie na swoim miejscu.

Krok 15: Animuj kontener treści

Aby animować zawartość witryny, musimy animować kontener z obiektami całej witryny w taki sam sposób, jak w przypadku kontenera górnego i dolnego.

Krok 16: Utwórz stronę kontaktową

Przed utworzeniem nowej strony zaktualizujmy szablon strony. Stwórzmy szablon dla wszystkich nowych stron, stronę "O nas". Kliknij prawym przyciskiem myszy stronę O nas i wybierz Aktualizuj szablon strony.

Po zaktualizowaniu szablonu strony kliknij przycisk „Utwórz”, wprowadź nazwę strony, tytuł, przypisz adres URL i wybierz jego lokalizację w strukturze witryny, jak pokazano poniżej na zrzucie ekranu.

Strona „Kontakty” jest gotowa. Teraz pozostaje edytować jego zawartość za pomocą wygodnego edytora WYSIWYG i użyć edytora linków, aby połączyć go z odpowiednim przyciskiem menu.

Krok 17: Utwórz prosty automat

W Moto Flash CMS automaty pełnią rolę animowanych obiektów. Slot może zawierać dużą liczbę animowanych funkcji, którymi można sterować bezpośrednio z Panelu Sterowania.

Najpierw spróbujemy stworzyć prosty slot, a następnie go ulepszyć.

Zacznijmy od przycisku „Zamknij”, dodajmy go do witryny jako obrazek, zastosujmy do niego efekty i przypiszmy akcję „Przejdź do strony” -> „Strona główna”.

Animowanie przycisku zamknięcia wcale nie jest trudne, ponieważ zrobimy to za pomocą slotu. Stwórzmy slot w pliku website.fla. W tym celu importujemy obraz przycisku „Zamknij” do biblioteki. W sekcji Slots musimy utworzyć nowy klip filmowy i nazwać go CloseButtonSlot.

Ustawmy klasę jako CloseButtonSlot. Nie ma potrzeby tworzenia nowej klasy, wystarczy odziedziczyć klasę AbstractMotoSlot. Po prostu skopiuj: com.moto.template.shell.view.components.AbstractMotoSlot i wklej go w polu Base Class.

Następnie dodajemy obraz przycisku Zamknij do sceny (CloseButtonSlot MovieClip musi być otwarty) i konwertujemy go na klip o nazwie CloseButtonIcon. Ponieważ odziedziczyliśmy nasz slot z klasy AbstractMotoSlot, daje nam to główną animację. Teraz zrobimy fajny efekt expand/collapse.

Następnym krokiem jest utworzenie nowej warstwy i utworzenie klatek kluczowych, w których należy umieścić „Stop ();”. Umieść główne etykiety „nad” (między pierwszą a drugą klatką zatrzymania) i „na zewnątrz” (pomiędzy drugą a trzecią klatką kluczową) – patrz zrzut ekranu:

Na naszej warstwie klipów tworzymy ten sam klucz i klatki pośrednie.

Na przykład nasz przycisk „Zamknij” będzie się obracał zgodnie z ruchem wskazówek zegara, gdy najedziemy na niego myszą, i przeciwnie do ruchu wskazówek zegara, gdy zostanie usunięty.

Dodajmy jasność i luz obrotu do animacji ruchu.

Po zakończeniu animacji kompilujemy plik website.fla z naszym nowym slotem (Ctrl + Enter).

Aby pracować z slotem za pomocą Moto CMS, musimy określić jego parametry w pliku: structure.xml:

librarySymbolLinkage=” ” – eksportuje slot klipów filmowych (nazwa klasy).
animowany=”true” – atrybut określający, czy slot jest animowany, czy nie.
resizable="false" - czy istnieje logika zmiany rozmiaru slotu, czy nie.
lock=”false” – czy slot ma być wyświetlany w Panelu Kontrolnym, czy nie.
– nazwa slotu w Panelu Sterowania
– właściwości slotów rozszerzające funkcjonalność. Nie będziemy go używać w tym przykładzie.