SWiSH Forum
Forum użytkowników programów SWiSH

Tutoriale - Animowany przycisk (button)

roland - Pią 22 Cze, 2007 11:24
Temat postu: Animowany przycisk (button)
Jednym z częściej wykorzystywanych elementów na stronie WWW są animowane przyciski. Także jednym z częściej pojawiających się pytań na niniejszym Forum, jest jak się je tworzy. Dlatego też powstał ten opis.

Pokażę od podstaw, jak należy utworzyć animowany przycisk, który zmienia kolor po wskazaniu go myszką, a dodatkowo, napis na nim umieszczony będzie animowany.

Z przybornika wybierz kształt, który będzie podstawą przycisku.



Niektóre z kształtów można modyfikować. Jeżeli zobaczysz małe zielone znaczniki na przykład w narożnikach kształtu, możesz je chwycić myszką i przesunąć, decydując przykładowo o sile zaokrąglenia narożników.



Ponownie skorzystaj z przybornika, tym razem wybierz jednak narzędzie tekstu. W zakładce Text, dostępnej z prawej strony okna programu, wpisz własny tekst i sformatuj go według uznania.



Sprawdź, czy w oknie Outline z lewej strony okna programu jest zaznaczona nazwa tekstu, a następnie wybierz z górnego menu Modify, polecenie Convert, a następnie Convert to Sprite. Tekst zostanie przekształcony w duszka. Czynność ta jest niezbędna, jeżeli będziesz chciał zastosować dla tekst animację. Jeżeli tekst ma pozostać statyczny, to ta czynność jest zbędna.



W oknie Outline, trzymając wciśnięty klawisz Ctrl, zaznacz zarówno tekst jak i kształt przycisku. Następnie wybierz z górnego menu Modify, polecenie Grouping, a następnie Grouping as Button. W ten sposób oba obiekty zostaną połączone i przekształcone w przycisk.



W zakładce Button z prawej strony okna programu zaznacz pole Has separate over state. W ten sposób umożliwisz sobie zmianę wyglądu przycisku, gdy użytkownik przesunie nad niego wskaźnik myszy. Jeżeli zaznaczysz także pole Has separate down stete, to będziesz mógł zmienić także wygląd przycisku w momencie kliknięcia na nim.



W zakładce Outline, kliknij na symbolu z plusem obok nazwy przycisku. Jeżeli zaistnieje potrzeba, rozwiń także pozycję Over State. To właśnie w niej znajdują się kopie utworzonych wcześniej obiektów, tworzących wygląd przycisku, a które to będą wyświetlane gdy użytkownik przesunie nad przycisk wskaźnik myszy. Zaznacz nazwę kształtu przycisku, a następnie w zakładce Shape z prawej strony okna programu, zmień kolor na inny.



Ponownie przejdź do okna Outline i rozwiń duszka z tekstem, poniżej pozycji Over State. Kliknij na nazwie tekstu.



Zastosuj dla tekstu dowolny efekt. Efekt ten zostanie wyświetlony tylko wtedy, gdy użytkownik przesunie nad przycisk wskaźnik myszy.



Możesz teraz w podobny sposób zmienić wygląd przycisku, dla sytuacji gdy użytkownik kliknie na przycisku. W tym celu zmień wygląd obiektów poniżej pozycji Down State w oknie Outline.

Pozostało jeszcze tylko określić, jaka strona ma się wczytać, gdy przycisk zostanie "kliknięty". W tym celu przejdź do zakładki Script.



Rozwiń przycisk Add Script, a następnie wybierz Events > Button > on (press). W ten sposób wybierzesz zdarzenie na które ma zareagować przycisk. Tym zdarzeniem będzie kliknięcie na przycisku.



Teraz należy określić jaka akcja ma zostać wykonana, gdy zajdzie powyższe zdarzenie. Rozwiń przycisk Add Script, a następnie wybierz Browser/Network > getURL(...). W dolnej części okna, w polu URL wpisz, zaczynając od "http://", adres strony internetowej.



Gotowe. Poniżej możesz pobrać w postaci pliku ZIP, zarówno SWI jak i SWF przykładowego przycisku. Pliki zostały utworzone przy pomocy programu SWiSHmax Built 2007.05.24.

kalinka83 - Sro 19 Gru, 2007 14:33

czesc

szukam kisązki nt., obsługi SWiSHmax moze ktoś chciałby udostępnić jakąś wersję elektroniczną:)

biznesprint - Czw 21 Lut, 2008 09:09

kalinka83 napisał/a:
czesc

szukam kisązki nt., obsługi SWiSHmax moze ktoś chciałby udostępnić jakąś wersję elektroniczną:)


Ja też bym się na taką wersję pisał :)
Najpierw ja przetestuję na wersji trial, bo po co mam kupić, jak nie wiem czy zda u mnie egzamin.

erbe - Czw 21 Lut, 2008 19:51

Wersje trial owej książki macie na na http://swish.wodip.opole.pl
biznesprint - Wto 26 Lut, 2008 13:30

erbe napisał/a:
Wersje trial owej książki macie na na http://swish.wodip.opole.pl


Przepraszam, ale ty nie zrozumiałeś o co Nam chodziło. Po co mi spis treści jednej i drugiej książki?
Nie ma ktoś jej elektronicznej wersji?

mielu - Wto 26 Lut, 2008 18:28

biznesprint napisał/a:
Przepraszam, ale ty nie zrozumiałeś o co Nam chodziło. Po co mi spis treści jednej i drugiej książki?
Nie ma ktoś jej elektronicznej wersji?

popatrz to nie erbe Cię źle zrozumiała tylko ty erbe'go
Chodzi o to, że http://swish.wodip.opole.pl kilka przykładów, które też są w książce(chyba jak się mylę to poprawcie), ale też jest forum.
Co do wersji elektronicznej książki :roland 'a to nie jest ona darmowa :( , a osoba, która ją napisała jest administratorem tej strony

biznesprint - Sro 27 Lut, 2008 10:07

mielu napisał/a:
biznesprint napisał/a:
Przepraszam, ale ty nie zrozumiałeś o co Nam chodziło. Po co mi spis treści jednej i drugiej książki?
Nie ma ktoś jej elektronicznej wersji?

popatrz to nie erbe Cię źle zrozumiała tylko ty erbe'go
Chodzi o to, że http://swish.wodip.opole.pl kilka przykładów, które też są w książce(chyba jak się mylę to poprawcie), ale też jest forum.
Co do wersji elektronicznej książki :roland 'a to nie jest ona darmowa :( , a osoba, która ją napisała jest administratorem tej strony


Tyle to wiem, że napisał ją ROLAND

[ Dodano: Sro 27 Lut, 2008 10:08 ]
A może ma ktoś ją na sprzedaż?

mielu - Sro 27 Lut, 2008 11:36

swish.pl pod warunkiem że kupowałeś u nich :swishmax , albo kupisz

[ Dodano: Sro 27 Lut, 2008 12:41 ]
http://swish.pl/product_i...561f36618b0900c
jak chcesz to mogę Ci ją kupić

Marta - Sro 08 Kwi, 2009 18:41
Temat postu: Pomocy!!!!!!!!!!!!!!!!!!
Prosze niech mi ktos pomoże i napisze czy w SWiSh jest gumka do ścierania? bo nie widze jej. Czy mozna narysować linie i ją zaokrąglic aby był półokrąg? czy mogłby ktos mi odpowiedzieć?

[ Dodano: Czw 09 Kwi, 2009 07:23 ]
Chyba nikt nie zaglaa już na to forum :(

Szymciosek - Czw 09 Kwi, 2009 07:41

da się
narysuj linię...
naciskasz drugą strzałkę od prawej. Subselection Tool (A)...
klikasz 2x w środku linii, i teraz możesz ją zagiąć...
Ale żeby można było zaokrąglić, klikasz lewym klawiszem na niej i wybierasz SMOOTH

Marta - Czw 09 Kwi, 2009 10:19
Temat postu: Dziekuje
Dziękuje bardzo
Pisze prace mgr. i robie animacje w 4 programach graf. miedzy innymu w swishu i potrzebowałam narysować pólokrąg do animacji. A tak wogóle to w Swishu jest gumka do ścierania? Abym głupot w mgr. nie napisała bo mnie wysmieja na obronie. A ja jej znaleść nie moge. I mysle od 2 dni że niema w swishu gumki. Czy ona jest gdzieś w narzedziach a ja jej poprostu niewidzę? Mam angielską wersje.

shastaan - Czw 09 Kwi, 2009 10:35

Rysowanie w swishu to tylko wektory. Nie ma zadnych narzędzi do bitmap - nie ma też gumki.
Marta - Czw 09 Kwi, 2009 16:54
Temat postu: Dzieki
Fajnie że jeszcze ktos zagląda na to forum.

[ Dodano: Czw 09 Kwi, 2009 21:21 ]
Kolejny problem.

W jaki sposób zrobić animacje po lini aby nie była ona zaokrąglona w wybranych pubktach. (robie animacje to zaokrągla mi przebieg lini). Czy da sie zrobić animację by np. obiekt poruszał sie pod kątem prostym po wysnaczonej lini? Np. po kawałku obwodu kwadratu.

Mam nadzieje że zrozumiale to wytłumaczyłam.

Szymciosek - Pią 10 Kwi, 2009 06:16

Nie wiem czy dobrze zrozumiałem, ale wymyśliłem że o to ci może chodzić...

zamieszczam załącznik

Marta - Pią 10 Kwi, 2009 16:29

Ojej plik sie siągnął a ja mam Swish max 2 i nieche mi tego otworzyc. Dziwne? Kolega robił w swish max? Chyba strszej wersi nie otwiera, ale dziwne? Bo raczej nowaszej mógłby nieotworzyc. A może znowu cos żle robie i nieche mi sie otworzyć?
Jeju :( co mam zrobic?

shastaan - Pią 10 Kwi, 2009 16:31

Starszą wersję może otworzyć. Szymciosek ma pewnie nowszy build Swishmaxa 2 niż Ty.
Marta - Pią 10 Kwi, 2009 18:09

Oj to nie ciekawie:( niebardzo wiem co zrobic by módż to obejżeć?

[ Dodano: Pią 10 Kwi, 2009 20:07 ]
Mam narysowany półokrąd np. kawałek ziemi. nad ziemią po pólokegu ma sie poruszać miniaturka człowieka " niteczka". Człowieczek ma sie przmieszczać z lewej na prawo po łuku i zawsze stopami do ziemi. Przemieszczać go potrafię. Robię to za pomoca ruchu po lini tylko mam następujący problem: ten człowieczek mi sie przekreca jak dojdzie do konca animacji nie jest dalej stopami do ziemie tylko np. bokiem.
Co mam zrobić aby zawsze był stopami do ziemi nie przekracał się?

shastaan - Sob 11 Kwi, 2009 00:01

Jesli ma się obracać po okręgu to reference point tego czlowieczka przesun do srodka tego okręgu i użyj zwyklej rotacji. Tak chyba najprosciej.

Zanim zadasz następne pytanie użyj searcha. Jesli search nie pomoże pytaj ale załóż nowy temat (w odpowiednim dziale) by kto inny mógł znaleźć odpowiedz. Ten wątek to tutorial o animacji przycisku...

zozio - Czw 19 Sie, 2010 11:27

Trochę nie w Temacie:

To znaczy, że mogę kupić np książkę P. Rolanda do SM 3 w wersji elektronicznej płacąc np paypalem??

Tak tylko pytam bo zapłaciłem już za książke miesiąc temu i książki nie mam. Próbowałem odszukać przesyłke ale ślad się usrywa na granicy Polski z Niemcami więc taka opcja bardzo by mnie ucieszyła :)


Powered by phpBB modified by Przemo © 2003 phpBB Group