وب در حال تغییر است. اکنون که همه مرورگرهای دسک تاپ و موبایل مدرن از HTML5 پشتیبانی می کنند و Adobe Flash برای مرورگرهای تلفن همراه را متوقف کرده است ، وقت آن است که در مورد انتخاب روش تحویل فکر کنیم - و مطمئناً برای سیستم عامل های تلفن همراه ، HTML5 بهترین گزینه برای محتوای تعاملی است.
Hype (در دسترس از فروشگاه App Mac) محتوای متحرک و تعاملی HTML5 را ایجاد می کند ، بدون اینکه شما بخواهید یک خط کد بنویسید. در این آموزش ، ما می خواهیم یک بنر متحرک HTML5 با استفاده از ویرایشگر صحنه ساده و در عین حال قدرتمند Hype و سیستم انیمیشن مبتنی بر keyframe ایجاد کنیم. در پایان ، شما می دانید که چگونه یک صحنه را بسازید و آن را متحرک کنید و همچنین چگونه به صحنه و رویدادهای کاربر پاسخ دهید.
01 برای شروع ، ابتدا دارایی های خود را با کشیدن تصاویر خود در یک صحنه جدید Hype به صحنه اضافه کنید. با استفاده از منوی Arrange ، که چندین روش مختلف برای ترتیب و تغییر اندازه اشیا دارد ، عکس ها را از نزدیک به دورترین قسمت مرتب کنید.
02 ضبط را با کلیک روی دکمه ضبط در سمت راست کنترل های انیمیشن روشن کنید. نشانگر زمان را به سه ثانیه پیش برده و آسمان ، کوه ها ، تپه ها و چمن ها را به سمت چپ حرکت دهید.انتقال هر تصویر بیشتر از تصویر پشت آن ، اثر اختلاف منظر جذابی را ایجاد می کند. در آخر ، توپ فوتبال را از لبه سمت چپ صحنه به سمت راست حرکت دهید. برای خاموش کردن ضبط مجدداً روی دکمه ضبط کلیک کنید و برای پیش نمایش ، روی پخش کلیک کنید.
03 عنصر توپ فوتبال را در لیست عناصر Hype انتخاب کنید و روی منوی Properties که ظاهر می شود کلیک کنید. ویژگی Rotation Angle را انتخاب کرده و روی مثلث افشای توپ فوتبال کلیک کنید تا خصوصیات آن مشخص شود. خاصیت جدید را انتخاب کرده و نشانگر زمان را به ابتدا تنظیم کنید. روی دکمه KeyFrame کلیک کنید تا یک قاب اصلی شروع شود. جدول زمانی را به سه ثانیه پیش ببرید و دوباره روی دکمه Key Frame کلیک کنید تا یک قاب کلید خاتمه ایجاد کنید. با رفتن به Hype’s Metrics Inspector و تغییر مقدار چرخش محور Z آن به 1080 درجه ، توپ فوتبال را بچرخانید.
04 تغییر توابع زمان بندی انیمیشن توپ فوتبال باعث می شود که آن به طور طبیعی در خط افق حرکت کند. برای تغییر عملکرد زمان بندی برای حرکت افقی آن ، روی انیمیشن Origin (چپ) دوبار کلیک کنید و عملکرد Linear timing را انتخاب کنید. همین کار را روی سایر انیمیشن های توپ فوتبال انجام دهید تا جلوه ای کاملاً طبیعی به وجود آورد.
05 هنگامی که پخش این صحنه به پایان رسید ، باید به طور خودکار به صحنه نهایی بنر خود برویم. برای مشاهده اقدامات خاص صحنه های Hype به Scene Inspector بروید. روی منوی Action مرتبط با عملکرد On Animation Complete کلیک کنید و "Jump to Scene" را انتخاب کنید. این گزینه منوهای Scene and Transition را اضافه می کند که بطور خودکار تنظیم می شوند بلافاصله به صحنه بعدی منتقل شوند.
برای کسانی که به دنبال الهام هستند ، این نمونه های HTML5 را از سایت خواهر ما Creative Bloq بررسی کنید.
