كيفية عمل موقع على النتر نت

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




1ـ واجهة تحوي قائمة تجوال بها أزرار تقوم بتوصيلنا إلى محتويات الموقع.




2ـ المحتويات «كلام ـ صور ـ مؤثرات».




3ـ حركة Animation وهي ضرورية لأي موقع فلاش.




أسلوب العمل:




يوجد في برنامج فلاش مشاهد Scenes إطارات Frames كليبات Movie clips تعتمد كلها على المسار الزمني Time line وهو الأمر غير الموجود في لغة Html المعتادة مع ملاحظة انه عند عمل موقع كبير في المحتويات فانه بالضرورة سوف يكون كبيرا في الحجم وسوف يستغرق .




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




لذلك فان حل المشكلة يكمن في تقسيم الموقع لعدة ملفات من swf أو عمل ملف swf رئيسي يحتوي على الافتتاحية المتحركة (الدخلة) introani mation وقائمة التجوال الرئيسية والخلفية الرئيسية والموسيقى.




أما المحتويات الأخرى التي يحتويها الموقع فتكون في ملفات swf أخرى مستقلة يتم تحميلها في الملف الرئيسي والآن بعد هذه المقدمة الطويلة في نظرية العمل نبدأ في التطبيق الفعلي.




1ـ قم بعمل الخلفية الرئيسية أو قم بجلب صورة لتكون خلفية لك.




2ـ بعد جلب الصورة قم بتغيير مقاس الفيلم ليناسب مساحة هذه الخلفية، اذهب إلى modify>document وقم بتعديل الأبعاد.




3ـ عدل اسم الطبقة layer التي تحتوي على الخلفية إلى background.




4ـ الآن سنقوم بعمل الحركة animation والتي سنجعلها بسيطة للغاية.




5ـ قم بعمل طبقة layer جديدة ونسمها buttoni




6ـ قم بعمل مستطيل صغير في حجم الزر واضغط f8 (لتحويله إلى رمز) وفي خانة الاسم اكتب button ثم عدل الحالة behavior واجعلها button.




7ـ كرر الخطوة الخامسة بإنشاء عدد من الطبقات بمقدار عدد الأزرار التي تريدها وقم بتسمية كل طبقة button x بحسب الزر الذي تحويه، واسحب من المكتبة (f11) العنصر المطابق instance المسمى button في كل مرة وضعه في الأماكن التي تريدها للأزرار.




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




8ـ اضغط على أحد الأزرار في أي طبقة ثم اضغط على مفتاح shift واستمر في الضغط واضغط على بقية الأزرار حتى يتم اختيارهم.




9ـ اتجه إلى نافذة properties بالضغط على ctrl+f3 ثم اذهب إلى خانة اللون color واجعله alpha واضبط النسبة المئوية على 30%.




10ـ الآن اذهب الى الاطار رقم 8 وقم باختياره مع السحب اثناء الضغط على مفتاح ctrl من طبقة الزر الاول الى طبقة الزر الاخير (الآن انت اخترت الاطار رقم 8 في كل طبقات الازرار) ثم اضغط f6 فيتم عمل key frame في الاطار رقم 8.




11ـ اذهب الى الطبقة المسماة background واضغط على الاطار 8 ثم اضغط f5 لادخال الاطار.




12ـ ارجع الى اطار رقم واحد في الطبقة المسماة button 1 واختره واضغط مفتاح shift واستمر في الضغط على الاطار رقم واحد في باقي طبقات الازرار حتى يتم اختيارها جميعا.




13ـ اضغط على اي اطار ما بين 1: 8 في اي طبقة من طبقات الازرار، واضغط على مفتاح shift واختر نفس الاطار في جميع الطبقات.




14ـ اضف motiontween عن طريق نافذة propertie واختر motion>tween




15ـ ثم اضف طبقة جديدة وسمها buttontext ثم اذهب الى الاطار رقم 8 واضغط f6 لعمل keyframe جديد ثم اكتب اسماء الازرار على كل زر .




16ـ قم بعمل طبقة جديدة وسمها stop واذهب الى الاطار رقم 8 واضغط f6 لعمل keyframe وانقر الزر الايمن للماوس واختر action من القائمة المنسدلة فيظهر صندوق الحوار الخاص بـ action اختر منه movie control ثم stop.




17ـ الآن انت قمت بعمل الافتتاحية المتحركة وقائمة التجوال يمكنك عمل الصفحات المختلفة للموقع وذلك بتحديد وظائف الازرار التي تقودنا الى تلك الصفحات والتي فيها نستخدم العديد من ملفات swf التي يعبر كل منها عن صفحة من صفحات الموقع.




18ـ قم بعمل طبقة جديدة وسمها section 1 ثم اذهب الى الاطار رقم 9 واعمل keyframe بالضغط على f6 واسحب من المكتبة العنصر المطابق stance in المسمي button وقم بتعديل الحجم الى مربع صغير واجعله شفافا تماما وذلك من نافذة properties .




اذهب الى الاطار رقم 15 وقم بعمل keyframe، ثم عدل المربع الذي انشئ في الخطوة السابقة الى مستطيل ابيض كبير بمقياس الفيلم طولاً وعرضاً وذلك من النافذة properties وذلك بغرض اضافة مؤثر حركي مشابه لـ preloader قبل تحميل فيلم swf الذي يعبر عن الصفحة التي يتم فتحها.




اضغط على اي اطار بين الاطارين 9 : 15 واضف motiontween عن طريق ضغط الزر الايمن للماوس واختيار Create motiontween من القائمة المنسدلة او من نافذة properties ثم اختيار tween>motion.




19- اضغط على اطار 9 مرة ثانية واذهب الى نافذة Properties وفي خانة اسم العنصر المطابق instance name اكتب section1 .




20- اذهب الى اطار 15 في الطبقة المسماة Stop وكرر الخطوة رقم 16




21- يمكنك تكرار نفس الخطوات من (18 الى 20) مع باقي الازرار.. فقط ابدأ في كل مرة طبقة جديدةSectionx من 16 الى 22 بدلاً من 9 الى 15 ثم من 23 الى 29 وهكذا حتى تنتهي من كل الازرار.




22- قم بعمل طبقة جديدة وسمها loadinglayer.




23- اذهب الى insert>New symbol وعندما يظهر صندوق الحوار اكتب في خانة الاسم loader وفي خانة الحالة Behavior ثم اختر movieclip.




24- اختر الاطار رقم 15 في طبقة loadinglayer وقم بعمل keyframe ثم اسحب عنصر مطابق instance من movieclip الذي عملناه تواً والمسمى loader من المكتبة الى قمة الركن الايسر من الفيلم بالاستعانة بالنافذة properties .




ملحوظة: هذه الخطوة هامة للغاية ويجب ان تتم بدقة لانها تتيح تحميل فيلم خارجي Externalswf داخل الفيلم الاساسي .main movie.




25ـ في النافذة properties شكل رقم (6) اذهب الى خانة اسم العنصر المطابق instance name واكتب load.




26- اصنع keyframe في الاطار رقم 16 في طبقة loadinglayer ثم اضغط Delete حتى يصبح الاطار ابيض.




27- قم بعمل نفس الشيء للاطارات الاخيرة في باقي القطاعات الاخرى.. على سبيل المثال، لو قمت بعمل قطاع من 16 الى 22 فكرر الخطوات من 24 الى 26 على الاطار 22 بدلاً من 15 وكررها مع باقي القطاعات .




عد الى مسرح العمل Stage واختر الزر الأول Button1 من ازرار التجوال ثم اضغط الزر الايمن للماوس واختر action ونختار movie control>goto واكتب في خانة النوع type=frame label، وفي خانة الاطار frame اكتب واختر او نختار section1 .




28- كرر الخطوة السابقة مع باقي الازرار button x وباقي القطاعات section x.




29- هنا يأتي دور الملفات المتعددة لـ Swf حيث نقوم بعمل عدد من External Swf جديدة تمثل كل واحدة منها صفحة من صفحات الموقع.




30- حافظ على ثبات ابعاد مقاس افلام الـ swf التي يتم انشاؤها وكلها تساوي ابعاد الفيلم الرئيسي main movi طولاً وعرضاً.




31- اضف المحتويات التي تريدها بغض النظر عن نوعها (صور ـ نصوص ـ مؤثرات) فقط نراعي اماكن ازرار قائمة التجوال التي انشأناها في الصفحة الرئيسية ولا تنس اضافة Stop في نفس المسار Directory الذي حفظت فيه الملف الرئيسي (انشره عن طريق ضغط Shift = f12).




33- كرر الخطوات من 30 الى 32 مع باقي الافلام (external swf) مع تسمية كل منها sectionx.




34- ارجع الى الفيلم الرئيسي واضغط الزر الايمن للماوس في الاطار 15 في طبقة section1 واختر Action من القائمة المنسدلة ومنها Browse&network>loadmovie وملأئها.




35- كرر هذه الخطوة على الاطار الاخير من القطاعات الاخرى (على سبيل المثال 22-29-..، 36).




36- حدد الاطار الاخير الذي وصل اليه الفيلم (الاطار رقم 50 هنا) ثم قم اختره في طبقات الازرار المختلفة وطبقة الـ background اختر الاطار 50 في احدهما واضغط على مفتاح ctrl، واختره في باقي طبقات الازرار ثم اضغط f5 لادخال اطار .




37- اختر طبقة button1 ثم اضغط مفتاح ctrl واختر باقي طبقات الـ buttons بالاضافة الى طبقة الـ buttontext ثم اسحبها وانقلها فوق طبقة loadinglayer .




هذه الخطوة هامة للغاية فبدونها لن تظهر ازرار قائمة التجوال بعد تحميل اول فيلم خارجي.




38- احفظ ما قمت به ثم اضغط f12 للنشر.

صديقكم المخلص قابيل


__________________