دليل التثبيت

شرح FrameWork Alerts الكامل لـ OBS و Streamlabs — فيديو وخطوات مكتوبة، بالعربي والإنجليزي.

Streamlabs و OBS

كل تنبيه من FrameWork يُثبَّت بالطريقة نفسها: Browser Source داخل OBS، ثم Variation بتخطيط Text Over Image على Streamlabs، ثم ملفات Custom Fields المرفقة مع التحميل. شاهد الشرح مرة واحدة، أو اتبع الخطوات المكتوبة أدناه.

الشرح الكامل — بالعربية · Streamlabs و OBS

الجزء 1

إعداد الـ Browser Source في OBS

  1. افتح منصة التنبيهات (Streamlabs) وانتقل إلى قسم Alerts.

  2. اختر نوع التنبيه الذي تريد إعداده (Followers أو Subscribers أو Donations أو غيرها)، وأزِل تحديد أي أنواع تنبيهات لا تستخدمها مع تنبيهات ملء الشاشة.

  3. انسخ رابط الـ Widget URL الذي توفّره المنصة.

  4. افتح OBS، ثم أضف مصدرًا جديدًا، ثم اختر Browser Source، وسمِّه باسم واضح مثل Alerts - Fullscreen.

  5. الصق الرابط المنسوخ في حقل URL.

  6. اضبط قيمتَي Width و Height لتطابقا دقة الكانفس لديك:

    • تجد هذه القيمة في OBS ضمن Settings ثم Video ثم Base (Canvas) Resolution.

  7. فعِّل خيار Shutdown source when not visible.

  8. اضغط OK، وتأكد من أن هذا الـ Browser Source موضوع في أعلى قائمة المصادر، فوق جميع المصادر الأخرى.

الجزء 2

ضبط الـ Alert Variation

  1. من منصة التنبيهات، أضف Variation جديدة لنوع التنبيه الذي اخترته، وأعطها اسمًا واضحًا.

  2. اضبط الـ Layout على Text Over Image — هذا الخيار ضروري كي يظهر التنبيه بالشكل الصحيح.

  3. في قسم Image، اسحب ملف التنبيه وأفلته، ثم اضغط Select.

  4. اضبط الـ Alert Duration:

    • شغّل التنبيه ولاحظ مدته الكاملة.
    • اطرح ثانية واحدة من هذه المدة، وأدخل الناتج في حقل Alert Duration.
    • مثال: إذا كانت مدة التنبيه 35 ثانية، فأدخل 34 ثانية.

  5. Sound: اتركه على الإعداد الافتراضي (تجاهله).

  6. Alert Animation: اضبطه على Fade In / Fade Out (وهو المستحسن).

  7. Text Animation و Font: خصّصهما حسب ذوقك.

الجزء 3

إضافة الـ Custom HTML / CSS / JS

  1. فعِّل مفتاح Custom HTML/CSS.

  2. عد إلى مجلد التنبيهات وافتح الملف المسمّى “Custom Fields — For Full Screen Alerts”.

  3. انسخ محتوى كل ملف والصقه في القسم المقابل له على المنصة:

    • HTML في تبويب HTML
    • CSS في تبويب CSS
    • JS في تبويب JS

  4. اضغط “Custom Fields” ثم “Edit Custom Fields”، والصق محتوى ملف الـ Custom Fields.

  5. اضغط “Update Custom Fields” ثم اضغط Save (في أسفل اليمين).

الجزء 4

الضبط الدقيق عبر الـ Custom Fields

بعد الحفظ، افتح Custom Fields للوصول إلى الخيارات التالية:

Text Delayشغّل التنبيه وأوقفه مؤقتًا عند اللحظة التي تصبح فيها الشاشة سوداء. سجّل هذا التوقيت — كل تنبيه ينتهي بنحو 4 ثوانٍ من الشاشة السوداء. أدخل التوقيت نفسه هنا.
Text Horizontal Positionيتحكم في موضع النص يمينًا ويسارًا. اضبطه على 50 للتوسيط.
Text Vertical Positionيتحكم في موضع النص أعلى وأسفل. اضبطه على 50 للتوسيط.
Alert Volumeمضبوط مسبقًا على القيمة المثلى. اخفضه إذا احتجت.

بعد ضبط كل شيء، اضغط Test Alert للتأكد من أن التنبيه يعمل بالشكل الصحيح.

الجزء 5

إصلاح التنبيهات الصغيرة في القسم نفسه

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

  1. افتح الـ Variation الخاصة بالتنبيه الصغير.

  2. فعِّل Custom HTML/CSS.

  3. عد إلى مجلد التنبيهات وافتح ملف “Custom Fields — For Non-Full-Screen Alerts”.

  4. انسخ محتوى كل ملف والصقه في التبويب الصحيح:

    • HTML في تبويب HTML
    • CSS في تبويب CSS
    • JS في تبويب JS

  5. اضغط “Edit Custom Fields”، والصق محتوى ملف الـ Custom Fields، ثم اضغط “Update Custom Fields”، ثم اضغط Save.

  6. افتح Custom Fields لهذه الـ Variation واضبط ما يلي:

    • Horizontal Position: اضبطه على 50
    • Vertical Position: اضبطه على 25
    • Image Size: يتحكم في حجم ظهور التنبيه
    • Alert Layout: اضبطه على Image Above من خيار الـ Layout المدمج في المنصة، لا من الـ Custom Fields

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

تعثّرت في إحدى الخطوات؟

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

أرسل تذكرة دعم