02-10-12, 06:40 PM
كاتب الموضوع : silverlight
الصور المتحركة في الدوت نت Animation اللغة المستخدمة: الفيجوال بيسك
التطبيق: فيجوال استوديو 2005 و 2008
المستوي: التقييم متروك للقارئ
إعداد: مهندس / عمر أمين إبراهيم
ماذا تعني كلمة Animation
كما تعلمون الكلمة تعريفها ومفهومها بسيط جدا وهي تعني استخدام بعض الصور المرسومة في 2D بتسلسل معين لتخليق أو لصناعة حركة وهمية وبالتالي يشعر المستخدم أن الصورة تتحرك
من أشهر الملفات المستخدمة في تحريك الصور هي الملفات التي لها امتداد GIF وأيضا بعض الملفات الشهيرة الأخري وهي التي تستخدم في الفيديو تحديدا وهي MPEG و AVI
أيضا وكما تعلمون هناك الكثير من البرامج الجاهزة التي من الممكن استخدامها في صناعة ملفات لصور متحركة ومنها مثلا Windows Movie Maker وهو برنامج موجود مع نظام التشغيل في الويندوز ويمكن استخدامه لصناعة أفلام فيديو بسيطة مثلا أيضا يوجد برنامج أخر يستخدم في صناعة ملفات GIF وهو PhotoImpact GIF Animator وهناك الكثير والكثير من البرامج التي تتعامل مع Image Editing وأيضا Video Editing
كيف نقوم بعرض صور متحركة داخل برامجنا
أعتقد أسهل الطرق هي أن يكون لدينا صورة متحركة جاهزة امتدادها من النوع GIF ومصممه بأي من البرامج الجاهزة ثم نضيف للفورم PictureBox ثم ببساطة نضيف هذا الصورة الي الصفة PictureBox.Image وينتهي الأمر بسهولة وبالتالي يصبح لدينا صورة متحركة يمكن استخدامها في برامجنا
لكن كيف نفعل ذلك برمجيا؟ أو كيف نضيف صورة متحركة للفورم مثلا أو لأي كونترول أخر إن أردنا ذلك؟
هذا ما سوف نتحدث عنه هنا وهذا هو الهدف من هذا المقال
في واقع الأمر يمكننا أن نفعل ذلك باستخدام +GDI إذن كما تلاحظون أن +GDI هي كلمة السر أو المفتاح للكثير من الأشياء مثل تغيير شكل الكونترول أو تغيير شكل الفورم أو بناء الصور والتعامل معها الي أخره من الأشياء
لذلك إن دراسة وفهم +GDI شئ هام جدا لأي مبرمج.
تعلم +GDI عزيزي القارئ أضمن لك أن تكون مبرمجا رائعا
الأن لنتحدث عن كيفية صناعة صورة متحركة في الدوت نت وتحديدا باستخدام الفيجوال بيسك دوت نت
المثال الأول:
أولا: لنفتح مشروعا جديدا ونطلق عليه أي اسم وليكن علي سبيل المثال AnimationExample1
ثانيا: نضيف Timer الي الفورم رقم 1
ثالثا: نضيف للمشروع بعض الصور ليس شرطا أن تكون صور متشابه أو نضيف صورا متسلسلة حسب رغبتنا
ولكن أهم شئ أن تكون أبعاد الصور التي يتم إضافتها للمشروع متساوية الأبعاد أي تكون جميع الصور لها نفس الأبعاد من حيث الطول والعرض ويتم إضافة الصور الي Resources الخاصة بالمشروع
رابعا: نقوم بتعريف متغيران فقط لا غير.
المتغير الأول عبارة عن مصفوفة ArrayList وسوف تستخدم هذه المصفوفة كمخزن لجميع الصور
والمتغير الثاني عبارة عن Integer وهو سيكون بمثابة عداد نحدد به رقم الصورة داخل المصفوفة
خامسا: في الحدث Load الخاص بالفورم Form1 نقوم بإضافة جميع الصور الموجودة في Resources إلي المصفوفة وأيضا نقوم بجعل Timer1.Enabled = True أي نقوم بتشغيل التايمز
سادسا: في الحدث Tick الخاص بالتايمر Timer1 نقوم بإعطاء قيم للمتغير الرقمي ثم نقوم بإضافة الصور الي الفورم Background كما هو موضح بالكود التالي
كود :
Public Class Form1
Private m_Images As ArrayList = New ArrayList()
Private m_Count As Integer = 1
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
m_Images.Add(My.Resources._04_001_0001)
m_Images.Add(My.Resources._04_001_0002)
m_Images.Add(My.Resources._04_001_0003)
m_Images.Add(My.Resources._04_001_0004)
m_Images.Add(My.Resources._04_001_0005)
Timer1.Enabled = True
End Sub
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
m_Count = (m_Count + 1) Mod 5
Me.BackgroundImage = CType(m_Images(m_Count), Image)
End Sub
End Classالأن نقوم بتشغيل المشروع سنجد أن الصور تتحرك داخل الفور وبذلك نكون قد صممنا صورة متحركة وأضفناها للفورم.
أعتقد أن الفكرة سهلة جدا لكن ليست إحترافية علي سبيل المثال جرب تكبر الفورم أثناء تشغيل البرنامج ستلاحظ أن الصورة المتحركة موجودة بأكثر من مكان داخل الفورم
السبب أن الفورم له صفه هي BackgroundImageLayout وعندما نذهب الي النافذة الخاصة بصفات الفورم سنجد أن القيمة الافتراضية لهذه الصفة Tile جرب مثلا تغير هذه القيمة إما عن طريق نافذة Properties أو أن تكتب ذلك عن طريق الكود مثلا لنجعل قيمة هذه الخاصية Stretch أو Center أو Zoom ستجد أن الصورة تظهر مهتزة وليست احترافية والسبب أن هناك Flickering يحدث أثناء تغيير الصورة في خلفية البرنامج وقت التشغيل لذلك هنا علينا أيضا أن نقوم بتغيير قيمة خاصية في الفورم وهي DoubleBuffered ونجعل قيمتها True لكي نقلل من Flickering أثناء تشغيل البرنامج
نجرب ونشغل المشروع سنجد أن كل شئ تقريبا تمام لكن هل من المنطقي أن نضع الصور المتحركة في خلفية الفورم طبعا أكيد مرفوض هذا الاختيار من الأفضل طبعا أن نستخدم مثلا PictureBox وهذا ما سوف نوضحه في المثال التالي والكود لن يتغير كثيرا عن الفكرة الموجودة بالمثال الأول
المثال الثاني:
أولا: نضيف فورم أخر الي المشروع وننفذ عليه الخطوات التالية
ثانيا: نضيف Timer و أيضا PictureBox الي الفورم رقم 2
ثالثا: نقوم بتعريف متغيران فقط لا غير.
المتغير الأول عبارة عن مصفوفة ArrayList وسوف تستخدم هذه المصفوفة كمخزن لجميع الصور
والمتغير الثاني عبارة عن Integer وهو سيكون بمثابة عداد نحدد به رقم الصورة داخل المصفوفة
رابعا: في الحدث Load الخاص بالفورم Form2 نقوم بإضافة جميع الصور الموجودة في Resources إلي المصفوفة وأيضا نقوم بجعل Timer1.Enabled = True أي نقوم بتشغيل التايمز وأيضا سنضيف بعض الكود لكي نحدد بعض صفات PictureBox1 مثل خاصية Image وخاصية Size بأبعاد الصورة
خامسا: في الحدث Tick الخاص بالتايمر Timer1 نقوم بإعطاء قيم للمتغير الرقمي ثم نقوم بإضافة الصور الي PictureBox1 كما هو موضح بالكود التالي
كود :
Public Class Form2
Private m_Images As ArrayList = New ArrayList()
Private m_Count As Integer = 1
Private Sub Form2_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
m_Images.Add(My.Resources._04_001_0001)
m_Images.Add(My.Resources._04_001_0002)
m_Images.Add(My.Resources._04_001_0003)
m_Images.Add(My.Resources._04_001_0004)
m_Images.Add(My.Resources._04_001_0005)
PictureBox1.Image = My.Resources._04_001_0001
PictureBox1.Size = PictureBox1.Image.Size
Timer1.Enabled = True
End Sub
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
m_Count = (m_Count + 1) Mod 5
PictureBox1.Image = CType(m_Images(m_Count), Image)
End Sub
End Classالأن علينا أن نقوم بتجربة الفورم رقم 2 سنلاحظ أن كل شئ تمام وحتى لو قمنا بتغيير أبعاد الفورم فإن ذلك لن يؤثر علي أداء الصورة المتحركة نهائيا
