Korzystając z tej strony zgadzasz się z polityką prywatności i regulaminem.
Akceptuj
WebInside.plWebInside.plWebInside.pl
  • Aktualności
  • Technologie
  • WWW
  • E-marketing
  • AI
  • Poradniki
  • e(Biznes)
Szukaj
  • Kontakt
  • Forum
WebInside.pl © 2023.
Czytasz: Rysowanie we Flashu
Udostępnij
Zaloguj się
Powiadomienia
Aa
WebInside.plWebInside.pl
Aa
Szukaj
  • Strona główna
  • Aktualności
  • Technologie webowe
  • Publicystyka
  • E-marketing
  • Poradniki
  • AI
  • Technologie
  • Artykuły partnerskie
  • Więcej
    • Kontakt
    • Mapa strony
Masz już konto? Zaloguj się
  • Aktualności
  • Technologie
  • WWW
  • E-marketing
  • AI
  • Poradniki
  • e(Biznes)
WebInside.pl © 2023.
WebInside.pl > Technologie webowe > Rysowanie we Flashu
Technologie webowe

Rysowanie we Flashu

WebInside.pl
Ostatnia aktualizacja: 08.07.2009
WebInside.pl
Udostępnij
Udostępnij

Jeśli przyjrzysz się większości animacji Flash publikowanych w internecie dojdziesz zapewne do wniosku, że większość z nich została stworzona za pomocą prostych, nakładających się na siebie kształtów.

Zaletą przy tworzeniu takich animacji jest niewątpliwie dosyć łatwy i szybki sposób tworzenia poszczególnych elementów i etapów animacji, których w kilkuminutowym filmie jest bardzo dużo. Innym, bardziej pracochłonnym sposobem tworzenia rysunków we flashu jest odręczne rysowanie każdego kształtu, bez użycia narzędzi typu Rectangle Tool czy Oval Tool.

Doskonałą pomocą w tworzeniu tego typu rysunków jest tablet, jednak jeśli go nie masz, możesz także posługiwać się myszką, co zaowocuje mniejszą precyzją kreski, ale wcale nie oznacza to że wykonany w ten sposób obrazek czy animacja nie będzie równie ciekawa.

Przyjrzyj się statycznemu obrazkowi poniżej, którego nauczę Cię tworzyć w trakcie tej lekcji. Wkrótce przekonasz się że to znacznie łatwiejsze niż rysowanie na papierze, jednak radzę uzbroić się w cierpliwość, bowiem w tym przypadku kluczową sprawą do osiągnięcia zadowalającego efektu jest precyzja, skupienie, dokładność i dbałość o szczegóły.

Początkowo zapewne tworzenie tego typu obrazka zabierze Ci dużo czasu, stopniowo jednak stanie się to znacznie łatwiejsze i będziesz swoje rysunki tworzył dużo szybciej.

Wygląda nieźle, ale od czego zacząć? Warto zrobić sobie najpierw wstępny szkic na papierze, ale nie jest to konieczne, ważne jest ogólne wyobrażenie o tym, co chce się narysować Zacznijmy od piłki.

Najprostszą metodą, dopóki nie nabierzesz wprawy w sprawnym posługiwaniu się myszką czy tabletem, jest ją odrysować. Wystarczy więc poszukać odpowiedniego zdjęcia, a następnie zabrać się do rzeczy. Ja znalazłem coś takiego:

Zdjęcie umieść na niższej warstwie i zablokuj ją. W nowej warstwie, ponad warstwą ze zdjęciem będziesz rysował poszczególne elementy piłki. Zacznij od obrysowania krawędzi piłki. W tym celu posłuż się narzędziem Brush Tool (B), eksperymentuj z rozmiarami pędzla, kształt pozostaw okrągły, kolor wybierz szary.

Po obrysowaniu krawędzi, stwórz nową warstwę pod warstwą z krawędziami, będziesz w niej rysował wypełnienie. poszczególnych fragmentów piłki. W tym celu również użyj narzędzia Brush Tool, możesz eksperymentować z kolorami.

Gdy wypełnienie będzie już gotowe, zamknij warstwę i stwórz nową na samej górze hierarchii, zrobisz w niej cień. W tym celu wybierz narzędzie Oval Tool (O), ustaw brak koloru obramowania a w kolorze wypełnienia wybierz gradient.

Następnie w palecie Color Mixer ustaw właściwości gradientu. Kolory w gradiencie ustaw na biały i czarny, dla koloru białego wybierz jednak parametr Alpha 0%, tak jak to jest pokazane na screenie poniżej:

Dla koloru czarnego także ustaw Alpha na, powiedzmy, 50%, później będziesz mógł z tym eksperymentować. Teraz w nowej warstwie którą stworzyłeś narysuj koło przykrywające naszą piłkę.

W celu modyfikacji wielkości kształtu posłuż się narzędziem Free Transform, jeśli natomiast chcesz zmienić zakres krycia gradientu, wybierz narzędzie Paint Bucket Tool (K), następnie kliknij na kształcie i przytrzymując lewy klawisz myszy przeciągnij kursor w odpowiednim kierunku.

Doskonale, ostatnią rzeczą, która pozostała nam do zrobienia są błyski na piłce. Stwórz je w nowej warstwie na samej górze hierarchii. Błyski możesz narysować pędzlem lub stworzyć je z kształtów. Błyski to po prostu takie kształty:

Nasza piłka jest gotowa, aby nie przeszkadzała nam przy tworzeniu innych elementów, najlepiej będzie jak zamkniesz ją w obiekcie Graphic lub w Klipie.

Tak naprawdę, cala reszta elementów obecnych na scenie została stworzona w bardzo podobny sposób, w mniejszym lub większym stopniu korzystając z odręcznego rysowania, używałem także kształtów, tam gdzie wydawało mi się to lepszym rozwiązaniem.

Generalnie, trudniej jest precyzyjnie odręcznie narysować obiekty znajdujące się dalej w perspektywie, bowiem łatwo tu, rysując w powiększeniu, przesadzić z drobnymi elementami i detalami i sprawić że obiekt nie będzie dobrze się prezentował. Dlatego też np. rysując żaglówki posługiwałem się głównie kształtami.

Do stworzenia większości elementów jak fale, cienie na piasku, posługiwałem się gradientami, często nie rysując każdego z nich od nowa, ale powielając i odpowiednio przekształcając za pomocą Free Transform.

Myślę że poszczególne elementy tej grafiki nie wymagają dalszego dokładnego omówienia, jako że wszystko to, co zostało zrobione jest wynikiem powielania jednego z dwóch schematów, których Cię nauczyłem.

Dosyć trudne będzie na pewno rysowanie parasola, jednak jest to w zasadzie proces identyczny jak z piłką, wszystkie niezbędne elementy znajdują się na osobnych warstwach w załączonym do tej lekcji pliku .fla, tak więc radzę zaglądać do niego, w ten sposób wiele się nauczysz.

Poszczególne elementy parasola, a także leżak zamknąłem w osobnych obiektach dzięki czemu mogłem je potem w prosty sposób powielić, po prostu przemieszczając je z biblioteki na scenę i modyfikując za pomocą free transform.

Cień leżaka i parasola wykonałem oczywiście za pomocą narzędzia Brush Tool (B). Myślę, że po tej krótkiej lekcji umiesz już wystarczająco dużo, żeby stworzyć własny rysunek od podstaw. Jak zapewne zauważyłeś, rysowanie we Flashu jest zadziwiająco proste a stworzone rysunki są proste w edycji. Pamiętaj aby jak najwięcej elementów trzymać na osobnych warstwach, bowiem unikniesz w ten sposób kłopotliwego nakładania się na siebie obiektów.

Dobrze zorganizowany rysunek, z podziałem na odpowiednie elementy – obiekty typu Graphic lub Movie Clip, a także wewnętrznej strukturze wielowarstwowej będzie doskonałym punktem wyjścia do stworzenia Flashowej animacji. Pragnę na koniec przypomnieć Ci o najważniejszych rzeczach, które musi być podstawą przy tworzeniu rysunków – są nimi skupienie i cierpliwość.

Twoim największym wrogiem będzie natomiast niedbalstwo, tworzenie wszystkiego w tej samej warstwie, brak systematyzacji elementów, a także rozpraszanie uwagi. Jeden z największych animatorów naszej epoki, Milt Kahl, zwykł mawiać:

„Animation is concentration„, wtórował m.in. Richard Williams, który w pierwszej lekcji swej doskonałej książki „The Animator’s Survival Kit” (nawiasem mówiąc, gorąco polecam!), pisał: „Unplug! Take off your headphones! Turn off the radio, Switch off the CD! Turn off the tape! Close the door.”

Grzegorz Róg

Grzesiek jest autorem .

Może Cię zainteresować

Jak wybrać agencję do tworzenia strony internetowej w Warszawie?

Lovable – recenzja po 3 miesiącach. Cennik, opinie, kredyty, limity

Stanowisko web developera w 2026: co naprawdę przyspiesza pracę — i za co nie warto przepłacać

AI kontra klasyczne kreatory stron: kto tu naprawdę wygrywa?

Jak wybrać i zarejestrować domenę? Praktyczny przewodnik dla firm i osób prywatnych

WebInside.pl 2009-07-08 2009-07-08
Udostępnij ten artykuł
Facebook Twitter Kopiuj link Wydrukuj
Udostępnij
Poprzedni artykuł Elegancki napis
Następny artykuł Rafał Płatek, Pajączek
Zostaw komentarz lub opinię

Dodaj komentarz Anuluj pisanie odpowiedzi

Twój adres email nie zostanie opublikowany. Wymagane pola są oznaczone *

Najnowsze artykuły

screen showing bitcoin trading chart
Dobre giełdy kryptowalut – po czym je poznać, zanim wpłacisz pierwsze 100 zł
Artykuły partnerskie
Jak wybrać platformę e-commerce dla rozwijającego się sklepu?
Artykuły partnerskie
man facing three computer monitors while sitting
JetBrains w 2026 roku: jaką licencję wybrać i jak zaoszczędzić na zakupie?
e(Biznes)
Printerio – profesjonalna poligrafia dla firm, które chcą wyglądać dobrze na papierze
Artykuły partnerskie
Reklama jest dobra, a strona, na którą prowadzi, sprzedaje słabo. Pięć kontroli, zanim podniesiesz budżet
Artykuły partnerskie
a blue button with a white arrow on it
5 Best VPS Hosts to Run Telegram Bots 24/7 Without Interruptions
Artykuły partnerskie
Ryczałt 12% czy liniowy z IP Box? Programista na B2B wybiera formę opodatkowania na 2027 rok
Aktualności
Handlowiec na etat czy zewnętrzny zespół? Porównanie kosztów w 2026 roku
Artykuły partnerskie
Aplikacja Bybit – opinie o aplikacji mobilnej Bybit.eu na Androida i iOS
Artykuły partnerskie
Jak zwiększyć rozpoznawalność marki w całym mieście dzięki reklamie na tramwajach
E-marketing
banner
Chcesz umieścić swoją reklamę w portalu WebInside.pl?
Skontaktuj się z nami, a zaproponujemy interesujące formy reklamy.
Skontaktuj się

Inne polecane artykuły

Technologie webowe

Jak wybrać agencję do tworzenia strony internetowej w Warszawie?

3 min czytania

Lovable – recenzja po 3 miesiącach. Cennik, opinie, kredyty, limity

15 min czytania
Technologie webowe

Stanowisko web developera w 2026: co naprawdę przyspiesza pracę — i za co nie warto przepłacać

7 min czytania
a computer screen with the words the easy way to build marketplaces
Technologie webowe

AI kontra klasyczne kreatory stron: kto tu naprawdę wygrywa?

5 min czytania
Technologie webowe

Jak wybrać i zarejestrować domenę? Praktyczny przewodnik dla firm i osób prywatnych

5 min czytania
Technologie webowe

Komentarze w CSS – jak dodawać i do czego służą? Przykłady użycia

17 min czytania
Technologie webowe

Co to jest REST API i na jakich zasadach działa? Przewodnik dla początkujących

21 min czytania
Technologie webowe

Marginesy i dopełnienie w CSS – czym się różnią właściwości margin i padding?

17 min czytania
//

WebInside.pl – portal technologiczny. Aktualności ze świata technologii, webmastering, marketing internetowy, AI, poradniki.

 

Partnerzy



Wszystkie kategorie

  • AI
  • Aktualności
  • Artykuły partnerskie
  • E-marketing
  • e(Biznes)
  • Poradniki
  • Publicystyka
  • Technologie
  • Technologie webowe

Ostatnio dodane

  • Dobre giełdy kryptowalut – po czym je poznać, zanim wpłacisz pierwsze 100 zł
  • Jak wybrać platformę e-commerce dla rozwijającego się sklepu?
  • JetBrains w 2026 roku: jaką licencję wybrać i jak zaoszczędzić na zakupie?
  • Printerio – profesjonalna poligrafia dla firm, które chcą wyglądać dobrze na papierze

Kontakt

Chcesz się z nami skontaktować? Jesteś zainteresowany reklamą lub artykułem sponsorowanym?

Skorzystaj z formularza kontaktowego lub napisz do nas na kontakt@webinside.pl

WebInside.plWebInside.pl
WebInside.pl © 2023 | Mapa strony | Forum | Polityka prywatności
Witaj ponownie!

Zaloguj się do swojego konta

Zapomniałeś hasła?