Adobe edge animate cc-ში მუშაობის გაკვეთილები. დანილ ფიმუშკინი. გაკვეთილები Adobe Edge-ში ანიმაციის შექმნის შესახებ

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


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


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


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


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


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

UPD 2015 წლის 6 დეკემბერი:
Flash Runtime-ისა და Adobe AIR-ის პროდუქტის მენეჯერმა თქვა, რომ ისინი არ აქვს გეგმები Flash Runtime-ზე და AIR-ზე მუშაობის შეწყვეტა და კონტენტის შექმნის პროდუქტის სახელის გადარქმევაარავითარ შემთხვევაში არ არის დაკავშირებული Flash Player-ის ბედთანდა მასთან დაკავშირებული ეკოსისტემა.

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

ორიგინალური სტატია http://blogs.adobe.com/conversations/2015/11/flash-html5-and-open-web-standards.html იუწყება, რომ Adobe დაარქმევს Flash Professional-ს Animate CC-ს. გარდა ამისა, ისინი აცხადებენ, რომ მომხმარებლებს სურთ მეტი მხარდაჭერილი პლატფორმები და ა.შ.

და არ გამიკვირდა, რომ ბევრი ადამიანი ვერ ხედავს განსხვავებას Flash-სა და Flash Professional-ს შორის. საინფორმაციო საიტებზე დაიწყო სხვადასხვა აჟიოტაჟის გამოჩენა, სხვა წყაროების ციტირებით, რომლებიც აკავშირებენ ჯაჭვის შემდგომ. და არა ყოველთვის ორიგინალი.

დღეს სიტყვა Flash აღიქმება, როგორც ბრაუზერების დანამატი. ტექნიკურად ეს არის Flash Player. მაგრამ არსებობს კონტენტის შექმნის ინსტრუმენტი - Flash Professional. თუ მაიკროსოფტმა Word-ს დაარქვეს TextMachine-ად, იყვირებენ თუ არა, რომ "Microsoft-მა შეწყვიტა Word-ის განვითარება?" მიუხედავად იმისა, რომ შავ-თეთრად წერია, რომ კონტენტის შექმნა იქნება მხარდაჭერილი და მონაცემების რედაქტირება შესაძლებელია?

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

”მაგრამ ჰაბზე წერენ, რომ ფლეშ მკვდარია და ის არ მუშაობს ტაბლეტზე”

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

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

უფრო მეტიც... ისინი ნათლად აცხადებენ, რომ მუშაობენ Microsoft-თან და Google-თან პარტნიორობით Flash Player-ის თავსებადობისა და უსაფრთხოების გასაუმჯობესებლად. მათ არ დაგავიწყდათ დაემატებინათ, რომ ისინი მჭიდროდ თანამშრომლობენ Facebook-თან Flash Player-ში თამაშების საიმედოობისა და უსაფრთხოების გასაუმჯობესებლად. მაშ, სად არის სიტყვა, რომ ისინი ტოვებენ Flash-ს?

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

მეტისთვის, თქვენ უნდა მიმართოთ თამაშების Standalone ფორმატს. და არის Adobe AIR (თუ გავითვალისწინებთ Flash). Adobe AIR მხარდაჭერა არ არის მოძველებული. მაქვს ინფორმაცია 2016 წლის გეგმების შესახებ. მაგრამ ბრაუზერის ფლეში მოკვდება? რა თქმა უნდა. მაგრამ ხვალ ნამდვილად არა.

და ვისაც უყვარს კლიშეებით თქვას, რომ Flash აცლის ბატარეას, მაჩვენე, როგორ იტენება Canvas.

ასევე აღსანიშნავია, რომ Adobe Edge Animate პროექტი აქტიურად აღარ განვითარდება. მაგრამ იმიტომ მე ახლოს ვარ Flash Professional-ის განვითარებასთან - გარწმუნებთ, რომ Edge Animate საერთოდ არ განვითარდება (გარდა კრიტიკული შეცდომებისა). ეს გადაწყვეტილება Adobe Flash Professional-ის (future Animate CC) სასარგებლოდ იქნა მიღებული.

Adobe Edge Animate - გაკვეთილები ვებსაიტისთვის ანიმაციის შექმნის შესახებ

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

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

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

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

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

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

გაკვეთილები Adobe Edge-ში ანიმაციის შექმნის შესახებ

ეს გაკვეთილი განიხილავს, თუ როგორ უნდა შექმნათ ახალი პროექტი Adobe Edge Animate-ში და შეინახოთ იგი თქვენს კომპიუტერში. რა ფაილებს გამოიმუშავებს პროგრამა ახალი პროექტის შექმნისას?


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


უყურეთ ვიდეოს Adobe Edge Animate-ზე

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


უყურეთ ვიდეოს Adobe Edge Animate-ზე

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


უყურეთ ვიდეოს Adobe Edge Animate-ზე

ამ ვიდეოში ვისწავლით Edge Animate-ში შექმნილი ანიმაციების ნახვას ვებ ბრაუზერში. მცირე ინფორმაცია HTML5-ის შესახებ.


უყურეთ ვიდეოს Adobe Edge Animate-ზე

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

ტრიგერის მზა კოდი:

timerCount = 5; sym.$("counter_txt").html(timerCount); tCounter = setInterval (ტაიმერი, 1000); ფუნქცია ტაიმერი() ( timerCount -= 1; თუ (timerCount< 1) { sym.play("start"); clearInterval(tCounter); return; } sym.$("counter_txt").html(timerCount); }

timerCount = 5;

tCounter = setInterval (ტაიმერი, 1000);

ფუნქციის ტაიმერი ()

timerCount -= 1;

თუ (timerCount< 1 )

სიმ . თამაში ("დაწყება");

clearInterval(tCounter);

დაბრუნება ;

სიმ . $ ("counter_txt"). html (timerCount);


უყურეთ ვიდეოს Adobe Edge Animate-ზე

როგორ შევცვალოთ ღილაკის მდგომარეობა მაუსის დაჭერისას. საჭირო კოდი თაგვის ფურცლისთვის:

sym.getSymbol("goBtn").stop("ნორმალური");


უყურეთ ვიდეოს Adobe Edge Animate-ზე

თქვენ შეგიძლიათ მარტივად ჩადოთ YouTube ვიდეოები ჩვენს ანიმაციაში. როგორ გავაკეთოთ ეს გაკვეთილზე განვიხილავთ. საჭირო ჩაშენების კოდი:

var youtube = $("
უყურეთ ვიდეოს Adobe Edge Animate-ზე

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


უყურეთ ვიდეოს Adobe Edge Animate-ზე

როგორ მოვახდინოთ გამოსახულების როტაცია 180 გრადუსით ვერტიკალური ღერძის გარშემო მაუსის დაჭერისას.

თქვენ შეგიძლიათ ჩამოტვირთოთ საჭირო ფაილები და კოდები.


უყურეთ ვიდეოს Adobe Edge Animate-ზე

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


უყურეთ ვიდეოს Adobe Edge Animate-ზე

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


უყურეთ ვიდეოს Adobe Edge Animate-ზე

როგორ დავამატოთ ხმა ღილაკზე დაჭერისას.


უყურეთ ვიდეოს Adobe Edge Animate-ზე

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

წარმატებები და შემოქმედებითი წარმატებები ყველას!

იმისათვის, რომ მოამზადოთ HTML კრეატივები ADFOX-ში განთავსებისთვის, მნიშვნელოვანია დაიცვან კოდის ჩასმის მოთხოვნები, რომელიც ამუშავებს ბანერზე დაწკაპუნებას და ითვლის ბანერში მოვლენებს.
HTML კოდის შემუშავებისას შეგიძლიათ გამოიყენოთ რედაქტორები, რომლებზეც დაიწერა ეს ინსტრუქციები:
- Adobe Animate CC;
- Google ვებ დიზაინერი;
- Adobe Edge Animate CC.

მოთხოვნები HTML კოდისთვის (კოდის შემქმნელებისთვის)

მოამზადეთ თქვენი პროექტი შემდეგი მოთხოვნების დაკმაყოფილებით:

1. HTML კოდში სიმბოლოების მაქსიმალური დასაშვები რაოდენობაა 65000;
2. სასურველია JavaScript და CSS განთავსდეს ბანერის HTML კოდის შიგნით;
თუ მიღებული HTML კოდი აღემატება სიმბოლოების მაქსიმალურ დასაშვებ რაოდენობას, მაშინ აუცილებელია კოდის შემცირება JavaScript და CSS ცალკეულ ფაილებში გადატანით:
- შეინახეთ js და css კოდი ცალკეულ ფაილებში გაფართოებით .js ან .css;
3. პროექტი შეიძლება შეიცავდეს მხოლოდ ერთ ფაილს .html გაფართოებით;
4. პროექტში ფაილების მაქსიმალური დასაშვები რაოდენობაა 50;
5. პროექტში ფაილის დაშვებული ტიპები: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf, otf, ttf, abf, acfm, gdr, etx , eot, fnt, fon, mf, ttc, woff;
6. თითოეული ფაილის მაქსიმალური ზომა (ასევე ვრცელდება არქივში არსებულ ფაილებზე):
- 300 კბ;
- 1 მბ ვიდეო ფაილებისთვის.
7. ფაილის სახელები უნდა შეიცავდეს მხოლოდ ინგლისური ანბანის ციფრებს ან ასოებს და ხაზგასმული სიმბოლოს. დაუშვებელია ფაილის სახელში რუსული ასოების, ინტერვალის, ციტატების და სპეციალური სიმბოლოების გამოყენება;
8. თქვენ არ შეგიძლიათ გამოიყენოთ რუსული ასოები ცვლადების და ობიექტების სახელებში.
ერთადერთი გამონაკლისი არის ტექსტი ბანერზე.
9. დასრულებული პროექტის ფორმატი - zipარქივი.

Adobe Animate CC

1. რედაქტორის მომზადება.

AdobeAnimate CC-ში ახალი პროექტის შესაქმნელად აირჩიეთ "HTML5 Canvas" პროექტი.

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

პროექტზე შაბლონის გამოსაყენებლად, გამოქვეყნების პარამეტრებში აირჩიეთ "გამოქვეყნების გაფართოებული პარამეტრები -> ახლის იმპორტი...".

შაბლონი შეიცავს სკრიპტს adfox_HTML5.js

3. დააჭირეთ დამუშავებას

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

3.1 იმისათვის, რომ ბანერის მთელ არეალს დააწკაპუნოთ და გქონდეთ ერთი ბმული გადასასვლელად, დაამატეთ შემდეგი კოდი ანიმაციის პირველ კადრში:

Canvas.style.cursor = "მაჩვენებელი"; canvas.addEventListener("click", function() ( window.callClick(); ));

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

This.btnMain.addEventListener("click", ფუნქცია (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(); ); )) ;

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

This.btnLeft.addEventListener("click", ფუნქცია (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(n); ); ) );

სად

3.3

This.btnText.addEventListener("mouseover", function() ( window.callEvent(n); ));

სად მაუსის გადატანა- javascript ღონისძიება, - მოვლენის ნომერი 1-დან 30-მდე, რომელიც უნდა გააქტიურდეს.

მარყუჟის ანიმაციის შექმნის მახასიათებლები

მარყუჟის ანიმაციის განსახორციელებლად კრეატიულში Animate CC რედაქტორში:
- დააყენეთ "Loop Timeline" ვარიანტი პუბლიკაციის პარამეტრებში;
- გამოიყენეთ ამ განყოფილების ღილაკების კოდები და 3.1 და 3.2 პუნქტებიდან ჩვეულებრივი ღილაკების კოდები უნდა წაიშალოს.

შემოქმედების კოდი ერთი ღილაკით და ციკლური ანიმაციით:

If (typeof(this.stopCycle) == " განუსაზღვრელია") ( this.btnMain.addEventListener("click", ფუნქცია (e) ( var t = e.nativeEvent; if (t.which == 1 || t.ღილაკი == 0) ( window.callClick(); ));

თუ რამდენიმე ღილაკია, მაშინ ADFOX მოვლენების გამოძახების კოდში დაამატეთ შემდეგი კოდი:

If (typeof(this.stopCycle) == " განუსაზღვრელია") ( this.btnMain.addEventListener("click", ფუნქცია (e) ( var t = e.nativeEvent; if (t.which == 1 || t.ღილაკი == 0) ( window.callClick(); )); = 0) ( window.callClick(n); ));

სად - მოვლენის ნომერი 1-დან 30-მდე, რომელიც უნდა გააქტიურდეს.

გამჭვირვალე ღილაკების გამოყენებით

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

Animate-ში ღილაკები არის სიმბოლოები, რომლებიც შეიცავს ოთხ ჩარჩოს. შეგიძლიათ პირველი სამი ცარიელი დატოვოთ და მხოლოდ ბოლო „დარტყმა“ შეავსოთ მასში შინაარსის (გრაფიკული ელემენტის) დამატებით, Insert > Timeline > Keyframe მეშვეობით.

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

გაჭიმვის (რეზინის) ბანერის განხორციელების თავისებურება

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

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

ბანერის შექმნის თავისებურებები ავტომატური ციმციმით

თუ გსურთ აჩვენოთ ბანერი გაფართოებული მდგომარეობიდან, მაშინ ინტერფეისში ბანერის დამატებისას უნდა მიუთითოთ მნიშვნელობა "დიახ" პარამეტრში "Auto-expand ყოველთვის" ან "Expand on ინიციალიზაცია" პარამეტრში და დაამატეთ კოდი HTML კრეატიული:

Window.global_exp_banner = this.exp_banner; window.global_main_banner = this.main_banner; window.global_exp_banner.visible = false; if (window.isBannerExpanded) ( window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.global._visible.banner; ხილული = false; ); window.global_exp_banner.btnCollapse.addEventListener("click", collapseBanner.bind(this)); window.onBannerExpand = ფუნქცია() ( window.callEvent(2); window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnEx ;) window.onBannerCollapse = ფუნქცია() ( window.callEvent(3); window.global_exp_banner.visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_mainnEpandner. = მართალია)

5. პროექტის გამოქვეყნება.

მნიშვნელოვანი! ბრაუზერში პროექტის გადახედვისას მეშვეობით (Ctrl-Enter | Cmd-Enter)ფორმის შემთხვევითი მნიშვნელობები ემატება HTML ფაილების სახელების ბმულებს ?1468231208369 . ასეთი მნიშვნელობები უნდა გამოირიცხოს პროექტიდან ADFOX-ში ჩატვირთვისას.
ამისათვის რედაქტორში საბოლოო პროექტი უნდა გამოქვეყნდეს მეშვეობით ფაილი > გამოქვეყნების პარამეტრები > გამოქვეყნება (Shift-Ctrl-F12 | Shift-Cmd-F12).

პროექტის გამოქვეყნებისას აირჩიეთ შაბლონი AdobeAnimate_Adfox_.html.

.zip

Google ვებ დიზაინერი

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

შაბლონი შეიცავს სკრიპტს adfox_HTML5.jsდა პარამეტრების ნაკრები გადასვლებისა და მოვლენების დათვლის სწორი მუშაობისთვის:
%reference%, %user1%, %eventN%, სადაც N არის მოვლენის ნომერი 1-დან 30-მდე.

2. დააჭირეთ დამუშავებას.

ყველა მოვლენა ენიჭება კონკრეტულ ანიმაციურ ელემენტებს მოვლენების ჩანართის საშუალებით.


Interactive Area კომპონენტი გამოიყენება მოქმედებების გამოსაძახებლად.
დაამატეთ იგი და აირჩიეთ ღონისძიება "ინტერაქტიული ზონა" - "შეხება/დაწკაპუნება"(ან „შეეხეთ ზონას > შეეხეთ/დააწკაპუნეთ“ ინგლისურ ვერსიაში).


"საბაჟო კოდი" ჩანართში მიუთითეთ ზარი დაწკაპუნების ფუნქციაზე.

2.1

CallClick();

2.2

CallClick(n);

სად

2.3 თუ თქვენ გჭირდებათ მოვლენის ჩართვა ანიმაციიდან გადასვლის გარეშე, გამოიყენეთ შემდეგი კოდი:

CallEvent(n);

სად - ღონისძიების ნომერი, რომელიც უნდა დარეკოთ.



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

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

4. პროექტის გამოქვეყნება.

ADFOX-ში ბანერის დამატებისას, მენეჯერმა უნდა იცოდეს ღილაკების და მოვლენის ნომრების შესაბამისობა. თითოეული მოვლენისთვის მენეჯერი დაწერს საკუთარ ბმულს ნავიგაციისთვის, რომელიც შემდეგ გადაეცემა ბანერის კოდში ცვლადის გამოყენებით.

პროექტის გამოქვეყნების შემდეგ დაარქივეთ იგი ფორმატში .zip. თქვენი კრეატივი მზად არის ADFOX ბანერზე ასატვირთად.

Adobe Edge Animate CC

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

2. დააჭირეთ დამუშავებას.

ყველა მოვლენა ენიჭება კონკრეტულ ანიმაციურ ელემენტებს "კოდის" ჩანართის საშუალებით.

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

ღილაკებს უნდა მიენიჭოთ ინსტანციის სახელი, მაგალითად: btnMain, btnRight.

2.1 თუ იყენებთ ერთი გადახტომის ღილაკს:

CallClick();

2.2 თუ არსებობს რამდენიმე გადასვლის ღილაკი:

CallClick(n);

სად - ღონისძიების ნომერი, რომელიც უნდა დარეკოთ.

2.3 თუ თქვენ გჭირდებათ მოვლენის ჩართვა ანიმაციიდან გადასვლის გარეშე, გამოიყენეთ შემდეგი კოდი:

CallEvent(n);

სად - ღონისძიების ნომერი, რომელიც უნდა დარეკოთ.

გაჭიმვის (რეზინის) ბანერის განხორციელების თავისებურება.

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

ასევე არის Scale Size და Scale Position ღილაკები პოზიციისა და ზომის პანელში ელემენტებისთვის


4. პროექტის გამოქვეყნება.

პროექტი უნდა გამოქვეყნდეს შემდეგი პარამეტრებით:

პროექტის გამოქვეყნების შემდეგ დაარქივეთ იგი ფორმატში .zip. თქვენი კრეატივი მზად არის ADFOX ბანერზე ასატვირთად.