blog.swish.pl

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

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

   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

   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

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

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

   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.