როგორ შევქმნათ ანიმაციური ილუსტრატორი და Sprites. შექმნა ანიმაცია ილუსტრატორში

Გამარჯობა ყველას! დღეს მე შევეცდები პროგრამის მახასიათებლების აღწერას Adobe Illustrator, შედარებით მას ფლეშ თვისებები. ეს არ იქნება გლობალური დალუქვა ძვლის პროგრამის, არამედ აღწერილობა ზოგიერთი საინტერესო ჩიპი, რომ მე აღმოვაჩინე თავს ამ პროგრამაში. ინფორმაცია შეგროვდა ცალი როგორც სწავლის ყველაფერს ერთ პოსტზე. დაუყოვნებლივ მე ვაღიარებ, რომ მე არ ვარ სუპერ-გამოცდილი ილუსტრატორის მომხმარებელი, მხოლოდ ბოლო ექვსი თვის განმავლობაში მე ვიყენებ მასზე (სანამ ყველაფერი შედგენილია თქვენს ფლეშში). ბევრი დარწმუნდით, რომ ილუსტრატორი კომპლექსურია, ინტუიციურად ყოველთვის არ არის გასაგები. გარკვეულწილად მე ვეთანხმები, რომ Flash- ის შემდეგ, ეს პროგრამა გართულებულია. მაგრამ მაშინ მთავარია არ დატოვოს, მაგრამ სწავლის გაგრძელება. და რამდენიმე კვირის შემდეგ, აზროვნება გამოჩნდება, როგორ მივიღე ამის გაკეთება!

ასე რომ, რაც მე მომეწონა Illustrator, და რომ მე აღმოვაჩინე თავს, რა არ არის ფლეშ.
1. დავიწყებ ყველაზე მარტივი, მაგრამ ამავე დროს გჭირდებათ. სცადეთ ობიექტების წრეში. ადრე იყო Deco Tool. მაგრამ ეს იყო ამოღებული, როგორც ჩანს, დათვლილი ზედმეტი. მათ გადაწყვიტეს, რომ სახელურები უფრო მხიარულნი არიან. Illustrator- ში, ეს ფუნქციაა: ეფექტი - დამახინჯება და ტრანსფორმაცია - ტრანსფორმაცია.

ყველა სწრაფად და მარტივი, ღირებულებები (მანძილი ობიექტებს შორის, ასლები, ასლები) განსაზღვრავს პარამეტრებს.

2. Zig-zag

კიდევ უფრო მარტივი, მაგრამ მაინც სასარგებლო რამ. როგორც ჩანს, წვრილმანი, მაგრამ ფლეში თქვენ უნდა მიაპყროს ხელით, Illustrator ეს არის მეორე რამ.

3. ობიექტების დეფორმაცია (warp)

არაფერია მსგავსი ფლეშში. ქვემოთ მოცემულ მაგალითზე, მხოლოდ მარტივი ფორმების დეფორმაციის მხოლოდ 2 გზა აჩვენა (ეფექტი - Warp - რკალი / თევზი). სინამდვილეში, მათი 15 შემოსული უახლესი ვერსია პროგრამები.

4. კუთხეების ავტომატური დამრგვალება (მრგვალი კუთხეები)

თქვენ შეგიძლიათ ხელით გააკეთოთ: გრაფიკული ობიექტის დროს იზოლაციის დროს კუთხეში (ყველა ჯირკვალში) არის თეთრი წერტილი და ფედერალური ხაზი ნიშანი. მე გაიყვანს მაუსი, შეცვალოს თქვენი გემოვნების.

მაგრამ ეს ეხება მხოლოდ ფორმებს, ფანქრის ხაზით ცოტა განსხვავებულად - ვრცელდება დამრგვალება ( ეფექტი - სტილიზაცია - მრგვალი კუთხეები). გამომავალი ჩვენ იგივე ძალა გვაქვს.

5. Roughen (ზეთი)

ეფექტი ვრცელდება კ. მარტივი ფორმები (ეფექტი - დამახინჯება და ტრანსფორმაცია - Roughen). Outlet, ჩვენ ვიღებთ რაღაც მსგავსი დაბალი პოლიბორალური 3D მოდელები. ჩემი აზრით, მაგარი :) და რაც მთავარია - ძალიან მარტივი.

6. Pucker & Bloat (უბიძგებს და inflating)
მაგალითად სურათზე ქვემოთ:

7. ფორმა გაფართოება (ოფსეტური გზა)

In Flash არსებობს გაფართოების შევსების ფუნქცია (გაფართოების შევსება), ფანქარი ხაზები არ მუშაობს, განსხვავებით ილუსტრატორი.

8. ჯაგრისები (ხელოვნების ფუნჯი, ნიმუში ფუნჯი, scatter ფუნჯი)
ჩვენ არ ვხედავთ სურათს ქვემოთ:

9. Texture ფუნჯი (ტექსტურული ჯაგრისები)

ასევე ილუსტრატორში არის ბევრი ტექსტურირებული ჯაგრისები, რომელიც მე დავწერე და როგორ გამოჩნდა ისინი ახალი ვერსია ფლეშ თამაში Flash. აღინიშნა, რომ Adobe Animate- ის ჯაგრისების გამოყენება საშინელი აფერხებს. Ის არის:(

10. არ არის დარწმუნებული, რომ ეს არის სწორი შეასრულა, მაგრამ მინდა დარჩენა tassel ერთად სასაცილო სახელი ულატული ბულეფუნჯი.. მდებარეობს პანელი, ძალიან სასიამოვნო გამოიყენოს ფუნჯი. მას აქვს რამოდენიმე პარამეტრები, მე უფრო მეტად, ვიდრე ჩვეულებრივი. სიტყვებით, ძნელია ახსნას მისი უპირატესობების შესახებ, უმჯობესია კიდევ ერთხელ სცადოთ.

10. ქსელისთვის.

ასევე სასარგებლო რამ - გაყოფილი ქსელის ფუნქცია (ობიექტი-გზა-გაყოფილი ქსელი). ადგილობრივები თანაბარი სეგმენტების ფორმას ქმნიან. რას გვასწავლა ეს? მარჯვენა - ფანჯრები მაღალი აწევა შენობაში. როგორც ჩემთვის, გრილი ნაჭერი ნახაზი, მაგალითად, ურბანული ლანდშაფტები;)

განსაკუთრებით ერთი სასარგებლო ინსტრუმენტი წარმოდგენილია ილუსტრატორში, ალბათ, მისი პირველი გათავისუფლების შემდეგ. მასთან ერთად, შეგიძლიათ შექმნათ, მაგალითად, ხის ტექსტურა:

12. გადაადგილება (მარჯვენა - ტრანსფორმაცია - გადაადგილება)

ოფსეტური ობიექტი წინასწარ განსაზღვრულ მანძილზე. თუ გსურთ, დაუყოვნებლივ შეგიძლიათ შექმნათ ასლი, რომელიც შერჩეული ჰორიზონტალური ობიექტის / ან ვერტიკალური ობიექტის სასურველ დაშორებით იქნება განთავსებული. ფლეშ ფლეშში იყო მოდული, რომელიც შესრულდა ეს ფუნქცია. სამწუხაროდ, მისი სახელი არ მახსოვს.

ილუსტრატორში, ძალიან მოსახერხებელია შექმნილი ნიმუშების შექმნა ( ობიექტის ნიმუში-ჩადება). მახსოვს, თუ როგორ მე frantically დახვეწილი ფლეშ ერთად შექმნას შექმნის. SS 2015- ის ვერსიაში ყველაფერს ავტომატიზირებულია, ბევრი პარტია ხელს შეუწყობს ბრმა ნიმუშებს ათეულობით ვარიაციებში, რომელსაც მხოლოდ რამდენიმე გრაფიკული ელემენტი აქვს. პროგრამის ადრე ვერსიებში ყველას ხელი უნდა ჰქონოდა, როგორც ჯერჯერობით.

(შენიშვნა - ნიმუში შეიძლება გაკეთდეს ვექტორული რედაქტირებადი ობიექტი გამოყენებით ფუნქცია disassemble ( ობიექტი - გაფართოების გამოჩენა).

14. ობიექტი მოზაიკა (მოზაიკა)

შექმნა ფერადი პალიტრა საფუძველზე არსებული სურათზე. იმპორტირება თქვენი საყვარელი სურათი ავად (ღია), მაშინ ობიექტი - ობიექტის მოზაიკის შექმნა. პარამეტრებში, მიუთითეთ დაშლის სიხშირე სიმაღლეზე და სიგანეზე.

და ჩვენ მივიღებთ გასასვლელში:

15.blend (შერევით)

გამოიყენება გრადიენტების შესაქმნელად. თქვენ შეგიძლიათ შექმნათ ნაბიჯ ნაბიჯ გადასვლები, როგორიცაა სურათზე. მე არ ვიტყვი, რომ ხშირად ვიყენებ, მაგრამ ვინმესთვის მოსახერხებელია. მეჩვენება, რომ თქვენ შეგიძლიათ გამოიყენოთ მარტივი ფონის სურათების შექმნა.

ასევე, ინსტრუმენტი შეიძლება გამოყენებულ იქნას კლონის ობიექტებზე. ჩვენ ერთმანეთისგან დაშორებულ ორ ობიექტს დავუმატებთ და ნაზავი ვარიანტების ვრცელდება, აირჩიეთ ნაბიჯების რაოდენობა (კლონირებული ობიექტების რაოდენობა).

16. აშენების ფორმის ინსტრუმენტი ინსტრუმენტი. ძალიან კომფორტული რამ მუშაობა primitives. ფლეშში, როგორც ეს ჩემთვის, ნაკლებად მოსახერხებელია.

დაწკაპვით Alt და დაწკაპეთ თავდადებული სეგმენტები - წაშლა სეგმენტები. თუ თქვენ უბრალოდ მონაკვეთის მაუსის მეტი რამდენიმე მიძღვნილი ტერიტორიები - დაკავშირება.

დანამატი - ინსტრუმენტი, რომელიც ხელს უწყობს ავტომატურად შეწყვიტა, დაკავშირება და ა.შ. შერჩეული ფორმები. რაც შეეხება ჩემთვის, ეს არ არის ძალიან მოსახერხებელი, მე უფრო ხშირად ვიყენებ შენებაფორმაინსტრუმენტი.

(სამონტაჟო ადგილები)

18.custom ინსტრუმენტი პანელი.

უნარი შექმნას საკუთარი პანელი თავად, სროლა არასაჭირო, და აირჩიოს მხოლოდ ის, ვინც თქვენ იყენებთ.

ფლეში, სამონტაჟო ადგილებში, კერძოდ სცენები ( სცენა 1,2,3 ..) მდებარეობს ცალკე და მათ შორის თქვენ უნდა გადავიდეს (Shift + F2). ილუსტრატორში, ისინი შეიძლება თვალების წინ განთავსდეს. მოხერხებულად, როდესაც თქვენ გააკეთებთ რამდენიმე ვარიანტს იმავე სურათზე ისე, რომ ყველა ვარიანტი შედის ჩვენი თვალების შედარებით.

19. იზომეტრიული გრაფიკული სტილები

და ეს უკანასკნელი არის Isometric- ის შექმნა 1 დაჭერით (და უფრო ზუსტად, 3 დაწკაპუნებით, რადგან ჩვენ გვაქვს 3 მხარე;) გრაფიკული სტილით ( გრაფიკული სტილები.). როგორ ხდება ეს, მე დავწერ შემდეგ.

საერთო ჯამში, Illustrator- დან Flash- ით - ობიექტის სიმბოლოების შენახვა სიმბოლო (სიმბოლო) და ასევე ნებისმიერი პრობლემის გარეშე შეიძლება გადარიცხოს ფლეშში (გახსენით ფლეშში იმპორტი - იმპორტი ეტაპზე).
ხასიათი ილუსტრატორს აქვს იგივე თვისებები, როგორც ფლეშ.
საბოლოო ჯამში დავწერ, რომ ილუსტრატორში, ჩემი აზრით, არის უფრო დაბალი ფლეშ. დიახ, დიახ, და ეს არის. და ეს არის შევსების ინსტრუმენტი ( საღებავი bucket.). როგორც მე არ ვცდილობ, რომ მისი ille, flixt ეს უფრო მოსახერხებელია.
თუ ჩემი შენიშვნები სასარგებლოა თქვენთვის ან ის, რაც გინდა, რომ შევასრულოთ - Velkov კომენტარებში! წარმატებებს გისურვებთ ყველას;)

ცოტა ხნის წინ, SVG ანიმაცია (Scalable Vector Graphics) გრაფიკა საიტებზე და პროგრამები გახდა ძალიან პოპულარული. ეს არის იმის გამო, რომ ყველა ახალი ბრაუზერები უკვე მხარდაჭერა ამ ფორმატში. აქ არის ინფორმაცია SVG ბრაუზერების მხარდასაჭერად.

ეს სტატია განიხილავს მარტივი მაგალითი ანიმაცია SVG. ვექტორები მსუბუქი დახმარება JQuery მოდული Lazy ხაზი მხატვარი.

Საწყისი კოდი

ამ ამოცანის შესასრულებლად და სრულ გაგებაში, HTML, CSS, JQuery, მაგრამ არა აუცილებლად, თუ თქვენ უბრალოდ გსურთ SVG) მოდი წავიდეთ!

ასე რომ, ნაბიჯები, რომლებიც ჩვენ უნდა შევასრულოთ:

შექმენით მარჯვენა ფაილის სტრუქტურა
ჩამოტვირთეთ და დააკავშირეთ მოდული
მიაპყროს მაგარი კონტურის სურათს Adobe Illustrator- ში
კონვერტაციის ჩვენი სურათი ზარმაცი ხაზის კონვერტორი
ჩაწერეთ შედეგების კოდი Main.js- ში
დაამატეთ ზოგიერთი CSS გემოვნებით

1. შექმენით სწორი ფაილის სტრუქტურა
ამასთან, ეს ხელს შეუწყობს საწყობის მომსახურებას, სადაც საჭიროა პარამეტრების შერჩევა, როგორც ქვემოთ მოცემულ სურათზე.

კლასიკური H5BP (HTML5 ქვაბის Plate)
არა თარგი.
უბრალოდ HTML5 shiv.
10
ანუ კასები.
Chrome ჩარჩო.
შემდეგ დააჭირეთ ჩამოტვირთეთ!

2. ჩამოტვირთეთ და დააკავშირეთ მოდული

მას შემდეგ, რაც თავდაპირველად გააჩნია უკანასკნელი jQuery ბიბლიოთეკა, არქივიდან, რომ ჩვენ უნდა ჩამოტვირთოთ ზარმაცი ხაზის მხატვარი პროექტის საცავიდან, თქვენ უნდა გადავიტანოთ მხოლოდ 2 ფაილი ჩვენს პროექტში. პირველი არის "jquery.lazylinepainpainter-1.1.min.js '(დანამატი ვერსია შეიძლება განსხვავდებოდეს) ეს არის ფოლდერის ფესვში. მეორე მაგალითია / JS / Vendor / Raphael-Min.js.

ეს 2 ფაილი მოთავსებულია JS საქაღალდეში. და მათ დაკავშირება მათ ჩვენს index.html წინაშე main.js შემდეგნაირად:

3. ციცაბო კონტურის სურათის დახატვა Adobe Illustrator- ში

ჩვენ ვამზადებთ ჩვენს კონტურის სურათს Illustrator- ში (უმარტივესი გზა კალამი ინსტრუმენტთან ერთად)
აუცილებელია, რომ ჩვენი ნახაზის კონტურები არ არის ჩვენი ეფექტისთვის. დასაწყისი და დასასრული
არ უნდა იყოს შევსება
მაქსიმალური ფაილის ზომა - 1000 × 1000 PX, 40Kb
მოსავლის ობიექტი ობიექტი\u003e Artboards\u003e შეესაბამება artboards საზღვრებს
SVG ფორმატში შენახვა (სტანდარტული შენახვის პარამეტრები შესაფერისია)

მაგალითად, თქვენ შეგიძლიათ გამოიყენოთ ხატები დანართი.

4. კონვერტაციის ჩვენი სურათი ზარმაცი ხაზის კონვერტორი
უბრალოდ გადაიტანეთ თქვენი ხატი ფანჯარაში, რომელიც ქვემოთ მოცემულ ფიგურაში.
სქელი, სქემის ფერი და ანიმაციური სიჩქარე შეიძლება შეიცვალოს კოდში, რომელიც გამოჩნდება კონვერტაციის შემდეგ!

5. ჩაწერეთ შედეგების კოდი main.js
ახლა უბრალოდ ჩაწერეთ მიღებული კოდი ცარიელი main.js ფაილი
Პარამეტრები:
Strokewidth - კონტურის სისქე
Strokecolor - Contour ფერი
თქვენ ასევე შეგიძლიათ შეცვალოთ თითოეული ვექტორის ხატვის სიჩქარე ხანგრძლივობის პარამეტრების ღირებულებების შეცვლით (DEFAULT 600)

6. დაამატეთ ზოგიერთი CSS გემოვნებით
ამოღება index.html პუნქტი

Გამარჯობა მსოფლიო! ეს არის HTML5 boilerplate.

და ამის ნაცვლად, ის ჩასმა ბლოკი, რომელშიც ჩვენი ანიმაცია მოხდება

შემდეგ დაამატეთ ზოგიერთი CSS to Main.css ფაილი უფრო სასიამოვნო დიზაინი:

სხეული (ფონი: # F3B71C;) #icons (პოზიცია: ფიქსირებული; ზედა: 50%; მარცხენა: 50%; ზღვარი: -300px 0 0 -400px;)

ყველა ფაილის შენახვა.
ახლა უბრალოდ გახსენით index.html თანამედროვე ბრაუზერში და ისიამოვნეთ ეფექტი.

P.S. ადგილობრივი მანქანების დაწყებისას, ანიმაციის დაწყებისას შესაძლებელია რამდენიმე წამში.

ვებ გრაფიკული ოპტიმიზაცია

გრაფიკული ინფორმაცია გადაცემულია ბევრად უფრო ნელა, ვიდრე ტექსტი, და გამოსახულების დატვირთვის დრო პროპორციულია მათი გრაფიკული ფაილების ზომაზე. ამიტომ სწრაფი ჩამოტვირთვა ვებ-გვერდები მოიცავს მათში ჩამოსხმული გრაფიკული სურათების მცირე ზომას, რაც მათ ოპტიმიზაციას მიიღებს. გამოსახულების ოპტიმიზაციისას, მისი კონვერტაციის გზით არის გასაგები, რომელიც უზრუნველყოფს საჭირო მინიმალურ ზომას ეს საქმე გამოსახულების ხარისხი, რომელიც პირველ რიგში მიღწეულია გრაფიკული სურათების ფერების რაოდენობის შემცირებით, შეკუმშული და სპეციალური ფაილის ფორმატების გამოყენება და ინდივიდუალური გამოსახულების ფრაგმენტებისათვის შეკუმშვის პარამეტრების ოპტიმიზაცია.

Illustrator ააშენოს გამოსახულების ოპტიმიზაციის ინსტრუმენტები, რომელიც უზრუნველყოფს სხვადასხვა გადახედვის მეთოდებს ოპტიმიზაციის პროცესის სწრაფი და ეფექტური განხორციელებისათვის. ანონსი იგი იძლევა საკმაოდ ზუსტ ხედვას, თუ როგორ ოპტიმალური გამოსახულება გამოიყურება რეალურ დროში, რაც ხელს უწყობს ოპტიმიზაციის შედეგს და წარმატებით შეარჩიოს სასურველი პარამეტრები. და თქვენ შეგიძლიათ ოპტიმიზაცია ორივე სურათების შექმნა პირდაპირ ილუსტრატორის პროგრამაში და სხვა, როგორიცაა ფოტოები, რომლებიც უნდა განთავსდეს საიტზე.

ოპტიმიზაციის პარამეტრები ფანჯარაშია შენახვა ვებ. (ავტომობილის შენახვისას) მენიუს ბრძანებით გამოწვეული საქაღალდე (ფაილი). პროგრამა სთავაზობს გამოიყენოს ერთ-ერთი ოთხი გადახედვის რეჟიმი, მაგრამ შეაფასოს ოპტიმიზაციის ხარისხი საუკეთესო გზა ორი შესაფერისია:

2-ზე. (ორი ვარიანტი) - ორიგინალური და ოპტიმიზირებული გამოსახულების ერთდროული დათვალიერება მითითებულ პარამეტრების შესაბამისად (ნახ. 1);
4-ზე. (ოთხი ვარიანტი) - ამ რეჟიმში, Viewport დაყოფილია ოთხ Windows- ში (ნახ. 2) ორიგინალური გამოსახულების ჩვენება და ოპტიმიზირებული სამი ვერსიის ჩვენება: პირველი ვერსია შექმნილია დამონტაჟებული ოპტიმიზაციის ღირებულებების საფუძველზე და დანარჩენი ორი არის მიმდინარე ოპტიმიზაციის პარამეტრების პარამეტრები.

ორივე რეჟიმი საშუალებას გაძლევთ მნიშვნელოვნად შეინახოთ დრო უკეთეს ოპტიმიზაციის ვარიანტის მოძიებაში, როგორც თქვენ გადარჩენა საჭიროების შენახვა სურათებიდან სხვადასხვა პარამეტრები ოპტიმიზაცია და მათი შემდგომი ვიზუალური შედარება. გარდა ამისა, შესაძლებელია არა მხოლოდ ოპტიმიზირებული იმიჯის ხარისხი, არამედ მისი ზომა და ჩატვირთვის დრო სხვადასხვა კავშირით. შედარებისთვის, 4-მდე რეჟიმი ყველაზე მოსახერხებელია (ოთხი ვარიანტი), რომელიც საშუალებას მოგცემთ ვიზუალურად შეაფასონ შეკუმშვის ეფექტი ან შეამცირონ პალიტრა გამოსახულების ხარისხზე და მისი ზომა და საბოლოოდ განსაზღვრავს საუკეთესო ოპტიმიზაციის პარამეტრებს.

Illustrator საშუალებას გაძლევთ ოპტიმიზაცია ვებ გრაფიკა ფორმატებში არა მხოლოდ GIF, JPG, PNG-8 და PNG-24, არამედ SWF და SVG. ინდექსირებული სურათები მქონე მცირე რაოდენობა ფერები შენახულია GIF ფორმატში. შეინარჩუნოს სრული ფერი და Halftone გამოსახულება - ფოტო და ფერადი გაჯერებული გრაფიკები, როგორიცაა გრადიენტი შევსების, გამოიყენება jPG ფორმატში. სრული ფერის გამოსახულებები გამჭვირვალე საიტებით pNG ფორმატშირომელიც საშუალებას გაძლევთ შეინახოთ ორივე ინდექსირებული და სრულ ფერადი გამოსახულებები, ხოლო PNG-8 ფორმატში ოპტიმიზირებული სურათის ფერების მაქსიმალური რაოდენობა 256 და PNG-24 ფორმატში, სურათს შეიძლება ჰქონდეს მილიონობით ფერის ამიტომ ჰგავს jPEG ფორმატში. განსხვავება PNG-24- დან JPEG- ს შორის არის ის, რომ შეკუმშვის მეთოდი გამოიყენება PNG-24 ფორმატში სურათების ოპტიმიზაციისთვის, არ გამოიწვევს ხარისხის დაკარგვას, მაგრამ შედეგად, ფაილის ზომა იზრდება. SVG და SWF ფორმატების შერწყმა გრაფიკული მონაცემები, ტექსტი და ინტერაქტიული კომპონენტები და ასევე შეიძლება ოპტიმიზირებულია.

განვიხილოთ გამოსახულების ოპტიმიზაციის კონკრეტული მაგალითი. დავუშვათ, რომ Illustrator პროგრამა შეიმუშავა ნახვა ემბლემა (ნახ. 3), თავდაპირველად შენახული AI ფორმატში. ვებ-გვერდისთვის დაუყოვნებლივ ოპტიმიზაციის მცდელობა არ გამოიწვევს არაფერს, რადგან ამ შემთხვევაში იქნება გამოსახულების ავტომატური წინადაცვეთა, რომელშიც არ არის გათვალისწინებული ჭეშმარიტი პოზიცია წარწერების დეფორმაციის შედეგად მიღებული ( 4 და 5).

მოდით შევეცადოთ ემბლემის ექსპორტი pSD ფორმატში გუნდი ფაილი \u003d\u003e ექსპორტი (ფაილი \u003d\u003e ექსპორტი) - შექმნილი სურათის ზომა 143 კბ იქნება. გახსენით შედეგად PSD ფაილი და გამოიყენეთ ბრძანება ფაილი \u003d\u003e ვებ-გვერდის შენახვა (ფაილი \u003d\u003e ვებ-გვერდი). ამ შემთხვევაში გამოსახულებებში ჩართული ფერების შეზღუდული რაოდენობის გათვალისწინებით, GIF ფორმატი ოპტიმალურია, რომელთა კონკრეტული პარამეტრები და თქვენ უნდა გადაწყვიტოს. პარამეტრების ექსპერიმენტებით, შეგიძლიათ დარწმუნდეთ, რომ საუკეთესო ხარისხი აძლევს შერჩეულ შეკუმშვას ალგორითმს, რომელიც არჩეულია ნაგულისხმევი პროგრამით შერჩევითი (შერჩევითი). რაც შეეხება დაგვიანებას, გრადიენტური შევსების არსებობის გათვალისწინებით, უმჯობესია აირჩიოთ ალგორითმი ხმაურიანი თაობისგან - ხმაური. (ნახ .6). შედეგად ფაილის ოპტიმიზაციის ზომა იქნება 6,729 KB (ფიგურა 7), ხოლო ფონური გამჭვირვალობა იქნება შენახული, რაც ადვილია, რათა გადავარჩინოთ გამოსახულება GIF ფორმატში HTML ფაილთან ერთად (ნახ. 8). შედეგად, ამ მაგალითში, emblem.html და emblem.fif ფაილი მიიღო Primer1 საქაღალდეში.

ღილაკები

ნებისმიერი ვებ-გვერდის შეუცვლელი კონკრეტული დიზაინის ელემენტი გრაფიკული კონტროლი - ღილაკები. უბრალოდ შეუძლებელია წარმოსადგენია გვერდი მათ გარეშე. ხატვის ღილაკები დღეს გახდა სპეციალური ჟანრი, და ილუსტრატორი საშუალებას გაძლევთ შექმნათ ყველაზე რთული პარამეტრები. მაგალითად, ღილაკები, როგორც ქსელის ობიექტები და (ან) ნიღბების დაწესებით, უფრო ეფექტურად გამოიყურება.

განვიხილოთ Illustrator პროგრამის წრიული კონვექსის ღილაკის შექმნის ვარიანტი. წაიკითხეთ ვექტორული ობიექტის სახით წრის სახით თვითნებური ფერი (ნახ. 9) და გადაიყვანეთ მას ქსელის ბრძანება Object \u003d\u003e Gradient Mesh- ის შექმნა (ობიექტი \u003d\u003e შექმენით გრადიენტური ქსელი), მიუთითეთ ოთხი ხაზი და ოთხი სვეტი და სიაში გარეგნობა (ნახვა) არჩევის ვარიანტი ცენტრში. მონიშნეთ (Backlight) ტოლია 60 (სურათი 10). აირჩიეთ ინსტრუმენტი პირდაპირი შერჩევა და დააწკაპუნეთ ობიექტის ზედა მარცხენა კუთხეში, რომელიც არსებობს Nodal ქულების შერჩევით (ნახ .11). შეცვალეთ შესაბამისი უჯრედის ფერი თეთრი პალიტრაში არჩევის გზით Swatches. (ნახაზი 12).

მიიღეთ ინსტრუმენტი ელიფსე (ელიფსი), მითითებული მაუსის მარკერის ცენტრში შექმნილი ამ წრეში და ჩატარების ქვემოთ გასაღებები Alt. და გადაადგილება., გაჭიმეთ ახალი წრე ძველი ძველი, ისე, რომ აღმოჩნდება უფრო ძველი 1-2 პიქსელი ყველა მხრიდან. გააკეთე მისი შავი საზღვარი ( ინსულტი.) 1-2 პიქსელი სიგანე და დაასხით რადიალური გრადიენტი წითელიდან თეთრიდან (ნახ .13). გადაათრიეთ შექმნილი ვექტორული ობიექტი 1-2 პიქსელზე მარჯვნივ და ქვემოთ, მაშინ, შერჩევის მოხსნის გარეშე, დააჭირეთ ღილაკს მაუსის მარჯვენა ღილაკით და აირჩიეთ ბრძანება კონტექსტური მენიუდან. Arrange \u003d\u003e გააგზავნეთ უკან (Sort \u003d\u003e Send Back). შედეგად, აღმოჩნდება ცარიელი ღილაკზე ნაჩვენები ღილაკზე. თოთხმეტი.

როგორც წესი, არსებობს რამდენიმე მსგავსი ღილაკი ნებისმიერ ვებ გვერდზე, რომელიც განსხვავდება, მაგალითად, მხოლოდ მათზე შედგენილი ისრის მიმართულებით, რაც იმას ნიშნავს, რომ გადაადგილების მიმართულებით. განვიხილოთ ორი ღილაკის თანდასწრებით, რომელთაგან ერთი, ქვემოთ arrow, ნიშნავს მოძრაობას Შემდეგი გვერდი, და Up Arrow Button არის წინა. როგორც მოსავლის arrow, ჩვენ ვიღებთ ჩვეულებრივი სამკუთხედის მიერ შედგენილი ინსტრუმენტი პოლიგონი. (პოლიგონი), რომელიც მოხატული შავი და უფრო დიდი ეფექტი ასევე გაფორმებული როგორც Grid ობიექტი. გადატანა arrow ღილაკს და შეცვალოს პოზიცია ყველა ობიექტი ერთმანეთთან შედარებით ერთმანეთთან გამოყენებით შესაბამისი პალიტრა ღილაკები. გასწორება. (განლაგება). პირველი ღილაკები მიღებული ფიგურაში წარმოდგენილია. 15. ბრძანების შერჩევით ღილაკს დავუპირისპირებთ ღილაკს დუბლიკატი Layer. ფენები.- შედეგად, ჩვენ ორი იდენტური ფენა მივიღებთ. შემდეგ, ფენის ასლებს, აირჩიეთ ისარი და 180 ° -მდე კონტექსტური მენიუდან ბრძანების შერჩევით Transform \u003d\u003e როტაცია - ტრანსფორმაცია \u003d\u003e როტაცია. ჩვენ მივიღებთ იგივე ღილაკს, როგორც ნაჩვენებია ნახატზე. 16. გაითვალისწინეთ, რომ ეს ბევრად უფრო მოსახერხებელია, რომ შეინახოს ყველა იგივე პროექტის ღილაკი, რომელიც სხვადასხვა ფენებზე ერთ ფაილში შესანახად, რომელიც ამ შემთხვევაში აჩვენა.

ახლა თქვენ უნდა შეინახოთ ოპტიმიზირებული ვარიანტი თითოეული ღილაკით. თავდაპირველად, გააკეთეთ უხილავი ქვედა ფენა - ამ შემთხვევაში, ზედა ფენის ღილაკს გადაარჩინა. აირჩიეთ გუნდი ფაილი \u003d\u003e ვებ-გვერდის შენახვა (ფაილი \u003d\u003e ვებ-გვერდის შენახვა), ღილაკზე ოპტიმიზაციის პარამეტრების კონფიგურაცია, მაგალითად, როგორც ნახატზე. 17 დაწკაპეთ ღილაკზე Გადარჩენა. (შენახვა) და შეიყვანეთ სახელი ფაილი. საბოლოო ჯამში შენახული ღილაკი წარმოდგენილია ფიგურაში. 18. ახლა დაბრუნების ხილვადობა ქვედა ფენის მიერ და ზედა იქნება უხილავი და ანალოგიურად, გადავარჩინოთ მეორე ღილაკი, დააკონკრეტო სხვა სახელი. შედეგი წარმოდგენილია ფიგურაში. ცხრამეტი.

ახლა ის რჩება იმისთვის, რომ ღილაკები საკმაოდ მისაღებია ვებ-გვერდზე და განათავსეთ მათ თვითნებური გვერდი (ნახ. 20). შედეგად, ამ მაგალითში, Primer2.html ფაილი მიღებული ორი გრაფიკული გამოსახულებები სურათები საქაღალდეში. PRIMER2.).

თუ სასურველია, ოპტიმიზაციის პროცესში, ღილაკი ადვილად გადაიქცევა ნაჭერად. ამ შემთხვევაში, ბრძანების შერჩევის შემდეგ ფაილი \u003d\u003e ვებ-გვერდის შენახვა (ფაილი \u003d\u003e ვებ-გვერდის შენახვა) და ოპტიმიზაციის პარამეტრების შესაქმნელად უნდა შეირჩეს ინსტრუმენტის ინსტრუმენტი პალიტრა ნაჭერი აირჩიეთ.(Slice Dowocation) და ორმაგი დაწკაპუნებით გამოსახულება, რომელიც საბოლოოდ ავტომატურად გადაიქცევა slide ერთად თანმიმდევრობით ნომერი 1 (ნახ. 21). ორმაგი დაწკაპუნებით მაუსი ფანჯრის გახსნას გამოიწვევს ნაჭერი პარამეტრები. (Slace პარამეტრები), რომელშიც აუცილებელია ბმული და, თუ სასურველია, შეცვალოს slicer სახელი (ნახ .22), შემდეგ კი გადავარჩინოთ ოპტიმიზირებული გამოსახულება. შედეგი ამ შემთხვევაში იქნება Primer3.html ფაილი (ნახ .3) და Primer3.gif (Primer3 საქაღალდე).

ინტერაქტიული ელემენტები

გვერდის აღორძინების ერთ-ერთი გზა არის დიზაინის ელემენტების დანერგვა, რომლებიც შეცვლიან მათ გარეგნობა (ან მდგომარეობა), რაც დამოკიდებულია მაუსის ქცევაზე ან, ნაკლებად სავარაუდოა, ნებისმიერი სხვა სიტუაციების შემთხვევაში: სკალირების, სენსორული, დატვირთვა, შეცდომის შემთხვევა და ა.შ.

ამ ელემენტებს შორის, Rollovers- მა მიიღო უდიდესი პოპულარობა (ინგლისურიდან. გააფართოვოს მეტი - გააფართოვოს) - ელემენტები შეცვლის გამოჩენა ქვეშ ზემოქმედების ქვეშ მაუსი. ტიპიური როლების მაგალითებია ანიმაციური ღილაკები. Rollovers ხშირად გამოიყენება და შექმნის სხვა სანავიგაციო ელემენტები საიტი. სინამდვილეში, ნებისმიერი rollover არ არის ერთი, მაგრამ რამდენიმე (მდე ოთხი) სურათები, რომელთაგან თითოეული შეესაბამება კონკრეტულ ღონისძიებას. მთავარი მოვლენები, როგორც წესი, შემდეგნაირად: ნორმალური - ნორმალური სახელმწიფო, მეტი - მაუსის კურსორის დახვეწა ელემენტს და ქვემოთ - დაჭერით მაუსის მარცხენა ღილაკს, როდესაც თქვენ hover კურსორი. თეორიულად, მოვლენები შეიძლება იყოს ჩართული როგორც დაჭერით - გაათავისუფლეთ მაუსის მარცხენა ღილაკს დაჭერით, Up - მას შემდეგ, რაც ღილაკი გაათავისუფლებს, გარეთ - აქტიური ზონის გასასვლელად. თუმცა, პრაქტიკაში, ეს უფრო ხშირად შემოიფარგლება მხოლოდ პირველ სამი ან ორ მოვლენებზე.

კლასიკური როლური

კლასიკურ გაგებაში, Rollover არის რიგი გრაფიკული გამოსახულებები GIF ფორმატში და შესაბამისი HTML კოდი, რომელთა გათვალისწინებით, რაც დამოკიდებულია მაუსის ქცევის, ერთი სურათი შეცვლის სხვა ბრაუზერის ფანჯარაში.

Illustrator პროგრამა არ არის განკუთვნილი პირდაპირ შექმნას როლოვებს მათი კლასიკური გაგება, მაგრამ მას შეუძლია დაეხმაროს, როდესაც განვითარებადი საწყისი ელემენტების მათთვის. იდეა ამ შემთხვევაში არის ის, რომ თქვენ უნდა შექმნათ ფენა პირველი თარიღისთვის. შემდეგ გააკეთე ფენის ასლი და დააკონვერტიროთ გამოსახულება ისე, რომ იგი შეესაბამება მეორე ღონისძიებას და ა.შ. შედეგად Multilayer გამოსახულება ექსპორტირებულია PSD ფაილი ფენების შენარჩუნებით, რომლის საფუძველზეც rolover შექმნილია გამოსახულების მზად პროგრამაში. პლუს Illustrator პროგრამის გამოყენება, როგორც სხვა ბევრ შემთხვევაში, არის სხვა საინტერესო შესაძლებლობები მიუწვდომელი სხვა პროგრამული უზრუნველყოფა, ტრანსფორმაციის ვექტორული გრაფიკის მოხერხებულობასთან ერთად.

შევეცადოთ, რომ შევქმნათ rollover სახით წარწერების შეცვლის ფერი დამოკიდებულია ქცევის მაუსი. ღია ილუსტრატორი და შექმენით ფორმის სახით მომრგვალებული და შავი ოთხკუთხედი (ნახ. 24), გააკეთეთ ეს ასლი და განათავსეთ იგი ეკრანის თავისუფალ ნაწილში. კონვერტაციის პირველი ასლი მართკუთხედის ქსელის ობიექტი განათების ცენტრში (გუნდი Object \u003d\u003e Gradient Mesh- ის შექმნა - ობიექტი \u003d\u003e შექმნა გრადიენტური ქსელი), განსაზღვრავს ოთხი ხაზი და ათი სვეტი (ნახ .25). გააქტიურეთ მართკუთხედის მეორე ასლი და შეცვალოს გრადიენტური შევსება მასზე, როგორც ჩანს, როგორც ნახატზე. 26. ქსელის თავზე გრადიენტური ობიექტის შემოწმება, გრადიენტური ობიექტის სისუსტის შემცირება დაახლოებით 80% -ს შეამცირებს და ზომა დაახლოებით 1 პიქსელია, რომ ბოლომდე სიმეტრიის ეფექტი. და შემდეგ ბეჭდვის წარწერა თავზე ობიექტები. თავდაპირველ ფორმაში, მას აქვს თეთრი ფერი, რომელიც შეესაბამება ნორმალურ მდგომარეობას (ფიგურა 27), ხოლო შემდეგ, როდესაც შეცვლის სტაბილურობის სტაბილიზაციის, წარწერების ფერი შეიცვლება, მაგალითად, მწვანე - როდესაც თქვენ Hover მაუსის მარკერის მასზე (მეტი სახელმწიფო) და ლურჯი - როდესაც თქვენ დააჭირეთ მაუსის ღილაკს (სახელმწიფო ქვემოთ).

ყურადღება მიაქციეთ პალიტრას ფენები. - ამ ეტაპზე მხოლოდ ერთი ფენაა. ამ ფენის ორი ეგზემპლარი ბრძანების გამოყენებით. დუბლიკატი Layer. (დუბლიკატი Layer) პალიტრა მენიუდან ფენები.- სამი ფენა გახდება პალიტრაში (ნახ. 28). შემდეგ პირველი ასლი ფენის, შეცვალოს ფერი წარწერა მწვანე, და მეორე - on ლურჯი (ნახ. 29). შედეგად, მიიღება აუცილებელი სამუშაოები rollover- ისთვის.

შექმენით შექმნილი გამოსახულება PSD ფორმატში ფენების შენარჩუნებით ბრძანების გამოყენებით ფაილი \u003d\u003e ექსპორტი (ფაილი \u003d\u003e ექსპორტი) და RGB ფერადი მოდელის შერჩევა (ნახაზი 30). გახსენით შექმნილი PSD ფაილი გამოსახულებათა პროგრამაში (სურათი 31 და 32). ბრძანების შერჩევით ფენების დაფუძნებული ჩარჩოების შექმნა ფარგლებში ფენების ჩარჩოები (ფენების ჩარჩოების შექმნა) პალიტრა მენიუდან ანიმაცია.. ანიმაციური ფანჯარა გამოიყურება, როგორც ფიგურა. 33. ამავე დროს პალიტრა Rollovers. თავდაპირველად, შეიქმნება ნორმალური ერთი ერთადერთი მდგომარეობა.

შემდეგ ფანჯარაში ანიმაცია.აირჩიეთ ჩარჩო გამოწვეული მდგომარეობის შესაბამისი, ხოლო პალიტრა ფენები. ავტომატურად გამოირჩევა ფენა Layer 1 ასლი (ნახ. 34). წასვლა პალიტრა Rollovers.და დააჭირეთ ღილაკს შექმნა rollover სახელმწიფო (შექმნა rollover-condition) - ნახაზი. 35, რომელიც გამოიწვევს სახელმწიფოს გამოჩენას სახელმწიფოპალიტრაში Rollovers.(ნახ. 36). ანალოგიურად, შექმნას სახელმწიფო ქვემოთ სახელმწიფო. გააქტიურეთ მდგომარეობა ნორმალური პალიტრაში Rollovers. და ამოიღეთ პალიტრა ანიმაცია. ყველა ჩარჩო, გარდა ამისა, რომელიც უნდა შეესაბამებოდეს სახელმწიფოს ნორმალური. შედეგად, პალიტრაში როლოვის თითოეული სახელმწიფოსთვის ანიმაცია.მხოლოდ ერთი ჩარჩო იქნება (ნახ. 37, 38 და 39).

ნახაზი. 38. გამოსახულების ნახვა, ანიმაციური ფანჯრები და ფენებსა და სახელმწიფო სტატუსის გამო პალიტრა

შეამოწმეთ შედეგი ღილაკზე დაჭერით Preview ჩვეულებრივ ბრაუზერში (Preview ბრაუზერში) პანელიზე და ბრაუზერის ფანჯარაში გადაიქცევა (ნახ .40). ამის შემდეგ, შეინახეთ ფაილი ბრძანების გამოყენებით. ფაილი \u003d\u003e Save Optimized (ფაილი \u003d\u003e ოპტიმიზაციის შენახვა) და ვარიანტის მითითება HTML და სურათები (* .html). შედეგად, ამ მაგალითში, Primer4.html ფაილი და სერია გრაფიკული გამოსახულებები გამოსახულებები საქაღალდეში.

ნახაზი. 40. ბრაუზერის ფანჯარა Rollover ელემენტთან ერთად

SVG Rolovier

პოპულარული SVG ფორმატი (Scalable ვექტორული გრაფიკა - Scalable ვექტორული გრაფიკა), რომელიც შეიქმნა XML სტანდარტის საფუძველზე, ასევე საშუალებას გაძლევთ მიიღოთ სხვადასხვა ინტერაქტიული ელემენტები, კერძოდ, როლანდ, მხოლოდ პრაქტიკაში, რომელიც მთლიანად განსხვავებულად ხორციელდება. აღსანიშნავია, რომ ინტერაქტიული SVG-Rollovers- ის შექმნა, კლასიკური კონტრასტისას, როდესაც შესაბამისი HTML კოდი მთლიანად ავტომატურად გენერირდება, მოითხოვს ცოდნას javaScript ენა და გაგება ძირითადი პრინციპების ობიექტზე ორიენტირებული პროგრამირების.

სპეციალური პალიტრა განკუთვნილია SVG ობიექტებთან მუშაობა. SVG interactivityრომელიც ადვილია გუნდის დახმარებით ფანჯარა \u003d\u003e SVG interactivity (Window \u003d\u003e SVG interactivity) - ნახაზი. 41.

განვიხილოთ ეს ვარიანტი introvover- ის შესაქმნელად ინტერაქტიული ღილაკის მაგალითზე, წარწერების ფერი შეიცვლება შავიდან ლურჯიდან, როდესაც თქვენ მაუსი და ისევ კონვერტირება შავიდან, როდესაც მაუსი აქტიური ზონისგან არის.

შექმენით მართკუთხა ღილაკი მომრგვალებული კიდეებით და შეარჩიეთ შესაფერისი გრადიენტი, მაგალითად, როგორც ნახატზე. 42. პალიტრაში ღილაკის გამჭვირვალობის მორგება გამჭვირვალე (გამჭვირვალობა) - ამ მაგალითში, პარამეტრის ღირებულება ხოცვა (Opacity) მითითებული 50%. გააკეთეთ ღილაკების ასლი, შეავსეთ ეს მუქი მწვანე (ნახ. 43) და შემდეგ გადაიყვანეთ მას ქსელის ობიექტის ბრძანება Object \u003d\u003e Gradient Mesh- ის შექმნა(ობიექტი \u003d\u003e შექმენით გრადიენტური ქსელი), განსაზღვრავს ოთხი ხაზი და ათი სვეტი, და სიაში გარეგნობა(ნახვა) არჩევის ვარიანტი ცენტრში. (ცენტრში) და განსაზღვრავს ღირებულებას მონიშნეთ (Backlight) 100-ის ტოლია. ფენის სისუსტის შემცირება ქსელის ობიექტით 40% -ით (ნახ .44). მოათავსეთ Grid ობიექტი მეტი გრადიენტი, და ღილაკს შეახსენებს ფიგურაში. 45.

ნახაზი. 44. ქსელის ობიექტის ღილაკზე მარჯვნივ

შეავსეთ შემოთავაზებული წარწერების ღილაკი და შეცვალოს თავისი პოზიცია შესაბამისი პალიტრა ღილაკების გამოყენებით. გასწორება. (განლაგება). შედეგად გამოსახულება შეიცავს ერთ ფენას ერთმანეთზე ზედმეტი სამი ობიექტით (ნახ. 46). დაგეგმილი ღონისძიებები დაკავშირებულია ტექსტურ ობიექტზე, ასე მოხერხებულობისთვის, შეცვალოს მისი სახელი ტექსტი.ობიექტის ორმაგი დაჭერით და ახალი სახელით შესვლისას. ანალოგიურად შეცვალოს ფენის სახელი Layer 1 ფენის შესახებ (ნახ .47).

ღონისძიების დამუშავება მოიცავს JavaScript- ის პროცედურებს, ასე რომ თქვენ უნდა დააკავშიროთ ფაილი ამ პროცედურების აღწერას. მას უწოდებენ მოვლენებს.ჯ.ჯოხეთს და გადაარჩინა დისკზე ნიმუშის ფაილებში \\ Sample Art \\ SVG \\ SVG საქაღალდე, როდესაც ინსტალაცია adobe პროგრამები ილუსტრატორი. მოვლენების დაკავშირება .js ფაილი, გამოიყენეთ ბრძანება JavaScript ფაილები. SVG interactivity (ნახ .48). შემდეგი თქვენ უნდა დააჭიროთ დამატება. (დამატება) და იპოვოთ სასურველი ფაილი მყარ დისკზე. როდესაც მისი სახელი გამოჩნდება სფეროში ULL (ნახ .49), დააჭირეთ ღილაკს შესრულებულია (Გარეთ გასვლა).

ნახაზი. 48. JavaScript ფაილების გუნდის შერჩევა

ამის შემდეგ, განსაზღვრავს რეაქციას მაუსის მოვლენების ობიექტი ტექსტი.. აირჩიეთ ტექსტის ობიექტი სფეროში შემთხვევა (მოვლენა) პალიტრები SVG interactivity აირჩიეთ ღონისძიება outmouse elemcolor (EVT, "ტექსტი", "# 3333FF") - ეს ნიშნავს, რომ როდესაც თქვენ იპოვით მაუსის ობიექტს ტექსტი.მისი ფერი შეიცვლება ლურჯი (ნახ .50). აქტიური ზონის შესვლის შემდეგ ტექსტის ტექსტის შესაქმნელად, ტექსტის ფერი შეიცვალა შავზე, აუცილებელია სხვა ღონისძიების შესაქმნელად. onmouseout.- აირჩიეთ იგი სფეროში შემთხვევა (მოვლენა) პალიტრები SVG interactivity. შემდეგ შეიყვანეთ ტექსტი ზედიზედ elemcolor (EVT, "ტექსტი", "# 000000")- ეს გამოიწვევს შავი ფერის დაბრუნებას (ნახ. 51).

ნახაზი. 51. SVG Interactivity პალიტრის საბოლოო ნახვა ობიექტის ტექსტისთვის

გადავარჩინოთ შექმნილი Rollover როგორც SVG ფაილის ბრძანება ფაილი \u003d\u003e შენახვა (ფაილი \u003d\u003e Ფაილის ტიპი ფორმატი Svg.და შემდეგ კონფიგურაცია SVG ფაილის გადარჩენის ვარიანტი, როგორც ნაჩვენებია ნახატზე. 52. გადარჩენის შემდეგ, მხოლოდ ერთი ფაილი გაფართოების SVG- ით მიიღებს და არა ორი, როგორც კლასიკური rollover- ის შემთხვევაში, ამ შემთხვევაში, Primer5.svg ფაილი მიღებული იქნა (Primer5 Folder). თუმცა, იმისათვის, რომ მართლაც მუშაობდნენ, აუცილებელია მოვლენების კოპირება .js ფაილი SVG ფაილში JavaScript- ის აღწერა. ამის შემდეგ, თქვენ შეგიძლიათ შეამოწმოთ შესრულების rollover - შედეგი გამოიყურება მოსწონს ნაჩვენები fig. 53.

SVG ანიმაცია

SVG ფორმატში შეიძლება გამოყენებულ იქნას ანიმაციის გადაცემა. შევეცადოთ, რომ შეიქმნას მარტივი ანიმაციური ელემენტი (ამ შემთხვევაში ეს იქნება ინფორმაცია კომპანიის შესახებ), რომელიც ეკრანზე გამოჩნდება, როდესაც თაგვის მაუსის შესაბამისი გრაფიკული ობიექტისთვის გაქრეს და ჩქარობს თაგვის ამოღებისას ინტერაქტიული ელემენტისგან.

შექმნას დაახლოებით ასეთი სერია გრაფიკული და ტექსტური ობიექტების, როგორც ნაჩვენებია ნახატზე. 54. ჩვენ გადავხედავთ ყველა შექმნილ ობიექტს, რომლებიც თანმიმდევრულად დაჭერით პალიტრაში მომდევნო ობიექტის სახელით. ფენები. სასურველი სახელის დანერგვა (ნახ. 55). გთხოვთ გაითვალისწინოთ, რომ ხაზგასმით აღინიშნა ფიგურა. 56 ობიექტი - Text1, Text2, Text3 და PATH1 - ყოველთვის იქნება ხილული და ყველა დანარჩენი - მხოლოდ მაშინ, როდესაც თქვენ hover მაუსი ტექსტი 1.

ნახაზი. 54. ორიგინალური გამოსახულების ტიპი

დაკავშირება მოვლენების შესახებ. JavaScript პროცედურების აღწერა ბრძანების გამოყენებით. JavaScript ფაილები. (JavaScript ფაილი) პალიტრა SVG interactivityდაჭერით ღილაკს დამატება.(დაამატეთ) სასურველი ფაილის მითითებით მყარ დისკზე და ღილაკზე დაჭერით შესრულებულია (Გარეთ გასვლა).

განსაზღვრავს რეაქციას მაუსის მოვლენების ობიექტი ტექსტი 1. აირჩიეთ ობიექტი ტექსტი., სფეროში შემთხვევა (მოვლენა) პალიტრები SVG interactivityაირჩიეთ ღონისძიება outmouse და ქვემოთ მოყვანილი ხაზი შევა ტექსტი elemshow (EVT, "Text4"); Elemshow (EVT, "Path2"). შედეგად, როდესაც მოძიებაში მაუსის ობიექტი ტექსტი 1 გახდება ხილული ობიექტები ტექსტი 4. და PATH2. გაითვალისწინეთ, რომ თუ როდესაც ღონისძიება ხდება, რამდენიმე ქმედება უნდა შესრულდეს, მაშინ ისინი უნდა აღინიშნოს ნიშანი ";". შემდეგ მსგავსი ოპერაცია, მიიჩნევს ღონისძიებას. onmouseout.ტექსტის შესვლის გზით, რაც ნიშნავს იმას, რომ იმალება ობიექტები (ნახ. 57).

შეინახეთ შედეგი, როგორც SVG ფაილის ბრძანება ფაილი \u003d\u003e შენახვა (ფაილი \u003d\u003e შენახვა AS) ფაილის სახელის მითითებით სფეროში Ფაილის ტიპი SVG ფორმატში და შემდეგ კონფიგურაცია SVG ფაილის გადარჩენის ვარიანტი მიხედვით ფიგურა. 58. გადარჩენის შემდეგ, Primer6.svg ფაილი მიიღება (Primer6 საქაღალდე). ნუ დაგავიწყდებათ, რომ კოპირება მოვლენების ფაილი საქაღალდეში ამ ფაილთან ერთად. თუ თქვენ აწარმოებთ pops ეს ფაილინახავთ შედეგს, რომელიც წარმოდგენილია ფიგურაში. 59. ეს არის თითქმის ის, რაც გჭირდებათ. ერთადერთი, რაც ჩვენს გეგმებში არ შედის, ობიექტების თავდაპირველი გამოჩენაა. ტექსტი.4 I. გზა.2 როდესაც დატვირთვა. ამ ხარვეზის მოშორების მიზნით, აირჩიეთ ორივე ობიექტის მონაცემები ერთდროულად და მათთვის განკუთვნილი ქმედება. elemhide (EVT, "Text4"); Elemhide (EVT, "Path2") ღონისძიებაზე გადატვირთვა. (ნახაზი 60). შეინახეთ ფაილი კვლავ და დარწმუნდით, რომ ახლა ობიექტები ტექსტი 4. და PATH2. ხილული მხოლოდ მაშინ, როდესაც ობიექტიზე თაგვისას ტექსტი 1.

Gif ანიმაცია

ნებისმიერი ვებ გვერდი არის წარმოუდგენელი გარეშე ვებ ანიმაცია, მათ შორის გარეშე ანიმაცია Gif'ov. მათი შექმნის ერთ-ერთი ვარიანტი არის Adobe Imageready აპლიკაციის გამოყენება, რომელიც საშუალებას გაძლევთ შექმნათ ანიმაცია ფენებს. ამავდროულად, Multilayer გამოსახულება შეიძლება მომზადდეს სხვადასხვა პროგრამებში, მათ შორის Adobe Illustrator.

ძალიან ადვილია შექმნას ანიმაცია, რომელიც ეფუძნება პალიტრას ელემენტებს სიმბოლოები. (სიმბოლოები) გახსნილია ბრძანება ფანჯარა \u003d\u003e სიმბოლოები (ფანჯარა \u003d\u003e სიმბოლოები) ან ერთ-ერთი სიმბოლო ბიბლიოთეკიდან, რომელიც შეიძლება გახსნილი იყოს ბრძანების გამოყენებით ფანჯარა \u003d\u003e სიმბოლო ბიბლიოთეკები (ფანჯარა \u003d\u003e სიმბოლო ბიბლიოთეკები).

მაგალითად, ჩვენ შევეცდებით, გაზარდოთ ნებისმიერი სიმბოლო ობიექტის ზომა, ობიექტის ძირითადი ნაბიჯები ცალკეულ ფენებზე უნდა დადგინდეს. თავდაპირველად, უბრალოდ, ობიექტის სიმბოლოების ერთ-ერთი ობიექტი, შემდეგ კი თითოეული ობიექტის ზომის გაზრდა, მაგალითად, როგორც ნახატზე. 61. შედეგად, პალიტრაში ფენები. შეიქმნება ერთი ფენა მრავალფეროვანი ობიექტებით (ნახ .62). თუ თქვენ პირდაპირ ექსპორტის ამ სურათს PSD ფორმატში, ის არ მისცემს არაფერს, რადგან ფენა ერთი და ბუნებრივია, როდესაც PSD ფაილის გახსნისას წარმოდგენილია მხოლოდ ერთი ფენა. აქედან გამომდინარე, წინასწარ აუცილებელია სხვადასხვა ფენების ობიექტების განთავსება. ეს შეიძლება გაკეთდეს სხვადასხვა გზები - უმარტივესი გზა პირველია ფენის ხაზს Layer 1. ფენებში პალიტრა და გუნდის გამოყენება გათავისუფლების ფენა. (გათავისუფლების ფენებს). შედეგი იქნება თითოეული ობიექტის მოძრაობა თქვენს ფენაზე, მაგრამ ისინი ყველაფერს მიიღებენ ფენაში Layer 1.. აქედან გამომდინარე, თქვენ უნდა ხელით გადაიტანოთ ყველა ინვესტიცია ფენის ზედა ნაწილში ფენების პალიტრა, რათა მათ ზემოთ ფენა Layer 1.და შემდეგ გახდა ცარიელი ფენა Layer 1. უბრალოდ ამოიღეთ (ნახაზი 63). ექსპორტის გამოსახულება PSD ფორმატში ბრძანების გამოყენებით ფაილი \u003d\u003e ექსპორტი (ფაილი \u003d\u003e ექსპორტი) ერთად დანადგარები, როგორც ფიგურა. 64.

ატვირთეთ შექმნილი PSD ფაილი გამოსახულებათა პროგრამაში (ნახ. 65 და 66). გახსენით პალიტრა მენიუ ანიმაცია. ფარგლებში ფენების ჩარჩოები (ფენების ჩარჩოების შექმნა). შედეგად, შეიქმნება ხუთი ჩარჩო, რომელთაგან თითოეული შეესაბამება მათ ფენას და პალიტრა ფანჯარაში ანიმაცია. გამოიყურება, როგორც ფიგურა. 67.

ამის შემდეგ, შეიქმნა თითოეული ჩარჩოების ხანგრძლივობა - ამ შემთხვევაში, ყველა ფარგლებში 0.2 სთ-ის ხანგრძლივობა დამონტაჟებულია. და შემდეგ გადარჩენა ანიმაცია ოპტიმიზაციის გამოყენებით ბრძანება. ფაილი \u003d\u003e Save Optimized (ფაილი \u003d\u003e ოპტიმიზაციის საშუალებით). მიღებული შედეგი შეიძლება შეიცავდეს ლეღვას. 68.

კიდევ უფრო მოსახერხებელია ბიულეტენების მიღება, რომლებიც ადვილად გადაიქცევა ანიმაციაში, გამოიყენეთ ფუნქციები ცოცხალი blends. ილუსტრატორის პროგრამები. Illustrator- ისა და Imageready პროგრამების ასეთი კომბინირებული გამოყენება მნიშვნელოვნად აჩქარებს GIF ანიმაციის შექმნის პროცესს.

მაგალითად, მიაპყროს ორი თვითნებური მრავალფუნქციური ფერადი ობიექტები, და შემდეგ მათ ნაზავი-ბონდის შესაფერისი პარამეტრებით (ნახ. 69). შეუძლებელია ამ ფაილის გამოყენება ანიმაციის შესაქმნელად, რადგან გამოსახულება ერთ ფენაზეა (ნახ. 70). აქედან გამომდინარე, ეს იქნება წინასწარ საჭირო თითოეული ელემენტის ნაზავი ობიექტი, რომელიც განთავსდება ცალკე ფენაზე. ამის გაკეთება ფანჯარაში ფენები. მონიშნეთ სიმებიანი , გააქტიურეთ პალიტრა მენიუ შავი arrow- ზე დაჭერით ზედა მარჯვენა კუთხეში და აირჩიეთ ბრძანება გაათავისუფლეთ ფენების თანმიმდევრობა (ტრანსფორმირება ფენების თანმიმდევრულად) (ნახ. 71). დაიჭირე გადაადგილება., ხაზს უსვამს შექმნილი ფენების და განათავსებს მათ ფენის ზემოთ. Layer 1.და შემდეგ ამოიღეთ ფენა Layer 1., რომელიც კალათაში გადადის - შედეგად, ფენების პალიტრა იგივე გამოჩნდება, როგორც ფიგურაში. 72.

ნახაზი. 70. ფენების ფანჯრის თავდაპირველი მდგომარეობა

ექსპორტი შეიქმნა ფაილი PSD ბრძანების ფორმატში ფაილი \u003d\u003e ექსპორტი (ფაილი \u003d\u003e ექსპორტი). გახსენით შექმნილი PSD ფაილი გამოსახულებათა პროგრამაში (ნახ. 73). გაითვალისწინეთ, რომ ფენის ფანჯარაში პროგრამაში შექმნილი ყველა ფენა გამოჩნდება (ნახ. 74) და ფანჯარაში ანიმაცია. იქნება ერთი მხოლოდ ჩარჩო.

გააქტიურეთ პალიტრა მენიუ ანიმაცია.პალიტრას ზედა მარჯვენა კუთხეში შავი ისრის დაჭერით და აირჩიეთ ბრძანება ფარგლებში ფენების ჩარჩოები (ფენების ჩარჩოების შექმნა) - შედეგად, ამ მაგალითში შეიქმნება ხუთი ჩარჩოები და შეიქმნება პალიტრა ფანჯარა. ანიმაცია. იღებს ხედვას ლეღვის შესაბამისად. 75. ხაზს უსვამს ყველა ჩარჩო ღილაკს. გადაადგილება., და დააყენეთ შესაბამისი ხანგრძლივობა - ამ მაგალითში, თითოეული ჩარჩოზე, ამავე დროს 0.2 სთ. შემდეგ შეინახეთ ფაილი ბრძანების ოპტიმიზაციით. ფაილი \u003d\u003e Save Optimized(ფაილი \u003d\u003e ოპტიმიზაციის შენახვა) სიაში ინსტალაციით Ფაილის ტიპი არჩევა სურათები მხოლოდ (* .gif). ანიმაცია ბრინჯს ჰგავს. 76.

ეს არ გამოიყურება ბევრად უფრო საინტერესო გადაადგილება, მაგრამ გლუვი ცვლილება ზომის ნაზავი ობიექტების. მაგალითად, თქვენ შეგიძლიათ გამოიყენოთ ნაზავი გარდამავალი უკვე შექმნილი. ამ შემთხვევაში, ცალკე ფენების შექმნის შემდეგ თითოეული ნაზავი გარდამავალი ელემენტისთვის, მოათავსეთ ყველა ობიექტი ერთმანეთზე, ღილაკების გამოყენებით ჰორიზონტალური გასწორება ცენტრი(ცენტრის ჰორიზონტალურთან შედარებით) და ვერტიკალური გასწორება ცენტრი. (ცენტრში ვერტიკალური) პალიტრასთან შედარებით გასწორება. (ნახაზი 77).

ექსპორტის ფაილი PSD ფორმატში ( ფაილი \u003d\u003e ექსპორტი- ფაილი \u003d\u003e ექსპორტი) და გახსენით შექმნილი PSD ფაილი Imageready პროგრამაში (ნახ. 78). შექმენით ანიმაციის ფარგლებში ფენების საფუძველზე ( ფარგლებში ფენების ჩარჩოები - ფენების ჩარჩოების შექმნა) და მათთვის შესაფერისი ხანგრძლივობა (ნახ. 79). და შემდეგ, ანიმაციის უფრო მეტი სანახაობრივი, არსებული ჩარჩოების კოპირება, მაგრამ საპირისპირო ბრძანებაში ისე, რომ გამოსახულება პირველი იზრდება და შემდეგ შემცირდა და წრეში (ნახ. 80). შემდეგ გადავარჩინოთ ოპტიმიზაციის ფაილი ( ფაილი \u003d\u003e Save Optimized- ფაილი \u003d\u003e ოპტიმიზაციის შენახვა). შედეგად ანიმაცია წარმოდგენილია ფიგურაში. 81.

ნახაზი. 80. ანიმაციის ფანჯრის სტატუსი ფარგლებში დუბლირების შემდეგ

ნახაზი. 81. დასრულებული ანიმაცია

დღეს ჩვენ არ ვართ საკმაოდ ჩვეულებრივი გაკვეთილი Adobe. ილუსტრატორი. იმიტომ, რომ ამ დროს ჩვენ არ გავაკეთებთ სტატიკურ სურათს, მაგრამ ყველაზე რეალური ანიმაცია. წარმოიდგინეთ, აღმოჩნდება, რომ იყოს adobe- ის გამოყენებით. ილუსტრატორი ასევე შეგიძლიათ მიაპყროს მულტფილმები :)

და ამისათვის არაფერი გვჭირდება. ფენების კომპეტენტური ორგანიზაცია და SWF ფორმატში საბოლოო სამუშაოების ექსპორტი, სადაც თითოეული ფენა ხდება ანიმაციის ფარგლებში. დღევანდელ გაკვეთილში, რეტრო სტილში გრაფის ანიმაციას გავამახვილებთ. გამომავალი, ფლეშ ფილმი ეს არის ძალიან countdown.

პირველი, რაც უნდა გაკეთდეს, მომავალი ანიმაციისთვის ყველა საჭირო ნივთის დახაზვა. ამისათვის ცალკე დოკუმენტში გააკეთა ორი პოზიცია ფილმის ფილმი, წრე მითითება, რომელიც მოჭრილი ცალკე სექტორში, ტექსტურას და ვერტიკალურ ნულიდან, რათა დაამატოთ ანტიკურობის ეფექტი, ისევე როგორც ყველა ნომრები და წარწერები.

როდესაც ჩვენი მულტფილმის ყველა ნაწილი მზად არის, თქვენ შეგიძლიათ შექმნათ ანიმაციის შექმნა. მოხერხებულობისთვის, უმჯობესია გააკეთოთ ახალ დოკუმენტში. ამავდროულად, ფენებს ანიმაციის ფარგლებში როლს ითამაშებს. და პირველ რიგში, საჭიროა ფილმის ფარგლების კოპირება. განათავსეთ იგი შუა სამუშაო გარემოს.

ახლა შექმენით მეორე ფენა და დააკოპირეთ ფილმის სურათების ჩარჩო, რომელშიც ხვრელები მთელ კიდეებს ხორციელდება. იგი ასევე უნდა განთავსდეს ცენტრში.

ამ ორი ფენის, თქვენ უკვე შეგიძლიათ მიიღოთ ანიმაცია მოძრავი ფილმი. მაგრამ მოგვიანებით ბევრს დაგჭირდებათ მეტი ფენა. ამიტომ, ხაზს უსვამს პირველი ორი ფენა, წასვლა პანელის პარამეტრები და მიიღოს ასლი ფენის.

ანალოგიურად, ჩვენ გვჭირდება 12 ფენის დაგროვება ფილმის ფარგლებში, სთხოვს მისი მოძრაობა.

ახლა ჩვენ გვაქვს მთელი ფენა და ყველა მათგანი ჩანს. იმ გაგებით, რომ ზედა ფენებს დაბლოკილია ქვედა, რაც არ არის სრულიად მოსახერხებელი სამუშაოსთვის. აქედან გამომდინარე, თქვენ შეგიძლიათ გამორთოთ ზოგიერთი ფენა დაჭერით ხატულაზე თვალის მარცხენა მხარეს. გამორთვა ან ყველა ფენა ერთდროულად, შეინახეთ Alt გასაღები დაჭერით, როდესაც თქვენ დააჭირეთ Glazik ხატი. მათ შორის და ფენების გამორთვა, შეგიძლიათ იხილოთ ზუსტად ის, რაც ჩვენს მომავალში ანიმაციის გარკვეულ ფარგლებში მდებარეობს. და ახლა, დაამატოთ მსუბუქი jitter to ფილმი მოძრავი, თქვენ უნდა დააყენოს მიღებული ჩარჩოები ცოტა სხვადასხვა მიმართულებით. ამის გაკეთება, ჩართეთ მხოლოდ ფენა, რომელთანაც თქვენ აპირებთ მუშაობას ამ მომენტშიდა შემდეგ გადაიტანეთ ჩარჩო წყვილი პიქსელებზე ნებისმიერი მიმართულებით.

როდესაც თქვენ წავიდა ყველა ფენა და დასძინა პატარა ცვლა, შეგიძლიათ დაიწყოთ შექმნას ანიმაცია მოძრავი წრე. ამისათვის, დააკოპირეთ წრე, რომელიც შედგება სექტორებისგან, დოკუმენტისგან, მულტფილმის სათადარიგო ნაწილებისგან და მას პირველი ფენით გადაღება ფილმის ფარგლებში.

თუ წრეების შერჩევა ამოიღეთ, ის ერთი რიცხვით გამოიყურება. ეს არის ის, რაც ჩვენ გვჭირდება.

მაგრამ მას შემდეგ, რაც იგი შედგება ცალკე სექტორებისგან, შეგიძლიათ შეცვალოთ მათი ფერი, ძალიან სწრაფად და ადვილად შექმნათ ანიმაცია. ამისათვის, ეს წრე მეორე ფენაში დააკოპირეთ და პირველი სექტორის მსუბუქია. გახსოვთ, რომ ფილმი მამოძრავებელია მართვის დროს, ამიტომ არ არის აუცილებელი, რომ წრე ზუსტად ჩაიწეროს ჩარჩოში. მოათავსეთ თვალი.

ანალოგიურად, თქვენ უნდა გადაწეროთ წრე ყოველი მომდევნო ფენისთვის, ხოლო წინა პერიოდის ერთ სექტორს ხატავს. ყველა ერთად, ეს 12 ფენა ქმნის ფილმის გადაადგილების ანიმაციას შევსების წრეში.

შემდეგი, თქვენ უნდა დაამატოთ ტექსტურა ჩვენს ფენებს. ჩართეთ პირველი ფენა და ტექსტურის კოპირება წყაროსგან სათადარიგო ნაწილებისგან.

მაშინ, თავის მხრივ, ჩართეთ შემდეგ ფენებს და დააკოპირეთ იგივე ტექსტურა. ასე რომ, ის ყველა ჩარჩოში განსხვავდებოდა, უბრალოდ 90 გრადუსზე კუთხე. როგორც უკვე მიხვდა, ჩვენ უნდა დაამატოთ ტექსტურა ყველა 12 ჩარჩოში.

თუ თქვენ უკვე დაიღალა დაძლევა, მაშინ შემიძლია გადმოგცეთ - ეს რჩება ძალიან ცოტა. ყველაზე რთული უკვე უკან. ეს რჩება ვერტიკალური ნაკაწრების დამატება და თითქმის ყველაფერი. ამის გაკეთება, ისევ დააკოპირეთ ორიგინალური ნულიდან და განათავსეთ იგი თვითნებურად ადგილას რამდენიმე ფენაში. ჩემს შემთხვევაში, ნაკაწრები მხოლოდ ორ ფენაში გამოჩნდება.

ახლა, რომელიც მზად არის მთავარი ციკლი ფილმის ანიმაციით, ის რჩება ნომრების დასამატებლად. მას შემდეგ, რაც იგი მოდის 3-დან 1-მდე სხვა სიტყვით !!!, მაშინ ჩვენ კიდევ უფრო მეტი ფენა გვჭირდება. არა 12, მაგრამ რამდენიც 48. ამისათვის თქვენ უნდა გააკეთოთ სამი სხვა ასლი მზა ფენების ფილმის ანიმაციით.

და მაშინ ყველაფერი მარტივია. ჩვენ პირველ ფენას მივმართავთ და სამი რიცხვი დავამატეთ.

შემდეგ თქვენ უნდა გადაწეროთ ეს ფიგურა შემდეგ ფენებში, სანამ წრეების ანიმაცია დასრულდა. როდესაც ფენის მომდევნო ასლს მიაღწევთ, სადაც წრე მთლიანად მთლიანად ივსება, საჭიროა ორი ნომერი ორი. ანალოგიურად, ნომერ პირველი დააკოპირეთ სასურველ ფენებს. და როდესაც თქვენ მიიღებთ საბოლოო ფენებს, განკუთვნილია ჩაწერეთ წასვლა !!!, უბრალოდ წაშალეთ წრე სასურველ ფენაში წარწერა.

ამ ანიმაციასთან ერთად ყველაფერი. მთავარია აქ არ არის დაბნეული. თქვენ შეგიძლიათ მისცეს ფენების ზოგიერთი მოსახერხებელი სახელები, მაგრამ მე რატომღაც ზარმაცი :) და მაშინაც კი, როდესაც თქვენ დასრულდება მუშაობა, დარწმუნებული უნდა იყოს, რომ დავბრუნდეთ ყველა ფენებს დაჭერით მინის ხატი.

ფანჯარაში ექსპორტის პარამეტრებით, დარწმუნდით, რომ ექსპორტის ინსტალაცია: AI ფენების SWF ჩარჩოებში. ეს არის ეს ვარიანტი, რომელიც ილუსტრატორის ფენებს ანიმაციის ფარგლებში მიდის. შემდეგი, დააჭირეთ Advanced ღილაკს.

გაფართოებული პარამეტრები გაიხსნება. აქ თქვენ უნდა დააყენოთ ჩარჩო განაკვეთის ჩარჩო განაკვეთი. მე მაქვს 12 ჩარჩო წამში. შემოწმების ნიშნის looping პასუხისმგებელია ციკლური ანიმაცია. მადლობა მას, ვიდეო იქნება წრეში. და ფენის შეკვეთის ვარიანტი: ქვედა up უკრავს ილუსტრატორის ფენების ქვედა up პანელში. უბრალოდ, ჩვენ ავაშენეთ ჩვენი ანიმაცია.

გამომავალი ჩვენ მივიღებთ ფლეშ ფილმს ჩვენი ანიმაციით.

ახლა ხედავთ, რომ Adobe Illustrator- ში მარტივი ანიმაცია არ არის იმდენად რთული, როგორც ჩანს, ერთი შეხედვით.

მაგრამ ხანგრძლივი ლილვაკების ან ინტერაქტიული პროგრამების შესაქმნელად, ის ჯერ კიდევ უკეთესია Adobe Flash. სხვა ფლეშ რედაქტორები. მაგალითად, ეს კატა მე გავაკეთე ძველი Macromedia Flash, რომელიც გათხრილი off მუშაობა.

ბოლო დროს, HTML5 და CSS3 გამოიყენება უფრო და უფრო ხშირად, რათა შეიქმნას ანიმაცია. ეს კოდი მხარს უჭერს თანამედროვე ბრაუზერები და არ საჭიროებს Flash Player- ის გამოყენებას.

რომან aka dacascas. განსაკუთრებით დღიური

გამოწერა ჩვენი ბიულეტენი ისე, რომ არ გამოტოვოთ ახალი არაფერი:

დღეს ჩვენ არ გვაქვს ზუსტად ჩვეულებრივი Adobe Illustrator გაკვეთილი. იმიტომ, რომ ამ დროს ჩვენ არ გავაკეთებთ სტატიკურ სურათს, მაგრამ ყველაზე რეალური ანიმაცია. წარმოიდგინეთ, აღმოჩნდება, რომ თქვენ ასევე შეგიძლიათ მიაპყროს მულტფილმები Adobe Illustrator :)

ახლა ჩვენ გვაქვს მთელი ფენა და ყველა მათგანი ჩანს. იმ გაგებით, რომ ზედა ფენებს დაბლოკილია ქვედა, რაც არ არის სრულიად მოსახერხებელი სამუშაოსთვის. აქედან გამომდინარე, თქვენ შეგიძლიათ გამორთოთ ზოგიერთი ფენა დაჭერით ხატულაზე თვალის მარცხენა მხარეს. გამორთვა ან ყველა ფენა ერთდროულად, შეინახეთ Alt გასაღები დაჭერით, როდესაც თქვენ დააჭირეთ Glazik ხატი. მათ შორის და ფენების გამორთვა, შეგიძლიათ იხილოთ ზუსტად ის, რაც ჩვენს მომავალში ანიმაციის გარკვეულ ფარგლებში მდებარეობს. და ახლა, დაამატოთ მსუბუქი jitter to ფილმი მოძრავი, თქვენ უნდა დააყენოს მიღებული ჩარჩოები ცოტა სხვადასხვა მიმართულებით. ამის გაკეთება, ჩართეთ მხოლოდ ფენა, რომელთანაც თქვენ აპირებთ მუშაობას მომენტში, და შემდეგ გადაიტანეთ ჩარჩო წყვილი პიქსელების ნებისმიერ მხარეს.

გამომავალი ჩვენ მივიღებთ ფლეშ ფილმს ჩვენი ანიმაციით.

მაგრამ ხანგრძლივი ლილვაკების ან ინტერაქტიული აპლიკაციების შესაქმნელად, ჯერ კიდევ უკეთესია Adobe Flash ან სხვა ფლეშ რედაქტორების გამოყენება. მაგალითად, ეს კატა მე გავაკეთე ძველი Macromedia Flash, რომელიც გათხრილი off მუშაობა.

ბოლო დროს, HTML5 და CSS3 გამოიყენება უფრო და უფრო ხშირად, რათა შეიქმნას ანიმაცია. ეს კოდი მხარს უჭერს თანამედროვე ბრაუზერებს და არ საჭიროებს Flash Player- ის გამოყენებას.

რომან aka dacascas. განსაკუთრებით ბლოგზე შენიშვნა MicrosTrum Illustrator