تخطيطات استجابة

الشروع في العمل مثلث الوميض استخدام الجداول الزمنية إضافة أزرار صورة أزرار البرنامج النصي في المخطط الزمني اللعب في الاتجاه المعاكس إضافة المزيد من المشاهد فتح صفحات ويب الانضمام إلى اثنين من أفلام ظلال النص الظلال في الصورة طمس التحولات الاستغناء عن الصور يجعل موجات إنشاء أقنعة حلقة حلقة استخدام النقاط المحورية العمل مع الطبقات معرف البرنامج النصي للتفاهم إضافة YouTube الفيديو التحكم في المخطط الزمني إضافة الصوت إضافة جافا سكريبت الاستيلاء على لوحة المفاتيح العمل مع مدخلات وأشكال التحكم في الإطارات مع جافا سكريبت عقد الأزرار خلق حلقة لعبة تخطيطات استجابة توسيع HTML إنشاء تطبيقات الهاتف الخليوي قواعد بيانات XML نشر في WordPress نشر في Facebook فيديو كليب

واجهة

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

صور متحركة

الفيلم مشاهد الإطار

كائنات جافا سكريبت محرر الترجمة ترخيص مقارنة الإصدارات ما هو الجديد

خلق حلقة لعبة

توسيع HTML

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

إضافة المربعات للمحرر.

ترتيب المربعات، بحيث أنهم ملء الجانبين الأيسر والأيمن. مغادرة حدود المحيطة بهم.

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

هذه الحالة التي تحتاج إلى استجابة تخطيطات. في وضع عمودي، ينبغي التحرك مربع واحد فوق الآخر. للقيام بذلك، نحن بحاجة إلى تحريك المربعات استخدام JavaScript. وهذا يعني إيقاف تشغيل 'استخدام المخطط الزمني' لمربعات والإعداد 'معرف البرنامج النصي'.

من أجل تحريك المربعات خارج الحدود الفيلم، نحن بحاجة إلى إيقاف تشغيل القصاصة في خصائص الفيلم.

أفضل مكان لترتيب المربعات في 'عند تغيير الحجم' أحداث الفيلم.

الوظائف التي نحن بحاجة إلى GetLeft، GetTop، GetWidth و GetHeight. تعطي هذه الدالات الحدود من مستعرض ويب أو جهاز باستخدام الإحداثيات للفيلم. عند تشغيل قصاصة، إرجاع هذه القيم حدود الفيلم. إذا كنت تستخدم 'بلا' حجم الفيلم، GetLeft و GetTop سيعود دائماً 0 ولا يمكن تجاهلها.

أولاً يتيح ترتيب مربعات اثنين بحيث يملأ واحد على الجانب الأيمن والآخر يملأ على الجانب الأيسر.

BoxA.SetBounds(GetLeft(),GetTop(),GetWidth()/2,GetHeight());
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());

بعد ذلك، نقوم بإضافة حد لحجم 10. هذه القيمة من 10 ليست بالضرورة في بكسل، وفي نفس حجم الفيلم. مقياس استخدام الفيلم 'بلا' لكل شيء يكون في بكسل.

var Border=10;
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);

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

var Border=10;
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}

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

خلق حلقة لعبة

توسيع HTML

تمت ترجمة هذه الوثائق من اللغة الإنكليزية، استخدام مترجم على إنترنت. ونحن نعتذر إذا وجدت أي أخطاء. إذا كنت ترغب في مساعدتنا في إجراء التصحيحات. هناك محرر ترجمة في Hippani Animator (في القائمة تعليمات). ونحن نعطيه مفاتيح الترخيص مجاناً لأي شخص يقوم بتصحيح العبارات أكثر من 100. يرجى الاتصال بنا لمزيد من التفاصيل.