როდესაც თქვენ ყიდულობთ ჩვენს საიტზე ბმულების საშუალებით, ჩვენ შეიძლება მივიღოთ შვილობილი საკომისიო. აი, როგორ მუშაობს.
კინემაგრაფები ძალიან სახალისოა - გასაკვირი ნაზავია სტატიკური ფოტოსა და ვიდეოს შორის. ისინი ახდენენ ვებსაიტის ვიზიტორების სიცხადეს, რადგან თავდაპირველად ისინი ჩვეულებრივ ფოტოსურათებად ჩანან, მაგრამ შემდეგ ისინი აოცებენ მაყურებელს დახვეწილი მოძრაობით და ერთი წუთით თქვენი სტუმარი სრულად არის ჩართული თქვენი გვერდი.
ინტერნეტში არის მრავალი შესანიშნავი გაკვეთილი "ტრადიციული" კინემატოგრაფიის შესაქმნელად (და ერთ-ერთი საუკეთესოა სწორედ აქ .net-ზე) მაგრამ არსებობს რამდენიმე ფუნდამენტური შეზღუდვა რეგულარული კინემაგრაფიის მიდგომისთვის.
უპირველეს ყოვლისა, კინემატოგრაფიები იყენებენ ანიმაციურ GIF ფორმატს ანიმაციის ფარგლებში კადრების გადასაღებად. ეს არის მარტივი, პორტატული და მოქნილი გზა ანიმაციის შესაქმნელად, მაგრამ რადგან GIF-ები მკაცრად 8 ბიტიანია, პალიტრა, რომლის რეპროდუცირებაც შესაძლებელია, უკიდურესად შეზღუდულია. ეს, რა თქმა უნდა, არის ისეთივე შესაძლებლობა, როგორც შეზღუდვა, აიძულებს მხატვარს განიხილოს ყველა ელემენტი მათი ხელობის, მაგრამ ეს იმას ნიშნავს, რომ ლამაზი, მდიდარი და გაჯერებული კინემატოგრაფიები არ არის პრაქტიკული.
მეორე შეზღუდვა არის ერთი ზომის - იმისათვის, რომ ანიმაციური GIF იყოს საკმარისად პორტატული, საჭიროა მისი რენდერი შედარებით მცირე ზომებში. ამგვარად, შესაძლებლობა ჩაეფლოს სტუმარი სიურპრიზისა და აღფრთოვანების მომენტში, შემოიფარგლება საბოლოო ნაწილის მასშტაბით და იმ ადგილით, რომელსაც იგი იკავებს გვერდზე. ისევ და ისევ, არის შესამჩნევი გამონაკლისები, თუმცა წესების დარღვევის შემთხვევაში საბოლოო შედეგის ხარისხი უარესდება.
ამ გაკვეთილში ჩვენ გაჩვენებთ, თუ როგორ უნდა შექმნათ სრული ეკრანის მქონე კინემატოგრაფი სხვადასხვა ტექნიკის გამოყენებით. იმის ნაცვლად, რომ ჩვენი ანიმაცია გავაფორმოთ GIF-ის გამოყენებით, ჩვენ შევქმნით სპრაიტს JPG ფორმატის გამოყენებით, რაც საშუალებას მოგვცემს გავაფართოვოთ ჩვენი ნამუშევრები პრაქტიკულად ნებისმიერ ზომამდე და შევქმნათ ფერების სრული სპექტრი. თქვენ შეისწავლით თუ როგორ დაარღვიოთ ვიდეო ცალკეულ ჩარჩოებად, მოაწყოთ ჩარჩოები ერთ სპრაიტად, რომელიც ეფექტურად იტვირთება ბრაუზერს და გამოიყენეთ CSS3 (jQuery, როგორც სარეზერვო საშუალება) კადრებს შორის გადასატრიალებლად, რაც ქმნის მდიდარ, მაღალი ხარისხის კინემაგრაფს.
1. გადაიღეთ თქვენი თემა
როგორც ნებისმიერ კინემაგრაფში, პირველი ეტაპი არის თქვენი საგნის იდენტიფიცირება და გადაღება. მიმართეთ რაღაცას, სადაც მოძრაობა დახვეწილი და შეზღუდულია - მაგალითად, მოდელის თვალების მოძრაობა ან წყლის წვეთოვანი მილიდან. მიუხედავად იმისა, რომ ეს ტექნიკა უფრო მოქნილია ინფორმაციის მოცულობით, რომლის გადმოცემაც შეგიძლიათ, წარმატებული კინემატოგრაფის ხელოვნებაა რომ პირველად ჩანს სტატიკური გამოსახულება, ასე რომ, გაითვალისწინეთ ეს თქვენი საგნის არჩევისას და დარწმუნდით, რომ თქვენი კადრები არის სტაბილური!
2. იმპორტი Photoshop-ში
გადააკეთეთ თქვენი კადრები შესაფერის ფორმატში, რომელიც შეგიძლიათ გახსნათ Photoshop-ში და დარწმუნდით, რომ დააყენეთ თქვენი სამუშაო ადგილი Motion წინასწარ დაყენებულზე. ამის არჩევა შეგიძლიათ Windows > Workspace > Motion არჩევით. გადაამოწმეთ თქვენი ვიდეო და იპოვნეთ განყოფილება, რომელიც თქვენს ანიმაციად იმუშავებს არა უმეტეს წამით. გაითვალისწინეთ, რომ უწყვეტ ანიმაციად მუშაობისთვის, საბოლოო ნაწილს უნდა ჰქონდეს იდენტური პირველი და ბოლო კადრი.
3. აირჩიეთ თქვენი განყოფილება
მას შემდეგ რაც დაადგინეთ ვიდეოს ნაწილი, რომლის გამოყენებაც გსურთ, გადაიტანეთ სამუშაო ადგილის სახელურები ვადებში, რათა მონიშნოთ ტერიტორია, საიდანაც აპირებთ თქვენი კინემატოგრაფის შექმნას. გაიარეთ თქვენი არჩევანის თითოეული კადრი, მოძებნეთ საუკეთესო კადრი - თქვენ ამას გამოიყენებთ შეზღუდოს ბოლო ნაწილში ნაჩვენები მოძრაობა და დარწმუნდეს, რომ ყველაფერი იწყება და მთავრდება ერთნაირად პოზიცია. მას შემდეგ რაც იპოვით უფლებას, აირჩიეთ მთელი ტილო (Ctrl/Cmd+A), დააკოპირეთ (Ctrl/Cmd+C) და ჩასვით (Ctrl/Cmd+V) ახალ ფენაზე.
4. ნიღაბი შენი კალორია
დაამატეთ ფენის ნიღაბი თქვენს უძრავ ფენას და გამოიყენეთ შავი საღებავი ნიღაბზე, რათა ამოიღოთ გამოსახულების ის ადგილები, რომელთა გადატანა გსურთ ანიმაციის ნაწილად. როგორც ამას აკეთებთ, ღირს შეჩერება ყოველ ჯერზე, როდესაც თქვენ ნიღბავთ სურათს, რათა დარწმუნდეთ, რომ ძირითადი ვიდეო კომფორტულად ჯდება უძრაო ჩარჩოში დარჩენილ უფსკრულის ფარგლებში.
5. თქვენი ვიდეოს რენდერი
როდესაც კმაყოფილი ხართ, რომ სუფთა შედეგი გაქვთ, მოძრაობით შემოიფარგლება თქვენი სურათის მონაკვეთით, აირჩიეთ File > Export > Render Movie, რათა შეინახოთ თქვენი ნამუშევარი ახალ ვიდეო ფაილად. შეამცირეთ კადრების სიხშირე 12-დან 15 კადრამდე წამში; ეს ხელს უწყობს იმ ფრეიმების რაოდენობის შემცირებას, რომლებიც უნდა გამოვიტანოთ საბოლოო სპრაიტში, მკვეთრად ამცირებს ფაილის ზომას და გახდის ნაწილს ვებ მეგობრული.
6. ჩატვირთეთ თქვენი ვიდეო
ახლა თქვენ გადაიღეთ ვიდეო, გახსენით ის პირდაპირ Photoshop-ში, აირჩიეთ File > Import > Video Frames to Layers. ეს პარამეტრი საშუალებას გაძლევთ გადაიტანოთ თითოეული ჩარჩო ახალ ფენაზე, რაც გაადვილებს JPEG ფაილების სერიის სახით გამოტანას. არ მონიშნოთ Make Frame Animation ოფცია იმპორტის დიალოგში.
7. გამომავალი, როგორც JPG
თითოეული ფენისთვის ჩვენ უნდა შევინახოთ მაღალი ხარისხის JPEG ფაილი. ამის ავტომატიზაცია შეგიძლიათ ფაილი > სკრიპტები > ფენების ექსპორტი ფაილებში არჩევით. თუ გსურთ შეცვალოთ თქვენი ანიმაცია, რათა უზრუნველყოთ მისი სრულყოფილად ციკლი, დააკოპირეთ თქვენი შებრუნებული ჩარჩოები და დაალაგეთ ისინი სწორი თანმიმდევრობით ფენების პანელის შიგნით ექსპორტამდე, რათა გქონდეთ უწყვეტი მარყუჟი.
8. დაალაგე როგორც სპრაიტი და სწორი ფერი
შექმენით ახალი დოკუმენტი Photoshop-ში იმავე სიგანეზე, როგორც თქვენი ჩარჩო, და იმდენი კადრის სიმაღლე, რამდენიც გაქვთ ჩარჩო თქვენს ანიმაციაში. მოათავსეთ თითოეული ჩარჩო კომპოზიციაში, ერთი მეორის ქვეშ, რათა შექმნათ ერთი სპრაიტი. დაამატეთ ნებისმიერი სიმკვეთრე ან მთლიანი ფერის კორექცია, რომლის გამოყენებაც გსურთ, რათა საბოლოო ეფექტი იყოს ერთგვაროვანი.
9. შექმენით კონტეინერი
იმის გამო, რომ ჩვენ გვაქვს ერთი სურათის სპრაიტი, ვიდრე ცალკეული ფაილების სერია, ჩვენ უნდა დავრწმუნდეთ, რომ მხოლოდ პირველი ჩარჩო ჩანს მისი ჩატვირთვისას. ჩვენ შეგვიძლია ამის გაკეთება სურათის, როგორც ფონის სურათის ჩატვირთვით a
Caption: We’ve given our 
10. დაამატეთ CSS
უმარტივეს შემთხვევაში, ჩვენ უბრალოდ უნდა გამოვიყენოთ სურათი, როგორც ფონი. დაამატეთ ნაჩვენები CSS, რათა შეავსოთ იგი
#mycinemagraph { position: relative; margin: auto; width: 960px; height: 540px; border: 20px solid #fff; box-shadow: 0px 0px 10px #000; background: transparent url(cinemagraph.jpg) no-repeat 0px 0px; -moz-animation: flipframes 3s infinite; -webkit-animation: flipframes 3s infinite; animation: flipframes 3s infinite;}
11. გამოიყენეთ CSS ანიმაციები
ჩვენ ვაპირებთ გამოვიყენოთ CSS ანიმაციები ეფექტის დასასრულებლად, რადგან ეს საშუალებას გვაძლევს მივცეთ ბრაუზერს ფიქრი ანიმაციის რენდერზე. შექმენით წინასწარ განსაზღვრული:
@keyframes flipframes { 0% { background-position: 0px 0px; } 6.999% { background-position: 0px 0px; } 7% { background-position: 0px -540px; } 13.999% { background-position: 0px -540px; } 14% { background-position: 0px -1080px; } 20.999% { background-position: 0px -1080px; } 21% { background-position: 0px -1620px; } 27.999% { background-position: 0px -1620px; } 28% { background-position: 0px -2160px; } 34.999% { background-position: 0px -2160px; } 35% { background-position: 0px -2700px; } 41.999% { background-position: 0px -2700px; } 42% { background-position: 0px -3240px; } 48.999% { background-position: 0px -3240px; } 49% { background-position: 0px -3780px; } 54.999% { background-position: 0px -3780px; } 55% { background-position: 0px -4320px; } 61.999% { background-position: 0px -4320px; } 62% { background-position: 0px -4860px; } 68.999% { background-position: 0px -4860px; } 69% { background-position: 0px -5400px; } 75.999% { background-position: 0px -5400px; } 76% { background-position: 0px -5940px; } 82.999% { background-position: 0px -5940px; } 83% { background-position: 0px -6480px; } 89.999% { background-position: 0px -6480px; } 90% { background-position: 0px -7020px; } 94.999% { background-position: 0px -7020px; } 95% { background-position: 0px -7560px; } 99.999% { background-position: 0px -7560px; } 100% { background-position: 0px 0px; } }
12. Modernizr ძველი ბრაუზერებისთვის
ყველა ბრაუზერი ჯერ არ არის თავსებადი CSS3-თან, ასე რომ, ძველი ბრაუზერებისთვის ჩვენ გვაქვს არჩევანი: ან დავტოვოთ მათ სტატიკური გამოსახულება (და არავითარი გაკვირვების მომენტი, შედეგად) ან დავუბრუნდეთ სკრიპტს. დაამატეთ Modernizr JavaScript მოდული და გამოიყენეთ იგი jQuery flipbook ეფექტის შესაქმნელად HTML5 ელემენტების მხარდაჭერის მოძიებით. თავად ანიმაცია უბრალოდ მარყუჟის გაშვებისა და ფონის სურათის პოზიციონირების შემთხვევაა, ყოველი გამეორება ერთი კადრის ზემოთ. შეამოწმეთ ჩვენი კოდი, რომ ნახოთ ეს მოქმედებაში.
i=0; // counter to indicate which frame we're showing frameheight = 540; // height of the frame numframes = 15 // total number of frames in sprite $(document).ready(function(){ // Only apply the fallback to non-capable browsers $(".no-cssanimations").each(function(){ var t = setInterval("changeframe()",200); // aim for around 10fps }); }); function changeframe() { i = i + 1; if (i>(numframes-1)) { i=0; } newposition = 0 - (i*frameheight); $("#mycinemagraph").css({backgroundPosition:"0px "+newposition+"px"}); }
ამ სტატიის ზედა ნაწილში მოცემული ჩამოტვირთვის ბმული მოგაწვდით წყაროს ფაილებს და JPEG-ს, რომლებიც გამოიყენება ამ კინემატოგრაფის შესაქმნელად. თუ გსურთ ორიგინალური ვიდეო და PSD ფაილები, შეგიძლიათ ჩამოტვირთოთ ისინი აქ. ამ ჩამოტვირთვის ზომაა 82 მბ.
