Τελειώνοντας το Blinkie με Flash Motion Tweens

• Απρίλιος 29, 2024

Όταν εργαστήκαμε τελευταία για το animation flash blinkie, είχαμε τελειώσει τα εφέ κειμένου. Το τελευταίο αποτέλεσμα του κειμένου που εμφανίστηκε στην κινούμενη εικόνα ήταν η εμφάνιση και η εξαφάνιση του ονόματος ιστοτόπου "J3 Designs". Εξαφανίζεται από τη σκηνή προς τα αριστερά με ένα εφέ μεταβατικής χρονικής περιόδου (μετάβαση 3 στη χρονογραμμή). Υπήρχε ένας λόγος γι 'αυτό και πρόκειται να μάθετε ποιος ήταν αυτός ο λόγος.

Θυμηθείτε ότι, ως μέρος των λεπτομερειών σχεδιασμού, έχουμε αυτές τις δύο πασχαλίτσες. Λοιπόν, ήρθε η ώρα να τα βάλουμε στη δουλειά. Όταν χτίσαμε τα στρώματα στο έργο μας για το blinkie, προσθέσαμε την χρυσή πασχαλίτσα στο στρώμα Bug 1. Τώρα, το πρώτο πράγμα που θα κάνουμε είναι να προσθέσουμε τη δεύτερη πασχαλίτσα σε ένα νέο στρώμα το οποίο θα ονομάσουμε Bug 2. Θέλουμε αυτή η κόκκινη πασχαλίτσα να εμφανιστεί από κάτω από το καμεό. Επομένως, θα χρειαστεί να τοποθετήσουμε το νέο στρώμα στη στρώση Static Details.

Ανοίξτε το blinkie2.fla στο Flash CS3 και ας πάμε στη δουλειά. Θέλουμε την πασχαλίτσα να ξεκινήσει να κινείται από κάτω από το καμέα καθώς το όνομα του ιστοτόπου αρχίζει να εξαφανίζεται. Θέλουμε να μοιάζει με το κείμενο που εξαφανίζεται λόγω της πασχαλίτσας. Έτσι θα προσθέσουμε αυτή τη νέα πασχαλίτσα στο πλαίσιο 110, που είναι όταν το κείμενο αρχίζει να εξαφανίζεται.

1. Κάντε κλικ στην επιλογή Αρχείο - Εισαγωγή - Εισαγωγή στη βιβλιοθήκη για να ανοίξετε το πλαίσιο διαλόγου Εισαγωγή και προσθέστε την κόκκινη πασχαλίτσα στη βιβλιοθήκη μας.
   
   
2. Προσθέστε ένα νέο στρώμα στο επίπεδο στατικών στοιχείων και ονομάστε το "Σφάλμα 2". Προσθέστε ένα πλαίσιο κλειδιού (Insert - Timeline - Keyframe) στο πλαίσιο 110. Σύρετε το κόκκινο πασχαλίτσα από τη Βιβλιοθήκη προς τα κάτω κάτω από το καραμέλα και δεν βλέπετε για τώρα.
   
   Θέλουμε αυτήν την πασχαλίτσα να μετακινηθεί προς τα αριστερά μέχρι να εξαφανιστεί από το στάδιο καθώς εξαφανίζεται το κείμενο. Θέλουμε, λοιπόν, την πασχαλίτσα να φτάνει στα αριστερά και εκτός της σκηνής μέχρι να φτάσουμε στο πλαίσιο 160.
   
   
3. Κάντε κλικ στο Πλαίσιο 160 στο στρώμα Bug 2, προσθέστε ένα Keyframe και σύρετε την κόκκινη πασχαλίτσα προς τα αριστερά και τελείως έξω από τη σκηνή. Κάντε δεξί κλικ μεταξύ των πλαισίων 110 και 160 και επιλέξτε Create Motion Tween από το αναδυόμενο μενού.
   
   Δοκιμάστε την ταινία και θα πρέπει να δείτε το κείμενο να εξαφανίζεται καθώς η πασχαλίτσα μετακινείται πάνω από αυτό. Μόλις η κόκκινη πασχαλίτσα απομακρυνθεί από τη σκηνή, θα μετακινήσουμε τη χρυσή πασχαλίτσα (στρώμα 1 σφάλματος) προς τα επάνω και προς τα δεξιά μέχρι να εξαφανιστεί από τη σκηνή.
   
   
4. Κάντε κλικ στο πλαίσιο 160 στο στρώμα Bug 1 και προσθέστε ένα Keyframe για το σημείο εκκίνησης για το κινούμενο χρυσό πασχαλίτσα. Ας χρησιμοποιήσουμε 20 καρέ για να μετακινήσουμε την χρυσή πασχαλίτσα από τη σκηνή. Κάντε κλικ στο πλαίσιο 180 και προσθέστε ένα κλειδί. Μετακινήστε τη χρυσή πασχαλίτσα πάνω και έξω από τη σκηνή.
   
   
5. Κάντε δεξί κλικ μεταξύ του πλαισίου 160 και του 180 και δημιουργήστε ένα Motion Tween. Κάντε κλικ στο πλαίσιο 180 και προσθέστε ένα πλαίσιο στα στρώματα στατικών λεπτομερειών και φόντου για να κάνετε ξανά ορατά τα περιεχόμενα αυτών των επιπέδων.
   
   Τέλος, θέλουμε να μετακινήσουμε την χρυσή πασχαλίτσα πίσω στην αρχική της θέση στα κάτω αριστερά της σκηνής. Αλλά δεν θέλουμε το bug να κινηθεί προς τα κάτω από την κορυφή της σκηνής. Θέλουμε να ανεβαίνει από κάτω από τη σκηνή. Πρέπει λοιπόν να τοποθετήσουμε πρώτα την χρυσή πασχαλίτσα αριστερά και κάτω από τη σκηνή. Τότε το μόνο που χρειάζεται να κάνουμε είναι να το μετακινήσουμε προς τα πάνω στην αρχική του θέση, έτσι ώστε να μπορεί να επαναληφθεί η κινούμενη εικόνα. Θα χρησιμοποιήσουμε 10 καρέ για να μετακινήσουμε την πασχαλίτσα πίσω στη θέση της.
   
   
6. Πηγαίνετε μέχρι το Frame 1 στο στρώμα Bug 1 και επιλέξτε την χρυσή πασχαλίτσα. Κάντε κλικ στην επιλογή Επεξεργασία - Αντιγραφή για να αποθηκεύσετε την αρχική θέση της χρυσής πασχαλίτσας.
   
   
7. Ακόμα στο στρώμα Bug 1, προσθέστε ένα πλαίσιο κλειδιών στο πλαίσιο 190. Κάντε κλικ στην επιλογή Επεξεργασία - Καθαρισμός για να καταργήσετε την χρυσή πασχαλίτσα που είναι ήδη εκεί. Στη συνέχεια, κάντε κλικ στην επιλογή Επεξεργασία - Επικόλληση στη θέση για να επαναφέρετε την χρυσή πασχαλίτσα στην αρχική της θέση.
   
   
8. Ακόμα στο στρώμα Bug 1, κάντε κλικ στο πλαίσιο 181 και προσθέστε ένα κλειδί. Στη συνέχεια, αφαιρέστε την χρυσή πασχαλίτσα που είναι ήδη εκεί. Βάλτε την χρυσή πασχαλίτσα πίσω στην αρχική θέση σε αυτό το πλαίσιο (Επικόλληση στη θέση). Στη συνέχεια, σύρετε αυτήν την πασχαλίτσα κάτω από τη σκηνή. Προσθέστε μια Motion Tween μεταξύ των πλαισίων 181 και 190 που θα μετακινήσουν αυτή την πασχαλίτσα πάνω και πάνω στη σκηνή.
   
   
9. Κάντε κλικ στο πλαίσιο 190 και προσθέστε ένα πλαίσιο στα στρώματα στατικών λεπτομερειών και φόντου για να κάνετε ξανά ορατά τα περιεχόμενα αυτών των επιπέδων.
   
   

Δοκιμάστε και αποθηκεύστε το blinkie ως blinkie3.fla. Στη συνέχεια δημοσιεύστε το blinkie σας ως αρχείο .swf και απολαύστε τη νέα αναλαμπή σας.

J3 Σχέδια

Πνευματικά δικαιώματα 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 στις Ηνωμένες Πολιτείες ή / και σε άλλες χώρες.

Οδηγίες Βίντεο: 14ο Δημοτικό Χαλανδρίου, Τελειώνοντας το δημοτικό (Απρίλιος 2024).