Forum.Legalne.info: [Flash] Animowany baner - Forum.Legalne.info

Skocz do zawartości

Otwarty

Ikona Shoutbox

    Rozszerz pole shoutboxa

Ikona Zaloguj się na forum

    • Login:
    • Hasło:


    Zapamiętaj mnie
  • 3 Stron +
  • 1
  • 2
  • 3
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

[Flash] Animowany baner Tutorial nr5 do programu SWISHmax

#1 Użytkownik jest niedostępny   AproX D 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1141
  • Dołączył: 01-maj 06

Napisany 22 sierpień 2006 - 09:58

TUTORIAL nr5 - Animowany baner

Postaram się Wam pokazać jak zrobić samodzielnie animowany baner.
Stworzenie banera polegać bedzie na wykonaniu kilku scen które będą następować po sobie i wykonywać zamieszczone w nich Wasze animacje w ustalonej przez Was kolejności.

Jak to zwykle bywa otwieramy program.
Okno OUTLINE wybrało już za nas SCENE_1 której to nazwę możecie zmienić w oknie prawym w karcie SCENE. W oknie parwym ustamy sobie rozmiar animacji - karta MOVIE - oraz tło.
Ja dla lepszej "widoczności" ustaliłem sobie rozmiar 460x100 oraz FRAME RATE (szybkość aminacji - klatki/sek )ustawiłem na 30.

Dodaj obrazek

Po wykonaniu naszych ustawień przechodzimy do okna roboczego animacji.
Ponieważ tutorial opieram na moim prostym projekcie dlatego moje czynności beda związane właśnie z nim.

Z przybornika wybieram T i klikam w dowolnym miejscu moje animacji a następnie przechodzę do okna prawego gdzie w karcie TEXT ustalam treść tekstu, czcionkę oraz jej wielkość i kolor,
opcja STATIC TEXT.
Po wykonaniu tych czynności moje okno robocze wygląda tak

Dodaj obrazek

Następnie z przybornika wybieram kwadracik i rysuję 3 prostokąty którym każdemu z osobna nadaję nazwę, wybieram kolor, ewentualnie obramowanie w oknie prawym w karcie SHAPE.
Następnie układam je wg uznania.
Teraz w oknie OUTLINE zaznaczam swoje 3 prostokąty - prawy przycisk myszy - COPY OBJECT - następnie znowu prawy przycisk myszy i PASTE IN PLACE.
W ten sposób zrobiłem klony moich prostokątów.
Każdy z nich przesuwam w dół tworząc "układ". Narysowałem również podłużny prostokąt ( biały ) który przebiega przez cały obszar animacji w ten sposób by napis Tutorial nr5 znajdował się na nim. Cały układ wygląda

Dodaj obrazek

Układ typu "element na elemencie" ( tekst na białym pasku ) możecie edytować w oknie OUTLINE zwyczajnie łapiąc element lewym przyciskiem myszy i przesuwając go do góry lub na dół.

Ponieważ w oknie OUTLINE zrobiło mi się trochę "tłoczno" zgrupuję teraz moje prostokąty w SPRITE.
Zaznaczam wszystkie prostokąty - prawy przycisk myszy - GROUPING - GROUP AS SPRITE.
Po zgrupowaniu moje okno OUTLINE wygląda tak

Dodaj obrazek

Mogę teraz przystąpić do nadania wszystkim elementom animacji wybranych efektów.
Tutaj musicie PAMIĘTAĆ o tym że jeśli chcecie by Wasz baner wyglądał dobrze to każdy element powinien dostać 2 efekty czyli
1. efekt dzięki któremu ukaże się nam na ekranie
2. efekt który "usunie" element

Otwieram teraz mojego SPRITE w oknie OUTLINE i każdemu prostokątowi nadaję 1 efekt z zestawu SLIDE IN jako pierwszy oraz efekt 2 SLIDE OUT jako drugi.
Nie można też zapomnieć o moim tekście czyli jemu też przypisuję 2 efekty.
Moja linia czasu całej sceny wygląda teraz tak

Dodaj obrazek

Jak widać na fotce widoczne są tylko efekty elementów które nie zostały zgrupowane w SPRITE.
Jeśli chcecie zobaczyć efekty elementów ze SPRITE na lini czasu wystarczy otworzyć SPRITE w oknie OUTLINE.
Bardzo ważną rzeczą jest by pamiętać na której klatce kończy się nam animacja w SPRITE a to dlatego że jeśli elementy nie zgrupowane zakończą swoje efekty za szybko lub za późno w stosunku do zgrupowanych możemy mieć tzw "czarną dziurę" w animacji co nie będzie ładnie wyglądało.
Jak widać na fotce powyżej efekty moich elementów które nie są zgrupowane kończą się na klatce 72 natomiast jak widać na fotce poniżej elementy ze SPRITE na klatce 60.

Dodaj obrazek

Akurat to ustawienie tutaj pasuje ale nie zawsze tak może być dlatego to takie bardzo ważne.
Następna bardzo ważna rzecz to BRAK ZAZNACZENIA opcji STOP PLAYING AT END OF SCENE w oknie prawym w karcie MOVIE gdyż w przeciwnym razie scena wykona animację tylko raz i się zatrzyma.
W ten sposób wykonałem pierwszą scenę banera i czas przejść do następnej.
Okno lewe - OUTLINE - INSERT - SCENE co spowoduje dodanie nam kolejnej sceny Scene_2.

Teraz mój opis będzie krótki gdyż tutaj wykonujecie ponownie Wasze animacje trzymając się tylko podstawowych zasad podanych powyżej czyli :
1. pamietać o klatkach kończących animację ( jeśli macie elementy zgrupowane )
2. brak zaznaczenia opcji STOP PLAYING ..... ( patrz wyżej )
Jeśli chcecie kolejna scenę to ponownie INSERT i tak dalej ......

Jest jeszcze sposób nr2 stworzenia banera polegający na wrzuceniu Waszych wszystkich animacji do jednej sceny z zachowaniem odpowiedniej kolejności ale powiem Wam szczerze że może to trochę wprowadzić chaos jeśli zastosujecie dużą ilość elementów.
Dlatego ja polecam oprzeć się scenach.
Tutaj możecie zobaczyć końcowy EFEKT.
Pozdrawiam i życze mnóstwa pomysłów B)
Dodaj obrazek Dodaj obrazek
Dodaj obrazek <<- Nic dodać Nic ująć
Dodaj obrazek <<- Skład darmowych grafik PNG
0

#2 Użytkownik jest niedostępny   wolf 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1473
  • Dołączył: 22-czerwiec 06
  • MiejscowośćMichałowice

Napisany 22 sierpień 2006 - 10:16

super tutorial, super efekt ! chyba zaczynam coraz bardziej lubic flasha . zaraz sppróbuje cos zrobic :P
Dodaj obrazek
----------------------------------------------------------------------
Nie pomagam na GG, PW, E-Mail.
0

#3 Użytkownik jest niedostępny   eraevion 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1439
  • Dołączył: 13-lipiec 06
  • GG: 2476024
  • MiejscowośćLubichowo

Napisany 23 sierpień 2006 - 08:03

Suuuuper!
Jak dla mnie najlepszy tutorial z tych wszystkich.
Gratulacje i czekam na następne :D
0

#4 Użytkownik jest niedostępny   hultaj 

  • hulcior
  • Grupa: Użytkownicy
  • Postów: 3328
  • Dołączył: 28-kwiecień 06
  • GG: 2372800

Napisany 23 sierpień 2006 - 08:37

Ja coś spróbuję zrobić na pewno. Nie wiem tylko, kiedy... <_<
0

#5 Użytkownik jest niedostępny   browar 

  • Szef Knajpy ;)
  • Grupa: Użytkownicy
  • Postów: 1198
  • Dołączył: 08-kwiecień 06
  • MiejscowośćWęgrów

Napisany 23 sierpień 2006 - 08:50

Ooo jest nowy tutek :) jak znajdę chwilkę wolną to na pewno spróbuje zrobić bannerek :D Brawo AproX!

Zobacz posthultaj, o Aug 23 2006, 07:37 AM, powiedział:

Ja coś spróbuję zrobić na pewno. Nie wiem tylko, kiedy... <_<

Pewnie wtedy jak Ci się skończy licencja :P
0

#6 Użytkownik jest niedostępny   lunsil 

  • Weteran
  • Grupa: Użytkownicy
  • Postów: 1634
  • Dołączył: 11-kwiecień 06
  • GG: 9583374
  • MiejscowośćKraków

Napisany 23 sierpień 2006 - 09:12

No i znowu master flasha AproX! Piękny tutek nam stworzył! Graty!!!
Crystal Templates - [+][+][+][+][-][-][-][-][-][-] 40%
0

#7 Użytkownik jest niedostępny   ManiakS 

  • Gaduła
  • Grupa: Użytkownicy
  • Postów: 220
  • Dołączył: 17-maj 06
  • GG: 4235516

Napisany 23 sierpień 2006 - 09:38

super !! Wiecej takich tutkow aprox d xD

http://cssource.info/banner/banner.swf
0

#8 Użytkownik jest niedostępny   AproX D 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1141
  • Dołączył: 01-maj 06

Napisany 23 sierpień 2006 - 11:25

cieszę się że się podoba - teraz chyba zajmę się tutorialem szkieletu strony www wykonanaej oczywiście we flashu B)
Dodaj obrazek Dodaj obrazek
Dodaj obrazek <<- Nic dodać Nic ująć
Dodaj obrazek <<- Skład darmowych grafik PNG
0

#9 Użytkownik jest niedostępny   ManiakS 

  • Gaduła
  • Grupa: Użytkownicy
  • Postów: 220
  • Dołączył: 17-maj 06
  • GG: 4235516

Napisany 23 sierpień 2006 - 11:42

o taki tutek by sie przydal :D
0

#10 Użytkownik jest niedostępny   wolf 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1473
  • Dołączył: 22-czerwiec 06
  • MiejscowośćMichałowice

Napisany 23 sierpień 2006 - 12:08

nie wiem dlaczego ale jak daje animacje tekstu to mi jakies błedy wywala po prawiej na podgladzie i dam jakms animcja to jakas taka strasznie dziwna sie robi :( jaka moze byc tego przyczyna? :(
Dodaj obrazek
----------------------------------------------------------------------
Nie pomagam na GG, PW, E-Mail.
0

#11 Użytkownik jest niedostępny   AproX D 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1141
  • Dołączył: 01-maj 06

Napisany 23 sierpień 2006 - 12:09

nie jestem Ci w stanie pomóc skoro tego nie widzę - daj plik swi
Dodaj obrazek Dodaj obrazek
Dodaj obrazek <<- Nic dodać Nic ująć
Dodaj obrazek <<- Skład darmowych grafik PNG
0

#12 Użytkownik jest niedostępny   hultaj 

  • hulcior
  • Grupa: Użytkownicy
  • Postów: 3328
  • Dołączył: 28-kwiecień 06
  • GG: 2372800

Napisany 23 sierpień 2006 - 02:10

Po wielu trudach (za dużo kombinowałem) zrobiłem.
Oto mój efekt:
http://www.page4test...ash/button.html
http://www.page4test...lash/button.swf

Jakieś rady?
Aha...

Aprox:
Jak zrobiłeś, że w Twoim buttonie scena 2 (tak?) jest niżej.
I jeszcze w 2 scenie: pojawia się szare tło i potem pojawia się taka ukośna kreska - jak ja zrobiłeś?

Cholera, szkoda, że ja nie umiem takich efektów i że nie mam pomysłów. :(
Te Twoje to chociaż jakoś ludzko wyglądają, a moje takie kaszaniaste i brzydkie. :(

Szkoda, że w tutku nie opisałeś sceny 2. Jeszcze jakbym wiedział, jakich efektów użyłeś. :lol:

Za dużo chce...


EDIT1: Kiedy tutek na szkielet strony www? Przed końcem wakacji będzie? :D
0

#13 Użytkownik jest niedostępny   AproX D 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1141
  • Dołączył: 01-maj 06

Napisany 23 sierpień 2006 - 02:36

no tu masz rację - za dużo chcesz :P - niestety nie mogę opisywać wszystkich efektów gdyż właściwie musiałbym tworzyć nowe tutoriale na każdy jakiś tam wymyślny efekt osobny - część efektów robię sam i są one tylko i wyłącznie pomysłem który mi wpadnie do głowy i który staram się urzeczywistnić. Nie mów też że Twoje są kaszniaste - nikt nie rodzi się "mistrzem" - gdybyś zobaczył moje pierwsza animacje :blink: brr.....
Dodaj obrazek Dodaj obrazek
Dodaj obrazek <<- Nic dodać Nic ująć
Dodaj obrazek <<- Skład darmowych grafik PNG
0

#14 Użytkownik jest niedostępny   hultaj 

  • hulcior
  • Grupa: Użytkownicy
  • Postów: 3328
  • Dołączył: 28-kwiecień 06
  • GG: 2372800

Napisany 23 sierpień 2006 - 02:45

A nie powiesz, jak zrobiłeś, że ta scena 2 jest niżej? I jeszcze ten efekt mnie zaciekawił, gdzie jest szare tło i nagle zielona kreska.

Powiedz tylko, jak to zrobić, żeby ta scena 2 była niżej. Wieczorem coś wymyśle, a jutro spróbuję wykonać. :D
0

#15 Użytkownik jest niedostępny   AproX D 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1141
  • Dołączył: 01-maj 06

Napisany 23 sierpień 2006 - 03:06

nie jestem w stanie Ci powidzieć w jednym zdaniu jak to zrobić gdyż po prostu się nie da - musiałbym robić tutoriala by dokładnie Ci to wytłumaczyć. A skąd bierze się to zielone tło ?? jak widać przez lukę w "bramie" zjeżdża z góry. Wystarczy że narysujesz prostokąt o wielkości obszaru animacji lub ciut większy ( prostokąt musi być umiejscowiony na obszarze ) a następnie przypiszesz mu efekt dzięki któremu się pokaże jako pierszy element animacji danej sceny.
Dodaj obrazek Dodaj obrazek
Dodaj obrazek <<- Nic dodać Nic ująć
Dodaj obrazek <<- Skład darmowych grafik PNG
0

#16 Użytkownik jest niedostępny   hultaj 

  • hulcior
  • Grupa: Użytkownicy
  • Postów: 3328
  • Dołączył: 28-kwiecień 06
  • GG: 2372800

Napisany 23 sierpień 2006 - 03:28

No ok, poniekąd rozumiem. Zastanawiało mnie dlaczego ten prostokąt jest krzywy, ale mniejsza o to.
0

#17 Użytkownik jest niedostępny   AproX D 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1141
  • Dołączył: 01-maj 06

Napisany 23 sierpień 2006 - 03:31

nie nie - prostokąt zielony jest normalnym prostokątem natomiast te krzywizny to są elementy bramy i one mają inne zadanie. Zoabcz TUTAJ - tu masz przykład normalnego prostokąta który ma przypisany efekt SLIDE ON
Dodaj obrazek Dodaj obrazek
Dodaj obrazek <<- Nic dodać Nic ująć
Dodaj obrazek <<- Skład darmowych grafik PNG
0

#18 Użytkownik jest niedostępny   wolf 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1473
  • Dołączył: 22-czerwiec 06
  • MiejscowośćMichałowice

Napisany 23 sierpień 2006 - 04:38

http://www.zaladuj.x...liki/banner.swf a to moje moze jakies porady ? jak dodac nastepna strone ?
Dodaj obrazek
----------------------------------------------------------------------
Nie pomagam na GG, PW, E-Mail.
0

#19 Użytkownik jest niedostępny   AproX D 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1141
  • Dołączył: 01-maj 06

Napisany 23 sierpień 2006 - 04:44

jak dołączyć nową scenę ??? oj kamilu - nie przeczytałeś dokładnie tutoriala :P - poczytaj a znajdziesz odpowiedź
Dodaj obrazek Dodaj obrazek
Dodaj obrazek <<- Nic dodać Nic ująć
Dodaj obrazek <<- Skład darmowych grafik PNG
0

#20 Użytkownik jest niedostępny   wolf 

  • Elita
  • Grupa: Użytkownicy
  • Postów: 1473
  • Dołączył: 22-czerwiec 06
  • MiejscowośćMichałowice

Napisany 23 sierpień 2006 - 04:47

oo jest :D zaraz biore sie do pracy i robie nowy flash wciąga :D AproX D masz jakoms strone z tutami po polsku do swisha ? :P
Dodaj obrazek
----------------------------------------------------------------------
Nie pomagam na GG, PW, E-Mail.
0

Prześlij ten temat:


  • 3 Stron +
  • 1
  • 2
  • 3
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

1 Użytkowników czyta ten temat
0 użytkowników, 1 gości, 0 anonimowych użytkowników


               
           
       
Nasza strona internetowa wykorzystuje cookies (pol.: ciasteczka)
       

Legalne.info dokłada wszelkich starań, aby traktować klientów uczciwie i otwarcie, przy uwzględnieniu najlepszych praktyk. Korzystając z naszej strony wyrażasz zgodę na wykorzystywanie przez nas plików cookies, w celu zapewnienia Ci wygody podczas przeglądania naszego serwisu. Aby dowiedzieć się więcej na temat cookies oraz w jaki sposób z nich korzystamy, kliknij tutaj