الحركة ( Animation )

موضوع: الحركة ( Animation ) السبت مارس 24, 2012 9:28 am

.
.
( Animation ) الحركة

بدايةً لابد أن نعرف أن الفوتوشوب برنامج للتصميم بالدرجة الأولى وبالنسبة للحركة فهي جزء جانبـي منه
وليس رئيسي وتوجد برامج خاصة بالحركة ومن أقواها برنامج الفلاش .. وفي هذا الدرس بعون الله تعالى
سنتعلم كيف نحــــرك عناصر التصميم عن طريق الفوتوشوب وطريقة حفظــــها بالصيغة المنــــــاسبة لها
إذًا فلنستعد ونتوكل على الله ...

نافذة الحركة :-
في الإصدارات الأولى للفوتوشوب كانت الحركة لها برنامــــج خــاص يسمى
بـ الإيميج ردي Image Ready ولكن تم دمجه مع برنامج الفوتــوشوب في
برنامج واحد ...

ولكي نقوم بالحركة لابد أن نقوم بإظهار نافذة الحركة ويكون إظهـــارها
كالآتي :
من القائمة الرئيسية Window في الصورة التالية نختار الأمـر Animation
ستظهر لنا بعدها النافذة التالية وهي النافذة الخاصة بالحركة ...

الحركة ( Animation ) 5894f43920ad416f

ويجــــــــب علنيا أن ننتبه لطريقة إظهار هذه النافـــذة لأننا سنستخدمهـــا
في تطبيقات هذا الدرس ...

وقبـــــــــل أن نــــدخل في التطبيــــقات على الجمـــــيع الإطــــلاع علــــــى
الدرس الأول ...

الحركة ( Animation ) 0384f446613d2ec1

تطبيقات على الدرس :-

التطبيق الأول
نقوم بفتح عمل جديد بأي مقاس ثم نقوم برسم دائرة ونكتب عليها أي نص كما في الصـــــورة التالية

الحركة ( Animation ) 6254f43930acbd3c

مع العلم أن الدائرة في طبقة والنص في طبقة أخرى كما في الصورة التالية ...

الحركة ( Animation ) 0404f43930b110f3

بعد ذلك نقوم بإظهار نافذة الحركة وذلك بالضغط على الأمر Animation مـــن القائمة الرئيسية Window
ستخرج لنا النافذة كما في الصورة التالية ...

الحركة ( Animation ) 3284f43930b3feae

عند ذلك نقوم بإخفاء طبقة النص وذلك بالضغط على مكان العين والمحدد باللون الأحمــــــــر في الصورة
التالية

الحركة ( Animation ) 6474f43943667488

سنلاحـــــظ أن النـــص اختفــــــى من طبــــــقة الحـــــركة كمــــــا في الصـــورة التالية
والمحددة باللون البنفسجي ..

الحركة ( Animation ) 0004f4394368108d

بعد ذلك نقوم بإنشاء طبقة حركة جديدة وذلك بالضغط عـــلى الزر المحــــدد باللون الأحـــمر في الصورة
التالية مع العلم أن الزر المحدد باللون الأزرق هو الزر الخاص بحذف طبقة الحركة ..

الحركة ( Animation ) 7554f439436da4a5

سنلاحظ بعدها ظهور طبقة حركة جديدة كما في الصورة التالية ...

الحركة ( Animation ) 8324f439438de6db

بعد ذلك نقوم بإظهار طبقة النص وذلك بالضغط على مكان العين والمحدد باللون الأحمــــــر في الصورة
التالية

الحركة ( Animation ) 0784f4395b751dbc

سنلاحـــــظ أن النـــص ظهر في طبــقة الحـركة الثانيـــــة كمــــــا في الصـــورة التالية
والمحددة باللون البنفسجي ..

الحركة ( Animation ) 6234f4395b794421

بقي الآن أن نتحكم في سرعة الحركة ويجب أن نعرف أننا نستطيع التحكم في سرعة الحـركة لكل طبقة
من طبقات الحركة وذلك بالضغط على السهم الصغير الموجود في أسفل كل طبقة كـــــما في المربـــع
المحدد باللون الأحمر في الصورة التالية

الحركة ( Animation ) 7204f4395b7c4902

وبالضغط عليه تخرج لنا قائمة فيها عدة خيارات كمــــا في
التالية نختار منها ما يناسبنا مع العلم ان الأرقام هنا بوحدة الثانية ...
الحركة ( Animation ) 9974f4395b9b668e

وفي هذا التطبيق إخترت خيارات السرعة كما هي موضحة أمامنا في الصورة التالية وأود أن أشير إلى
نقطة مهمة جدًا

وهي القائمة المحددة باللون الأحمر في الصـــورة التالية وهــــي تحتوي على ثلاثة
أوامر فالأمر Once يعجل الحركة تتم مرة واحدة فقط أمـا الأمر Forever يقوم بإعادة الحــركة بإستمرار
وهو الخــــيار الأفضل أما الأمر Other فنستطيع مـــن خلاله ان ندخل عـــدد مرات تكرار الحــركة وفي هذا
التطبيق سأختار الأمر Forever وهو الأفضل ...

الحركة ( Animation ) 6874f4396e199e56

والآن انتهينا مــــــــن عمل الحركة بقي الآن أن نرى نتيجة العمل كل ما علينا هو الضغط على الزر المحـدد
باللون البنفسجي في الصورة السابقة فتكون النتيجة كما في الصورة التالية حيــــث سنـــــلاحظ أن
كلمة “ أهلا بكم ” تظهر وتختفي ...

الحركة ( Animation ) 9834f43973001959

استفدنا من التطبيق الأول :-
أحببت أن أبدأ بالتطبيق في أول الدرس دون شرح مسبق لأنه عندما نبدأ بالتطبيق سنفهم مباشرةً طــريقة
تحريك العناصر في الفوتوشوب وما طبقناه فــي التطبيق الأول يسيري على جميع العناصر فلــيس شرطًا أن
تكون الحركة على عنصرين أو يكون عدد طبقات الحركة طبقـتين كمــــا فـــي التطبيق الأول وإنمـــا الأمر
مفتوح وعندما نفكر قليلاً سنبتكر أفــــكار جديدة للحركة فالأمر يحتاج إلى عقول إبداعية فقط ...

استفدنا من التطبيق الأول :

- أننا نقوم بالتصميم أولاً ثم بعد الإنتهاء من التصميم نقوم بإضافة الحركة ...
- أن الحركة عبارة عن ظهور عناصر وإختفاء عناصر ولهذا ذكرنا في البداية أن الحركة في هذا البرنامج
محدودة ...
- أن هناك طبقات للحركة نتحكم من خلالها في الحركة ...
- في كل طبقة من طبقات الحركة نستطيع إظهار أكثر من عنصر وإخفاء أكثر من عنصر ...
- أننا نستطيع التحكم في سرعة الحركة لكل طبقة من خلال اختيارنا لعدد الثواني ...
- أننا نستطيع التحكم في عدد مرات تكرار حركة التصميم ...

ملاحظة هامة جدًا :
عنــــدما نريد حــــفظ هذا العـــمل المتحرك نحفــظه بصيغة GIF و لمعرفة ذلك بالتفصيل يرجى مراجعة
الدرس الأول ...

التطبيق الثاني
نقوم بفتح عمل جديد بأي مقاس ثم نقوم بإضافة أي عنصر وفي هذا التطبيق ســـأقوم برسم مستـــطيل
كما في الصورة التالية

الحركة ( Animation ) 2764f4398dd51035

وفي طبقة واحدة كما في الصورة التالية

الحركة ( Animation ) 0654f4398dddedef

وبعدها نقوم بإظهــــــار نافــــذة الحركة كما في الصورة التالية ...

الحركة ( Animation ) 9664f4398de0ba83

بعد ذلك نقــــوم بإنشاء طبقة حركــــة جديدة كــــما في الصــــورة التالية

الحركة ( Animation ) 9074f4399ca3a6bc

وبعد ذلك نقوم عن طريق أداة التحريك بتحريك المستطيل إلى أسفل اليمين كما في الصورة التالية

الحركة ( Animation ) 6104f4399c9e0ef7

سنــــلاحظ أن مكان المستطيل قد تغير في طبقة الحركة الثانية كما في الصورة التالية

الحركة ( Animation ) 2934f4399ca6105c

ثم نقوم بالضغط على طبقة الحركة الأولى وبعدها نضغط على الزر المحدد باللون الأحمر كما في الصورة
التالية

الحركة ( Animation ) 5374f439b0334851

ستظهر لنا النافذة كما في الصورة التالية حيث أدخلت الرقم 5 في خـــــانة Frames to Add
وهي الخانة الخاصة بعد الطبقات التي سيتم إضافتها حتى يصل المستطيل من مكانه في الطـــبقة الأولى
إلى مكانه في الطبقة الثانية وهنا الرقم 5 على سبيل المثال فالأمر حسب رؤية كل مصمم ..

وهذه النافذة تحـتوي على عدة خــيارات يمـــــكــــننا الإستفــــادة منــــها ولكني لن
أستطيع سرد كل هذه الخيارات سأتــــــرك الأمر لكــــم عليكـم التجـربة وأعـــــتقد أن الخيـارات
واضحة نوعًا مّا ...

الحركة ( Animation ) 4674f439b034ded1

بعد ذلك نقوم بالضغط على OK ستتكون 5 طبقات إضافية بين الطبقتين كما في الصورة التالية ...

الحركة ( Animation ) 0754f439b03c3d96

الآن نقوم بالضغط على هذا الزر ( الحركة ( Animation ) 7814f439ce7a0aef

) لنرى النتيجة النهائية لهذا التطبيق كمــا في الصــــــورة التالية
حيث سنلاحظ أن المستـطيل بدأ من مكانه في الأعلى وتحرك حتى وصل إلى مكانه في أسفل اليمين ...

الحركة ( Animation ) 9614f439ce8284d7

استفدنا من هذا التطبيق :-
أنه عن طريق هذا الخيار ( الحركة ( Animation ) 1174f439ce7aa6e5

) يمكننا تحــريك العنـــاصر من مـــكانها إلى أي مكان نحدده على التصميم
كما أننا نتحـــكم في عدد طبقات الحــــركة وذلك حسب العدد الذي ندخــله في خـــــانة Frames to Add
وهذا العدد يكون حسب رؤية كل مصمم ...

وأيضًا أنتم بدوركم عليكم محاولة إبتكار أفكار جديدة ....

.. وفقكم الله تعالى ..

الحركة ( Animation ) 0384f446613d2ec1

wah <3

.
.
شكرا على المرور

واهلا بيك في المنتدى
المنتدى نور بوجودك
Very Happy

.
.
danxxxxx.... Very Happy

.
.
you welcome cheers