Περιεχόμενο
- Κατεβάστε τα αρχεία υποστήριξης εδώ
- Βήμα 01.
- Βήμα 02.
- Βήμα 03.
- Βήμα 04.
- Βήμα 05.
- Βήμα 06.
- Βήμα 07.
- Βήμα 08.
- Βήμα 09.
- Βήμα 10.
Σε αυτό το σεμινάριο, θα διερευνήσουμε πώς να δημιουργήσουμε μια μηχανή σχεδίασης στο Flash για να δημιουργήσουμε γενικές αφηρημένες εκτυπώσεις. Θα μάθετε πώς να χρησιμοποιείτε μια εικόνα ως πηγή για τα χρώματα σας, καθώς και πώς να δημιουργείτε μια λειτουργία που σας επιτρέπει να κινούμαστε. Θα διερευνήσουμε επίσης το API σχεδίασης του Flash για να δημιουργήσουμε ένα μοναδικό έργο τέχνης και θα αναλύσω τον τρόπο εξαγωγής της τελικής σύνθεσής σας από το Flash ως ένα διαφανές αρχείο .png, ώστε να μπορείτε να το επεξεργαστείτε στο Photoshop.
Θα χρειαστείτε το Adobe AIR SDK εγκατεστημένο για αυτό το σεμινάριο και θα βρείτε όλο τον πρόσθετο κώδικα που απαιτείται στα αρχεία υποστήριξης.
Κατεβάστε τα αρχεία υποστήριξης εδώ
Βήμα 01.
Ανοίξτε το Flash και δημιουργήστε ένα νέο αρχείο ActionScript 3.0 (Ctrl / Cmd + Ν). Ανοίξτε το παράθυρο διαλόγου Ρυθμίσεις εγγράφου (Ctrl / Cmd + J) και αλλάξτε το μέγεθος της σκηνής σε 960x960px. Ρύθμισα το φόντο σε ανοιχτό γκρι και άφησα το ρυθμό καρέ στα 12fps. Τώρα μεταβείτε στο Αρχείο> Ρυθμίσεις δημοσίευσης και επιλέξτε την επιλογή Flash στην κορυφή. Ορισμός έκδοσης σε Adobe AIR.
Βήμα 02.
Δημιουργήστε ένα νέο κλιπ ταινίας (Εισαγωγή> Νέο σύμβολο), ονομάστε το "image_ mc" και πατήστε OK. Εισαγωγή Beach.webp από τα αρχεία υποστήριξης (Ctrl / Cmd + R) και ευθυγραμμίστε την επάνω αριστερή γωνία της εικόνας με τη σκηνή (Ctrl / Cmd + Κ). Αυτή η εικόνα θα χρησιμοποιηθεί ως πηγή για τα χρώματα του σχεδιασμού μας. Τέλος, σύρετε μια παρουσία αυτού του κλιπ ταινίας στη σκηνή (τοποθετημένη στα δεξιά του καμβά) και δώστε το ένα όνομα εμφάνισης του "image_mc".
Βήμα 03.
Θα κινούσουμε μερικά σημεία στη σκηνή και θα χρησιμοποιήσουμε το API σχεδίασης για να τα συνδέσουμε με εγκεφαλικά επεισόδια. Ας δημιουργήσουμε αυτά τα κλιπ ταινίας: εισάγετε ένα άλλο νέο σύμβολο και σχεδιάστε έναν λευκό κύκλο (25x25 εικονοστοιχεία) στο κέντρο της σκηνής - το μέγεθος και το χρώμα δεν είναι σημαντικά. Αυτό το σχήμα θα λειτουργεί ως οπτικός οδηγός, ώστε να μπορείτε να δείτε πού κινούνται τα σημεία σας. Σύρετε τρεις παρουσίες αυτού του κλιπ ταινίας από τη βιβλιοθήκη στη σκηνή και δώστε τους ονόματα παρουσιών «point_A», «point_B» και «point_C».
Βήμα 04.
Ήρθε η ώρα να προσθέσετε κάποιο κωδικό. Δημιουργήστε ένα νέο επίπεδο και ονομάστε το "ενέργειες". Είναι πάντα καλή ιδέα να ονομάσετε τα επίπεδα σας. Με επιλεγμένο το πρώτο πλαίσιο του επιπέδου ενεργειών σας, ανοίξτε τον πίνακα Ενέργειες (Παράθυρο> Ενέργειες). Το πρώτο πράγμα που πρέπει να κάνουμε είναι να εισαγάγουμε τις τάξεις που θα χρησιμοποιήσουμε στον κώδικά μας.
Βήμα 05.
Εδώ δημιουργούμε ένα νέο αντικείμενο bitmapData και χρησιμοποιούμε τη μέθοδο draw () για να αποθηκεύσουμε τις πληροφορίες χρώματος από το image_mc στα νέα bitmapData μας. Στη συνέχεια, δημιουργούμε ένα νέο sprite (drawLayer) για να το σχεδιάσουμε. Αργότερα θα ξεκαθαρίσουμε αυτό το sprite κάθε καρέ - η απόδοση μπορεί να είναι ένα πραγματικό ζήτημα. Χρησιμοποιούμε ένα χρονόμετρο για να αντιγράψουμε drawLayer σε ένα νέο αντικείμενο bitmapData. Αυτό το αντικείμενο δεν είναι από μόνο του εικόνα, οπότε πρέπει να το συνδυάσουμε με μια παρουσία της κλάσης bitmap, ώστε να μπορούμε να εμφανίσουμε την εικόνα στην οθόνη.
Βήμα 06.
Θα κινούσουμε τα σημεία που δημιουργήσαμε νωρίτερα χρησιμοποιώντας την εξίσωση για έναν σπιρογράφο. x = offsetX + (rOuter + rInner) * Math.cos (ώρα) - (rInner + offset) * Math.cos (((rOuter + rInner) / rInner) * ώρα); y = offsetY + (rOuter + rInner) * Μαθηματικά. sin (time) - (rInner + offset) * Math.sin (((rOuter + rInner) / rInner) * ώρα); Δηλώνουμε και αρχικοποιούμε τις μεταβλητές μας για τα τρία σημεία μας. Έχω αφήσει το κέντρο και τις μεταβλητές μετατόπισης τις ίδιες για όλα τα σημεία, αλλά πειραματίζομαι να δώσω σε κάθε ένα μοναδικό κέντρο και όφσετ.
Βήμα 07.
Στο ActionScript, το animation μπορεί να δημιουργηθεί καλώντας επανειλημμένα μια λειτουργία που κάνει οπτικές αλλαγές. Χρησιμοποιούμε μια συνάρτηση ακροατή Event.ENTER_FRAME για να καλέσουμε επανειλημμένα τη λειτουργία μας, drawLines, κάθε καρέ (12fps). Αποθηκεύουμε τις συντεταγμένες X και Y των σημείων μας στις μεταβλητές μας και, στη συνέχεια, αντιστοιχίζουμε αυτές τις θέσεις στις ιδιότητες .x και .y των σημείων μας. Στη συνέχεια, χρησιμοποιούμε τη μέθοδο getPixel () για να δείξουμε ένα χρώμα από το αντικείμενο colorBitmapData που ρυθμίσαμε νωρίτερα και να το αντιστοιχίσουμε σε μια μεταβλητή. Θα χρησιμοποιήσουμε αυτήν τη μεταβλητή χρώματος στο επόμενο βήμα, όταν καθορίσουμε τα στυλ γραμμής μας.
Βήμα 08.
Ήρθε η ώρα να σχεδιάσετε. Η τάξη γραφικών συνδέει τα σημεία μας με πινελιές. Η μέθοδος moveTo () μετακινεί το στυλό σχεδίασης στο πρώτο σημείο. Η μέθοδος lineStyle () καθορίζει το μέγεθος, το χρώμα και τις τιμές άλφα της διαδρομής και χρησιμοποιεί τη μέθοδο lineTo () για να σχεδιάσει μια γραμμή από το σημείο_Α έως το σημείο_Β. Αλλάζουμε το στυλ γραμμής και σχεδιάζουμε μια διαδρομή από point_B σε point_C. (Χρησιμοποιούμε τη μέθοδο καθαρού () πριν σχεδιάσουμε τις γραμμές μας.) Προσπαθούμε σε ένα sprite αλλά η εικόνα αντιγράφεται στο αντικείμενο bitmapData που δημιουργήσαμε νωρίτερα. Τώρα θα πρέπει να δοκιμάσετε την ταινία σας (Control> Test Movie).
Βήμα 09.
Δημιουργήστε μια συνάρτηση που εκτελείται σε ένα συμβάν KEY_DOWN. Στο εσωτερικό, δημιουργούμε ένα νέο αρχείο και χρησιμοποιούμε την ιδιότητα .desktopDirectory και τη μέθοδο resolPath () για να δημιουργήσουμε ένα νέο αρχείο που θα αποθηκευτεί στην επιφάνεια εργασίας σας. Δημιουργούμε ένα νέο, μεγαλύτερο αντικείμενο bitmapData για να αντιγράψουμε την εικόνα μας και ένα νέο transformMatrix για να το αυξήσουμε κατά 300%. Στη συνέχεια, δημιουργούμε ένα ορθογώνιο που θα περάσει στη μέθοδο draw () ως περιοχή που θα γεμίσει το αντικείμενο bitmapData. Τέλος, η κλάση pngEncoder της Adobe και το αντικείμενο FileStream αποθηκεύουν το bitmapData ως αρχείο .png. Κτύπημα Ctrl / Cmd + Επιστροφή για να δοκιμάσετε την ταινία σας και έπειτα οποιοδήποτε πλήκτρο όταν είστε έτοιμοι να τραβήξετε και να αποθηκεύσετε την εικόνα σας.
Βήμα 10.
Έχουμε τελειώσει στο Flash. Θα πρέπει τώρα να έχετε ένα αρχείο με το όνομα «εικόνα» αποθηκευμένο στην επιφάνεια εργασίας σας. Για να δημιουργήσετε την τελική σύνθεση, ανοίξτε το αρχείο στο Photoshop και δημιουργήστε ένα φόντο. Με επιλεγμένο το επίπεδο σας, κρατήστε πατημένο Ctrl / Cmd και πατήστε το εικονίδιο New Layer στην παλέτα Layers για να δημιουργήσετε ένα νέο επίπεδο κάτω από το σχέδιο. Στη συνέχεια πρόσθεσα μια επικάλυψη ντεγκραντέ με τα χρώματα # 45584b και # 040908 στο επίπεδο φόντου. Τέλος, πρόσθεσα ένα νέο επίπεδο προσαρμογής επιπέδων για να ανεβάσω τα λευκά επίπεδα.
Λόγια: Scott Oppenheim
Ο διαδραστικός σχεδιαστής Scott Oppenheim δημιούργησε σχέδια για τους Audi, Microsoft και Disney. Ασχολείται με τη γενετική τέχνη ως χόμπι και έχει εκτυπώσεις για πώληση στο διαδίκτυο.
