Wpisy dla kategorii ‘Podstawy’

Blask, efekt blasku po napisie

niedziela, Kwiecień 11th, 2010


Blask.zip – pobierz plik źródłowy

W tym tutorialu wykonamy efekt Blasku przechodzący przez napis.

  1. Zakładamy nowy film: menu Plik | Nowy
  2. Ustawiamy rozmiar: menu Modyfikuj | Film | Właściwości, szerokość 515 px x 194 px .
  3. Zapalamy, w panelu Narzędzia po lewej,  narzędzie Prostokąt, rysujemy myszką prostokąt, tak by przył tło, może wystawał po za obręb animacji albo być z nią równym.
  4. We panelu Właściwości, ustawiamy tło na czarne.
  5. Kilkamy narzędzie Tekst, w panelu Właściwości, ustawiamy wielkość czcionki na 36 , krój czcionki na Arial Black, wielkość odstępu na 4
  6. Pozycjonujemy tekst na środku, opcjonalnie zmieniając wielkość tekstu na inną.
  7. Klikamu prawym klawiszem myszki na powstałym tekście i wybieramy z menu kontekstowego:  Konwersja | Konwertuj do Klipu 
  8. Powstał nienazwany Klip. W panelu Właściwości nadajemy mu nazwę np. na Maska.
  9. Nasz tekst jest najniższym jego elementem.
  10. Ustawiamy w panelu Właściwości, opcję Użyj obiektu niżej jako maski (animacja w klipie będzie tylko na nieprzezroczytym obszarze najniższego obiektu w klipie – naszego tekstu).
  11. Teraz wchodzimy na panelu Konspekt ( który przechowuje drzewo obiektów ). Tam rozwijamy powstały klip Maska i w zapalamy Obiekt Tekstowy.
  12. Prawy klawisz myszy, z menu kontekstowego Kopiuj Obiekt, następnie pownie prawy klawisz i Wklej w Miejscu.
  13. Została dodana kopia naszego tekstu wyżej w klipie, klikamy tę kopię prawym klawiszem i z menu kontekstowego Rozdziel na Kształty.
  14. Dzięki temu kopia naszego tekstu została przekształcona w grupę liter w formie wektorowych kształtów, którym teraz będziemy w stanie nadać wypełnienie tonalne oraz obramowanie.
  15. W panelu Konspekt rozwijamy powstała grupę, zaznaczymy myszką pierwszą literkę trzymając klawisz Shift na klawiaturze.
  16. Teraz w panelu Właściwości mozemy ustawić Wypełnienie na Gradient , poszczególne punkty wypełnienia od lewej: ciemnozielony (# 009900)  Alfa(przezroczytość) 50%, na lewa strona środka: ciemniejsza zieleń (# 007300 ), Alfa 100%, prawa strona środka: jaśniejszy zielony (# 019A00 ), prawa strona środka (# 66FF00 ). alfa 75% .
  17. Ustwiamy linię obramowania na ciągłą i jej grubość na 1.8.
  18. Mamy już napis teraz zanimujemy blask po tym napisie .
  19. Przy wybranym klipie (panel Konspekt), z panelu Narzędzia wybieramy narzędzie Prostokąt rysujmy myszką prostokąt.
  20. Przechodzimy do panelu Przekształcenie (ten panel przechowuje bezwzględne wymiary obiektów, panel Transformacje ich tymczasowe wymiary podczas Transformacji)
  21. W panelu Przekształcenie ustawiamy w polu Kąt Osi X wprowadzamy -60, co przekręci o 60 stopni.
  22. W tym samym panelu nadamy szerokość i wysokość na: 336, 478.
    X: -460, Y: 27
  23. Spozycjonuje nam to wypełnienie na poza ekranem.
  24. Ustawmy wypełnienie:  Gradient.
  25. Dodajemy 7 punktów wypełnienia o kolorze białym, trzy na środku po dwa na bokach.
  26. Ustawiamy im przezroczystość alfa od lewej:  0%, 25%,     75%, 100%,75%,      25%,0% .
  27. W panelu Narzędzia klikamy Transformacja Wypełnienia by przekręcić wypełnienie do takiego samego kąta, jak obiekt, następnie zmniejszamy jego krawędzie do krawędzi obiektu. 
  28. Mamy obiekt, który będzie przesuwał się po napisie, teraz pora na ustawienie jego ruchu.
  29. Klikamy menu Wstaw | Efekt | Przesuń
  30. Klikamy na niego dwukrotnie na osi czasu, następnie w panelu Efekt, na zakładce Ruch, zmieniamy opcję Przesuń do X na 560.
    Nasz efekt przesunie obiekt blasku z pierwotnej pozycji (poza ekranem, określonej w p. Przekształcenie) do pozycji X 560.
  31. Rozciągmy efekt na osi do 31 klatek.

Wyskakujący baner na górnej warstwie (brandmark, top layer banner)

sobota, Marzec 27th, 2010


Zobacz baner na warstwie

W poniższym tekście pokażemy, jak wykonać znane z dużych portali internetowych, wyskakujące banery, angielska nazwa brandmark.
Pokażemy, jak wyświetlić taki baner na najwyższej warstwie html, jak go zamknąć.
Celowo użyjemy techniki przezroczystości, tak by widoczne były jedynie nieprzezroczyste części banera,  a jego tło niewidoczne.
Pokażemy też jak najprościej przekazać parametry do Flash używać parametrów FlashVars.

FlashVars to metoda przekazywania parametrów do Flasha. Dzięki niej możemy zdjąć parametry z PHP czy HTML-a i przekazać je obiektowi Flasha.
Dzięki tym parametrom przekażemy adres strony,  która ma być otwarta po kliknięciu (zmienna clickTag) oraz nazwę funkcji javascript,
która ma być uruchomiona po naciśnięciu przycisku zamknięcia w filmie flash.
Obsługa clickTag jest wymagana przez większość serwisów reklamowych, w tym AdWords.

Na marginesie, inną metodą czytania informacji ze świata zewnętrznego jest jest czytanie parametrów z zewnętrznego pliku, za pomocą funkcji loadvars, mogą być to być pliki tekstowe z poszczególnymi parametrami, linia po linii, może to być plik xml, zawierający hierarchiczne dane, może to być plik php, który wygeneruje zawartość w formie wspomnianego pliku tekstowego bądź xml.

Użyjemy maski by wyświetlać jedynie w narzuconym kształcie np. wewnątrz koła, splasza, dowolnego kształtu, zastosujemy: Użyj obiektu niżej jako maski w klipie.

Pobierz plik źródłowy

Zaczynamy:

  1. Zakładamy nowy film, w Modyfikuj, Film, Właściwości, ustawiamy rozmiar na szerokość 345 wysokość 378
  2. Nie zamykając okienka w tym samym okienku klikamy: Ustawienia Eksportu Filmu.
  3. Wybieramy z drzewka pozycję HTML:
  4. ObjectTags znajdujemy opcję WMMODE i ustawiamy na transparent . Dzięki czemu tło naszej animacji będzie przezroczyste.
  5. Także w ObjectTags ustawiamy tag FlashVars na:

    clickTag
    =http://www.twojastrona.pl&adClose=javascript:onFinishedPlaying();W ten sposób przekazujemy do Flash 2 zmienne:
    clickTag – link strony po kliku
    adClose – nazwa funkcji javascript, która zamknie warstwę z banerem.

    Zwróćmy uwagę, że bardzo łatwo przekazywać w taki sposób parametry z PHP do Flasha
    , przypisując parametry strony PHP do zmiennych w FlashVars.
  6. Opcjonalnie możemy ustawić tagi HTML-a mające wpływ na pozycjonowanie, Title – tytuł, Author – Autor, Description – opis, SWFTITLE – to tytuł SWFA.
    Base pozwala na ustawienie bazowego katalogu bądź urla dla naszego filmu, np. możemy trzymać zewnętrzne pliki (obrazki, filmy, xml, txt), w tym katalogu i funkcje (np. loadvars czy loadmovie) w naszym filmie będą tam szukać.
  7. Dodajemy element, który ma być naszą maską i tłem.
    Może to być dowolny kształt, np. wyznając miłość ukochanej/ukochanemu możemy użyć autokształtu serca i wyświetlać komunikaty wewnątrz niego. My jednak zajmiemy się czynnościami bardziej przyziemnymi.
    Przejdź do panelu Konspekt, Kliparty | 2D | Autokształty | Dymki przeciągnij na obszar animacji
  8. Powiększamy go do granic animacji trzymając Shift i ciągnąc za narożny uchwyt obiektu (dzięki czemu powiększamy z zachowaniem proporcji).
  9. W panelu Konspekt, prawy klawisz myszy na Callout_scream i z menu kontekstowego Kopiuj Obiekt,
  10. Jeszcze razy prawy klawisz i z menu  Wklej w miejscu
  11. Na obiekcie Kopia_Callout_scream klikamy prawym klawiszem myszy, następnie wybieramy Grupowanie, Grupuj do Klipu.
    Ustawiamy w panelu Właściwości nazwę klipu na Maska
    Dzięki czemu mamy Kopia_Callout_scream jako podelement klipu Maska.
  12. We Właściwościach klipu Maska ustawiamy Użyj obiektu niżej jako maski.
    Dzięki czemu cała animacja w klipie Maska będzie zamaskowana obiektem, który jest w nim najniżej (naszym dymkiem) – animacje będą tylko w środku dymka.
    Ta opcja spowoduje też, że ten obiekt bedący traktowany jako maska przestanie być widoczny – dlatego mamy 2 kopie dymka, jedna będzie widocznym tłem animacji w klipie Maska, druga najniższym elementem klipu Maska i jego niewidoczną maską.
  13. W panelu Konspekt, w klipie Maska i obiekcie  Kopia_Callout_scream zapalamy ikonkę braku widoczności Schowaj (by nie był widoczny podczas edycji).
  14. W konspekt wskazujemy klip Maska i z panelu narzędzia (po lewej) wybieramy narzędzie Tekst i wprowadzamy tekst np.  ”Z ostatniej chwili”
    Po czym powinniśmy mieć wewnątrz klipu maska obiekt tekstowy.
  15. Wskazujemy w Konspekt ten  obiekt tekstowy bądź wybieramy go na linii czasu klipu Maska.
    Ustawiamy we Właściwościach kolor tekstu na Biały.
  16. Wstawiamy efekt pojawiania się, w Konspekcie, albo z menu, albo z prawego klawisza na osi czasu:
    Wstaw | Efekt | Pojawianie się | Magnetofon Bang
    Nota: możemy wybrać inny efekt najlepiej sprawdzić jaki najbardziej pasuje.
    Klikamy ikonkę Odtwarzaj Efekt przy zaznaczonym efekcie Magnetofon Bang, sprawdzamy czy Panel Efekty jest na ekranie. Można go włączyć w menu Okna | Przeglądarka Efektów .
    W panelu Efekty, wybieramy kolejne efekty z grupy Pojaw się na pozycji i oglądamy, co robią z tekstem.
  17. Po zakończeniu efektu pozostawiamy pustych 40 klatek – by widz zdążył przeczytać napis i dodajemy efekt znikania napisu:
    prawy klawisz na wierszu z tekstem na osi czasu (klipu maska) i klatce 70,
    Efekt | Zniknij z pozycji | Dekompresja – Element po elemencie, pionowo
    Oczywiście można wybrać inny, kierując się przeglądarką efektów przy wyborze.
  18. Dodajemy kolejny tekst do klipu maska
  19. Na osi czasu, w wierszu poprzedniego tekstu, zaznaczamy efekty pojawiania i znikania kliknięciem myszką i przytrzymaniem klawisza CTRL.
  20. Naciskamy CTRL-C zeby skopiować do schowka.
  21. Wybieramy kolejną klatkę po po zakończeniu znikania poprzedniego tekstu.
  22. Wklejamy CTRL-V na osi czasu w wierszu drugiego tekstu.
    Dzięki czemu możemy szybko zastosować te same metody pojawiania się znikania do kolejnych tekstów.
  23. W konspekcie zaznaczamy w głównej animacji obiekt Callout_scream, sprawdzamy czy jest włączony panel Parametry, gdy nie jest pokazujemy go za pomocą menu Okna | Parametry.
    Ustawiamy kolory dymka podświetlenia(highlight) na żółty, tła ShadowKolor na pomarańczowy.
  24. Teraz dodajemy ikonkę zamykania banera.
    Po jej kliknięciu nastąpi wywołanie funkcji javascript podanej w parametrze adClose, przekazywanym do filmu flash z htmla za pomocą FlashVars.
  25. W konspekt wskazujemy główną scenę (Scena1) żeby obiekt był wstawiony do głównej animacji.
  26. W panelu komponenty wybieramy Kliparty | 2D | Kształty i ikony | Stop_krzyżyk i przeciągamy na obszar animacji do prawego, górnego rogu.
    Kolor tego komponentu możemy zmienić w panelu Parametry.
  27. Wskazujemy dodany komponent, zmnejszamy go trzymając Shift i przechodzimy do panelu Skrypt, gdzie klikamy Dodaj Skrypt | Zdarzenia | Przycisk | On release – na puszczenie.
    Co dodanamy funkcję obsługującą zdarzenie następujące po kliknięciu myszką i puszczeniu klawisza.
    W treści tej funkcji (między znakami {} ), piszemy:getURL(_root.adClose,”_self”);i funkcja wygląda tak:on (release) {
    getURL(_root.adClose,”_self”);
    }// Komentarz:
    // Zostaje wywołana funkcja getURL z parametrem będącym nazwą funkcji adClose z głównej animacji _root (_root. nie jest konieczne, ale jest to dokładne określenie jakiego filmu/klipu ma być ta zmienna).
    // drugi parametr „_self” informuje, że ma to być wywołanie w tym samym oknie przeglądarki.
  28. Teraz jeszcze obsłużymy parametr clickTag wymagany przez duże serwisy reklamowe np. AdWords, Onet itp:
    W panelu skrypt wskazujemy główną scenę (Scene1) i ponownie dodajemy zdarzenie na puszczenie myszy i w treści powstałej funkcji piszemy, jak niżej podano między {}:on (release)
    {
    getURL(_root.clickTag, „_blank”);
    }//co spowoduje otwarcie strony podanej w zmiennej określonej przez clickTag w nowym oknie (_blank).
  29. No to mamy wykonany baner :) .
  30. Eksportujemy film i html:  menu Plik | Eksportuj Jako | html + SWFNota: kolejne eksporty tylko SWF (bez htmla),  gdyż niżej wyedytujemy sobie powstały plik html, dodając funkcję zamknięcia warstwy w html i  bloku pojawiania się na warstwie,  nie będziemy chcieli tego zamazać.
  31. Otwieramy powstały plik w edytorze tekstowym, może być Notatnik, może być inny program do edycji html podświetlający składnie np. bezpłatny PSPad, czy płatny Editplus.
  32. Otaczamy tag <object ></object> (wyświetlający obiekt Flash) blokiem:
    <div id=”mybrandmark” style=”position:absolute;top:150px;left:120px;width:345px;height:378px;z-index:1„>
    </div>
  33. Przed zamykającym nagłówek htmla tagiem </head> dodajemy:<SCRIPT LANGUAGE=”JavaScript”>
    <!–
    function onFinishedPlaying()
    {
    var divs    = document.getElementsByTagName(„div”);
    var divsnum = divs.length;
    for (i = 0; i < divsnum; i++) {
    var nombre = divs[i].id.toString();
    if (nombre.indexOf(„mybrandmark”) != -1) {
    var div = document.getElementById(nombre);
    div.style.visibility=’hidden’;
    div.style.display = ‚none’;
    break;
    }
    }}
    //–>
    </SCRIPT>
  34. UWAGA: Linki do stron i funkcji javascript bedą działać dopiero po przerzuceniu plików na www  (tak się dzieje od wprowadzenia zabezpieczeń w Flash Playera 8).

Pierwsze cienie

wtorek, Marzec 2nd, 2010


Poniżej pokażemy użycie komponentów SWiSH Max3, dzięki którym można uzyskać różnorakie efekty cieni.
Te komponenty należą do grupy Filtry i nazywają się :


Filter Rzuć cień

Filter Fazowanie – Bevel

Cieniujemy.swi.zip – plik źródłowy do pobrania

By uzyskać takie efekty należy przeciągnąć komponenty na Obszar Animacji programu.
W panelu konspekt trzeba odnaleźć obiekt tekstowy, który należy zamienić własnym.
By zmienić parametry komponentu, należy w panelu konspekt wskazać obiekt komponentu i przejść do panelu Parametry, gdzie można zmienić poszczególne parametry.

By uzyskać tło:

  1. W menu Okna włączamy panel prowadnice. W grupie Siatka na wspomnianym panelu ustawiamy H i V = 5 (siatka co 5 pikseli), kilkamy też obydwa przyciski ponad: Pokaż i Przeciągaj. Skutkuje to pokazaniem i przyciąganiem do siatki.

    Ustawienia siatki

    Ustawienia siatki

  2. Włączamy narzędzie Autokształt | Zaokrąglony prostokąt. Rysujemy prostokąt. Dostosowujemy zaokrąglenie, klikając na zielonym uchwycie w prostokącie.
  3. Teraz wypełnimy prostokąt, w panelu Właściwości ustawiamy wypełnienie na gradient z pierwszym kolorem gradientu jasny pomarańcz, drugim pomarańcz , zmienimy kąt wypełnienia z od lewej do prawej na od dołu do góry, klikamy przycisk Zmiany wypełnienia na panelu Właściwości i Zmień transformację wypełnienia . Ustawiamy kąt osi X na -90
    Zmień transformację wypełnienia

    Zmień transformację wypełnienia

    Okienko zmiany

    Okienko zmiany

By uzyskać, najniższy, zielony napis z cieniem:

  1. Włącz panele Komponenty i Parametry w menu Okna, jeśli nie włączone.
  2. Przejdź do panelu Komponenty, grupa Efekty | Filtry, złap i trzymaj lewym przyciskiem myszy Filter Rzuć cień , przeciągnij go na Obszar Animacji.
  3. Przechodzimy do panelu Konspekt,  rozwiajamy klip komponentu. Zmieniamy treść podrzędnego obiektu tekstowy na „Tekst z cieniem„.
  4. W panelu Właściwości ustawiamy czcionkę na Arial Black, kolor na zielony.
  5. W konspekt zaznaczamy klip komponentu (a nie obiekt tekstu) Przechodzimy do panelu Parametry, by ustawić parametry komponentu cienia.
  6. Ustawiamy color na bardzo czarny, distance – czyli odległość na 3, knockout false.

By uzyskać środkowy napis z cieniem:

  1. Przeciągamy stosowany wyżej komponent.
  2. Kolor napisu na biały, czcionkę na Arial Black.
  3. w parametrach: Inner na true – cień wewnętrzny, knockout: false, distance 1

By uzyskać ostatni napis:

  1. Przeciągnąć Filter Fazowanie – Bevel na Obszar Animacji.
  2. Ustawić jego parametry, szczegóły w załączonym pliku źródłowym.

Zapraszamy do eksperymentowania z innymi filtrami, np. Rozbłysk czy Rozmycie.

Można tym komponentom ustawić Transition – pojawianie się np. na wybraną animację.

Szklany przycisk z animacją po najeździe myszy

wtorek, Marzec 2nd, 2010


W poniższym przykładzie pokażemy, jak stworzyć szklany przycisk, animowany po najeździe kursora myszy.

PomaranczowyPrzycisk.swi.zip – plik źrodlowy do pobrania

Więcej  o szklanych przyciskach

By uzyskać tło:

  1. W menu Okna włączamy panel prowadnice. W grupie Siatka na wspomnianym panelu ustawiamy H i V = 5 (siatka co 5 pikseli), klikamy też obydwa przyciski ponad: Pokaż i Przeciągaj. Skutkuje to pokazaniem i przyciąganiem do siatki.
    Ustawienia siatki
    Ustawienia siatki
  2. Włączamy narzędzie Autokształt | Zaokrąglony prostokąt. Rysujemy prostokąt. Dostosowujemy zaokrąglenie, klikając na zielonym uchwycie w prostokącie.
  3. Teraz wypełnimy prostokąt, w panelu Właściwości ustawiamy wypełnienie na gradient z pierwszym kolorem gradientu jasny pomarańcz, drugim pomarańcz , zmienimy kąt wypełnienia z od lewej do prawej na od dołu do góry, klikamy przycisk Zmiany wypełnienia na panelu Właściwości i Zmień transformację wypełnienia . Ustawiamy kąt osi X na -90
    Zmień transformację wypełnienia
    Zmień transformację wypełnienia
    Okienko zmiany
    Okienko zmiany

Podobnie uzyskujemy czarno-szarą belkę poziomą:

Ustawienia wypełnienia belki poziomej

Ustawienia wypełnienia belki poziomej

Jak uzyskać przycisk?
Gdy na niego patrzymy widzimy dwa kształty, zaokrąglony prostokąt z wypełnieniem gradientowym i nałożony obiekt półkola.
By uzyskać ten drugi należy skorzystać z funkcji operacji na kształtach, wprowadzonych w SWiSH Maxie3, pozwalają one na dodawanie, odejmowanie, uzyskiwanie wspólnej części z różnych obiektów:

  1. Zatem rysujemy autokształt | zaokrąglony prostokąt, następnie elipsę, której połowa zasłania górną część poprzedniego obiektu.

    Ekstrakcja części wspólnej

    Ekstrakcja części wspólnej

  2. Zaznaczamy obydwa obiekty np. klikając na nie trzymając klawisz shift badź ctrl (w konspekcie można też trzymając shift wskazać pierwszy i ostatni).
  3. Wchodzimy do menu Modyfikuj | Operacje na kształtach | Część Wspólna, po jej uzyskaniu kopiujemy obiekt do schowka CTRL-C i wciskamy CTRL-Z (wstecz), następnie CTRL-V
  4. Nakładamy półkole na górę prostokąta.
  5. Usuwamy zbędny obiekt elipsy.
  6. Ustawiamy obydwu obiektom wypełnienia, jak czyniliśmy to wyżej.

Uwagi: można też wyciąć ten obiekt korzystając z nowego narzędzi Nóż.

Gdy mamy już obydwa obiekty z ustawionym wypełnieniem, możemy przekształcić je do obiektu typu Przycisk, w celu zróżnicowania zachowania po najeździe myszy.

  1. Zaznaczamy obydwa z shift na obszarze roboczym bądź w konspekcie.
  2. Z prawego klawisza myszy wybieramy Grupowanie | Do Klipu. Nazywamy ten klip:  KlipPrzycisk .
  3. Na powstałym klipie Konwertuj do przycisku.
  4. Gdy przycisk powstanie, należy wskazać go Konspekt i we właściwościach zapalić różny stan Over (ponad), dzięki czemu nasz klip będzie miał 2 stany dla najechania myszą i dla reszty.
  5. W konspekcie powinniśmy już widzieć obydwa stany.
  6. Dodajemy nowy klip w stanie Over, np.  za pomocą prawego klawisza w panelu Konspekt, ustawiamy  nazwę na KlipPonadAnimacja. Wycinamy(ctrl-X) klip zawierający kształty (KlipPonad) i przeklejamy go do klipu  KlipPonadAnimacja(Ctrl-V).
  7. W klipie AnimacjaObieku dodajemy efekt Dzikość – Powtórz.
  8. Taka agregacja potrzebna nam była, gdyż animujemy na osi czasu KlipPonadAnimacja cały KlipPonad, gdbyśmy chcieli animować jedynie dane elementy składowe klipu (nie wszystkie razem), można ustawić taką animację na osi czasu klip: KlipPonad.

Pierwszy baner, efekt Ruch

sobota, Luty 27th, 2010


W SWiSH Maxie najprostszą drogą do wykonania baneru jest skorzystanie z tych umieszczonych w kreatorze, komponentach i ustawienie im odpowiednich napisów. My jednak zajmiemy się stworzeniem banera od zera. Budując baner najlepiej wyobrazić sobie, co chcemy uzyskać i dopiero gdy mamy plan banera, zacząć go wykonywać. W poniższym przykładzie pokażemy, jak zrobić baner z napisami pojawiającymi się od prawej strony ekranu i wyhamowującymi pod koniec swojej trasy. Te napisy mają zniknąć w „otchłani”, czyli zanikać, zmniejszać się, przesuwając w punkt się gdzieś za nimi. Pokażemy tutaj, jak używać prostego efektu Ruch, zmieniać jego parametry, oraz jak używać efektów Przwijaj Do, które nabudowają efekt Ruch. W tym tutorialu pokażemy, jak stworzyć prosty banner korzystając z wbudowanych efektów przewijania bądź skorzystać z efektu Ruch.

PierwszyBanner.swi.zip – plik zrodlowy do pobrania

Założenie filmu

  1. Zakładamy Nowy film, opcją Nowy w menu.
  2. W menu Modyfikuj, wybieram Film, Właściwości ustawiamy na szerokość na 960 i wysokość na 200 piseli. Tło na jasnoszare. Nota: 960 – 970 mają zawzwyczaj topy stron – góra www, bo sama strona ma tyle, by zmieściła się w rozdzielczości 1024 x 768.

Dodanie gwiazdy i tła po lewej – substytutu loga albo obrazka produktu

Ten punkt zawiera info, jak stworzyć logo po lewej, nie jest to bewzględnie wymagane.

  1. Po lewej będziemy mieć logo, albo jakiś inny stały element, np. zdjęcie produkt, zróbmy więc dla niego tło:
    1. Z paska narzędzi po prawej wybierzmy Autokształt, Zaokrąglony prostokąt, narysujmy go po lewej.
    2. Wybierz białą strzałkę z narzędzi, to narzędzi Podselekcji – zmiany kształtu, pozwoli ono nam dostosować, zaokrąglenie rogów, łapiemy po prostu za zielony uwchyt w obiekcie i zmniejszamy rogi.
    3. Pora wypełnić prostokąt, wchodzimy do panelu Właściwości, tam zmieniamy wypełnienie na Gradient.
    4. Klikamy 2 ikonkę obok wybranej pozycji gradientu – modyfikacja gradientu, Zmień transformację wypełnienia.
    5. Ustawiamy -90, żeby gradient był od dołu do góry.
    6. Klikamy w narzędziach Transformacja Wypełnienia.
    7. Dostosowujemy tę transformację żeby nie wychodziła poza baner.
    8. W panelu Właściwości, klikając paletę lewym klawiszem dodajemy kolory, tak by na początku od lewej było: ciemnoszary, na środku czarny, na środku ciemnoszary, po prawej srebrny.
      Tło gwiazdy

      Tło gwiazdy

      Można inaczej rozłożyć kolory by było to bardziej zgodne z załamaniem światła np.: Przykładowa kolorystyka Przykładowa kolorystyka 2

    9. Dodajemy autokształt z narzędzi,gwiazdę, będzie to nasz przykładowy stały element.
    10. Dodamy jakiś efekt, najprostszy: sprawmy by gwiazda kręciła się wokół własnej osi.
    11. Dodajemy efekt Ruch: Wstaw| Efekt | Ruch.
    12. Klikamy na efekcie na osi czasu.
    13. Pojawia się panel Efekt, gdzie na zakładce Ruch, możemy zmienić Kat X na zmienę Zgodnie z ruchem wzkazówek Zegara, 360 stopni.

      Ustawienia efektu Ruch gwiazdy

      Ustawienia efektu Ruch gwiazdy

    14. Gdy złapiemy za ten efekt na osi czasu i przeciągniemy prawą krawędź w prawo, zwiększymy jego długość o kolejne klatki.
    15. Powstała nam animowana gwiazda na tle zaokrąglonego prostokąta z tłem w czarnej tonacji.
    16. By uporządkować, możemy w panelu Konspekt (który zawiera drzewo obiektów), zaznaczyć obydwa, a następnie z prawego klawisza: Grupowanie | Jako Klip. We Właściwościach, nazwać klip np. Gwiazdka.

Dodajemy pierwszy wyhamowujący napis

  1. Przejdźmy do animacji napisów. Korzystając z narzędzia Tekst piszemy na ekranie Gorąca Promocja, zwiększamy rozmiar napisu, kolor pierwsze słowa.
  2. Na osi czasu wybieramy obiekt tekstu (po lewej), klikamy 1 klatkę na osi.
  3. Wstaw | Efekt | Przewijaj | Od Prawej Ten efekt przewinie obiekt od prawej burty do jej bieżącej pozycji, czyli ruch będzie w Lewo.
  4. Łapiemy za prawą krawędź efektu na osi czasu i rozciągamy by trwał dłużej.
  5. Potrzebne nam wyhamowywanie efektu.
  6. Podwójnie klikamy na efekt
  7. W panelu efekt, w zakładce Korekta zahaczamy w wierszu Pozycja, opcję Koniec i wpisujemy wartość 7 obok. Ta opcja dla wyboru Początek, przyśpiesza o n, dla wyboru Koniec, zwalnia o n. Czyli dla Początek wartość to akseleracja-przyspieszenie, dla Koniec- zwolnienie. Zatem zwalniamy pod koniec.

    Przewijaj do Prawej, ustawienie zwolnienia na końcu

    Przewijaj do Prawej, ustawienie zwolnienia na końcu

Zniknięcie napisu

  1. Teraz ten napis musi odlecieć z ekranu, bądź Zniknąć. Można wykorzystać efekty: Przewijaj do prawej i ustawić akselerację na 7, ale tym razem na początku, żeby szybko zniknął, można ustawić w jego właściwościach żeby Alpha – przezroczystość dążyło do przezroczystości. Można też wykorzystać efekt Zanikaj i tekst zaniknie na ekranie bez żadnego ruchu. My wykorzystamy efekt Ruch, wstawiamy ten Efekt na osi czasu, w wierszu tekstu, na kolejnej klatce za poprzednim efektem.
  2. Klikamy na ten efekt. Na zakładce Ruch, ustawiamy: przesuń do X: 550, Przesuń do Y: 20 (punkt z tyłu za gdzieś za tekstem). Ustawiamy Skaluj na 0, alpha do przezroczystości.

    Ustawienie efektu Ruch, zniknięcie z ekranu

    Ustawienie efektu Ruch, zniknięcie z ekranu

Dodajemy kolejny wyhamowujący napis

  1. Gdy nasz tekst zniknął, może się pojawić kolejny. Do kolejnego użyjemy efektu Ruch, a nie Przewiń Od Prawej. Przewiń Od przewija od danego miejsca(np. prawej) do bieżącej pozycji, czyli jest efekt Ruch z ustawionym startem i końcem.
  2. Dodajemy nowy tekst na kolejnej klatce Nowy Produkt. Możemy go pokolorować, by słowa miały różne kolory.Ten tekst dodajemy na tej samej pozycji Y, jak poprzedni teks. Jakie Y miał poprzedni tekst możemy sprawdzić w panelu Przekształcenie. Gdy chcemy widzieć obiekty, a nie ich stan na bieżacej klatce, wyłączamy w menu Sterowanie opcję Podgląd Klatki (czerwona linia z osi czasu znika).
  3. Przesuwamy ten tekst na prawo poza Obszar Animacji, tak by początkowo nie był widoczny. Sprawdzamy w panelu przekształcenie czy nasz tekst jest animowany wokół środka czy nie, jeśli nie, to tak ustawiamy.
  4. Dodajemy efekt Ruch w wierszu nowego tekstu na klatce nowego tekstu. Klikamy ten efekt i edytujemy jego ustawienia. Zmieniając Ruch do X 500.
    Efekt Ruch, wciągnięcie na ekran i wyhamowanie

    Efekt Ruch, wciągnięcie na ekran i wyhamowanie

    Jak widzimy w efekcie Ruch. Przesuwamy obiekt z Bieżącej Pozycji (chyba że haczyk kontynuuj od poprz jest wyłączony i pozycja ustawiona w zakładce startuj na) do pozycji i stanu wynikającego z ustawień efektu.

  5. Kopiujemy Efekt Ruch z pierwszego tekstu na kolejną klatkę, tak by nasz nowy tekst zniknął tak samo.

Podstawy, pierwsze spojrzenie

sobota, Luty 27th, 2010


SWiSH Max wspiera kreatory i szablony, komponenty, bibliotekę zawartości, efekty tekstowe,  ActionScript 2.0,  ścieżkę ruchu i wiele innych. Odznacza się nowoczesnym interfacem użytkownika i dostępnością wielu szablonów stron www.

SWiSH Max, jak i Adobe Flash® wspierają animację obiektów wzdłuż osi czasu. Dlatego ucząc się animacji Flash w SWiSH Maxie, będziecie mogli Państwo wykorzystać zdobyte umiejętności animacji po osi czasu także w Adobe Flash®.

Film Flash tworzony w SWiSH Maxie składa się z rozdziałów nazwanych scenami .Te sceny znajdują się wzdłuż osi czasu filmu – film przebiega przez nie.
Z kolei każda scena ma poszczególne klatki. Te klatki są tożsame z klatkami w animowanym filmie.

W opcjach filmu można ustawić, ile klatek ma być odtworzone na sekundę – tempo filmu .

W tych scenach pojawiają się Klipy, podobne do klipów wideo, każdy taki klip, ma własną oś czasu.

Do zarządzania elementami filmu służą panele, są to wyświetlane na ekranie okienka zawierające np. Właściwości obiektów, Efekty, Komponenty, czy ich Parametry.

Po uruchomieniu programu, od góry widzimy:

Interface użytkownika

Interface użytkownika

menu
oś czasu
obszar animacji ( białe pole pośrodku )
obszar roboczy to coś w rodzaju pulpitu, składa się z obszaru animacji i jego niewidocznej części – białe pole animacji po środku + szare niewidoczne po eksporcie marginesy.
panele
Zwracamy uwagę, że obszar animacji w języku angielskim określony jako stage, dosłowne tłumaczenie scena, z uwagi na to, że Flash ma już sceny w formie rozdziałów, by nie dopuścić do mylenia białego pola roboczego animacji ze z rozdziałami – scenami w filmie flash,  stage został przetłumaczony jako Obszar Animacji.

W SWiSH Maxie do określania pozycji, rozmiaru obiektów służą dwa Panele Przekształcenie – określa fizyczne właściwości obiektu, tu ustawiamy pierwotny rozmiar, położenie,  i Transformacja, w tym drugim panelu ustawiamy tymczasowe, zmieniane podczas filmu właściwości, np. to, że obiekt ma być przekręcony w danej klatce o n stopni lub ma zwiększyć swój rozmiar w trakcie m klatek.
nota: SWiSH miniMax ma uproszczone zarządzanie i jest tam tylko jeden panel do zarządzania rozmiarem.

Panel Konspekt zawiera drzewo obiektów filmu, sceny, klipy etc.

Panel Efekty zawiera drzewo efektów.  Gdy dodamy do wybranego obiektu efekt i włączymy odtwarzanie efektu, możemy korzystając z tego drzewka klikać na kolejne efekty, by je podmienić z wybranym, cały czas widząc efekty zmian.

Jak wykorzystać Komponenty ?

Wystarczy włączyć panel Komponenty w menu Okna. By skorzystać z komponentu należy go przeciągnąć na Obszar animacji.
By zmienić parametry wstawionego uprzednio i wybranego komponentu, należy włączyć w menu Okna, panel Parametry i zmienić jego opcje.
W jaki sposób komponent, np. przycisk, może komunikować się z filmem Flash?
Jeśli komponent ma coś do przekazania, np. przycisk kliknięty, w jego parametrach jest opcja Event Function, czyli funkcja zdarzeń, która określa jak funkcja ma zostać wywołana, gdy komponent będzie chciał coś wysłać. Domyślnie ta funkcja to Events i wysyła nazwę wysyłającego obiektu i jego stan.

Stosujmy klipy
W klipach łatwiej można zagregować wiele obiektów: np tło i tekst.  Wtedy efekt można zastosować dla całego klipu.
Jak przekształcić do Klipu ? Prawy klawisz i konwertuj do klipu (gdy to jeden obiekt), grupuj do klipu, gdy więcej.
Klipy mają własną oś czasu i animacja może tam następować niezależnie od animacji głównego filmu. Wyobraźmy sobie samochód, samochód to cały film, kręcące się koło to klip.

Korzystanie z biblioteki i panel Zawartość
Warto korzystać z biblioteki, dzięki niej zmniejszymy objętość wynikowego filmu oraz szybciej zmodyfikujemy wiele obiektów jednym kliknięciem.
Przykład: narysowaliśmy zaokrąglony prostokąt, chcemy zrobić z niego jeden z paneli do głównej strony. Ten panel zawiera ładne tło. Chcemy taki paneli 8, dwa rzędy po cztery.
Gdyby nie było biblioteki musielibyśmy je zduplikować i każdego z 8 paneli edytować oddzielnie.
Ponieważ biblioteka jest, wystarczy kliknąć na obiekt prawym klawiszem, pojawi się menu kontekstowe, należy wybrać:
biblioteka -> Dodaj do Biblioteki i utwórz link, wpisujemy nazwę np. tłopanelu. Po taką nazwą obiekt trafi do biblioteki, zaś na ekranie pozostanie instancja – link do obiektu w bibliotece.
Gdy spojrzymy w panel właściwości, to tam będzie znajdował się link do edycji tego obiektu w bibliotece.
Teraz wystarczy w panelu Zawartość, wybrać zakładkę Biblioteka, tam prawy klawisz na obiekcie tlopanelu, wybrać dodaj link na scenę-obszar animacji, by stworzyć kolejną instancję obiektu przechowywanego w bibliotece. Po czym gdy chce zmienić tło dwóch widoczych na ekranie obiektów, wystarczy wyedytować obiekt w bibliotece i obydwa jednocześnie zmienią barwę czy tło.