Δημιουργικές εφαρμογές σύννεφου Adobe Edge

• Ενδέχεται 17, 2024

Το HTML5, το JavaScript και το CSS3 έχουν γίνει σχεδόν εξίσου δημοφιλείς με το Flash για τη δημιουργία διαδραστικής κινούμενης εικόνας για το διαδίκτυο, τα tablet και τα τηλέφωνα. Πλίθα^R Το Edge Animate και οι άλλες εφαρμογές Edge είναι πολύ φιλικό προς το χρήστη λογισμικό με πολλές προεπιλογές για να διευκολύνουν την εργασία σας.

Το κινούμενο χρονικό πλαίσιο είναι ακόμα ο πιο δημοφιλής τρόπος για να ζωντανέψετε και η Adobe έχει καταστήσει ευκολότερη τη νέα διαδρομή κίνησης Edge Animate, η οποία μπορεί να μιμείται πραγματικές κινήσεις στον κόσμο και με ενσωματωμένη χαλάρωση. Μπορείτε εύκολα να προσθέσετε κινούμενα σχέδια κατά μήκος της χρονικής γραμμής με το κουμπί Pin που προσθέτει δείκτες κινούμενων εικόνων στη χρονολογική σειρά ή με μεταφορά και απόθεση θέσης αντικειμένων στη σκηνή, τα οποία το Edge Animate μετατρέπει αυτόματα σε διαδρομές κίνησης. Μπορείτε ακόμη να χρησιμοποιήσετε το κουμπί Εγγραφή που καταγράφει τις αλλαγές που κάνετε στα αντικείμενα της σκηνής και μετατρέπει αυτές τις αλλαγές σε κινούμενα σχέδια βασικών καρέ. Το Edge έχει επίσης τη δική του έκδοση του πλαισίου Ενέργειες, το οποίο είναι ξεκάθαρο με κάθε δράση να έχει τη δική του καρτέλα στον πίνακα. Η δοκιμή των κινούμενων εικόνων σας είναι εύκολη με ένα συνδυασμό του Adobe Edge και του προγράμματος περιήγησης Google Chrome.

Εάν γνωρίζετε την κίνηση Flash, θα παρατηρήσετε ότι η προσθήκη αλληλεπιδραστικότητας στο Edge μοιάζει με τη ροή εργασίας του Flash, επειδή μπορείτε να χρησιμοποιήσετε ένθετα χρονικά διαστήματα για κάθε στοιχείο κινούμενης εικόνας και να εφαρμόσετε προεγκατεστημένα αποσπάσματα κώδικα για τις πιο κοινές αλληλεπιδράσεις και κινούμενα σχέδια. Αυτά τα αποσπάσματα κώδικα χειρίζονται και την αναπαραγωγή κινούμενων εικόνων, όπως αναπαραγωγή, παύση, συνέχιση και διακοπή, καθώς και δημιουργία ζωντανών περιοχών για τις βασικές ενέργειες με κουμπιά, όπως κλικ, αιώρηση ή ακόμα και υπερσύνδεσμοι. Για να προσθέσετε προσαρμοσμένο κώδικα σε αυτά τα αποσπάσματα κώδικα, μπορείτε να πληκτρολογήσετε απευθείας στον πίνακα "Ενέργειες". Φυσικά, μπορείτε να κωδικοποιήσετε το δικό σας HTML5, JavaScript και CSS3 στον πίνακα "Ενέργειες". Επειδή αυτός ο τύπος προγραμματισμού ιστού και κινούμενων σχεδίων συχνά βασίζεται σε εξωτερικές βιβλιοθήκες JavaScript, μπορείτε ακόμη να προσθέσετε συνδέσμους σε αυτές τις εξωτερικές πηγές.

Η κίνηση είναι μόνο μέρος του τι μπορείτε να κάνετε με την ομάδα εφαρμογών Edge. Μια από τις πιο σημαντικές πτυχές του σχεδιασμού ιστοσελίδων είναι η δημιουργία ενός ιστοτόπου που να ανταποκρίνεται ή να είναι ευέλικτος για όλους τους τύπους οθονών από επιτραπέζια σε κινητά τηλέφωνα. Αυτό γίνεται με ερωτήματα μέσων και με ρευστά, με βάση τις ποσοστιαίες διευθύνσεις πλέγματος, και τα οποία αποτελούν μέρος των εργαλείων που βρίσκονται στο Edge Reflow. Το Edge Reflow είναι ένα περιβάλλον εργασίας WYSIWYG που δημιουργεί τον κώδικα για το έργο σας. Αυτός ο κώδικας είναι ενημερωμένος για τα πιο πρόσφατα πρότυπα ιστού, ειδικά το WebKit, το οποίο υποστηρίζεται όλο και περισσότερο από τα πάντα, από τις ιστοσελίδες έως τους αναγνώστες ebook.

Η οικοδόμηση μιας διάταξης στο Edge Reflow είναι τόσο εύκολη όσο και η σχεδίαση δοχείων HTML div στο δίκτυο με το εργαλείο Box και η απόλυτη τοποθέτηση αυτών των divs τους επιτρέπει να αλλάξουν το μέγεθος ή να μετατραπούν όπως απαιτείται για κάθε μέγεθος οθόνης. Πως λειτουργεί αυτό? Το μυστικό είναι τα Query Media που μπορείτε να προσαρμόσετε στο Media Query Manager, ρυθμίζοντας τις ελάχιστες και τις μέγιστες παραμέτρους για τρεις ή περισσότερες αναλύσεις οθόνης. Αυτές οι παράμετροι θα καθορίσουν πότε το σχέδιο θα μετασχηματιστεί προς τα πάνω ή προς τα κάτω για το πλησιέστερο μέγεθος οθόνης. Μου αρέσουν οι χρωματικά κωδικοποιημένοι οπτικοί δείκτες για κάθε μέγεθος οθόνης στο επάνω μέρος του χώρου εργασίας που σας βοηθούν να απεικονίσετε πότε θα εμφανιστούν αυτές οι αλλαγές.

Μία από τις πιο σημαντικές λειτουργίες Edge εξοικονόμησης χρόνου είναι ο τρόπος με τον οποίο μπορείτε εύκολα να επαναχρησιμοποιήσετε τα προσαρμοσμένα σας στυλ CSS3 σε διάφορα έργα και έτσι να διατηρήσετε σταθερά στυλ. Αυτό κάνει την ενημέρωση σχεδόν αυτόματη. Η Adobe έχει κάνει αυτό το κομμάτι της ροής εργασίας σας με τον πίνακα Edge Reflow Styling. Για να διατηρήσετε τα πράγματα απαλά, κάθε στυλ, όπως τα υπόβαθρα ή τα σύνορα, έχει το δικό του τμήμα. Μπορείτε να ελέγξετε το χρώμα και άλλες παραμέτρους, καθώς και την ιεραρχία των στρώσεων, απευθείας από αυτές τις καρτέλες. Αυτά τα προσαρμοσμένα στυλ μετατρέπονται αυτόματα σε κανόνες στυλ CSS, οι οποίοι στη συνέχεια μπορούν να αντιγραφούν / επικολληθούν για επαναχρησιμοποίηση.

Στο παρελθόν, για να κάνετε προεπισκόπηση της ιστοσελίδας σας, χρειάζεστε να αποθηκεύσετε τις αλλαγές, να μεταβείτε σε ένα πρόγραμμα περιήγησης και να ανανεώσετε τη σελίδα. Η Adobe έχει μειώσει τον αριθμό αυτών των βημάτων χρησιμοποιώντας έναν συνδυασμό Edge Inspect και το πρόγραμμα περιήγησης Chrome. Τώρα μπορείτε να δείτε πώς θα προβάλλεται το έργο σας σε πολλές συσκευές από επιφάνεια εργασίας, tablet σε κινητό τηλέφωνο. Ένα χαρακτηριστικό που μου αρέσει είναι η δυνατότητα να τραβήξετε ένα στιγμιότυπο από αυτές τις προεπισκοπήσεις για να στείλετε email στους πελάτες και τα μέλη της ομάδας ή να χρησιμοποιήσετε το Creative Cloud για συνεργασία.

Τέλος, για όσους από εμάς εξακολουθούμε να εργαζόμαστε με ακατέργαστο κώδικα, η Adobe έχει Edge Code. Το παράθυρο κώδικα είναι απροσδιόριστο με μερικά μόνο χειριστήρια στα αριστερά και ο Edge Code ενσωματώνεται στο Google Chrome για να σας δώσει μια ζωντανή προεπισκόπηση. Όταν ο κώδικας σας είναι μακρύς και άθλιος, μπορείτε να ανατρέξετε στο επίπεδο μεμονωμένων στοιχείων χρησιμοποιώντας τη λειτουργία γρήγορης επεξεργασίας, στην οποία αναφέρονται όλα τα στυλ που επισυνάπτονται σε ένα στοιχείο σε ένα παράθυρο επικάλυψης. Επειδή οι εφαρμογές Edge είναι μέρος του Creative Cloud, μπορείτε να χρησιμοποιήσετε τις γραμματοσειρές Web Edge του Adobe Edge, τις γραμματοσειρές γραμματοσειρών Google και τις γραμματοσειρές Typekit απευθείας από τον Edge Code. Ο Edge Code θα δημιουργήσει την ετικέτα δέσμης ενεργειών κεφαλίδας που τραβάει την εξωτερική γραμματοσειρά.

Καθώς τα HTML5, τα JavaScript και το CSS3 αντικαθιστούν γρήγορα τις παλαιότερες τεχνικές κινούμενης εικόνας λόγω της δημοτικότητας των κινητών συσκευών, αυτές οι ενσωματωμένες εφαρμογές Edge καθώς και η ενσωμάτωσή τους με τις άλλες εφαρμογές της Adobe αποτελούν την επόμενη γενιά της ροής εργασιών σχεδιασμού και ανάπτυξης πολλαπλών συσκευών.

Αποκάλυψη: Δεν είχα οικονομικά αποζημιωθεί για αυτό το άρθρο. Η Adobe παρείχε μέλος του Creative Cloud για τους σκοπούς αυτής της ανασκόπησης.Οι απόψεις είναι τελείως δικές μου βασισμένες στην εμπειρία μου.

Πνευματικά δικαιώματα 2018 Adobe Systems Incorporated. Ολα τα δικαιώματα διατηρούνται. Οι φωτογραφίες της οθόνης του προϊόντος Adobe ανατυπώνονται με την άδεια της Adobe Systems Incorporated. Adobe Photoshop, Adobe Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, είναι / είναι είτε [ή] καταχωρισμένο εμπορικό σήμα ή εμπορικό σήμα της Adobe Systems Incorporated στις Ηνωμένες Πολιτείες ή / και σε άλλες χώρες.

Οδηγίες Βίντεο: [fosscomm2013] LilyPad Arduino και δημιουργικές εφαρμογές (Ενδέχεται 2024).