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ć

Sprawdź, jak zostać testerem oprogramowania lub Java developerem! Poznaj kursy online!

Architektura globalnego e-commerce: Jak zbudować sklep gotowy na podbój świata?

Java obchodzi 30. urodziny – język programowania który zmienił świat technologii

Jak zacząć projektować aplikację, nie mając gotowego pomysłu?

Serwer dla małej firmy – czym kierować się przy jego wyborze?

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 e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Najnowsze artykuły

Procesor AMD Ryzen 7
Najlepsze procesory z pamięcią 3D V-Cache: Wydajność dla graczy i profesjonalistów
Technologie
Jak przygotować sklep internetowy na automatyzację obsługi klienta?
Artykuły partnerskie
the nvidia logo is displayed on a table
Nvidia przyłapana? Gigant AI chciał kupić miliony pirackich książek
AI Aktualności
Najczęstsze błędy w SMS marketingu: jak nie przepalić budżetu?
E-marketing
4 najczęstsze cyberzagrożenia w przemyśle
Technologie
Jak uratować zaschnięty tusz do drukarki? Skuteczne domowe sposoby i porady
Poradniki
Model 3D jako wspólne źródło danych dla projektu, produkcji i montażu
Artykuły partnerskie
Dlaczego wideo z telefonu sprzedaje na TikToku lepiej niż profesjonalne spoty?
Artykuły partnerskie
Dwa ekrany zawsze pod ręką – zalety korzystania z monitora przenośnego na co dzień
Technologie
Rola nowoczesnych technologii w procesie rehabilitacji
Artykuły partnerskie
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

Sprawdź, jak zostać testerem oprogramowania lub Java developerem! Poznaj kursy online!

5 min czytania
Technologie webowe

Architektura globalnego e-commerce: Jak zbudować sklep gotowy na podbój świata?

7 min czytania
MacBook Pro showing programming language
Technologie webowe

Java obchodzi 30. urodziny – język programowania który zmienił świat technologii

9 min czytania
AktualnościTechnologie webowe

Jak zacząć projektować aplikację, nie mając gotowego pomysłu?

9 min czytania
woman in black top using Surface laptop
Technologie webowe

Serwer dla małej firmy – czym kierować się przy jego wyborze?

5 min czytania
Technologie webowe

Jaki hosting wybrać pod Laravel? Kompleksowy przewodnik dla twórców aplikacji webowych

6 min czytania
programming language
Technologie webowe

Kaskadowość w CSS – wszystko, co musisz wiedzieć

7 min czytania
two women talking while looking at laptop computer
Technologie webowe

Darmowe kreatory stron WWW – stwórz swoją stronę w godzinę

14 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

  • Najlepsze procesory z pamięcią 3D V-Cache: Wydajność dla graczy i profesjonalistów
  • Jak przygotować sklep internetowy na automatyzację obsługi klienta?
  • Nvidia przyłapana? Gigant AI chciał kupić miliony pirackich książek
  • Najczęstsze błędy w SMS marketingu: jak nie przepalić budżetu?

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?