تطبيقات Adobe Edge Creative Cloud

• أبريل 25, 2024

أصبح HTML5 و JavaScript و CSS3 شائعًا تقريبًا مثل Flash لإنشاء الرسوم المتحركة التفاعلية على الويب والأجهزة اللوحية والهواتف. أدوبي^R تعتبر Edge Animate وتطبيقات Edge الأخرى برنامجًا سهل الاستخدام للغاية مع العديد من الإعدادات المسبقة لتسهيل عملك.

لا تزال الرسوم المتحركة في المخطط الزمني هي الطريقة الأكثر شيوعًا لتحريكها ، وقد سهلت Adobe من خلال مسارات حركة Edge Animate الجديدة ، والتي يمكن أن تحاكي حركات العالم الحقيقي والتخفيف المضمن. يمكنك بسهولة إضافة رسم متحرك على طول الخط الزمني من خلال الزر Pin الذي يضيف علامات الحركة إلى المخطط الزمني أو عن طريق سحب وإسقاط تحديد موضع الكائنات على المسرح الذي تقوم Edge Edge بتحويله تلقائيًا إلى مسارات الحركة. يمكنك حتى استخدام زر "السجل" الذي يسجل التغييرات التي تجريها على الكائنات الموجودة على المسرح ويحول هذه التغييرات إلى رسم متحرك للإطار الرئيسي. لدى Edge أيضًا نسختها الخاصة من لوحة Actions ، وهي غير مرتبة مع كل علامة تبويب خاصة بها في اللوحة. من السهل اختبار رسومك المتحركة من خلال مجموعة من Adobe Edge ومتصفح Google Chrome.

إذا كنت معتادًا على الرسوم المتحركة لـ Flash ، فستلاحظ أن إضافة التفاعل في Edge يشبه سير عمل Flash حيث يمكنك استخدام الجداول الزمنية المتداخلة لكل عنصر من عناصر الرسوم المتحركة وتطبيق مقتطفات من التعليمات البرمجية المثبتة مسبقًا على التفاعلات والرسوم المتحركة الأكثر شيوعًا. تتعامل قصاصات التعليمات البرمجية هذه مع كل من الرسوم المتحركة للتشغيل مثل التشغيل والإيقاف المؤقت والاستئناف والتوقف بالإضافة إلى إنشاء مناطق ساخنة لإجراءات الأزرار الأساسية مثل النقر فوق مؤشر الماوس وحتى الارتباطات التشعبية. لإضافة شفرة مخصصة إلى مقتطفات الشفرة هذه ، يمكنك الكتابة مباشرةً في لوحة Actions. بالطبع ، يمكنك كتابة التعليمات البرمجية الخاصة بك HTML5 و JavaScript و CSS3 في لوحة Actions. نظرًا لأن هذا النوع من برمجة الويب والرسوم المتحركة غالبًا ما يعتمد على مكتبات JavaScript خارجية ، يمكنك إضافة روابط إلى هذه المصادر الخارجية.

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

يعد إنشاء تخطيط في Edge Reflow سهلاً مثل رسم حاويات div div HTML على الشبكة باستخدام أداة Box ، كما أن تحديد موقع هذه div يسمح بتغير حجمها أو تحويلها حسب الحاجة لكل حجم شاشة. كيف يعمل هذا؟ السر هو "استعلامات الوسائط" التي يمكنك تخصيصها داخل "إدارة استعلامات الوسائط" عن طريق تعيين الحد الأدنى والحد الأقصى للمعلمات لثلاث أو أكثر من دقة الشاشة. ستحدد هذه المعلمات متى سيتحول التصميم لأعلى أو لأسفل لأقرب حجم للشاشة. أنا حقا أحب العلامات المرئية الملونة لكل حجم شاشة في الجزء العلوي من مساحة العمل والتي تساعدك على تصور متى ستحدث هذه التغييرات.

تتمثل إحدى ميزات Edge الأكثر توفيرًا للوقت في كيفية إعادة استخدام أنماط CSS3 المخصصة الخاصة بك بسهولة عبر عدة مشاريع وبالتالي الحفاظ على أنماط متسقة. هذا يجعل التحديث التلقائي تقريبا. جعلت Adobe هذا جزءًا من سير العمل من خلال لوحة Edge Reflow Styling. لإبقاء الأشياء غير مرتبة ، يكون لكل نمط ، مثل الخلفيات أو الحدود ، قسم فردي خاص به. يمكنك التحكم في اللون والمعلمات الأخرى ، وكذلك التسلسل الهرمي للطبقات ، مباشرة من داخل علامات التبويب هذه. يتم تحويل هذه الأنماط المخصصة تلقائيًا إلى قواعد أنماط CSS ، والتي يمكن بعد ذلك نسخها / لصقها لإعادة استخدامها.

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

أخيرًا ، بالنسبة لأولئك منا الذين ما زالوا يرغبون في العمل باستخدام الكود الخام ، فإن Adobe لديه Edge Code. نافذة الشفرة غير مرتبة مع بعض عناصر التحكم الموجودة على اليسار ويتكامل كود Edge مع Google Chrome لمنحك معاينة مباشرة. عندما تصبح الشفرة طويلة وغير عملية ، يمكنك الانتقال لأسفل إلى مستوى العنصر الفردي باستخدام ميزة التحرير السريع التي تسرد جميع الأنماط المرتبطة بعنصر في نافذة التراكب. نظرًا لأن تطبيقات Edge جزء من Creative Cloud ، يمكنك استخدام Adobe Edge Web Fonts وخطوط الويب من Google وخطوط Typekit مباشرةً من داخل Edge Code. سيقوم Edge Code بإنشاء علامة البرنامج النصي للرأس التي تسحب الخط الخارجي.

نظرًا لأن HTML5 و JavaScript و CSS3 يستبدلون بسرعة تقنيات الرسوم المتحركة القديمة بسبب شعبية الأجهزة المحمولة ، فإن تطبيقات Edge المدمجة هذه بالإضافة إلى تكاملها مع تطبيقات Adobe الأخرى هي الجيل التالي من سير العمل في تصميم الأجهزة المتعددة وتطويرها.

الإفصاح: لم أحصل على تعويض مالي لهذه المقالة. قدمت Adobe عضوية Creative Cloud لغرض هذا الاستعراض.الآراء هي تماما بلدي بناء على تجربتي.

حقوق النشر 2018 Adobe Systems Incorporated. كل الحقوق محفوظة. أعيد طبع (لقطات) شاشة منتج Adobe بإذن من Adobe Systems Incorporated. Adobe و Photoshop و Photoshop Album و Photoshop Elements و Illustrator و InDesign و GoLive و Acrobat و Cue و Premiere Pro و Premiere Elements و Bridge و After Effects و InCopy و Dreamweaver و Flash و ActionScript و Fireworks و Contribute و Captivate و Flash Catalyst و Flash Paper هي / هي إما [a] علامة تجارية مسجلة أو علامة تجارية لـ Adobe Systems Incorporated في الولايات المتحدة و / أو البلدان الأخرى.

تعليمات الفيديو: Learn how to design a mobile app UI/UX in Adobe XD 2020 - Nike Mobile App (أبريل 2024).