أنشئي رسوماً متحركة بالذكاء الاصطناعي

دليل عملي من InnoLearn يتضمن ست خطوات وثمانية مقاطع قابلة للنسخ. ابدئي بحركة بسيطة، ثم جرّبي بطاقة عنوان ورسماً بيانياً ونص ترجمة وفيديو تعريف بهويتك.

الدليل مجاني، لكن هذا لا يعني أن جميع الأدوات مجانية. أداة HyperFrames مفتوحة المصدر، والتصيير على جهازك لا يستهلك رصيد HeyGen. قد تترتب تكاليف منفصلة على اشتراك الوكيل البرمجي أو استخدام واجهته، والوسائط المرخّصة والخدمات السحابية الاختيارية. راجعي هذه التكاليف قبل اعتماد المهمة.

قبل البداية

• استخدمي مجلداً جديداً وفارغاً للمشروع، واحتفظي بنسخة احتياطية من أي عمل سابق.
• يذكر دليل Claude Code الرسمي متطلبات Node.js بالإصدار 22 أو أحدث، وnpm وFFmpeg للعمل محلياً. استخدمي npx hyperframes doctor لفحص البيئة.
• اختاري مسار تثبيت واحداً: اتبعي دليل إضافة Claude Code الرسمي، أو ثبّتي المهارات المستقلة بالأمر npx skills add heygen-com/hyperframes واختاري Core Skills.
• ابدئي جلسة جديدة بعد التثبيت. تستخدم الأمثلة أدناه الاسم /hyperframes للمهارات المستقلة. اسم التوجيه الحالي لإضافة Claude هو /hyperframes:hyperframes؛ عدّلي هذه البادئة إذا اخترتِ الإضافة.
• راجعي ما يقترحه الوكيل قبل تشغيل الأوامر أو تثبيت الاعتماديات أو رفع الملفات. لا تضعي مفاتيح وصول أو بيانات عملاء خاصة في الأوامر.

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

1. ابدئي بحركة قصيرة

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

Using /hyperframes, create a 10-second product intro in 1920x1080.
Use editable text and simple shapes only. No generated media, music,
voiceover or paid external services.
Headline: "From idea to practice".
Show me a storyboard before creating the animation, then a draft preview.

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

2. صمّمي بطاقة عنوان متحركة

حددي تسلسلاً زمنياً واضحاً ونصاً دقيقاً. اطلبي نصاً قابلاً للتحرير بدلاً من صورة تحتوي على الكتابة.

Using /hyperframes, make a 5-second 1920x1080 title card.
Background: pearl cream #FFFEFB. Text: black #000000.
Accent: a thin gold line #D4AF37.
0-1.5s: "Create Motion Graphics With AI" slides in and settles.
1.5-3.5s: hold the composition still for readability.
3.5-5s: fade the composition out.
Use real editable text. No narration or external media.

راجعي الإملاء والتباين والهوامش والوقت المتاح لقراءة العنوان. عدّلي شيئاً واحداً في كل مرة، واحتفظي بنسخة تعجبك قبل متابعة التعديل.

3. حرّكي البيانات دون اختلاقها

قدّمي ملف CSV تملكين حق استخدامه. تحققي من البيانات والتواريخ والوحدات والمصدر قبل تحريكها. عبارة «بيانات حقيقية فقط» لا تغني عن فحص النتيجة.

Using /hyperframes, make a 20-second bar chart race from the CSV
I have provided in this folder. Use only the supplied data.
Ask me which columns represent date, category and value if unclear.
Keep units consistent and display the dataset source on the chart.
Do not invent missing values or rankings. Flag gaps before animating.
If there is no CSV, stop and ask for it. Render a draft first.

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

4. حوّلي ملف الترجمة إلى قصة قصيرة

احفظي نص الترجمة التوضيحي الآتي باسم launch.srt داخل مجلد المشروع. هذه عبارات تعليمية تجريبية، وليست ادعاءات تاريخية أو علمية.

1
00:00:00,000 --> 00:00:03,000
Understand the idea.

2
00:00:03,000 --> 00:00:07,000
Build one small example.

3
00:00:07,000 --> 00:00:11,000
Check the result before sharing.

4
00:00:11,000 --> 00:00:15,000
Keep learning, one step at a time.

ثم اطلبي حركة تتبع ملف الترجمة:

Using /hyperframes, make a 15-second 1920x1080 animation following
launch.srt in this project folder.
Create one scene for each subtitle line and respect its timing.
Use clear typography, simple shapes and a thin gold connecting line.
Background #FFFEFB, text #000000, accent #D4AF37.
Burn in the subtitles. Do not add narration or generated media.
Show a storyboard, then render a draft for review.

شاهدي المسودة وقارني كل سطر بالمشهد المقابل. يمكنك إعادة فتح المعاينة المحلية بالأمر npx hyperframes preview. يوثّق دليل البداية الرسمي الأمر npx hyperframes render --output video.mp4 لتصدير MP4 من مشروع جرى تجهيزه.

5. احفظي هويتك ثم خططي لفيديو تعريفي

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

Using /hyperframes, save an editable style called innolearn-style.
Use these confirmed brand values:
Background #FFFEFB; cards #F5EDE1; borders #EADFCC;
accent #D4AF37; occasional button accent #DE7356; all text #000000.
Brand: InnoLearn AI Academy. Trainer: Hiba Smadi.
Tagline: The AI Simplifier.
If you inspect https://innolearnai-academy.com/, do not invent missing
logos or assets. Ask for the approved logo if the site is unavailable.
Record these rules so future videos can reuse the style.

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

Using /hyperframes, plan a 30-second introduction for InnoLearn AI Academy.
Use innolearn-style and the approved brief below, not invented claims:
- Practical AI learning with Hiba Smadi.
- Arabic and English interface.
- AI foundations, creative projects and supervised agent workflows.
- Membership offer: US$9 per month, recurring until cancelled.
- Lessons and recordings are being prepared; do not say all are available.
- Start with the free guide at https://innolearnai-academy.com/.
Do not invent student numbers, testimonials, guaranteed outcomes or discounts.
Show the script and storyboard for approval before rendering a draft.
Do not use paid generation services without my approval.

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

6. استخدمي مكوّناً من الكتالوج بحذر

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

Open https://hyperframes.heygen.com/catalog and help me choose a
reusable typography component for a 5-second composition.
Confirm its source and license before installing it.
Words: "Understand", "Build", "Review".
Use innolearn-style. Keep the text editable and readable.
Do not install unrelated dependencies or use paid media services.
Show a preview, then wait for my feedback before the final render.

قبل مشاركة الفيديو

راجعي النصوص والحقائق والأرقام والمصادر وتراخيص المواد وتوقيت الترجمة ومستوى الصوت. شاهدي ملف MP4 المُصدَّر، وليس المعاينة فقط. احتفظي بملفات المشروع لتعديله لاحقاً.

مراجع رسمية

• بداية استخدام HyperFrames
• الإعداد مع Claude Code
• الأسئلة الشائعة والتكاليف والترخيص
• كتالوج HyperFrames

أُعدّت هذه النسخة لأكاديمية InnoLearn انطلاقاً من مورد Reliablesoft، ضمن إذن أكدتْه هبه الصمادي. روجعت مراجع الإعداد في 30 أكتوبر 2026. لم تُنفّذ أمثلة هذا الدليل من البداية إلى النهاية ضمن هذه المهمة؛ وقد تتغير القوائم والتكاليف وطريقة عمل الأدوات.

المصدر: Reliablesoft: Create Motion Graphics With AI