أهلاً بكم أيها الأصدقاء الأوفياء ..

في حوار لي مع أحد الأصدقاء وقد سألني: هل يمكن محاكاة أيقونة الانتظار في الفيسبوك أو (Facebook ajax icon)؟ فأجبته بنعم، وبعد شرحي للطريقة له طلب مني تدوينها في المدونة، فمن كان يبحث عن ذلك أرجو أن تفيده هذه التدوينة.

وقبل البدء في الشرح أريد أن أوضح بعض النقاط المهمة :

- الموضوع كما هو واضح “محاكاة” أي محاولة لتبسيط فكرة العمل، وإن كان البعض يراها مطابِقة 100% فأنا أرى أنها لا تُعد سوى محاكاة.

- الخطوات المتبعة هي عبارة عن قراءة خاصة (على أقل تقدير) ولا أعلم إن تم شرحها بنفس الخطوات في أي موقع آخر، وعليه فلا مانع أن تتجاوز بعض الخطوات وتعدل في أخرى حسب أمكانياتك ومهاراتك.

- تجاوزت شرح بعض المهارات الجانبية التي ليس لها علاقة مباشرة بفكرة العمل، على افتراض أن من يريد تطبيق هذا العمل يفضل أن تكون لديه تلك المهارات.

- من أراد أن يطبق العمل فيفضل أن يكون لديه فهم مسبق بطرق التحريك في الفتوشوب (Animation) .

- مساحة العمل، أحجام العناصر والألوان مقترحة وليست ضرورية.

- حقوق الدرس محفوظة وأرجو ذكر المصدر عند النقل.

فكرة العمل :

العمل (الصورة) عبارة عن تموج أفقي، مقسم على ثلاث مستطيلات عامودية، بحيث يبدأ التموج من اليسار إلى اليمين، ويكون التموج على ثلاث تأثيرات (تموجات)، تأمل الصورة البطيئة التالية لأكثر من مرة وحاول فهم ما سبق:

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

ولا أنسى هنا أن أنوه لأمر هام جداً، تلاحظ من السابق أن التموج ليس على مستوى اللون فقط (إذ أن ذلك ممكن) ولكن التموج على مستوى حجم الطبقات كذلك؛ لذا تلحظ بأن أحجام التموج متدرجة ويبدأ من التموج الأول إلى الثالث حيث أن الثالث يساوي حجم (الطبقة الرئيسة)!. وهنا قد يسأل سائل: ما فائدة وجود (الطبقة الرئيسة) مادام أن ليس لها علاقة بالتموج؟! سأجيبك بعد أن تتأمل الصورة التالية:

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

خطوات العمل (تصميم):

ملحوظة: لا تقلق كثيراً فسأرفق ملف العمل كاملاً بإذن الله .

بعد فتح مساحة العمل بالحجم المناسب -أفضل وضع خطين دليلين لتوضيح نقطة مركز مساحة العمل- كما يلي:

ثم قم برسم المستطيلات الثلاث على التوالي، ولتكن البداية من منتصف مساحة العمل مع (الطبقة الرئيسة):

ثم (التموج الثالث) :

ثم (التموج الثاني) :

ثم (التموج الأول) :

ثم قم بجمع الطبقات الأربع تحت مجلد واحد -للتنظيم وسهولة العمل- وقم بتسميته بما تريد وفي المثال قمت بتسميته (MED GROUP) :

ثم قم بنسخ المجلد ولصقه مرتين، حتى يظهر العمل بالشكل التالي :

ثم أعد تسمية المجلدين الجديدين بما يناسبك، وسيظهر (جانب الطبقات) قريباً مما يلي :

خطوات العمل (تحريك) :

الآن توجه إلى (جانب الـ Animation)، ثم قم بإنشاء 6 فريمات كما يلي :

ثم قم بالمرور على كل فريم و طبق ما يلي :

الفريم الأول:

الفريم الثاني:

الفريم الثالث:

الفريم الرابع:

الفريم الخامس:

الفريم السادس:

بعد تطبيق جميع ما سبق، سيظهر لك (جانب الـAnimation) قريباً مما يلي:

ليظهر العمل أخيراً بالشكل التالي

لتحميل العمل

Tags: ajax icon, facebook, صورة اجاكس