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

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

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

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

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

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

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

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

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

فكرة العمل :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

لتحميل العمل

السلام عليكم و رحمة الله وبركاته . . .

أسعد الله أوقاتكم بكل خير أحبابي، كل عام أنتم بخير وعيد أضحى مبارك.

أسأل الله بكرمه وفضله أن يتقبل منا ومنكم صالح الأعمال وأن يتقبل من حجاج بيته حجهم وسعيهم .

كونوا سعداء

مرحباً بكم مرة أخرى …

هذا تصميم كافة عناصره عبارة عن رسم رقمي بالفتوشوب، و المحاكاة خيالية وليست حقيقية تماماً وهذا يبدو في العنصر (البحر).

دونكم التصميم  وقليلاً من الشعر ..

رُعَاة َ اللَّيْلِ ما فعلَ الصَّباحُ

قيس بن الملوح (مجنون ليلى)

السلام عليكم ورحمة الله وبركاته … أهلا بكم يا رفاق

هذه عينات من الماضي أسميتها (Flowers) ، إليكم التصميم وقليلاً من الشعر …

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته …  و أهلاً بكم يا رفاق…

بعد مرور أكثر من عام على سقوط أركان “دولة” موقعي القديم فجأةً وبدون سابق إنذار ( ) من قِبل متمردي موقع استضافة hostingzoom.com، وتجدون عند أبو أديب الخبر اليقين . بدأت بعدها إعادة التخطيط والبناء لموقع جديد، وبتشجيع من بعض الأصدقاء المخلصين أستعدت قواي وحماسي وبدأت الهوينى أبني موقعي، فتارة أقول أضيف هذه الفكرة وبعد أيام أنقضها، وبين هذا وذاك قمت بتصميم أكثر من ثلاث واجهات للموقع وانتقيت ابسطها وأخفها -الاستايل الحالي-، ليكون أخف علي في الإعداد وأسرع في الظهور لضيق الموقع المخصص لتطوير الموقع.

و أشكر كل أصدقائي المخلصين الذين شجعوني على هذا العمل و وجهوا ونصحوا -كلٌ باسمه- ، وأشكر الذين تفاعلوا معي في الموقع القديم وعلقوا.

ولقد رأيت أن أبقي هذه التدوينة في القائمة الرئيسة  -الإفتتاحية- تذكاراً على بداية هذا الموقع الجديد، الذي آمل له الاستقرار والبقاء مابقيت .. كما آمل مشاركتي الآراء والنقد البناء.

أشكر مروركم، و كونوا سعداء ..

عبدالله سالم