تعلم معنا التصميم بالسويش.. خطوة خطوة

[الفيزيائية]

نأتي لرسم التفاحة:

لا تيأسي إن لم تكن الرسمة بذات الدقة المطلوبة، مع التمرين سوف يتحسن الأمر كثيرا، تأكدي من هذا.

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

تدرج الألوان في رسم التفاحة:

(1) بعد أن نتم الرسم ونقوم بتعديل النقاط بواسطة reshap (والتي ستكون عبارة عن دوائر ومربعات) سننتقل إلى خصائص الألوان من عند القائمة shap على يمين الشاشة (لنتأمل الصورة التالية):



(2) سنختار عند Fill التدريج الدائري Radial gradient، واختاري الألوان كالتالي:




(3) لننتقل الآن إلى قائمة layout والأداة fill transform


بمجرد أن نضغط على الأداة سيظهر حول الرسم مستطيل بزوايا ذات مربعات زرقاء صغيرة كالصورة:



نحرك هذا المستطيل إلى الأعلى من جهة اليسار قليلا (كما في الصورة التالية) ولاحظوا أن الذي يتحرك هو فقط تدرج الألوان وليس الشكل نفسه:



(4) سنكرر الحركة مع باقي الشكل (الورقة، ثم الفرع البني..)

(5) انتهت الصورة، نقوم بتجميعها على هيئة grouping as group وأنا أفضل أن تجمع على هذه الهيئة من أن تجمع على هيئة grouping as shap لأننا نستطيع في الأولى أن نجري تعديلاتنا حتى بعد التجميع، أما في الثانية فلا يمكن. وعلى العموم الاختلاف بين الاثنين يظهر أكثر عند إضافة الـ effect لهما.

** أرجو أن يكون الشرح الآن أوضح، وأن يكون قد تجلى ما خفي عليك يا شروق، وأهلا دوما بأسئلتك، وأنا لا أتضايق منها أبدا.

[الفيزيائية]

** لنأتي الآن على الواجب الذي ذكرته..

طريقة عمل الزر بالصوت وارتباطه بظهور صورة أو نص معين:

(1) سنصنع زراً أولا.

(2) في الواجب قمت بعمل تكبير قليل للزر عند إمرار الفأرة عليه (أي من عند over state) بأن كبرت حجم الخط بمقدار العدد 2 (يعني إذا كان الأول 18، فالثاني عملته للتكبير 20).

(3) لربط الصوت مع الزر بمجرد النقر عليه قمت بالتالي: من عند قائمة action التي على يمين الشاشة اخترت الحدث on press من قائمة event، ثم عندما تحولت قائمة event إلى قائمة action قمت باختيار الأمر play sound، وأدرجت ملف الصوت المطلوب كما فعلنا وتحدثت عنه سابقاً.
أي من المفروض أن يكون كالتالي:



(4) لأجعل الزر يقوم بإظهار صورة أو نص معين سأقوم بإدراج الصورة أو النص، وأجعل لها من عند مسطرة الزمن timeline التأثير place (أو التأثير fade in.. أو أي تأثير آخر) من قائمة effect بحيث أجعلها تظهر (أو يبدأ ظهورها) في الفريم الثاني (وليس الأول)، أقصد أن هذا التأثير سيكون في الفريم الثاني.

(5) في الفريم الأول سأضع الأمر stop للمشهد، بحيث يتوقف هنا العرض، ولا ينتقل إلى الفريم الثاني إلا بأمر آخر أضعه (تأمل الصورة التالية)



تابع الخطوة التالية.

(6) سأضع للزر أمرا يجعله يتحرك إلى الفريم الثاني عند الضغط عليه، وذلك بأن أختار goto frame 2 of scene 1 (ولا ضير أن يكون هناك أمرين للحدث الواحد  في الزر الواحد) .كما في الصورة التالية:




إذا الآن عندي زر يحتوي على أمر إصدار صوت بمجر النقر عليه، وأمر آخر وهو الانتقال إلى الفريم الثاني (وهو الفريم الذي ستظهر فيه الصورة أو النص).

(7) سأكرر العملية مع الزر الثاني، ولكن سيكون هناك اختلاف في الفريم الذي سينتقل إليه لتظهر صورة أخرى، لأني سأجعل كل صورة تظهر في فريم مختلف. (العملية نظريا متشابكة، ولكنها عمليا سهلة ومسلية جدا)

أرجو أن يكون الشرح واضحا.. والعملية سهلة وناجحة..

[الفيزيائية]

والآن نبدأ درسنا

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

حكمة اليوم:
من علت همته، طال همه

[الفيزيائية]

* كنا تكلما بالأمس عن ميزة sprite وكيف استخدمتها في عمل loop منفصل عن الفلم.

قبل أن ننتقل إلى كيفية عمل القناع، سنذكر ملاحظة في غاية الأهمية:

إدراج صورة متحركة بامتداد .gif للبرنامج:

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



السبب أن الصورة المتحركة يُدرجها البرنامج على هيئة sprite وبعدد فريمات معينة يحكمها زمن الصورة المتحركة.

لذلك عند إدراج صورة متحركة، يجب أن أقوم بتحديد جميع الفريمات بأن أضغط على الزر select all frames من النافذة التي فتحت لك أولا، وستجد حينها أن جميع الفريمات قد حدد بالرمادي، ثم اضغط import.

* قم بإدراج صورة متحركة بامتداد .gif وتتبع الخطوات السابقة، ثم افتح الـ sprite من العلامة (+) بجانب العين في القائمة outline ولاحظ كيف أدرجت هذه الصورة، فلعل هذا يساعدك على فهم طبيعة الـ sprite أكثر.




لننتقل الآن إلى الجزء الأكثر إمتاعا في موضوعنا اليوم:

كيفية عمل القناع mask:

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

لنبدأ بفكرة مبسطة...

[الفيزيائية]

تطبيق: عمل نص بألوان متداخلة:

(1) أدرج نصاً.

(2) حوله إلى sprite (شرحنا ذلك سابقا).

(3) افتح الـ sprite من علامة (+) بجانب العين في قائمة outline

(4) أنت الآن داخل الـ sprite.

(5) ارسم مستطيلا بحيث يغطي الكلمة تماما.

(6) غير ألوان المستطيل وأجعل لها تدرجا خطيا مثلا linear gradient. وغير ألوانها كما تشاء.

(7) حدد على sprite من قائمة outline لتظهر لك القائمة الخاصة بها من جهة اليمين، هناك خيار loop وقد تكلمنا عنه بالأمس، وهناك بجانبه الخيار Mask ضع علامة صح بجانبه.




( أغلق الـ sprite من علامة (-)

(9) قم بعمل play scene أو play movie وشاهد النتيجة الرائعة



(10) من الممكن إدراج صورة بدلا من رسم مستطيل وتغيير ألوانه.

(11) يمكن جعل الألوان تتحرك يمينا ويسارا، انتقل إلى التطبيق التالي:

[الفيزيائية]

تطبيق: عمل نص بألوان متداخلة *** متحركة***:

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

(2) اجعل أول المستطيل يغطي النص، أي لا تضع منتصف المستطيل فوق منتصف النص، لأنك ستحرك المستطيل.

(3) حرك المستطيل بجعل عليه الأمر move ثم تحريكه إلى أن ينتهي المستطيل مع أو كلمة للنص.

(4) لمزيد من الدقة، اجعل المستطيل يتحرك مجيئة وذهابا، أي أثر عليه بتأثير آخر move بجانب الـ move الأولى ولكن اعكس الحركة هذه المرة.

(4) عندما تضع علامة صح على mask ضع علامة صح أيضا على loop.

(5) أخرج من الـ sprite وشاهد النتيجة.






إذا فكرة الـ mask هي أن لديك قالبا، وغطاء للقالب، الذي سيبدو لنا هو لون الغطاء، وشكل القالب، أي لن يظهر لنا لون القالب أبدا (لم يظهر لدينا لون النص الأول الذي كتبنا به)، كما لن يظهر لنا شكل الغطاء لأنه سيأخذ شكل القالب (وهو شكل المستطيل الذي رسمناه)، بصيغة أخرى؛ كأني أصب خلطة ملونة فوق القالب

لذلك يجب علينا التنبه جيدا إلى ترتيب القالب والغطاء (أو الخلطة). فيجب أن يكون القالب (النص مثلا) أسفل الغطاء (المستطيل مثلا). ولا ينفع أن أعكس هذا (وجربوه لتروا بأنفسكم).



سنكتفي اليوم بهذا.

أجيدوا عمل التطبيقين الماضين لأن تطبيقات الغد لن تكون بهذه البساطة

الواجب:

فكروا كيف يمكن عمل النص المائي التالي بواسطة الـ mask ..



سوف نشرح فكرتها غدا.. ولكن سأعطيكم فرصة للتفكير..



أستودعكم الله

[الفيزيائية]

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

حكمة اليوم:
كل شيء يرخص إذا كثر، إلا العلم فإنه إذا كثر غلا

[الفيزيائية]

لنكمل ما بدأناه في الأيام الماضية، وسنبدأ بالتطبيق الذي انتهينا عنده بالأمس:

تطبيق: التموج المائي

1. ندرج صورة.

2. ننسخ الصورة ونضعها في الإتجاه المعاكس لها (بالدوران بواسطة modify ثم transform ثم flip vertical.

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

4. أحول الصورة الثالثة إلى  sprite (وشرحت الطريقة سابقا)

5. الآن داخل الـ sprite أقوم برسم عدد من المستطيلات التي سوف تغطي الصورة، تأمل الصورة التالية:



احرص على أن تكون المستطيلات تغطي أكثر من حجم الصورة.

6. نقوم بالتحديد على جميع الصور، ثم تحويلها إلى grouping as shap (ولن يجدي أن نجمعها grouping as group).

7. نقوم بعمل التأثير alternate من قائمة effect للمستطيلات (وليس للصورة نفسها).

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

9. أغلق الـ sprite وعد للمشهد الأصلي.

10. حدد على الـ sprite، ثم من القائمة التي ستظهر على يمين ضع علامة صح على mask وأيضا على loop.

11. أخيرا، قم بتحريك الـ sprite قليلا إلى أعلى (حركها بمقدار حركة أو حركتين فقط بالأسهم التي في لوحة المفاتيح).

12. شاهد العمل play scene.

[الفيزيائية]

تطبيق: الورود المختفية

شاهد العمل التالي، لا يغرك كونه فارغا تماما، بل مرر الفأرة (فقط تمرير) على الصفحة وشاهد ظهور الورود واختفاؤها.



الطريقة:

1. ارسم شكلا (وردة، دائرة، مربع.. ). الوردة التي استعملتها هي موجودة إذا قمت بإدراج نص، ثم كتبت عليه { (موجود في الحرف ج ولكن اجعل الكتابة بالإنجليزي)، ثم حولت الخط إلى wingdings. (وستجد أن هذا الخط يحتوي على عدد من الصور يمكن استعمالها إن أردت).

ملاحظة: إذا أردت أن تلون الوردة بأكثر من لون، حول النص إلى شكل عن طريق grouping as shape ثم تعامل معها ولونها كأنك تلون أي مربع أو دائرة.. (من قائمة shap على يمين الشاشة).

2. ضع هذا الشكل (لنقل الوردة) في إحدى زوايا مربع العمل، ثم حوله إلى sprite.

3. افتح الـ sprite.

4. أدرج أي تأثير (في العمل استعملت التأثير Blur من قائمة effect).

5. اجعل هذا التأثير يبدأ من الفريم رقم 1، وليس من الفريم 0.

6. ارسم دائرة بحجم الوردة (أو الشكل) على أن تجعل الدائرة بلا ألوان وبلا حدود، فالهدف الآن عمل زر فوق الوردة يتحكم بظهورها دون أن يكون ظاهرا أثناء العرض.



(في الصورة لم أخفي لون الدائرة والحدود حتى أوضح ما أقصده برسم دائرة بحجم الوردة، ولكن قم أنت بإخفاء الألوان)

7. للدائرة المخفية قم بعمل الـ action  التالي:



8. في مسطرة الزمن ضع الأمر stop عند الفريم الأول للمشهد، انظر الصورة التالية:



9. أغلق الـ sprite وقم بنسخ هذه الصورة عدد من المرات بحيث تغطي مربع العمل كله:



10. شاهد العمل play scene.

11. هناك أفكار كثيرة يمكن تطبيقها تشبه هذا التطبيق، تأمل هذا المثال (أمرر الفأرة):



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






سنكتفي بهذا اليوم

أتمنى للجميع التوفيق، موعدنا غدا بإذن الله مع تطبيق أخير للـ sprite لننتقل بعدها إلى ما هو أكثر دقة وذكاء ومهارة...

الواجب:
تدرب جيدا وكثيرا، فالآتي يعتمد على حسن تدريبك..

[الفيزيائية]

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

[شروق]

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

[شروق]

وهناك اعمال اخرى مثل
اما الاخير ففيه كثير من الملاحظات ارجوا التعليق عليها جميعا
وشكرا لك مرة ثانيه  '>

[الفيزيائية]

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

ما شاء الله تبارك الله..

أولا: مبارك حل مشكلة الخط.

ثانيا: ممتاز بالنسبة للبطاقة الأولى.

ثالثا: جيد جدا.. ولكن يبدو أنك لم تضعي الدوائر الخلفية المتحركة في sprite وتجعليها تتحرك في loop حتى تكون منفصلة عن النص الذي تضعينه أمام الدوائر...

فكرة الدوائر كانت باختصار: هي عبارة عن 3 دوائر، كل دائرة تدور في اتجاه مخالف عن التي بجوارها، أحسنت في عمل التدريج الخطي للدائرة الأولى. وللقيام بعملية التدوير بشكل أكثر دقة، قومي بعمل move من قائمة effect ثم أديري الدائرة بواسطة modify ثم transform ثم rotate 180  أي ستديرينها نص تدوير، ثم قومي بعمل move أخرى بجانب الـ move الأولى، وأديريها 180 درجة أخرى، والسبب أنك إن قمت بعمل التدوير 360 رأسا فإن البرنامج يتعامل معها وكأنك لم تديرينها أبدا، وسترينها ثابتة.

والآن تأكدي عند تدوير الدائرة التالية أنك تديرينها بعكس الإتجاه، ربما يفضل أن تستخدمي أداة rotate من قائمة layout...


تبقى ملاحظة مهمة: عند عمل التدوير تأكدي أن زر perview frame  هو للداخل حتى يفعّل عملية التدوير. (أو تأكدي من وجود المؤشر الأحمر على المسطرة)


بالتوفيق دوما..
'>

[الفيزيائية]

أما الصور الطفولية الرائعة، فهي ممتازة، ولكن فقط أريد التأكد لأني شعرت أن عندما أضغط على آخر صورة فإنها لا تنتقل إلى الصورة التالية رأسا؟؟ هل هناك مسافة بين كل stop وآخر؟؟ أم أنك وضعتها في فريمات متتالية؟
وكان إدارج صوت الزر ممتازا..

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

تحياتي لك، أرجو أن أكون قد استطعت إيصال وجهة نظري إليك..

[شروق]

السلام عليكم
كيف الحال ان شاء الله بخير
اشكرك اختي على ما قدمت من توضيح بس الدائرة كانت واحده فقط
وعندي لك سؤال كيف يتم التدوير العكسي ما ضبط معي  وها عمل اليوم