خصائص فايرووركس

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

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

الحصة الاولى:

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


١-١: افتح مستند جديد بأبعاد ١٤٠ x ٢٣٠ نقطة. وتأكد من ان امري الادلة واحياء الادلة محددان في قائمة عرض. اسحب ادلة الى المستند لإنشاء شبكة بحجم الازرار التي ننوي رسمها اي بأبعاد ١٢٠ x ٣٥ لكل زر.	١-٢: انقر على رمز الفرشاة في لوح خالط الالوان واختر لوناً داكناً بواسطة الخالط او لوح حامل الالوان. كرر العملية للتعبئة بالنقر على الدلو. وتتيح القائمة المنبثقة في اللوح اختيار نوع الخلط.	١-٣: بواسطة اداة المستطيلات، ارسم مستطيلاً بمساحة الخلية الاولى في الشبكة. وفي لوح المؤثرات، اختر الشطب الداخلي (inner bevel) وحدد عمق الشطب بـ٤. تأكد من تأشير مربع التطبيق لترى التغييرات مباشرة.

١-٤: انسخ الزر والصقه في كل من خلايا الشبكة. وبما ان فايرووركس لا يدعم العربية عليك باستخدام برنامج آخر لكتابة عناوين الازرار. والافضل استخدام برنامج متجهات مثل كورل درو الداعم للعربية لأنه يصبح من السهل تحرير النصوص المستوردة في فايرووركس بعد تحويلها الى حدود في كورل درو.	١-٥: بعد جلب العناوين ووضعها على شفيفة جديدة، استخدم مفاتيح الاسهم لتحديد موقع العناوين بدقة. ويمكنك اضافة مؤثرات على العناوين من لوح المؤثرات. قم بتأمين شفيفة العناوين بالنقر في العمود الثاني في لوح الشفائف.	١-٦: في لوح الاطارات (frames) اختر امر مضاعفة اطار في القائمة المنبثقة وحدد ٣ اطارات بعد الاطار الحالي. وبذلك نحصل على اطار لكل حالة تمر بها الزرار وهي عادي، فوقه المؤشر، مضغوط وعند النقر (OnClick).

١-٧: اختر الاطار ٢ وقم بتحديد الكل (اي كل الازرار دون العناوين لأنها مؤمنة). وفي لوح المؤثرات اختر محدد (highlighted) من القائمة السفلى. ثم اختر الاطار ٣ وحدد الكل واختر مضغوط (inset) من القائمة وفي الاطار ٤ اختر معكوس (inverted) من القائمة.	١-٨: اختر جديد من القائمة المنبثقة في شريط عناوين العنكبوت (URL) وقم بإنشاء رابط لكل من الازرار. ومن المستحسن اعطاء كل رابط لون مختلف عن الآخر لوضوح الروابط.	١-٩: باستخدام اداة التشريح (slice) المستطيلة حدد كل من الازرار واقتطعه من الصورة الكاملة مما يعطي ست صور مختلفة سيتم وضعها في جدول على صفحة العنكبوت. وبالنقر بالزر الايمن للفأرة على كل زر واختيار خصائص يمكن تحديد المؤثر بالتبديل (rollover) واختيار الرابط.

١-١٠: او يمكنك تحديد الازرار واختيار امر نسخ الى عنوان عنكبوت من قائمة تحديد. ثم النقر على كل من الازرار وتخصيص عنوان لها من القائمة التي انشأتها.	١-١١: باستخدام اداة تصدير مساحة (وهي في قائمة اداة المؤشر المنبثقة)، قم بتحديد المساحة التي تحتوي على الازرار الستة. ويؤدي النقر المزدوج داخل هذه المساحة الى فتح مربع التصدير.	١-١٢: في مربع التصدير حدد خيار اقصى (optimized) واختر لوحة الوان العنكبوت الـ٦١٢ وحدد خيار المحاكاة (١٠٠ ٪). وتلاحظ الى اليمين ان هذه الخيارات لا تعطي نتائج مرضية. انقر على رمز تقسيم المعاينة الموجود الى جانب حجم العرض لمقارنة تأثير الخيارات المختلفة.

١-١٣: اختر لوحة الالوان المهايئة (adaptive) بدون محاكاة (dither) وقم بتخفيض عدد الالوان حتى تلاحظ ان الصورة اصبحت رديئة اذا تابعت (قد يكفي اختيار ١٦ او ٣٢ لوناً) واستخدم معلومات حجم الملف للوصول الى تعادل بينه وبين جودة الصورة.	١-١٤: انقر على تصدير وحدد خيار انتاج HTML ليقوم البرنامج بكتابة اوامر جافاسكريبت وانقر على حفظ.	١-١٥: قم بتحميل ملف HTML في برنامج التصفح وتأكد من ان روابط الازرار صحيحة والمؤثرات موجودة. ومن المفترض ان اوامر جافاسكريبت الناتجة متوافقة مع كل برامج التصفح الداعمة لهذه اللغة.

الحصة الثانية:

الصور الخرائط
يسهّل فايرووركس انشاء الصور الخرائط (image maps) ان كانت من جهة الخادم او جهة العميل.


٢-١: قم بفتح الصورة التي تنوي تحويلها الى صورة خريطة واستخدم امر النسخ الى عنوان عنكبوت من قائمة تحديد او ادوات شريط عناوين العنكبوت لرسم المناطق التي ستكون روابط على الصورة. ثم قم بتخصيص رابط لكل منطقة قمت برسمها (كما في الخطوة ١٠ السابقة).	٢-٢: اختر امر خيارات صور الخرائط من القائمة المنبثقة في شريط عناوين العنكبوت. هنا يمكنك تحديد نوع الصورة الخريطة (جهة عميل او جهة خادم او الاثنتان) وعنوان العنكبوت الافتراضي للمناطق غير المحددة على الصورة.	٢-٣: قم بتصدير الصورة كالعادة باختيار افضل خصائص الضغط ولا تنسى تحديد خيار انتاج HTML لدى الحفظ. وسوف تحصل على ملفين هما ملف جهة الخادم (اذا اخترت النوعين) وملف HTML يحتوي على اوامر جهة العميل.

الحصة الثالثة:

صور GIF المتحركة
هنا سوف نعرض كيف يمكن انشاء شريط اعلاني متحرك.


٣-١: افتح مستند جديد بأبعاد ٤٥٤ x ٥٤ نقطة بخلفية بيضاء. وفي الوسط ارسم مستطيل بعرض ١٥٠ نقطة تقريباً وحد اسود سماكة نقطة واحدة. حدد للتعبئة لون CCCCCC (باختيار نوع الخلط السادس عشري في خالط الالوان).	٣-٢: حدد المستطيل واختر شطب داخلي (inner bevel) من لوح المؤثرات. حدد نوع الشطب بالناعم (smooth) والعمق بـ٤ والتضاد بـ٨٥ ٪.	٣-٣: كما في الحصة الاولى اكتب عنوان الزر (أنقر هنا...) في برنامج متجهات يدعم العربية (هنا كورل درو) وصدره الى فايرووركس بأحد التنسيقات التي يفهمها هذا الاخير وضعه في وسط المستطيل.

٣-٤: انسخ العنوان ثم الصقه واجعل لون النسخة ابيضاً ثم ازحها بمقدار نقطة واحدة الى اليسار والاسفل وارسلها الى خلف النص الاسود. وفي لوح الاطارات اختر مضاعفة اطار وحدد اطارين بعد الحالي وفي الاطار ٢ حدد الزر واختر له مضغوط (inset) في لوح المؤثرات.	٣-٥: تبدو الخلفية باهتة وسنغيرها.اختر احد الالوان من خالط الالوان (جرب FFCC66) ثم انقر على شفيفة الخلفية في لوح الشفائف واستخدم الدلو لتعبئة الخلفية باللون المحدد.	٣-٦: اضف اطار جديد فارغ واجلب جملة النص من البرنامج الداعم للعربية وضعها في الاطار الجديد. الآن يمكنك استخدام ازرار التقدم والرجوع في لوح الشفائف لتصفح الاطارات واختبار الحركة.

٣-٧: اختر تصدير من قائمة ملف ثم GIF متحرك من قائمة التنسيق وحدد خيار اقصى (optimized) ولوحة مهايئة دون محاكاة. قم بتخفيض عدد الالوان الى ان تلاحظ ان جودة الصورة بدأت تنخفض.	٣-٨: انقر على لسان الحركة (Animation) وحدد خيار تشغيل دون توقف ثم انقر على زر التشغيل لتتأكد من الحركة. ويبدو هنا انها تحتاج الى ابطاءها قليلاً: اختر الاطار ١ وحدد ١٠٠ للوقت (يعني ثانية واحدة). اما الاطار ٢ فيبقى ٢٠ وحدد للاطار ٣ فترة ٧٥ وللاطار ٤ فترة ٢٥٠.	٣-٩: يمكنك تعديل التوقيت ليناسب ما تريد وبعد الانتهاء انقر على تصدير. ولا تحتاج هنا الى انتاج HTML لأنك تصدر صورة فقط. اخيراً تأكد من ان الحركة سليمة في برنامج التصفح.

الحصة الرابعة

تصدير الصور
قد يكون تصدير الصور من اكثر وظائف فايرووركس فائدة.


٤-١: هناك نوعان من الرسوم يلعبان دوراً في تصديرها لنسيج العنكبوت. ويتكون النوع الاول من الوان قليلة تحتل مساحات واسعة مثل الرسم الظاهر هنا.	٤-٢: اختر امر تصدير من قائمة ملف. تبدو هنا الصورة كبيرة فانقر على لسان ملف وحدد العرض بـ٢٥٠ نقطة وتأكد من ان حفظ النسب نشط. انقر على لسان الخيارات للعودة الى تنسيق الملف.	٤-٣: اختر تنسيق GIF وحدد خيار اقصى. اختر اللوحة المهايئة دون محاكاة وقم بتخفيض الالوان الى اقصى حد. هنا لا نحتاج الى اكثر من ٨ الوان.

٤-٤: اذا كان لون خلفية الصورة هو نفسه لون صفحة العنكبوت، يجب تحويله في الصورة الى لون شفاف لتجنب رداءة تشابه اللونين. ويكفي تحديد القطارة والنقر على اللون المطلوب حذفه.	٤-٥: يمكن ايضاً تأطير المساحة المطلوب تصديرها دون المساس بالصورة الاصلية. ويكفي النقر على لسان ملف وتحديد خيار تصدير مساحة وادخال ابعاد المساحة المطلوبة التي ستظهر داخل الاطار.	٤-٦: اما النوع الثاني من الصور فهو الفوتوغرافي الذي يستخدم الكثير من الالوان في مساحات صغيرة. فاختر امر التصدير وستلاحظ ان الصورة تظهر بـ٢٥٦ لون من لوحة الوان العنكبوت وهو شيء رديء، فاختر اللوحة المهايئة دون محاكاة و٢٥٦ لون.

٤-٧: حتى مع هذه اللوحة نلاحظ انخفاض جودة بعض الالوان وقد تعطي المحاكاة نتائج افضل الا انها تزيد في حجم الملف كثيراً. انقر على رمز تقسيم مساحة المعاينة للمقارنة بين عدة انواع من الضغط.	٤-٨: انقر على الصورة السفلى واختر تنسيق JPEG من القائمة وجرب عدة قيم للجودة. نلاحظ ان ٨٠ ٪ تعطي نتائج مرضية مع الحفاظ على صغر الملف.	٤-٩: يمكنك النقر على رمز + في اسفل المربع لحفظ اختيارات الضغط هذه واستعادتها في وقت لاحق لاستخدامها في امر المعالجة الآلية (batch) في قائمة ملف. وعند الانتهاء انقر على تصدير لحفظ الصورة المضغوطة.

الحصة الخامسة

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


٥-١: افتح مستند جديد بأبعاد ٤٠٠ x ٣٠٠ نقطة. اختر نسيج (pattern) من لوح التعبئة ثم نوع الخشب الفاتح. حدد شفيفة الخلفية واستخدم الدلو لتعبئتها بالنسيج.	٥-٢: كما في الحصص السابقة، اكتب كلمتك في برنامج الرسم الداعم للعربية وحولها الى حدود وقم بجلبها الى فايرووركس ووضعها على شفيفة جديدة.

٥-٣: انسخ النص والصقه فوق ذاته. وفي لوح المؤثرات قم بإضافة ظل (drop shadow) واختر لوناً داكناً لهذا الظل. حدد ازاحة الظل بـ٨٠ وحدد خيار الازالة (knock out) مما يتيح التحكم بالنص والظل كعنصرين مختلفين.	٥-٤: مع ابقاء الظل محدداً، استخدم اداة التحجيم لتكبير النص عمودياً ثم انتقل الى اداة الامالة (skew) في قائمة اداة التحجيم وانقر على المقبض السفلي الاوسط للإزاحة الى اليمين قليلاً.

٥-٥: استخدم اداة التشويه (distort) لمد الزاوية السفلى اليمنى ثم انقر على زر التحويل. يمكنك تحريك الظل بمفاتيح الاسهم لوضعه بشكل صحيح نسبة للنص.	٥-٦: يبدو النص الاصلي باهتاً لذلك سنشدده قليلاً. حدد النص واختر مؤثر الشطب الخارجي (outer bevel) والنوع مسطح (flat).

٥-٧: اضف شفيفة جديدة بين الخلفية وشفيفة النص. وبواسطة اداة الدائرة ارسم دائرة كبيرة لإحاطة النص والظل. قم بتعبئتها بالابيض بدون حد.	٥-٨: حدد شفيفة الخلفية ثم قم بتحديد الكل وقصه. حدد الدائرة في الشفيفة الجديدة وفي لوح التعبئة اختر نسيج الخشب الفاتح وحدد حد متعرج (feather) بقيمة ٢٠.