ما در تصویرگر شخصیت های زیر انیمیشن را ترسیم می کنیم. در Illustrator انیمیشن بسازید. صادرات پرونده های SWF از Illustrator

یک GIF شفاف در Adobe Illustrator به شرح زیر انجام می شود. به File\u003e Save for Web & Devices (Alt + Ctrl + Shift + S) بروید. در پنجره ای که باز می شود ، ابتدا در قسمت Optimized format file ، اول از همه ، به برگه بروید سایز عکس   (سایز عکس). واقعیت این است که کل صفحه بصورت پیش فرض در پنجره بهینه سازی قرار می گیرد و این معمولاً ضروری نیست. بنابراین ، در تب Image Size ، کادر را بردارید. کلیپ به مقوا   (برش متناسب با صفحه) را بزنید و روی Apply کلیک کنید.

سپس در لیست انتخاب قالب ، GIF را انتخاب کرده و کادر شفافیت را تیک بزنید.

پس از آن ، ما تعیین می کنیم که کدام رنگ ها شفاف خواهند بود. تمام رنگهای موجود در تصویر در برگه موجود است. جدول رنگی   (نمودار رنگ) و به صورت مربع های رنگی نمایش داده می شوند. ابزار را در نوار ابزار در سمت چپ پنجره انتخاب کنید خط چشم   (پیپت)

برای تعریف رنگ ها دو روش وجود دارد. ساده ترین راه مشخص کردن رنگ با یک پیپت به طور مستقیم روی تصویر است - پس از آن رنگ با یک ضربه تاریک روی میز رنگ برجسته می شود. خوب ، اگر دقیقاً می دانید چه رنگی باید شفاف باشد ، می توانید با کلیک کردن روی جعبه رنگ مربوطه ، آن را مستقیماً در جدول رنگ انتخاب کنید. و در حالت اول و دوم ، اگر شما نیاز به انتخاب چندین رنگ دارید ، باید با کلید فشرده شده Shift (یا Ctrl) کار کنید. پس از انتخاب رنگ ، باید برنامه را آموزش دهید تا شفاف شود. برای انجام این کار ، روی نماد کلیک کنید نقشه ها رنگ ها را به شفاف انتخاب کردند   (رنگ های انتخاب شده را به شفافیت اضافه کنید). در شکل ، این دکمه به گردش در آمده و رنگ قرمز به صورت شفاف انتخاب می شود. یک ناحیه شفاف روی تصویر ظاهر می شود ، و مربع کوچک در جدول رنگ ظاهر آن را تغییر می دهد - بخشی از آن به یک مثلث سفید تبدیل می شود. برای خنثی کردن رنگ انتخاب شده ، آن را در جدول رنگی انتخاب کرده و دوباره روی نمادهای انتخاب شده رنگها روی نماد شفاف کلیک کنید.

چند کلمه در مورد راه تنظیم شفافیت. منوی کشویی مسئول آن است. الگوریتم شفافیت Dither را مشخص کنید، به روسی - الگوریتم شبیه سازی شفافیت (شکل زیر). می توان چهار گزینه را انتخاب کرد: بدون شفافیت - هیچ الگوریتمی ، شفافیت انتشار شفاف - الگوریتم پراکندگی ، الگوریتم مبتنی بر الگوی و الگوریتم مبتنی بر نویز - شفافیت الگوی پراکنده. در حالت الگوریتم پخش ، کشویی فعال می شود میزان   (مقدار) ، به شما امکان می دهد مقدار انتشار را تغییر دهید. چه عملی را عملی کنیم؟ بسته به هدف و تصویر بستگی دارد. من از این گزینه استفاده نمی کنم و همیشه پیش فرض را رها می کنم - بدون شفافیت Dither.

روی ذخیره کلیک کنید - GIF شفاف آماده است. کار در نسخه Adobe Illustrator CS4 (v.14) انجام شده است ، اما کلیه اقدامات و میانبرهای صفحه کلید برای نسخه قبلی CS3 (نسخه 13) مرتبط هستند.

حالا بیایید کمی کار را پیچیده کنیم - یک بنر فلش متحرک درست خواهیم کرد. صحبت از انیمیشن کامل فلش ، البته در این مورد ضروری نیست - بسته های تخصصی برای این کار وجود دارد. اما برای ایجاد یک فیلم ساده و آماتور ، می توانید از Illustrator استفاده کنید.

هیچ ابزار و ابزار واسط خاصی مانند جدول زمانی ، که مشخصه برنامه های توسعه انیمیشن است ، در Adobe Illustrator وجود ندارد. اما یک ظرافت وجود دارد - می توانید از لایه ها به عنوان فریم استفاده کنید.

یک بنر را که فقط متن آن است ، ایجاد کنید.

1. کاراکترها را با دستور گروه بندی کنید شی ›گروه   (شیء\u003e گروه).
2. کار بعدی ساخت اشیاء کانتور از کاراکترهای قلم است ، در غیر این صورت شکل گیری صحیح لایه ها کار نخواهد کرد. برای این کار ، گروه را برجسته کرده و را انتخاب کنید نوع را ایجاد کنید   (قلم ›ردیابی).
3. بعد از آن منوی پالت را باز کنید لایه های   (لایه ها) با کلیک روی دکمه به شکل پیکان روی پالت (شکل 8.11).

شکل. 8.11. منوی لایه ها

ما در این منو به دستور علاقه داریم. انتشار به لایه (دنباله)   (تبدیل به لایه ها (متوالی)) ، که هر شیء جداگانه را به یک لایه جدید منتقل می کند. لطفا توجه داشته باشید که هنگام اعمال دستور ، گروه باید برجسته شوید گروه، نه یک لایه لایه 1.

روشی که پالت باید به نظر برسد لایه های   (لایه ها) پس از اجرا انتشار به لایه (دنباله)   (تبدیل به لایه ها (متوالی)) ، نشان داده شده در شکل. 8.12.

شکل. 8.12. پالت لایه ها پس از اجرای انتشار به لایه (دنباله)

این آماده سازی را کامل می کند ، و می توانید با آن پس انداز کنید صرفه جویی در وب   (صرفه جویی در وب) در SWF. جابجایی   - این قالب اصلی گرافیکی مبتنی بر فناوریهای Flash است. با دقت بیشتری می توان گفت که این قالب Flash است (شکل 8.13).

احتمالاً امروزه همه کاربران کم و بیش با Flash آشنا هستند. در حال حاضر ، این رایج ترین قالب انیمیشن در اینترنت است که به کمک آن اکثریت قریب به اتفاق صفحات وب چندرسانه ای ساخته شده اند.

البته در Adobe Illustrator نه دهم قابلیت Flash نیز اجرا می شود ، زیرا برنامه برای این منظور درنظر گرفته نشده است. با این حال ، در آن می توانید یک تصویر ثابت یا انیمیشن ساده بسازید.

شکل. 8.13. تنظیمات بهینه سازی برای قالب SWF

تنظیمات زیر وجود دارد.

• فقط خواندنی   (فقط خواندن) اگر کادر را بررسی کنید ، پرونده به گونه ای نوشته می شود که دیگر نمی توان برای ویرایش در هر برنامه ای باز کرد. این ، از یک طرف ، اندازه پرونده ها را کاهش می دهد و از طرف دیگر از کپی رایت شما نیز محافظت می کند.
• تنظیمات نشان داده شده توسط 1. پارامتری که نوع ذخیره را تعیین می کند یک تصویر یا انیمیشن است.
• در صورت انتخاب گزینه پرونده AI به پرونده SWF   (پرونده Illustrator به پرونده SWF) ، تصویر به عنوان یک تصویر ثابت ذخیره می شود و آنچه را که هنگام کار در Illustrator روی صفحه مشاهده می کنید ، کاملاً تکرار می کند.
• قاب های SWF Frames   (لایه ها در فریم های SWF) به شما امکان می دهد انیمیشن هایی را بر اساس لایه های موجود بسازید ، که به صورت فریم ارائه می شوند. ما باید این گزینه را انتخاب کنیم.
• کیفیت منحنی   (منحنی های کیفیت). دقت در تکرار منحنی منحنی پرونده از تصویر اصلی. هنگامی که این پارامتر کاهش می یابد ، کیفیت به ویژه در ناحیه قطعات کوچک کاهش می یابد ، اما اندازه پرونده کاهش می یابد. برای مورد ما ، مقدار بهینه "7" است.
• نرخ فریم   (قاب تأخیر). نرخ فریم و در نتیجه سرعت انیمیشن. برای درست جلوه دادن اثر ، بیش از 4 فریم در ثانیه تنظیم کنید.
• حلقه   (برای تکرار) بارها و بارها انیمیشن بازی کنید. مناسب برای انیمیشن هایی که حلقه تکراری برای آنها مهم است. بنر به این نوع اشاره دارد.

اخیراً ، انواع گرافیکی انیمیشن SVG (Scalable Vector Graphics) در سایت ها و برنامه ها بسیار پرطرفدار شده است. این در شرایطی است که همه جدیدترین مرورگرها قبلاً از این قالب پشتیبانی می کنند. در اینجا اطلاعات مربوط به پشتیبانی مرورگر SVG ارائه شده است.

در این مقاله ساده ترین نمونه از متحرک سازی یک بردار SVG با استفاده از افزونه سبک جی کوئری Lazy Line Painter شرح داده شده است.

  کد منبع

برای تکمیل و درک کامل این کار ، دانش پایه HTML ، CSS ، Jquery مطلوب است ، اما اگر فقط می خواهید SVG را تحریک کنید ، لازم نیست) اجازه دهید شروع کنیم!

و بنابراین مراحلی که ما باید انجام دهیم:

1. ساختار صحیح فایل را ایجاد کنید
2. افزونه را بارگیری و وصل کنید
3. یک تصویر کانتور جالب در Adobe Illustrator بکشید
4. تصویر ما را به Lazy Line Converter تبدیل کنید
5. کد نتیجه را در main.js قرار دهید
6. مقداری CSS را به مزه اضافه کنید

1- ساختار صحیح فایل را ایجاد کنید
  سرویس Initializr در این امر به ما کمک می کند ، جایی که شما نیاز دارید پارامترهایی را مانند تصویر زیر انتخاب کنید.

• کلاسیک H5BP کلاسیک (صفحه بویلر HTML5)
• بدون الگویی
• فقط HTML5 Shiv
• به حداقل رساند
• کلاسهای اینترنت اکسپلورر
• قاب Chrome
• سپس روی بارگیری آن کلیک کنید!

2. افزونه را بارگیری و وصل کنید

از آنجایی که firstizr با جدیدترین کتابخانه Jquery همراه است ، از بایگانی که باید از مخزن پروژه Lazy Line Painter بارگیری کنیم ، باید فقط 2 پرونده را به پروژه خود منتقل کنیم. مورد اول "jquery.lazylinepainter-1.1.min.js" است (نسخه پلاگین ممکن است متفاوت باشد) ، در ریشه پوشه دریافت شده قرار دارد. مورد دوم به عنوان مثال / js / vendor / raphael-min.js است.

این 2 پرونده در پوشه js قرار می گیرند. و آنها را قبل از main.js به index.html ما وصل کنید به شرح زیر:

3. یک تصویر کانتور جالب در Adobe Illustrator بکشید

1. تصویر کانتور خود را در Illustrator ترسیم می کنیم (ساده ترین راه برای انجام این کار با ابزار قلم است)
2. لازم است که خطوط شکل ما بسته نشوند ، زیرا برای تأثیر ما ، یک آغاز و یک پایان لازم است
3. نباید پر شود
4. حداکثر اندازه پرونده - 1000 × 1000 px ، 40kb
5. برش را به مرزهای جسم بزنید Object\u003e Artboards\u003e Fit To Artboards Bounds
6. ذخیره با فرمت SVG (تنظیمات ذخیره استاندارد انجام خواهد شد)

به عنوان مثال ، می توانید از نمادهای موجود در پیوست استفاده کنید.

4. تصویر ما را به Lazy Line Converter تبدیل کنید
  فقط کافی است آیکون خود را در تصویر زیر در کادر بکشید.
  ضخامت ، رنگ رئوس و سرعت انیمیشن را می توان در خود کد تغییر داد که پس از تبدیل ظاهر می شود!

5- کد نتیجه را در main.js قرار دهید
  اکنون فقط کد حاصل را در یک پرونده اصلی main.js بچسبانید
  مولفه های:
  عرض عرض - ضخامت طرح
  strokeColor - رنگ رئوس مطالب
  همچنین می توانید با تغییر مقادیر پارامتر مدت (با پیش فرض 600) نقشه ترسیم هر وکتور را تغییر دهید.

6. مقداری CSS را به مزه اضافه کنید
  پاراگراف را از index.html حذف کنید

سلام دنیا! این HTML Boilerplate است.

و به جای آن بلوکی را که انیمیشن ما در آن برگزار خواهد شد قرار می دهیم

سپس برای زیبایی بیشتر مقداری CSS را به پرونده اصلی.Css اضافه کنید:

بدن (پس زمینه: # F3B71C؛) #icons (موقعیت: ثابت؛ بالای: 50٪؛ سمت چپ: 50٪؛ حاشیه: -300px 0 0 -400px؛)

همه پرونده ها را ذخیره کنید
  اکنون فقط یک index.html را در یک مرورگر مدرن باز کنید و از اثر لذت ببرید.

P.S. هنگام شروع کار با دستگاه محلی ، شروع انیمیشن ممکن است برای چند ثانیه به تعویق بیفتد.

امروز ما یک درس غیرمعمول Adobe Illustrator داریم. زیرا این بار ما یک تصویر ایستا را انجام نخواهیم داد بلکه یک انیمیشن واقعی است. تصور کنید ، با استفاده از Adobe Illustrator معلوم می شود شما همچنین می توانید کارتون بکشید :)

و ما برای این کار به چیزی احتیاج نداریم. سازماندهی مناسب لایه ها و صادرات کار نهایی با فرمت swf ، که در آن هر لایه به یک قاب انیمیشن تبدیل می شود. در درس امروز ما یک انیمیشن شمارش معکوس را به سبک یک فیلم یکپارچهسازی با سیستمعامل ترسیم خواهیم کرد. خروجی باید یک فیلم فلش با همین شمارش معکوس باشد.

اولین کاری که باید بکنید این است که تمام عناصر لازم را برای انیمیشن آینده ترسیم کنید. برای انجام این کار ، در یک سند جداگانه ، من دو موقعیت از قاب فیلم ، یک دایره برای شمارش ، که به بخش های جداگانه ، بافت و خراش عمودی برش داده شده است ، اضافه کردم تا اثر باستان ، و همچنین تمام اعداد و کتیبه ها اضافه شود.

هنگامی که تمام قسمت های کارتون ما آماده است ، می توانید شروع به ایجاد خود انیمیشن کنید. برای راحتی ، این بهترین کار در یک سند جدید انجام می شود. در همان زمان ، لایه ها نقش فریم های انیمیشن را بازی می کنند. و در لایه اول فقط باید قاب فیلم را کپی کنید. آن را در وسط محل کار قرار دهید.

  حالا یک لایه دوم ایجاد کنید و قاب فیلم را درون آن کپی کنید ، که در آن سوراخ های کنار لبه ها با یک تغییر انجام می شود. همچنین باید محور باشد.

  از این دو لایه می توانید انیمیشن یک فیلم در حال حرکت را دریافت کنید. اما بعدا به لایه های خیلی بیشتری نیاز داریم. بنابراین ، دو لایه اول را انتخاب کنید ، به گزینه های پانل بروید و یک کپی از لایه ها تهیه کنید.

  به همین ترتیب ، ما باید 12 لایه را با قاب های فیلم جمع کنیم که حرکت آن را مشخص می کند.

  اکنون ما یک لایه کامل داریم و همه آنها قابل مشاهده است. به این معنا که لایه های بالایی مانع از لایه های پایین می شوند که برای کار خیلی راحت نیست. بنابراین می توانید با کلیک کردن روی نماد چشم در سمت چپ نام لایه ، برخی لایه ها را خاموش کنید. برای خاموش یا روشن کردن همه لایه ها ، کلید Alt را در حالی که روی نماد چشم کلیک می کنید ، نگه دارید. روشن و خاموش کردن لایه ها ، دقیقاً می توانید آنچه را که در یک قاب مشخص از انیمیشن آینده ما قرار دارد ، ببینید. و حال برای اینکه بتوانیم یک لرزش جزئی به حرکت فیلم اضافه کنیم ، باید فریم های دریافت شده را کمی در جهت های مختلف تغییر دهیم. برای انجام این کار ، فقط لایه ای را که می خواهید در حال حاضر با آن کار کنید ، وارد کنید و سپس قاب را به چند جهت تغییر دهید.

وقتی همه لایه ها را پشت سر گذاشتید و یک تغییر جزئی اضافه کردید ، می توانید شروع به ساخت انیمیشن هایی از حلقه متحرک کنید. برای انجام این کار ، دایره متشکل از بخش ها از سند را با قسمت های کارتونی کپی کرده و آن را روی لایه اول در بالای قاب فیلم قرار دهید.

  اگر انتخاب را از دایره حذف کنید ، آنگاه مانند یک کل به نظر می رسد. این همان چیزی است که ما نیاز داریم.

  اما از آنجا که از بخش های جداگانه ای تشکیل شده است ، می توانید با تغییر رنگ آنها ، انیمیشن را خیلی سریع و به راحتی ایجاد کنید. برای این کار ، این حلقه را به لایه دوم کپی کرده و بخش اول را روشن تر کنید. یادتان هست که فیلم ما هنگام حرکت لرزید ، بنابراین لازم نیست دایره را دقیقاً در مرکز قاب قرار دهید. آن را با چشم قرار دهید.

  به همین ترتیب ، باید دایره را در هر لایه بعدی کپی کنید ، در حالی که یک بخش دیگر با رنگ روشن تر از زمان قبلی را نقاشی می کنید. با هم ، این 12 لایه یک انیمیشن از حرکت فیلم را با یک دایره پر کردن تشکیل می دهند.

  بعد ، بافت را به لایه های ما اضافه کنید. لایه اول را روشن کنید و بافت را از فایل مبدا با قطعات یدکی در آن کپی کنید.

  سپس ، به نوبه خود ، لایه های زیر را روشن کنید و همان بافت را در همانجا کپی کنید. برای اینکه در هر فریم متفاوت به نظر برسد ، فقط آن را 90 درجه بچرخانید. همانطور که ممکن است حدس زده باشید ، باید یک بافت را به هر 12 فریم اضافه کنیم.

  اگر در حال حاضر از کپی کردن به ترتیب خسته شده اید ، پس می توانم شما را خوشحال کنم - خیلی کم باقی مانده است. سخت ترین قسمت تمام شد. باقی مانده است که خراشهای عمودی و تقریباً همه چیز را اضافه کنید. برای انجام این کار ، دوباره ابتدا خراش اصلی را کپی کرده و در چندین لایه در یک مکان دلخواه قرار دهید. در مورد من ، خراش فقط در دو لایه ظاهر می شود.

  اکنون که حلقه اصلی با انیمیشن فیلم آماده است ، همچنان می توان اعداد را اضافه کرد. از آنجا که ما از 3 به 1 ، به علاوه کلمه Go !!! را حساب می کنیم ، به لایه های بیشتری هم نیاز داریم. نه 12 ، بلکه 48. برای انجام این کار ، شما باید سه نسخه دیگر از لایه های آماده را با انیمیشن فیلم تهیه کنید.

  و بعد همه چیز ساده است اولین لایه را روشن کنید و عدد سه را در آنجا قرار دهید.

  سپس باید تا پایان انیمیشن دایره این شکل را در لایه های بعدی کپی کنید. وقتی به نسخه بعدی لایه ها رسیدید ، جایی که دایره دوباره کاملاً پر خواهد شد ، باید شماره دو را از قبل قرار دهید. به همین روش شماره یک را در لایه های مورد نظر کپی کنید. و هنگامی که به لایه های نهایی در نظر گرفته شده برای کتیبه Go !!! رسیدید ، قبل از کپی کردن کتیبه در لایه مورد نظر ، به سادگی دایره را پاک کنید.

این همه با انیمیشن است. نکته اصلی در اینجا سردرگمی نیست. می توانید نامهای مناسب را به لایه ها بدهید ، اما من به نوعی تنبل شده بودم :) و با این وجود ، هنگامی که کار را تمام کردید ، با کلیک کردن بر روی آیکون چشم ، حتماً تمام لایه ها را دوباره برگردانید.

  در پنجره با تنظیمات صادرات ، Export As: AI Layers را روی SWF Frames قرار دهید. این گزینه است که لایه های تصویرگر را به فریم های انیمیشن تبدیل می کند. بعد ، روی دکمه Advanced کلیک کنید.

  تنظیمات پیشرفته باز می شود. در اینجا باید نرخ فریم نرخ فریم را تنظیم کنید. من 12 فریم در ثانیه دارم. Loading Checkmark مسئول چرخه انیمیشن است. با تشکر از فیلم او در یک دایره پخش می شود. و گزینه Layer Order: Bottom Up لایه های تصویرگر را از پایین به بالا در پنل پخش می کند. این دقیقاً همان است که ما انیمیشن خود را ساختیم.

  در خروجی ، ما با انیمیشن خود فیلم فلش می گیریم.

اکنون می بینید که ساخت انیمیشن ساده در Adobe Illustrator آنچنان که در نگاه اول به نظر می رسد چندان دشوار نیست.

اما برای ایجاد فیلم های بلند یا برنامه های تعاملی ، هنوز هم بهتر است از Adobe Flash یا سایر ویرایشگرهای فلش استفاده کنید. به عنوان مثال ، من این گربه را در یک فلش قدیمی Macromedia ساختم که در محل کارم حفر کردم.

همچنین اخیراً از HTML5 و CSS3 بیشتر و بیشتر برای ایجاد انیمیشن استفاده می شود. این کد توسط مرورگرهای مدرن پشتیبانی می شود و نیازی به استفاده از فلش پلیر ندارد.

رومی با نام داکاساس   مخصوص وبلاگ

در خبرنامه ما مشترک شوید ، بنابراین چیز جدیدی را از دست نمی دهید:

بهینه سازی گرافیک وب

اطلاعات گرافیکی بسیار کندتر از متن منتقل می شوند و زمان بارگذاری تصاویر متناسب با اندازه پرونده های گرافیکی آنها است. بنابراین بارگذاری سریع صفحات وب حاکی از کوچک بودن تصاویر گرافیکی تعبیه شده در آنها است که از طریق بهینه سازی آنها حاصل می شود. بهینه سازی تصویر به عنوان تبدیل آن درک می شود ، که ضمن حفظ کیفیت تصویر مورد نیاز در این حالت ، حداقل اندازه پرونده را تضمین می کند ، که در درجه اول با کاهش تعداد رنگ ها در تصاویر گرافیکی ، استفاده از قالب های فشرده و ویژه فایل و بهینه سازی پارامترهای فشرده سازی برای قطعات تصویر فردی حاصل می شود.

Illustrator دارای ابزارهای بهینه سازی تصویر داخلی است که یک روش بهینه سازی سریع و کارآمد را از طریق روش های مختلف پیش نمایش ارائه می دهد. پیش نمایش ایده نسبتاً دقیقی از آنچه که تصویر بهینه شده در زمان واقعی به نظر می رسد ، کمک می کند تا به ارزیابی نتیجه بهینه سازی و انتخاب موفقیت آمیز تنظیمات لازم کمک کند. و می توانید هر دو تصویر ایجاد شده به طور مستقیم در Illustrator و سایر موارد مانند عکسهایی که قرار است در یک وب سایت قرار بگیرند را بهینه کنید.

پارامترهای بهینه سازی در پنجره تنظیم شده است صرفه جویی در وب   (صرفه جویی در وب) ، به دستور همان نام از منو فراخوانی می شود   فایل   (فایل). برنامه پیشنهاد می کند از یکی از چهار حالت پیش نمایش استفاده کنید ، اما دو مورد برای ارزیابی کیفیت بهینه مناسب هستند:

• 2 تا   (دو گزینه) - مشاهده همزمان تصویر اصلی و بهینه سازی شده مطابق با تنظیمات مشخص شده (شکل 1)؛
• 4 تا   (چهار گزینه) - در این حالت ، منطقه مشاهده به چهار ویندوز تقسیم می شود (شکل 2) برای نمایش تصویر اصلی و سه نسخه از بهینه سازی شده: نسخه اول بر اساس مقادیر بهینه سازی مجموعه ایجاد می شود و دو مورد دیگر گزینه هایی برای تنظیمات بهینه سازی فعلی هستند.

هر دو حالت می توانند در یافتن بهترین گزینه بهینه سازی ، به طور قابل توجهی در زمان صرفه جویی کنند ، زیرا نیاز به ذخیره تصاویر با تنظیمات بهینه سازی متفاوت و مقایسه بصری بعدی آنها را از بین می برد. علاوه بر این ، می توان نه تنها کیفیت تصویر بهینه شده بلکه اندازه و زمان بارگذاری آن را با گزینه های مختلف اتصال ارزیابی کرد. برای مقایسه ، حالت 4-Up (چهار گزینه) مناسب ترین است ، که به شما امکان می دهد تا بصری اثر فشرده سازی یا کاهش پالت را بر کیفیت تصویر و اندازه آن ارزیابی کنید و در نهایت بهترین پارامترهای بهینه سازی را تعیین کنید.

Illustrator به شما امکان می دهد گرافیک وب را در قالبهای نه تنها GIF ، JPG ، PNG-8 و PNG-24 بلکه در SWF و SVG بهینه کنید. تصاویر نمایه شده با تعداد کمی رنگ در قالب GIF ذخیره می شوند. برای صرفه جویی در تصاویر به صورت تمام رنگی و خاکستری - عکس ها و گرافیک های اشباع شده رنگ ، مانند پر کردن شیب - از فرمت 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 KB خواهد بود. پرونده PSD حاصل را باز کنید و از دستور استفاده کنید پرونده \u003d\u003e ذخیره برای وب   (پرونده \u003d\u003e ذخیره برای وب). با توجه به تعداد محدودی از رنگ های موجود در تصویر ، فرمت GIF در این حالت بهینه است ، با تنظیمات خاصی که باید تصمیم بگیرید. با آزمایش تنظیمات می توانید اطمینان حاصل کنید که بهترین کیفیت توسط الگوریتم فشرده سازی انتخاب شده توسط برنامه بصورت پیش فرض ارائه می شود انتخابی   (گزینشی) در مورد هموار سازی ، با توجه به وجود پر شدن شیب ، بهتر است یک الگوریتم با تولید نویز انتخاب کنید - سر و صدا   (شکل 6). اندازه پرونده بهینه سازی حاصل 6.729 Kbytes خواهد بود (شکل 7) ، در حالی که شفافیت پس زمینه حفظ می شود ، که می توان با ذخیره کردن تصویر در قالب GIF به همراه فایل HTML ، به راحتی تأیید کرد (شکل 8). در نتیجه ، پرونده های emblem.html و emblem.gif در پوشه Primer1 در این مثال به دست آمد.

  دکمه ها

دکمه ها - یک عنصر طراحی خاص ضروری از هر صفحه وب کنترل های گرافیکی است. تصور یک صفحه بدون آنها به سادگی غیرممکن است. طراحی دکمه ها امروز به ژانر خاصی تبدیل شده است و Illustrator به شما امکان می دهد پیچیده ترین گزینه ها را ایجاد کنید. به عنوان مثال ، دکمه های طراحی شده به عنوان اشیاء مش و / یا با استفاده از ماسک بسیار دیدنی تر از حد معمول به نظر می رسند.

گزینه ایجاد دکمه دور محدب را در Illustrator در نظر بگیرید. یک شیء بردار پر از یک رنگ دلخواه را به شکل دایره بکشید (شکل 9) و آن را به یک دستور شبکه تبدیل کنید Object \u003d\u003e ایجاد مش شیب   (Object \u003d\u003e ایجاد مش گرادیان) با مشخص کردن چهار ردیف و چهار ستون و در لیست ظاهر   (مشاهده) با انتخاب گزینه به مرکز برجسته   (نور پس زمینه) برابر با 60 (شکل 10). ابزار را انتخاب کنید انتخاب مستقیم   و در گوشه سمت چپ بالای جسم کلیک کرده و نقاط گره ای را که در آنجا قرار دارد برجسته کنید (شکل 11). با انتخاب آن در پالت ، رنگ سلول مربوطه را به رنگ سفید تغییر دهید سواچ   (شکل 12).

ابزار را بگیرید بیضوی   (Ellipse) ، نشانگر ماوس را در مرکز دایره ایجاد شده قبل از این قرار دهید و در حالی که کلیدها را نگه دارید آلت   و تغییر مکان، دایره جدید را روی قسمت قدیمی بکشید به طوری که معلوم شود 1-2 پیکسل از قدیمی از همه طرف بزرگتر است. او را به یک مرز سیاه تبدیل کنید ( سکته) 1-2 پیکسل عرض و با یک شیب شعاعی در جهت از قرمز به سفید پر کنید (شکل 13). شیء وکتور ایجاد شده را 1-2 پیکسل به سمت راست و پایین بکشید ، سپس بدون برداشتن انتخاب ، بر روی آن راست کلیک کرده و دستور را از فهرست زمینه انتخاب کنید ترتیب \u003d\u003e ارسال به عقب   (مرتب سازی \u003d\u003e بازگشت). در نتیجه ، ما یک دکمه خالی برای دکمه دریافت می کنیم ، که در شکل نشان داده شده است. 14

به عنوان یک قاعده ، در هر صفحه وب چندین دکمه از یک نوع وجود دارد ، به عنوان مثال ، فقط در جهت فلش های کشیده شده بر روی آنها متفاوت است ، که نشان دهنده جهت حرکت در اطراف سایت است. ساده ترین مورد از داشتن دو دکمه را در نظر بگیرید که یکی از آنها ، با یک فلش به پایین ، به معنی حرکت به صفحه بعد و یک دکمه با یک فلش به سمت بالا - به حالت قبلی است. به عنوان یک فلش خالی ، یک مثلث معمولی را با یک ابزار ترسیم می کنیم چند ضلعی   (چند ضلعی) ، به رنگ مشکی و همچنین به عنوان یک شی مش برای اثر بیشتر طراحی شده است. با استفاده از دکمه های مربوطه روی پالت ، فلش را به دکمه منتقل کرده و موقعیت همه اشیاء را نسبت به یکدیگر تنظیم کنید تراز کردن (هم ترازی). اولین دکمه ها در شکل نشان داده شده است. 15. با انتخاب دستور ، از لایه دکمه کپی کنید لایه تکراری لایه های، - در نتیجه دو لایه یکسان دریافت می کنیم. سپس پیکان را بر روی کپی لایه انتخاب کرده و آن را 180 درجه بچرخانید ، و دستور را از فهرست زمینه انتخاب کنید تبدیل \u003d\u003e چرخش   - تبدیل \u003d\u003e چرخش. همان دکمه را که در شکل نشان داده شده است می گیریم. 16. لطفا توجه داشته باشید که بسیار راحت تر می توان دکمه های یک پروژه مشابه را در یک پرونده در لایه های مختلف ذخیره کرد ، که در این حالت نشان داده می شود.

اکنون باید گزینه های بهینه شده را برای هر یک از دکمه ها ذخیره کنید. ابتدا ، لایه پایین را نامرئی کنید - در این حالت ، دکمه روی لایه بالا ذخیره می شود. یک تیم را انتخاب کنید پرونده \u003d\u003e ذخیره برای وب   (پرونده \u003d\u003e ذخیره برای وب) ، برای مثال پارامترهای بهینه سازی دکمه را پیکربندی کنید ، همانطور که در شکل نشان داده شده است. 17 ، بر روی دکمه کلیک کنید صرفه جویی   (ذخیره) و نام پرونده را وارد کنید. دکمه ذخیره شده در نتیجه در شکل ارائه شده است. 18- اکنون دید را به لایه زیرین برگردانید ، و قسمت بالا را نامرئی کنید و به طور مشابه دکمه دوم را نیز ذخیره کنید ، نام دیگری را برای آن مشخص کنید. نتیجه در شکل نشان داده شده است. نوزده

اکنون باید مطمئن شویم که دکمه ها در صفحه وب کاملاً قابل قبول به نظر می رسند ، و آنها را در یک صفحه دلخواه قرار دهید (شکل 20). در نتیجه ، در این مثال ، پرونده Primer2.html و دو تصویر گرافیکی در پوشه تصاویر (پوشه) Primer2).

در صورت تمایل ، در طی فرآیند بهینه سازی ، دکمه را می توان به راحتی به یک برش تبدیل کرد. در این حالت ، پس از انتخاب یک فرمان پرونده \u003d\u003e ذخیره برای وب   (File \u003d\u003e Save for Web) و تنظیمات بهینه سازی باید از پالت ابزار انتخاب شوند برش را انتخاب کنید(یک برش را انتخاب کنید) و روی تصویر دوبار کلیک کنید که در نهایت به یک برش با شماره سریال 1 تبدیل می شود (شکل 21). دوباره با دوبار کلیک کردن پنجره باز می شود گزینه های برش   (گزینه های برش) ، که در آن شما باید یک لینک را مشخص کنید و در صورت تمایل نام برش را تغییر دهید (شکل 22) ، و سپس تصویر بهینه شده را ذخیره کنید. نتیجه در این حالت پرونده های Primer3.html (شکل 23) و Primer3.gif (پوشه Primer3) است.

  عناصر تعاملی

یکی از راه های احیای صفحه معرفی عناصر طراحی است که بسته به رفتار ماوس یا معمولاً در صورت بروز هر موقعیت دیگر ، تغییر شکل (یا حالت) آنها را تغییر می دهد: پوسته پوسته شدن ، پیمایش ، بارگیری ، خطاها و غیره.

در بین این عناصر ، رولورها مشهورترین (از رول انگلیسی - رول ، رول کردن) - عناصری هستند که تحت تأثیر ماوس ظاهر را تغییر می دهند. نمونه هایی از دکمه های معمولی دکمه های متحرک هستند. Rollover ها اغلب برای ایجاد سایر عناصر پیمایش سایت مورد استفاده قرار می گیرند. در حقیقت ، هر برگشتی یک نیست ، بلکه چندین تصویر (حداکثر چهار) تصویر است که هر یک از آنها مربوط به یک رویداد خاص است. رویدادهای اصلی به صورت زیر در نظر گرفته می شوند: حالت عادی - حالت عادی ، بیش از حد - در حال جست و جو در بالای یک عنصر و پایین - هنگام کلیک بر روی آن ، با کلیک چپ کلیک کنید. از لحاظ تئوری ، رویدادهایی مانند Click - آزاد کردن دکمه سمت چپ ماوس پس از کلیک ، Up - پس از انتشار دکمه ، Out - هنگام خروج از منطقه فعال می تواند درگیر شود. با این حال ، در عمل ، آنها اغلب محدود به تغییر عنصر فقط به سه یا حتی دو رویداد اول هستند.

  رولور کلاسیک

به معنای کلاسیک ، یک rollover مجموعه ای از تصاویر گرافیکی با فرمت GIF و کد HTML مربوطه می باشد ، به همین دلیل بسته به رفتار ماوس ، یک تصویر جایگزین دیگری در پنجره مرورگر می شود.

Illustrator در نظر گرفته نشده است که به طور مستقیم از روشی کلاسیک بطور مستقیم استفاده کند ، اما می تواند در ایجاد عناصری که بومی آنها هستند کمک کند. ایده در این حالت ایجاد یک لایه با تصویری متناسب با اولین رویداد است. سپس یک کپی از لایه درست کرده و تصویر را طوری تغییر دهید که مطابق با رویداد دوم و غیره باشد. تصویر چند لایه حاصل با استفاده از لایه های صرفه جویی ، به یک پرونده PSD صادر می شود که براساس آن ، بازگرداندن در برنامه Image Ready ایجاد می شود. مزیت استفاده از Illustrator ، مانند بسیاری موارد دیگر ، تعدادی از ویژگی های جالب آن است که در سایر ابزارهای نرم افزاری موجود نیست ، همراه با راحتی در تغییر گرافیک های برداری.

بیایید سعی کنیم رولور را به شکل کتیبه ای ایجاد کنیم که بسته به رفتار ماوس ، رنگ را تغییر می دهد. Illustrator را باز کنید و شکلی به شکل مستطیل سیاه و پر شده ایجاد کنید (شکل 24) ، یک کپی از آن تهیه کنید و آن را در قسمت رایگان صفحه قرار دهید. اولین نسخه مستطیل را با یک برجسته در مرکز (دستور) به یک جسم شبکه تبدیل کنید Object \u003d\u003e ایجاد مش شیب - با مشخص کردن چهار ردیف و ده ستون ، یک شی شیب ایجاد کنید (شکل 25). نسخه دوم مستطیل را فعال کرده و شیب پرش را برای آن تقریباً مطابق شکل نشان دهید. 26- یک شیء شیب را در بالای مش قرار داده ، کدورت شیء شیب را تا حدود 80٪ و اندازه - حدود 1 پیکسل ، کاهش دهید تا اثر محدب را شبیه سازی کنید. و سپس در بالای اشیاء کتیبه را تایپ کنید. در شکل اصلی خود ، بگذارید یک رنگ سفید داشته باشد که مطابق با حالت عادی باشد (شکل 27) ، و پس از تغییر حالت چرخش ، رنگ کتیبه به عنوان مثال به سبز تغییر می کند - هنگامی که روی آن را با نشانگر ماوس (حالت تمام شده) و آبی تغییر دهید - وقتی دکمه ماوس کلیک می شود (حالت پایین).

به پالت توجه کنید لایه های   - در این مرحله فقط یک لایه واحد در آن وجود دارد. دو نسخه از این لایه را با استفاده از دستور تهیه کنید لایه تکراری   (لایه تکراری) از فهرست پالت لایه های، - سه لایه در پالت وجود خواهد داشت (شکل 28). سپس ، در نسخه اول لایه ، رنگ کتیبه را به رنگ سبز تغییر دهید ، و در دوم - به رنگ آبی (شکل 29). در نتیجه ، خالی لازم برای جابجایی به دست می آید.

با ایجاد لایه های ذخیره شده با استفاده از دستور ، تصویر ایجاد شده را به فرمت PSD صادر کنید پرونده \u003d\u003e صادرات   (پرونده \u003d\u003e صادرات) و انتخاب مدل رنگ RGB (شکل 30). پرونده PSD ایجاد شده را در ImageReady باز کنید (شکل 31 و 32). با انتخاب دستور ، فریم ها را بر اساس لایه ها ایجاد کنید از لایه ها فریم درست کنید   (از لایه ها فریم ایجاد کنید) از منوی پالت انیمیشن. پنجره Animation مانند شکل (شکل) ظاهر خواهد شد. 33. علاوه بر این ، در پالت رولورو   در ابتدا ، یک حالت عادی واحد ایجاد می شود.

سپس در پنجره انیمیشنقاب را مطابق با حالت القاء انتخاب کنید ، در حالی که در پالت هستید لایه های   لایه به طور خودکار انتخاب می شود لایه 1 کپی کنید   (شکل 34). برو به پالت   رولوروو روی دکمه کلیک کنید حالت بازگرداندن را ایجاد کنید   (ایجاد حالت Rollover) - شکل. 35 ، که منجر به یک وضعیت می شود بیش از حالتدر پالت رولورو(شکل 36). به همین ترتیب یک دولت ایجاد کنید حالت پایین. حالت را فعال کنید طبیعی   در پالت رولورو   و در پالت حذف کنید انیمیشن   همه فریم ها به استثنای آن چیزی که باید مطابق با دولت باشد طبیعی. در نتیجه ، برای هر حالت گردش در پالت انیمیشنفقط یک قاب وجود خواهد داشت (شکل 37 ، 38 و 39).

شکل. 38. نمای تصویر ، پنجره پویانمایی و پالت لایه ها و Rollovers برای حالت ایالتی

نتیجه را با کلیک بر روی دکمه بررسی کنید. پیش نمایش در مرورگر پیش فرض (پیش نمایش در مرورگر) در نوار ابزار و رفتن به پنجره مرورگر (شکل 40). پس از آن فایل را با استفاده از دستور ذخیره کنید پرونده \u003d\u003e ذخیره بهینه شده   (File \u003d\u003e ذخیره با بهینه سازی) و مشخص کردن گزینه   HTML و تصاویر (* .html). در نتیجه ، در این مثال پرونده Primer4.html و یک سری تصاویر گرافیکی در پوشه تصاویر به دست آمد.

شکل. 40. پنجره مرورگر با یک عنصر Rollover

  بازیهای SVG

محبوبیت روزافزون قالب SVG (مقیاسهای بردار مقیاس پذیر) ، که بر اساس استاندارد XML ایجاد شده است ، همچنین به شما امکان می دهد عناصر تعاملی متنوعی ، به ویژه رولورها را بدست آورید ، اما در عمل این کار به روشی کاملاً متفاوت اجرا می شود. شایان ذکر است که ایجاد Rollover های تعاملی SVG ، بر خلاف نمونه های کلاسیک ، هنگامی که کد HTML مربوطه به طور خودکار تولید می شود ، نیاز به دانش زبان جاوا اسکریپت و درک اصول اساسی برنامه نویسی شی گرا دارد.

یک پالت مخصوص برای کار با اشیاء SVG طراحی شده است تعامل SVGکه به راحتی با دستور باز می شود پنجره \u003d\u003e تعامل SVG   (پنجره \u003d\u003e تعامل SVG) - شکل. 41

با استفاده از مثال یک دکمه تعاملی ، این گزینه را برای ایجاد یک چرخش در نظر بگیرید که رنگ رنگ کتیبه ای که هنگام حرکت موشواره روی ماوس تغییر می کند و هنگام خروج ماوس از منطقه فعال ، دوباره به سیاه تبدیل می شود.

یک دکمه مستطیل شکل با لبه های گرد ایجاد کنید و یک شیب مناسب برای آن را انتخاب کنید ، برای مثال ، همانطور که در شکل نشان داده شده است. 42. شفافیت دکمه را در پالت تنظیم کنید شفاف   (شفافیت) - در این مثال ، مقدار پارامتر کدورت   (Opacity) روی 50٪ تنظیم شده است. یک کپی از دکمه درست کنید ، آن را با رنگ سبز تیره پر کنید (شکل 43) و سپس با دستور آن را به یک جسم مش تبدیل کنید. Object \u003d\u003e ایجاد مش شیب(Object \u003d\u003e ایجاد مش گرادیان) با مشخص کردن چهار ردیف و ده ستون و در لیست ظاهر(مشاهده) با انتخاب گزینه به مرکز   (به مرکز) و تنظیم مقدار برجسته   (نور پس زمینه) برابر با 100. میزان شفافیت لایه را با جسم مش تا حدود 40٪ کاهش دهید (شکل 44). شی مش را در بالای شیب قرار دهید و دکمه شبیه آن خواهد بود که در شکل نشان داده شده است. 45

شکل. 44. تبدیل یک کپی از یک دکمه به یک جسم مش

دکمه مورد نظر را با کتیبه مورد نظر تکمیل کنید و موقعیت آن را با استفاده از دکمه های مربوطه روی پالت تنظیم کنید   تراز کردن (هم ترازی). تصویر بدست آمده شامل یک لایه خواهد بود که سه جسم بر روی هم قرار گرفته است (شکل 46). برنامه های زمانبندی شده به موضوع متن مربوط می شوند ، بنابراین برای راحتی ، نام آن را به آن تغییر دهید متنبا دوبار کلیک کردن روی شی و وارد کردن نام جدید. به همین ترتیب نام لایه را از لایه 1 روی لایه   (شکل 47).

پردازش رویداد شامل استفاده از مراحل JavaScript می باشد ، بنابراین باید پرونده ای با شرح این رویه ها درج کنید. این رویداد Events.js نامیده می شود و هنگام نصب Adobe Illustrator در پوشه Sample Files \\ Sample Art \\ SVG \\ SVG ذخیره می شود. برای اتصال پرونده Events.js از این دستور استفاده کنید پرونده های Javascript تعامل SVG   (شکل 48). بعد کلیک کنید اضافه کردن   (اضافه کنید) و فایل مورد نظر را در هارد دیسک خود پیدا کنید. هنگامی که نام او در این زمینه ظاهر می شود آدرس اینترنتی   (شکل 49) ، روی دکمه کلیک کنید انجام شده   (خروج).

شکل. 48. انتخاب فرمان JavaScript Files

پس از آن ، شما باید واکنش حوادث ماوس را برای جسم تعیین کنید. متن. متن مورد نظر را در قسمت زمینه انتخاب کنید رویداد   (رویداد) پالت تعامل SVG   رویداد را انتخاب کنید همسر elemColor (EVT ، "متن" ، "# 3333FF")   - این بدان معنی است که وقتی ماوس روی جسم قرار دارد متنرنگ آن به آبی تغییر می یابد (شکل 50). برای اینکه رنگ متن پس از ترک منطقه فعال سیاه شود ، لازم است یک رویداد دیگر ایجاد شود در خانه- آن را در قسمت زمینه انتخاب کنید رویداد   (رویداد) پالت تعامل SVG. سپس در نوار عمل متن را وارد کنید elemColor (EVT ، "متن" ، "# 000000")- این منجر به بازگشت سیاه خواهد شد (شکل 51).

شکل. 51. نمای نهایی از پالت تعاملی SVG برای شی متن

دستورالعمل ایجاد شده را به عنوان فایل SVG با دستور ذخیره کنید   پرونده \u003d\u003e ذخیره به عنوان   (پرونده \u003d\u003e نوع فایل   قالب Svg، و سپس تنظیم گزینه های ذخیره فایل SVG همانطور که در شکل نشان داده شده است. 52. پس از صرفه جویی ، فقط یک پرونده منفرد با پسوند SVG دریافت می شود ، و نه دو مورد ، همانطور که در مورد rollover کلاسیک - در این حالت ، فایل Primer5.svg (پوشه Primer5) دریافت شد. با این حال ، برای اینکه کارگردانی انجام شود ، باید علاوه بر این ، پرونده Events.js را با شرح مراحل JavaScript در پوشه با پرونده SVG کپی کنید. پس از آن ، می توانید عملکرد قابلیت جابجایی را بررسی کنید - نتیجه شبیه به چیزی است که در شکل نشان داده شده است. 53

  انیمیشن SVG

از فرمت SVG نیز می توان برای انتقال انیمیشن استفاده کرد. بیایید سعی کنیم ساده ترین عنصر انیمیشن را ایجاد کنیم (در این حالت این اطلاعات در مورد شرکت خواهد بود) که هنگام حرکت به سمت جسم گرافیکی مربوطه روی صفحه نمایش داده می شود و هنگام خارج کردن ماوس از عنصر تعاملی ناپدید می شوید.

بیایید تقریباً یک سری اشیاء گرافیکی و متنی ایجاد کنیم ، همانطور که در شکل نشان داده شده است. 54. ما با کلیک کردن متوالی روی نام مورد بعدی در پالت ، همه اشیاء ایجاد شده را به روشی راحت تغییر خواهیم داد. لایه های   و وارد کردن نام دلخواه (شکل 55). توجه داشته باشید که برجسته در شکل. 56 اشیاء - Text1 ، Text2 ، Text3   و مسیر 1   - همیشه قابل مشاهده خواهد بود ، و بقیه - فقط هنگامی که روی یک شی معلق می روید متن1.

شکل. 54. تصویر اصلی

پرونده Events.js را با شرح مراحل JavaScript با استفاده از دستور درج کنید پرونده های Javascript   (پرونده های JavaScript) از پالت   تعامل SVGبا فشار دادن دکمه اضافه کردن(با افزودن پرونده مورد نظر روی دیسک سخت و کلیک بر روی دکمه) اضافه کنید انجام شده   (خروج).

پاسخ به وقایع ماوس را برای یک شی تعریف کنید متن1. یک شی را انتخاب کنید متن، در زمینه رویداد   (رویداد) پالت تعامل SVGرویداد را انتخاب کنید همسر   و در خط زیر متن را وارد کنید elemShow (evt ، "Text4")؛ elemShow (evt ، "مسیر2"). در نتیجه ، هنگامی که ماوس بر روی جسم قرار دارد متن1   اشیاء قابل رویت می شوند متن4   و مسیر2. لطفاً توجه داشته باشید که در صورت وقوع چندین کار ، باید آنها را از طریق علامت "؛" نشان دهید. سپس عملی مشابه را در این رویداد انجام دهید در خانهبا وارد کردن متنی برای آن ، که به معنی پنهان کردن اشیاء است (شکل 57).

نتیجه را به عنوان فایل SVG با دستور ذخیره کنید   پرونده \u003d\u003e ذخیره به عنوان   (File \u003d\u003e Save As) با مشخص کردن نام پرونده ، انتخاب در قسمت را انتخاب کنید نوع فایل   فرمت SVG ، و سپس تنظیم گزینه های ذخیره فایل SVG مطابق شکل. 58. پس از صرفه جویی ، پرونده Primer6.svg (پوشه Primer6) دریافت می شود. فراموش نکنید که پرونده Events.js را با این پرونده در پوشه کپی کنید. اگر فایل ایجاد شده را اجرا کنید ، نتیجه را در شکل مشاهده می کنید. 59. این تقریباً همان چیزی است که شما نیاز دارید. تنها چیزی که بخشی از برنامه های ما نبود ظاهر اولیه اشیاء بود متن4 و مسیر2 در زمان بوت شدن. برای خلاص شدن از این نقص ، هر دو داده شی را به طور همزمان انتخاب کرده و عملی را برای آنها ایجاد کنید elemHide (evt ، "Text4")؛ elemHide (evt ، "مسیر2")   در این رویداد بارگیری   (شکل 60). دوباره پرونده را ذخیره کنید و مطمئن شوید اکنون اشیاء موجود هستند متن4   و   مسیر2   فقط در هنگام حرکت در حال حرکت روی یک شی قابل مشاهده است متن1.

  انیمیشن GIF

هر صفحه وب بدون انیمیشن وب غیرقابل تصور است ، از جمله بدون Gif های متحرک. یکی از گزینه های ایجاد آنها استفاده از برنامه Adobe ImageReady است که از جمله موارد دیگر ، ایجاد انیمیشن از لایه ها را امکان پذیر می سازد. در عین حال ، خود تصویر چند لایه می تواند در برنامه های مختلف از جمله Adobe Illustrator تهیه شود.

ایجاد انیمیشن بر اساس عناصر موجود در پالت بسیار آسان است نمادها   (نمادها) توسط تیم باز شد پنجره \u003d\u003e نمادها   (Window \u003d\u003e Symbols) یا از یکی از کتابخانه های سمبل که با استفاده از دستور باز می شود پنجره \u003d\u003e کتابخانه های نمادین   (پنجره \u003d\u003e کتابخانه های نمادین).

به عنوان مثال ، سعی می کنیم اندازه هر شیء نمادی را افزایش دهیم ، مراحل اصلی روند افزایش شیء باید روی لایه های جداگانه تنظیم شود. ابتدا ، به سادگی ، اشیاء نماد را یکی دیگر از قسمت دیگر قرار دهید ، و سپس اندازه هر شیء بعدی را به عنوان مثال ، همانطور که در شکل نشان داده شده است ، افزایش دهید. 61. در نتیجه ، در پالت لایه های   یک لایه با اشیاء زیادی ایجاد می شود (شکل 62). اگر این تصویر را مستقیماً به فرمت PSD صادر کنید ، کار نخواهد کرد ، زیرا تنها یک لایه وجود دارد ، و طبیعتاً هنگام باز کردن یک پرونده PSD در ImageReady ، فقط یک لایه نیز وجود خواهد داشت. بنابراین ، ابتدا باید اشیاء را روی لایه های مختلف قرار دهید. این می تواند به روش های مختلفی انجام شود - ساده ترین راه برای انتخاب یک لایه لایه 1   در پالت لایه ها و از دستور استفاده کنید انتشار به لایه   (رها کردن به لایه ها). نتیجه حرکت هر یک از اشیاء بر روی لایه خود خواهد بود ، اما همه آنها در لایه لانه می شوند لایه 1. بنابراین ، شما مجبور خواهید بود که تمام لایه های تو در تو را به بالای پالت لایه ها بکشید تا در بالای لایه قرار بگیرند   لایه 1و سپس لایه خالی لایه 1   فقط حذف کنید (شکل 63). با استفاده از دستور ، تصویر را با فرمت PSD صادر کنید   پرونده \u003d\u003e صادرات   (پرونده \u003d\u003e صادرات) با تنظیماتی مانند شکل 64

فایل PSD ایجاد شده را در ImageReady (شکل 65 و 66) بارگیری کنید. منوی پالت را باز کنید انیمیشن   از لایه ها فریم درست کنید   (ایجاد فریم از لایه ها). در نتیجه ، پنج فریم ایجاد می شود که هر یک با لایه خود ، و پنجره پالت مطابقت دارد انیمیشن   مانند شکل شکل خواهد گرفت. 67

پس از آن مدت زمان هر یک از فریمهای ایجاد شده را تعیین کنید - در این حالت مدت 0.2 ثانیه برای همه فریم ها تعیین می شود. و سپس انیمیشن را با بهینه سازی با استفاده از دستور ذخیره کنید پرونده \u003d\u003e ذخیره بهینه شده   (پرونده \u003d\u003e با بهینه سازی ذخیره کنید). نتیجه به دست آمده ممکن است شبیه عکس باشد. 68.

استفاده از توابع برای بدست آوردن خالی هایی که به راحتی می توانید در ImageReady به راحتی تبدیل به انیمیشن شوید ، حتی راحت تر است. مخلوط های زنده نرم افزار Illustrator. این استفاده ترکیبی از Illustrator و ImageReady روند ایجاد انیمیشن های GIF را به میزان قابل توجهی سرعت می بخشد.

به عنوان مثال ، دو جسم چند رنگ دلخواه را بکشید ، و سپس آنها را با یک اتصال مخلوط با پارامترهای مناسب وصل کنید (شکل 69). استفاده مستقیم از این پرونده برای ایجاد انیمیشن غیرممکن است ، زیرا تصویر روی یک لایه واحد است (شکل 70). بنابراین ، ابتدا لازم است که هر عنصر شیء مخلوط را روی یک لایه جداگانه قرار دهید. برای انجام این کار ، در پنجره لایه های   خط را برجسته کنید منوی پالت را با کلیک روی پیکان سیاه در گوشه سمت راست بالای آن فعال کرده و فرمان را انتخاب کنید انتشار به دنباله لایه ها   (به صورت متوالی به لایه ها تبدیل شوید) (شکل 71). نگه داشتن کلید تغییر مکانلایه های ایجاد شده را انتخاب کرده و آنها را بالای لایه قرار دهید لایه 1و سپس خود لایه را پاک کنید لایه 1انتقال آن به سبد - در نتیجه ، پالت لایه ها همان شکل را در شکل می گیرند. 72

شکل. 70. حالت اولیه پنجره Layers

فایل ایجاد شده را با دستور PSD فرمت کنید پرونده \u003d\u003e صادرات   (پرونده \u003d\u003e صادرات). پرونده PSD ایجاد شده را در ImageReady باز کنید (شکل 73). توجه داشته باشید که در پنجره لایه ها تمام لایه های ایجاد شده در Illustrator ظاهر می شوند (شکل 74) و در پنجره انیمیشن   تا کنون یک فریم واحد وجود دارد.

منوی پالت را فعال کنید انیمیشنبا کلیک بر روی فلش سیاه در گوشه سمت راست بالای پالت ، و دستور را انتخاب کنید از لایه ها فریم درست کنید   (ایجاد فریم از لایه ها) - در نتیجه ، در این مثال پنج فریم ایجاد می شود ، و پنجره palette   انیمیشن   مطابق شکل شکل را می گیرد. 75. هنگام نگه داشتن کلید ، همه فریم ها را انتخاب کنید تغییر مکان، و مدت زمان مناسب فریم را تنظیم کنید - در این مثال ، زمان مشابه 0.2 ثانیه برای هر فریم گرفته می شود. سپس پرونده را با دستور بهینه سازی ذخیره کنید پرونده \u003d\u003e ذخیره بهینه شده(پرونده \u003d\u003e با بهینه سازی ذخیره کنید) با قرار دادن در لیست   نوع فایل   گزینه فقط تصاویر (*. gif). این انیمیشن شبیه به عکس خواهد بود. 76

جالب تر این است که حرکت نمی کند ، اما اشیاء مخلوط را به راحتی تغییر اندازه می دهد. به عنوان مثال ، می توانید از انتقال مخلوط قبلا ایجاد شده استفاده کنید. در این حالت ، پس از ایجاد لایه های جداگانه برای هر عنصر انتقال مخلوط ، تمام اشیاء را با استفاده از دکمه ها در بالای یکدیگر قرار دهید. مرکز تراز افقی(تراز وسط به صورت افقی) و مرکز تراز عمودی   (مرکز تراز عمودی) پالت   تراز کردن   (شکل 77).

فایل ایجاد شده را به فرمت PSD صادر کنید ( پرونده \u003d\u003e صادرات- File \u003d\u003e Export) و پرونده PSD ایجاد شده را در ImageReady باز کنید (شکل 78). فریم های انیمیشن را بر اساس لایه ها ایجاد کنید ( از لایه ها فریم درست کنید - فریم هایی را از لایه ها ایجاد کنید و مدت زمان مناسب را برای آنها انتخاب کنید (شکل 79). و سپس ، برای جذاب تر شدن انیمیشن ، فریم های موجود را کپی کنید ، اما به ترتیب معکوس - به گونه ای که ابتدا تصویر افزایش می یابد و سپس کاهش می یابد و به همین ترتیب در یک دایره (شکل 80). سپس پرونده را با بهینه سازی ذخیره کنید ( پرونده \u003d\u003e ذخیره بهینه شده- پرونده \u003d\u003e با بهینه سازی ذخیره کنید). انیمیشن حاصل در شکل نشان داده شده است. 81.

شکل. 80. حالت پنجره انیمیشن بعد از کپی کردن قاب

شکل. 81. انیمیشن به پایان رسید