[2] دورة تصميم موقع متكامل بالفلاش !!!

[أسامة العاني]

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

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

نبدأ اليوم بأول درس تعريفي للفلاش وقد تلاحظون ان جميع الدروس ستكون سريعة بغية الدخول في صلب موضوع الفلاش لغرض الاستفادة باسرع وقت لتعلم الفلاش ومزاياه .

تقريبا غير مهم استخدمكم للاصدار برنامج الفلاش ،
ولكني افضل استخدام النسخة FlashMx 6

فعند تشغيل برنامج الفلاش ، ستظهر امامكم العديد من مكونات البرنامج ، وقبل ان نبدأ بشرح البعض منها لنبدأ بالتعرف على الفلاش ومزاياه في سطور :

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

وعندما تتعلم الفلاش فمن الضروري جدا ان تميز بأهم ثلاثة نقاط يعتمد عليها مبدأ التعامل مع هذا البرنامج ، فعندما تبدأ العمل مع الفلاش سيكون بمقدورك انشاء ثلاثة عناصر بشكل اساسي وهي :
- المفاتيح Buttons ، وهي المفاتيح والازرار التي تجعلك تتحكم بصفحات الموقع على سبيل المقال للانتقال من صفحة الى اخرى . او لتشغيل رابط عن الضغط عليها.
- جسم يتحرك في مكانه Graphic ، وهم رسم تجعله قابل للحركة الكرتونية في برنامج الفلاش ، ولكنه سيتحرك في مكانه فقط . وعلى سبيل المثال تحريك مروحة ، او تحريك جناحي طائر متوقف عن الطيران .
- جسم له القدرة على التحرك من مكان الى اخر Video Clip : بحيث انك تستطيع ان تتحكم بحركة هذا الجسم لينتقل من مكان الى مكان آخر ، وعلى سبيل المثال فانك تجعل طائر يرفرف بجناحيه يطير ويتحرك داخل ملف الفلاش الحالي ، او انك تجعل كرة تتحرك من مكانها الى مكان اخر.

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

- حركة باستخدام مساعدات المسار Guidelines ، بحيث انك تستخدم خطوط مستقيمة او منحنيات ترسمها في الفلاش نفسه وتجعل الجسم يعتمد عليها ليسير وكأنها طريق وهمي لحركته .

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

وهنالك اساليب مختلف ة للتعامل مع الصوت وانواع الاصوات والصور في الفلاش سنتطرق الى ذلك كله ان شاء الله في الدروس القادمة بشكل دروس متسلسلة.

وقبل ان ننهي الدرس ، اود ان اعطي لمحة بسيطة وواضحة عن الحركة وطريقة عمل الحركة في الفلاش .
لوانك تشغل برنامج الفلاش وتلاحظ ماحولك ، ستجد مربع بلون أبيض ، وهذه هي مساحة العمل التي نرسم بها ونصمم عملنا . كذلك فانك ستجد في الاعلى شريط يشبه المسطرة يسمى بشريق الوقت Timeline ومن خلال هذا الشريط نستطيع ان نراقب الحركة في الفلاش ، ومن خلاله نستطيع السيطرة على وقت الحركة وتوقيتها .
لو تدقق النظر اليه ستجده مقسم الى تقسيمات عليها ارقام ، فكل جزئ في هذا الشريط (كل مسافة بين خطين) هي عبارة عن مقطع Frame .
فلعمل حركة تستمر لمدة ثانية واحدة ، فانك يجب ان تستخدم 30 مقطع .
وعلى هذا الاساس يكون حساب وقت الحركة لأي عمل تنزي القيام به.

هنا ينتهي الدرس الاولى وسنتطرق الى الحركة في الدرس القادم ان شاء الله .

نتمنى منكم المتابعة وأية ملاحظة او استفسار مرحب فيه ويسرني الاجابة عليه .

تقبلوا تقديري

[أسامة العاني]

[B]بسم الله الرحمن الرحيم
اسم الدرس : التعرف على الفلاش

http://www.iraqcyber.com/files/FC_2_1.jpg

نبدأ الدرس مباشرة بتشغيل برنامج الفلاش نفسه ، وعندما نجد البرنامج يعمل اول شيء نلاحظه امامنا هو لوحة بيضاء في وسطه (وهذه هي لوحة العمل التي سنبني عليها كل مانريد فعله).

http://www.iraqcyber.com/files/FC_2_2.jpg

كذلك نلاحظ وجود شريط للادوات الى اليسار من لوحة العمل ، ولو حاولنا النظر الى الادوات سنجد العديد من الادوات ويمكنكم تجربة كل اداة لوحدها للاطلاع على مزايا كل منها . كل شيء سهل ، فعلى سبيل المثال ، تجدون اداة في اعلى يسار هذه اللوحة شكلها عبارة عن سهم بلون اسود . نستخدم هذه الاداة لغرض الامساك بالاشياء اثناء العمل ومنها اختيار جزء او كل من رسم او شيء نريد ان نحركه من مكان او لآخر او لمجرد اننا نريد ان نختاره. فبمجرد اننا نختار هذه الاداة ونؤشر على اي جزء في لوحة العمل سنتمكن من تحريكه او اي شيء اخر.

وكما تلاحظون وجود اداة بشكل دائرة واداة اخرى جوارها بشكل مربع ، نستخدم الاولى لرسم دائرة او جسم بيضوي ، ونستخدم الثانية لرسم مربع او مستطيل.

http://www.iraqcyber.com/files/FC_2_3.jpg

- لنرسم مربع او دائر .
نستخدم الاداة اعلاه لرسم دائرة على سبيل المثال ،
اثناء رسم الدائرة تلاحظون بان الدائرة قد تبدو بشكل بيضوي ، ولغرض ان تكون لدينا دائرة حقيقية غير مشوهة نضغط على المفتاح CTRL اثناء الرسم وسنحصل على دائرة منتظمة .

ولكل شيء نرسمه في الفلاش يتكون من جزئين :
- مساحة لون الشيء الذي نرسمه (كمحتويات الدائرة التي رسمناها).
- والخط المحيط بالرسم نفسه (لاحظ الخط الاسود المحيط بالدائرة التي رسمناها قبل قليل).

- والان لنلون الدائرة ومحيطها حسب ما نريد :

من خلال استخدامنا لاداة اختيار الاشياء والرسوم في الفلاش (التي ذكرناها اعلاه) نستطيع ان نضغط على الدائرة التي رسمناها (في وسط الدائرة) ، وهنا سنستطيع ان نغير لون الدائرة بأي لون اخر.
بعد ان نضغط وسط الدائرة ونختار ، نضغط على مربع اللون الموجود الى جوار ايقونة علبة الطلاء في آخر شريط الادوات المذكور اعلاه ، ونختار اللون الذي نريد تلوين الدائرة به.

صورة لمربع اللون

http://www.iraqcyber.com/files/FC_2_4.jpg

وبعد هذا سيتغير لون الدائرة التي رسمناها ماشرة .

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

- يتبع -

[أسامة العاني]

صورة لمربع القلم

http://www.iraqcyber.com/files/FC_2_5.jpg

ملاحظة :
- بالامكان مسح وحذف الاطار المذكور بالضغط على المفتاح Del في لوحة المفاتيح .
- بالامكان حذف محتويات الدائرة وان نبقي على الاطار فقط ، بالتأشير على وسط الدائرة والحذف باستخدام نفس المفتاح المذكور اعلاه .
- في حال اننا نضغط مرتين بشكل متواصل على وسط الدائرة فاننا سنختار الدائرة مع محيطها معا.

- والان لو اننا نرغب بتغيير حجم الدائرة ، تكبيرها او تصغيرها . نختار الدائرة (بالضغط عليها مرتين) ، ومن ثم نختار اداة تغيير الحجم في شريط الادوات

صورة اداة تغيير الحجم

http://www.iraqcyber.com/files/FC_2_6.jpg

ويجب ان لاننسى استخدام مفتاح CTRL اثناء تغيير حجم الرسم او الجسم الذي نريد تغيير حجمه وفي هذه الحال فان الحجم سيتغير دون ان يتشوه الرسم.

- وأخيرا نستطيع استخدام اداة الكتابة لكتابة أي شيء داخل لوحة العمل

صورة اداة الكتابة

http://www.iraqcyber.com/files/FC_2_7.jpg

دمتم سالمين[/B]

[أسامة العاني]

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

بعد تلك الدروس نستطيع الان ان نبدأ باستخدام الفلاش واليكم أول خطوة ...

لغرض ان تستخدم الفلاش بصورة صحيحة ، يجب ان تفهم ثلاثة عناصر منها تنطلق لبناء المشاريع في الفلاش ..

1- انشاء عنصر قابل للحركة في مكان واحد فقط .
اول شيء نفكر به هو انشاء عنصر قابل للحركة وفي مكانه فقط ، وعلى سبيل المثال
- كرة تكبر وتصغر في مكانها .
- او جناحي طائر يرفرفان الى الاعلى والاسفل.

في هذه الحال ، ارسم اي شيء ، ولتكن دائرة .
1- ارسم الدائرة (أي حجم تحب) ، ولونها بأي لون .
(الدرس السابق تحدثنا عن رسم الكرة!)
2- اضغط وسط الدائرة مرتين (بشكل مستمر) لكي تختار الدائرة واطارها المحيط بها.
3- اضغط على المفتاح F8 ، والان يظهر لك مربع حوار ، في اول حقل ،
اكتب اسم العنصر الذي تحول الى رسم (أكتب اي شيء اسم تريد) .
4- ستجد ثلاثة اختيارات ، اضغط على الاختيار الذي تجد عنده العبارة Graphics
واضغط على الموافقة.

http://www.iraqcyber.com/files/Pic_c4_1.jpg
الان اصبح لدينا جسم قابل للحركة في مكانه .
5- تكبير الجسم وتصغيره في مكانه .
في هذه الحالة يجب ان نكون قد ضغطنا على الجسم المذكور بحيث اننا اخترناه ويبدو شكله مؤشرا (تم تأشيره بواسطة الماوس).
تكبير وتصغير الجسم في مكانه :
- في اعلى الفلاش يوجد شريط من خلاله نستطيع التحكم بأي نوع حركة في الفلاش والسيطرة على زمن الحركة . (وكما تلاحظ ان الشريط المذكور مقسم الى مقاطع طولية كل ثلاثين مقطع يمثل زمن ثانية واحدة وكل مقطع يسمى Frame ، استخدم الماوس واضغط على المقطع رقم 60 (كي نحصل على حركة زمنها ثانيتين) .

http://www.iraqcyber.com/files/Pic_c4_1_2.jpg
- اضغط على المفتاح F6 لتحديد نهاية الحركة (عند الضغط على المفتاح المذكور فاننا ننشئ مايسمى بمفتاح الحركة Key Frame، وهي النقطة التي تحدد مكان الحركة الثانية ، بحيث ان الحركة الاولى هي أول مقطع في شريط الزمن المذكور وتحمل الرقم صفر) .
ففي هذا التمرين فان لدينا تماما 60 مفتاح حركة .

http://www.iraqcyber.com/files/Pic_c2_c4.jpg

الان نستطيع ان نفعل ما نشاء بعد ان حددنا مكانين (زمن الحركة) .

- لنغير حجم الجسم بحيث انه يصبح أكبر حجما في اخر مفتاح للحركة .
نستطيع ان نؤشر على الجسم وهو في مكانه في اخر مفتاح حركة بالضغط على مفتاح الحركة نفسه في المقطع رقم 60 .
ومن خلال شريط الادوات الموجود الى اليسار لوحة العمل في الفلاش ، نستخدم اداة تغيير الحجم ونغير حجم الجسم لنجعله اكبر بكثير عما هو عليه.

http://www.iraqcyber.com/files/Pic_c3_c4.jpg

نستخدم الماوس ونسحب الجسم من أي زاوية (ويفضل اسفل اليمين) لنجعل حجمه اكبر .(ولتصغير الحجم نستخدم نفس الاسلوب).


- يتبع -

[أسامة العاني]

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

http://www.iraqcyber.com/files/Pic_c4_c4.jpg

نضغط على الشريط في أي مكان باستخدام الماوس ومن ثم نضغط بيمين الماوس بنفس المكان فتظهر مجموعة اختيارات ، نختار الامر Create Motion Tweet

http://www.iraqcyber.com/files/Pic_c5_c4.jpg

والان نستطيع ان نلاحظ وجود خط سهم يستمر من اول مفتاح للحركة الى اخر مفتاح للحركة للدلالة على ان لدينا حركة لهذا الجسم .

نستطيع فحص العمل من خلال الضغط على المفتاح F12

لنستمر في التمرين ....

الان تستطيع ان تؤشر في أي مكان في الشريط ولنقل اضغط بالماوس على المفتاح رقم 30 (الضغط على شريط زمن الحركة المذكور اعلاه) .

اضغط على المفتاح F6 لاضافة مفتاح حركة جديد .
اضغط على الجسم (الكرة التي رسمناها) وباستخدام الماوس حركها من مكانها الى أي مكان اخر في لوحة الرسم .

http://www.iraqcyber.com/files/Pic_c4_6.jpg

ملاحظة : تستطيع ان تستخدم مفتاح اشارة + مع المفتاح كونترول ، لكي تقترب من لوحة العمل بنظرك ، وستطيع ان تستخدم مفتاح اشارة - مع المفتاح كونترول لتبتعد عن لوحة العمل بنظرك.


شغل الملف بالضفط على المفتاح Enter ،والان ستجد الحركة الجديدة التي اضفناها الى العمل.

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

هذا هو اول جزئ من الدرس ، وسنقوم باكمال الدرس قريبا ان شاء الله ، باضافة الدرسين الاخرين .

[أسامة العاني]

[size=4]بسم الله الرحمن الرحميم

تحية طيبة اخواني واخواتي ...

هذا الدرس تابع للدرس السابق ....

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

نبدأ التمرين :
- من اعلى الفلاش تجد الكثير من الادوات ، اضغط مباشرة على (Insert) ثم اضغط على (New Symbol) ،

http://www.iraqcyber.com/files/Pic_c5_1.jpg

وبعد ان يظهر مربع الحوار اختر (Video Clip) ، وهنا نعطي اسما للجسم في الحقل الاول ايضا.

http://www.iraqcyber.com/files/Pic_c5_2.jpg

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

http://www.iraqcyber.com/files/Pic_c5_3.jpg

ومن ثم اضغط على المفتاح (F8) وهنا سيظهر مربع حوار يجب ان تختار منه (Graphic) كما في الصورة التالية ... ومن ثم تضغط على الموافقة.

http://www.iraqcyber.com/files/Pic_c5_4.jpg

-يتبع-

[أسامة العاني]

نؤشر بالماوس على المقطع رقم 60 ونضغط على المفتاح (F6) لعمل مفتاح حركة . وفي هذا المكان نغير حجم الكرة ونجعله اكبر بكثير عما هو عليه الان.

http://www.iraqcyber.com/files/Pic_c5_5.jpg

ملاحظة : بالامكان الضغط على المفتاح (Shift) لغرض تغيير حجم الرسم بدون ان يتشوه فيتم تغيير الحجم في جميع الاتجاهات بنفس النسبة.

- نضغط على الشريط الذي ظهر بين مفتاحي الحركة ، ونضغط بيمين الماوس لنختار (Create Motion Tweet) وهنا سيظهر الخط الاسود الممتد مابين النقطتين.

http://www.iraqcyber.com/files/Pic_c5_6.jpg

في هذه المرحلة حققنا ان الجسم سيكبر حجمه من اول مفتاح حرمة الى اخر مفتاح حركة.

يجب العودة الى العمل الرئيسي للفلاش لاكمال باقي الاجراءات بعد ان اتتمنا تصميم حركة للكرة.

لغرض العودة الى لوحة العمل الرئيسية ، اضغط على العبارة (Scene) ،

http://www.iraqcyber.com/files/Pic_c5_7.jpg

وهنا فقد تم تخزين العمل (الجسم المتحرك) في ذاكرة الفلاش ، ولغرض استدعاء الرسم واستخدامه ، يجب اظهار محتويات المكتبة المؤقتة التي تخزن كل الرسوم التي نصممها في الفلاش ، ولغرض اظهار المكتبة المذكورة ، اضغط من اعلى الفلاش على (Window) ثم اضغط على الامر (Librarry)

http://www.iraqcyber.com/files/Pic_c5_8.jpg

وهنا سيظهر مربع حوار ، نستطيع منه ان نختار الرسمة المتحركة او الثابتة زكما نريد ، ولكننا هنا سنختار الرسمة المتحركة التي انتهينا منها قبل قليل ، نؤشر عليها بالماوس ونتركها وسط لوحة العمل في أي مكان.

-يتبع-

[أسامة العاني]

http://www.iraqcyber.com/files/Pic_c5_9.jpg

http://www.iraqcyber.com/files/Pic_c5_10.jpg

http://www.iraqcyber.com/files/Pic_c5_11.jpg

بعد وضع الرسمة المطلوبة في مكان في لوحة العمل ، تستطيع الضغط على اشارة (×) لاخفاء مربع حوار المكتبة.

الان لدينا جسم يتحرك في مكانه(بالضغط على مفتاح Enter نستطيع التأكد من عمل الملف بشكل صحيح في أي وقت) .
نؤشر بالماوس على المقطع رقم 60 (ونستطيع ان نختار اي مقطع في اي مكان لتحديد الزمن الذي نريد) ، نضغط على المفتاح (F6) لعمل مفتاح حركة .

http://www.iraqcyber.com/files/Pic_c5_12.jpg

نؤشر على الكرة التي رسمناها وأتينا بها من المكتبة ، ونضعها في مكان آخر في لوحة العمل.

-يتبع-

[أسامة العاني]

http://www.iraqcyber.com/files/Pic_c5_13.jpg

وبنفس الطريقة التي تعلمناها ، نضغط على الشريط الممتد مابين مفتاحي الحركة في اعلى لوحة العمل ونضغط على (Create Motion Tweet) .

http://www.iraqcyber.com/files/Pic_c5_14.jpg

نبدأ الان بتشغيل الملف بالضغط على المفتاح (Enter) ... وستكون النتيجة تطبيقا لما فعلنا طوال تلك الخطوات اعلاه .


تحياتي وتقديري[/size]

[فتاه الاسلام]

اشكرك يا اخ اسامه والله يجزيك الخير
انت بتكسب اجر كبير من وراي لاني بغلبك دائما
بس بدي اعرف من وين بتنزل؟

[حادي الأحرار]

احسنت اخي الكريم، ومتابعين معك بشغف
تحياتي

[أسامة العاني]

شكرا لك اخي الحبيب ... غدا باذن الله وقدر الامكان ساستمر بوضع دروس جديدة

[laloosh]

شكرا لك ونحن فى الانتظار

[أسامة العاني]

شكرا لك ونحن فى الانتظار


ان شاء الله متواصلين

الف شكر لك

[أسامة العاني]

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

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

نعود اليكم بمرحلة جديدة لعمل موقع متكامل في الانترنت ....

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

سيكون الدرس تصميم موقع يتكون من عدد من الصفحات ...

وسنبدأ بتصميم بسيط جدا لنستمر ونطور ونضيف ليصبح احترافي باذن الله تعالى.

سنعتمد الصورة التالية في تنفيذ التمرين ...

ويمكنكم التصرف بنفس التصميم لانجازه كما تماما ، او اي شيء يشبهه بتصرفكم بحيث يكون في النهاية تم تنفيذ التمرين بخطواته .


http://iraqcyber.com/up/pic/flash_web_1.jpg

كما تلاحظون من الصورة اعلاه :

- ثلاث ايقونات الى اليمين ، سنستخدمها كمفاتيح للتنقبل بين صفحات الموقع .

- ايقونة الى اسفل يسار الصفحة ، استغلالها لصفحة الاتصال بنا .

- ايقونة القرآن الكريم ، لتشغيل اذاعة القرآن الكريم .

- صورة كل عام وانتم بخير وسط صفحة الموقع

- اسفل منهل صورة كخلفية للصفحة.


تلك هي العناصر التي سنستخدمها في اول خطواتنا لتصميم موقع متكامل ان شاء الله تعالى.


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

[أسامة العاني]

يمكنكم الاستفادة من الصور التالية في التصميم

- صورة القران الكريم من هنـــا (http://iraqcyber.com/up/pic/quran.jpg)

- الزخرفة الاسلامية من هنــــا (http://iraqcyber.com/up/pic/bis.gif)

- صورة لوسط الموقع من هنـــا (http://iraqcyber.com/up/pic/EidPC02.gif)

- صورة نستخدمها كمفتاح للصفحات من هنــــا (http://iraqcyber.com/up/pic/Eid_Card_open.jpg)

- صورة ايقونة صفحة الاتصال بنا من هنــــا (http://iraqcyber.com/up/pic/messenger.jpg)

- صورة لزخرفة نستخدمهاخلفية للموقع من هنـــــا (http://iraqcyber.com/up/pic/www-sunna-info-224.jpg)


ولنا عوة ان شاء الله لاكمال الدرس التالي

[حادي الأحرار]

جزيتم خيرا على الموضوع والشرح المسهب
تحياتي

[أسامة العاني]

ممنون اخي ، اشكرك ويسلمك ربي

[محمد7070]

مشكور يا اسامة go on

[laloosh]

شكرا لك اخى على جهودك

[أسامة العاني]

اشكركم على التواصل المستمر ..

وستكون لكم مزيد من الدروس ان شاء الله ، تقبلوا خالص تحياتي

[lamees2009]

هذا الدرس جيدا جدا
أشكرك كثيرا

[أسامة العاني]

هذا الدرس جيدا جدا
أشكرك كثيرا


وسنكمل اليوم دروس اخرى باذن الله - كونوا على أتم الاستعداد !!!

[أسامة العاني]

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

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

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

خلال استمراركم في تصميم موقع وخلال استخدامكم للصور والنماذج ستحبون عرض النماذج وتبادل الملفات مع بعضكم البعض ...وهنا سيكون الدرس لفائدة :

1- يغنيكم عن عملية رفع الملفات من خلال مركز تحميل .
2- ان كان خط الانترنت سيئ او بطيئ لديكم فليست بمشكلة ، لانكم ستتيحون للاخرين اخذ الملف مباشرة من الكومبيوتر لديكم بعملية (Download) وهنا لن تفشلون في تبادل الملفات مطلقا. (سنشرح هذه العملية لاحقا في نفس هذا الدرس).

المهم اننا سنبدأ الدرس الان باذن الله تعالى مع الخطوات التالية ...

1- احصل على البرنامج (File Share) وساضع لكم ملف السيريال ليعمل البرنامج دون اي عرقلة او توقف . (ساضع لكم رابط تحميل البرنامج ايضا)

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

اذا الان انشئ مجلد باسم معين ، وليكن مثلا Share هذا اسمه كما في الصورة التالية:


http://iraqcyber.com/up/pic/shared_1.jpg
3- نبدأ بتركيب البرنامج في الجهاز (Install) وبعد الانتهاء من التنصيب ، نشغل البرنامج ليظهر لنا كما في الصورة التالية :


http://iraqcyber.com/up/pic/shared_2.jpg
4- اضغط على ايقونة العدسة الموجودة الى اليمين واختر بعد ذلك مكان المجلد الذي تريد ان تشارك به الاخرين ...


http://iraqcyber.com/up/pic/shared_3.jpg
5- بعد هذه المرحلة ، من البرنامج نفسه ، اضغط على العبارة الموضحة في الصورة التالية ..


http://iraqcyber.com/up/pic/shared_4.jpg
6- يظهر لك مربع حوار تماما كما في الصورة التالية ... اضغط على Shared Path لغرض تحديد المجلد الذي تسمح به للاخرين بالدخول اليه ونسخ الملفات الموجودة فيه .


-يتتبع-

[أسامة العاني]

http://iraqcyber.com/up/pic/shared_5.jpg
7- اضغط على العبارة التي تظهر في الصورة التالية Browse واختر منها المجلد الذي تريد السماح للاخرين بالدخول اليه ونسخ الملفات ...


http://iraqcyber.com/up/pic/shared_6.jpg
http://iraqcyber.com/up/pic/shared_7.jpg
بعد ان يتم تحديد المجلد ، اكتب اسم المجلد او اي اسم تريد لتحديد المكان الذي كنت قد سمحت به للاخرين بالدخول اليه ، اكتب مثلا ، Shared .


http://iraqcyber.com/up/pic/shared_8.jpg
8- ستحصل على النتيجة التالية كما في الصورة ..


http://iraqcyber.com/up/pic/shared_9.jpg
9- الان بعد هذا كله ، يمكنك حماية المجلد المذكور باسم مستخدم وكلمة سر ، فلايستطيع اي مستخدم الدخول الى المجلد قبل ان يعرف باسم المستخدم وكلمة السر التي تعدها له ...


-يتبع-

[أسامة العاني]

اضغط على العبارة المبينة في الصورة التالية ..


http://iraqcyber.com/up/pic/shared_10.jpg
وكما مبين في الصورة ، اكتب اسم المستخدم وكلمة السر التي تريدها .
بعد الضغط على Apply ستجد ان الاسم تم اضافته بنجاح في القائمة .


http://iraqcyber.com/up/pic/shared_11.jpg
10- من خلال الصورة التالية يمكنك مراقبة الداخلين الى المجلد من على الانترنت


http://iraqcyber.com/up/pic/shared_12.jpg
11- عند الانتهاء من هذا كله ، اضغط على التخزين ...


http://iraqcyber.com/up/pic/shared_13.jpg

-يتبع-

[أسامة العاني]

http://iraqcyber.com/up/pic/shared_14.jpg


12- الان اصبحت جاهز لاستخدام البرنامج تماما ... اضغط على العبارة Start ..


http://iraqcyber.com/up/pic/shared_15.jpg
13- بعد ذلك مباشرة ستجد ان لديك فصحة في الانترنت كما في الصورة التالية ، وستجد ايضا المجلد الذي اخترته لتشارك وتسمح للاخرين الدخول اليه ..


http://iraqcyber.com/up/pic/shared_16.jpg
14- تستطيع رفع الملفات وأي ملف تريد من الكومبيوتر لديك ، الى المجلد المعني من خلال الضغط على العبارة Upload ...


http://iraqcyber.com/up/pic/shared_17.jpg
انتهيت الان كم كل شيء وصار الكومبيوتر لديك جاهز يسمح للاخرين بتحميل الملفات من المنكان (المجلد* الذي خصصته لهم ،
اعطيهم فقط رقم الـ IP (العنوان) الذي ظهر في اعلى المتصفح وسيتمكنون من دخول الكومبيوتر ونسخ الملفات اليهم .


-يتبع-

[أسامة العاني]

تحميل البرنامج من هنا ..


http://www.wfshome.com/images/newversion.gif

http://www.wfshome.com/download.htm


اسم المستخدم : soft-best.net

كلمة السر : 28488LIE-B6XNRAC-023638KC



شكرا لكم ولمتابعتكم الدرس

[laloosh]

اشكرك اخى اسامة
على هذه الدروس والله يعطيك العافيه
والنجاح الدائم

[أسامة العاني]

شكرا لك اختي وسنستمر باذن الله ، اتمنى تواصلكم الدائم كي نتبادل الافكار

تحياتي وتقديري

[أسامة العاني]

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

انتظرونا الليلة مع درس جديد لتصميم موقع بالفلاش ...!!!!!!!!!

[سمكة التراب]

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

[أسامة العاني]

شكرا لك اختي ، سعيد بذلك ، وياريت تستمرين معنا

[أسامة العاني]

[COLOR="Blue"][SIZE="4"]
بسم الله الرحمن الرحيم


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

نبدا درس اخر لتصميم موقع في الانترنت باستخدام الفلاش ...

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

وكما تلاحظون ايضا بانني وضعت عبارة البسملة في اعلى التصميم ...

ولاحظوا ان العبارة اللغة العربية ...

الفوتوشو ب لاينسجم مع اللغة العربية (ويوجد تعريب سنتحدث عنه لاحقا ان شاء الله ) ،

ولكن يمكننا احضار اي عبارة مكتوبة بالعربي الى الفلاش من خلال الكتابة في الوورد (Microsoft Word) ، بحيث اننا نكتب العبارة ونختار اللون المناسب لها ، ونضغط لتحويلها الى رسمة ومن ثم نعمل لها نسخ Ctrl+C ومن داخل الفلاش نلصقها في لوحة العمل بالضغط على العبارة CTRL+V ..واليكم الصور ..

http://iraqcyber.com/up/pic/flashc_1.jpg

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

http://iraqcyber.com/up/pic/flashc_2.jpg

ومن ثم

http://iraqcyber.com/up/pic/flashc_3.jpg

بعد ذلك ...

http://iraqcyber.com/up/pic/flashc_4.jpg

[أسامة العاني]

بعد الضغط على مفتاح الموافقة تبدأ بتلوين العبارة ..

http://iraqcyber.com/up/pic/flashc_5.jpg

اصبحت لديك العبارة لاستخدامها في الفلاش ...

اضغط على المفاتح CTRL+C واذهب الىالفلاش والصقها بالعبارة CTRL+V

http://iraqcyber.com/up/pic/flashc_6.jpg

جيد ، الحمد لله ، انتهينا من اول عنصر وهو الكتابة بالعربية ..

بالمناسبة اذا كنت ترغب بالكتابةباللغة الانجليزية يمكنك استخدام ادارة الكتابة وتحديد حجم ولون الكتابة من خلال الفلاش نفسه ..

http://iraqcyber.com/up/pic/flashc_7.jpg

بعد هذا سنبدأ الان بتوزيع صورة في وسط لوحة العمل .... يتبع ...[/SIZE][/COLOR]

[أسامة العاني]

[COLOR="Blue"][SIZE="4"]يمكنكم الان احظار الصورتين اللتين اخترناهما في التصميم (اواي صورة ترغبون) ..
يتم اعداد الصورة في الفوتوشوب وتخزينهم بصيغة (psd) للحصول على نقاونة عالية ... ثم بالضغط على العبارة Ctrl+r يمكنكم اختيار الصورة واحظارها ..

http://iraqcyber.com/up/pic/flashc_8.jpg

ستحصل على الصورة التالية في ملف الفلاش

http://iraqcyber.com/up/pic/flashc_9.jpg

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

http://iraqcyber.com/up/pic/flashc_10.jpg

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

http://iraqcyber.com/up/pic/flashc_11.jpg

-يتبع-

[أسامة العاني]

وكما فعلنا قبل قليل ... يجب احظار الصورة التي نريد وضعها وسط الموقع ..
بالضغط على المفتاح Ctrl+r

http://iraqcyber.com/up/pic/flashc_12.jpg

انتهينا من مرحلة اخرى ...

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

[الغد المشرق]

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

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

قال رسول الله صلى الله عليه وسلم :
"إذا مات ابن آدم انقطع عمله إلا من ثلاث: صدقة جارية أو علم ينتفع به أو ولد صالح يدعو له".

[أسامة العاني]

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

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

قال رسول الله صلى الله عليه وسلم :
"إذا مات ابن آدم انقطع عمله إلا من ثلاث: صدقة جارية أو علم ينتفع به أو ولد صالح يدعو له".

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

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

الف شكر لك

[سمكة التراب]

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

[أسامة العاني]

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


شكرا لك اختي وممنون جدا لمتابعتك ،

بالتنأكيد سندخل في موضوع الصوت والفيديو من خلال الفلاش وصولا الى افضل نتائج ان شاء الله

[خالد ياسر]

ممكن رابط للتحميل وشكرا على دروسك المفيدة و الله يزيدك علم
والسلام عليكم
__________________________________________________ __________________________________
:cool: خالد:cool:

[أسامة العاني]

الفلاش الثامن كاملا

http://depositfiles.com/files/282906/Macromedia_Flash_Professional_.html

ذلك ماطلبت اخي

[فراس شمسان]

السلام عليكم وشكراً على هذا الموضوع بس يا جماعة انا عندي موقعي الشخصي واحب اصممة بالفلاش هل من مساعد الرجاء الرد على هذا البريد fras@fras1.net ولكم جزيل الشكر

[ساارة]

بااااااااااااااااااااااا رك الله فيكم

[أسامة العاني]

السلام عليكم وشكراً على هذا الموضوع بس يا جماعة انا عندي موقعي الشخصي واحب اصممة بالفلاش هل من مساعد الرجاء الرد على هذا البريد fras@fras1.net ولكم جزيل الشكر


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

سنكمل هذه الدورة بعد شهر رمضان مباشرة ان شاء الله ومن خلال الدروس ستتمكن من تصميم موقعك بالفلاش كامل من متابعتك الدروس .

تحياتي

[أسامة العاني]

بااااااااااااااااااااااا رك الله فيكم


الله يبارك فيك ويسلمك

شكرا

[nisrine700]

صراحة جهد واااااااااااااااااااااااااااااااااااااااااااا اضح

الدروس رااااااااااااااااااااااااااااااااااااااااااااااااا اااااائعة

يسلموا

أرجوا الاستمرار فطريقة الشرح بالصور رائعو

ضيفة جديدة و حازت دروسك إعابي

[nisrine700]

أين تتمة الدروس أنا خلصت كل دروسك مستنيا المزيد

طريقة الشرح واضحة

[nisrine700]

أسامة العاني

اين تتمة الدروس

أرجوك أتممها بسرعة
نحن مستنين

[أسامة العاني]

ان شاء الله ساجد لكم فرصة لتتمة الدروس ..

[غريب العراق]

جزاك الله الف الف الف الف الف الف الف الف الف خير
ارجو الاستمرار بابداعادك

[داليامحمد]

السلام عليكم ورحمة الله وبركاته
جزاك الله خيرا على المجهود الرائع
ولكن عندي مشكلة !..الصور لاتظهر عندي وحتى الروابط لاتعمل

أرجو أن أجد حلا لديكم لأنني أحتاج الى هذه الدروس جداا

وبارك الله فيكم

[فريال علاء]

يوجد دورات تصميم مواقع اون لاين علي هذا الموقع

http://www.etbcenter.com/webdesign.html
شكرا

[فريال علاء]

يوجد دورات تصميم مواقع اون لاين علي هذا الموقع

http://www.etbcenter.com/webdesign.html

شكرا

[فريال علاء]

يوجد دورات تصميم مواقع اون لاين علي هذا الرابط

http://www.etbcenter.com/webdesign.html

شكرا