+98 21 888 10 819
شبکه دی

ورود اعضاء

شناسه کاربری:
رمز عبور:

مشتری خود را
تنها نگذارید

نرم افزار جامع
پشتیبانی هما

اطلاعات بیشتر

کد: 1502 تاریخ انتشار: 1392/12/26
آموزش طراحی سایت با استفاده از Adobe Edge

آموزش طراحی وب سایت این قسمت ساخت یک بنر متحرک ساده در Adobe Edge :

در صورتیکه قصد طراحی وب سایت با استفاده از نرم افزار Adobe Edge را دارید بعد از شروع برنامه صفحه آغازین Intro آن را مشاهده خواهید نمود:

در قسمت سمت راست توضیحاتی کلی درباره نرم افزار داده شده که با کلیک بروی گزینه quiet این صفحه در هنگام باز کردن برنامه نمایش داده نمی شود .
در سمت چپ پروژه های اخیر شما نمایش داده می شود و گزینه ای وجود دارد به نام Create New با کلیک بروی آن می توانید یک پروژه و سایت جدید بسازید .

روی این گزینه کلیک کنید , با کلیک بروی این گزینه صفحه زیر به نمایش در خواهد آمد .

اگر با نرم افزار Adobe Flash کار کرده باشید استفاده از این نرم افزار برای بسیار ساده خواهد بود .

قسمت سفید رنگ وسط Stage نام دارد و صفحه سایت شما است , در سمت چپ تنظیمات (Properties) و در بالای تنظیمات نوار ابزار که شامل Select Tools, Transform Tool, Clipping Tool, Rectangle Tool, Rounded Rectangle Tool, Ellipse Tool, Text Toolمی باشد قرار دارد .

در پایین Timeline قرار دارد که می توانید انیمیشن خود را آنجا کنترل کنید ,در سمت راست Elementهایی که خواهید ساخت قرار می گیرند.

البته می توانید برای خودتون از گزینه Window > WorkSpace > New WorkSpace یک محل کار به سلیقه خودتون ایجاد کنید .
اشاره به این نکته خالی از لطف نیست که هر عنصری که شما در Stage بسازید به صورت کد HTML, CSS, JavaScript ایجاد خواهد شد.
حالا برای ساخت یک بنر متحرک بروی گزینه Rectangle Tool کلیک کنید و بروی Stage به اندازه بنر دلخواهتون یک مستطیل رسم کنید , پس از این کار در قسمت Timeline شما به صورت اتوماتیک یک لایه به نام Rectangle ایجاد خواهد شد که می توانید با دابل کلیک نام این لایه را به نام دلخواه تغییر دهید سپس در قسمت Properties می توانید استایل مورد علاقه مثل رنگ, سایز, ... خیلی از تنظیمات دیگر را تغییر دهید .

خب حالا که بنر را ساختید برای به حرکت در آوردن آن باید به قسمت Timeline رفته و لایه ای که می خواهید به حرکت در آورید کلیک کنید در همان قسمت گزینه ی مربع شکل کوچکی وجود دارد که تولتیپ آن Add Keyframe می باشد , اکنون که خط زمان روی 0 می باشد , روی این گزینه کلیک کرده و با کلیک راست بروی لایه مورد نظر و Add Keyframe مورد Background-color را انتخاب کنید , با اینکار شما به Edge Animated می گویید که در ثانیه 0 که سایت بالا می آید بنر شما رنگ مثلا مشکی داشته باشد , حالا خط زمان را به میزان زمانی که دوست دارید عملیات حرکت و تغییر رنگ و هر حرکت دیگری که دوست دارید انجام بدهید جلو بکشید و دوباره بروی Add Keyframe کلیک کنید و مانند مراحل قبل روی لایه کلیک راست کرده Add Keyframe و background-color را به رنگ مورد نظر خودتان تغییر دهید برای حرکت نیز می توانید Top را تغییر دهید.

البته برای ساخت انیمیشن بهتر می توانید با کلیک بروی Timeline عنصر مورد نظر از Easing ها استفاده کنید .

برای دیدن نتیجه Ctrl + Enter را زده تا سایت در صفحه مرورگر Default شما باز شود و اکنون می توانید پروژه خود را ذخیره نمایید پس از ذخیره کردن پروژه فایل ها بصورت تصویر مقابل ذخیره می شوند که فایل HTML بنر شما خواهد بود .

  • نویسنده: آرش یزدانی
منبع: دی تلکام
آدرس منبع: http://day.ir/articles/webdesign

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