Cool Tutorials Επιπτώσεις Flash!

Περίληψη

Σε αυτό το tutorial θα μάθετε πώς να δημιουργήσετε ένα εφέ μετάβασης σε κύβο ανατροπής του ποντικιού.

Εδώ το τελικό αποτέλεσμα:

Απαιτήσεις

Flash CS3 ή Flash CS4.

Σημείωση: Το screenshot σε αυτό το σεμινάριο γίνεται σε Flash CS3. Δουλεύει ακριβώς το ίδιο σε Flash CS4.

Βήμα 1 - Εγκαταστήστε το αποτέλεσμα συνιστώσα

Αγοράζουν το εφέ μετάβασης Cube εδώ . Παρακαλούμε ακολουθήστε τις οδηγίες εγκατάστασης και σύρετε το στοιχείο από το στοιχείο πίνακα στη βιβλιοθήκη του δικού σας. FLA αρχείο.

Βήμα 2 - Δημιουργήστε ένα νέο στρώμα

Για να κρατήσει τα πράγματα τακτοποιημένα, θα πρέπει να δημιουργήσετε ένα νέο στρώμα για τα κύρια χρονοδιάγραμμα και να του δώσετε ένα όνομα. Το κάνετε αυτό, όπως φαίνεται στο παρακάτω στιγμιότυπο.

Βήμα 3 - Δημιουργία φόντο

Τώρα θα δημιουργήσετε ένα πλαίσιο με κλίση. Αν και αυτό δεν είναι απαραίτητο να γίνει το έργο αποτέλεσμα αυτό δείχνει ότι το αποτέλεσμα συνεργάζεται επίσης με διαφανή περιεχόμενο (περισσότερα για αυτό αργότερα).

Επιλέξτε το πρώτο καρέ του "BG" στρώμα και καταρτίζει ένα σχήμα με το εργαλείο ορθογώνιο πάνω στον καμβά. Επιλέξτε το ορθογώνιο και να προσαρμόσετε τις ρυθμίσεις χρώματος για να έχουν μια ωραία κλίση (μπορείτε επίσης να χρησιμοποιήσετε οποιοδήποτε άλλο χρώμα).

Βήμα 4 - Δημιουργία κουμπί

Η επίδραση κύβος θα πρέπει να αντιδράσει δυναμικά στην κατάσταση ποντίκι χρήστες (rollover / εγκατάσταση). Είναι βέλτιστων πρακτικών ΔΕΝ να προσθέσετε τον ακροατή εκδήλωση, σύμφωνα με την ίδια και να χρησιμοποιήσετε ένα "κενό" κουμπί.

Κάντε κλικ στο πρώτο πλαίσιο στο στρώμα "BTN" και σχεδιάστε ένα ορθογώνιο με το μέγεθος του καμβά (χρώμα, δεν mater δεδομένου ότι το κουμπί δεν θα είναι ορατή). Επιλέξτε το ορθογώνιο και το μετατρέψει σε ένα κουμπί με το [πατήσετε το πλήκτρο F8] ή δεξί κλικ πάνω στο MovieClip -> "Μετατροπή σε σύμβολο ...».

Ορίστε το όνομα του κουμπιού με το "BTN" και βεβαιωθείτε ότι ο τύπος είναι "Κουμπί".

Κάντε διπλό κλικ στο κουμπί. Τώρα σύρετε το πρώτο keyframe "Up" στην τελευταία καρέ "Hit". Το γεγονός αυτό καθιστά βέβαιο, ότι το κουμπί θα είναι αμφίδρομη, αλλά δεν είναι ορατά.

Πάρτε πίσω στο κεντρικό χρονοδιάγραμμα και που στο όνομα εμφάνισης του κουμπιού για να "BTN".

Βήμα 5 - Δημιουργία έναρξη MovieClip

Η επίδραση των αναγκών της σε δύο MovieClip όπου οι οπτικές πληροφορίες που λαμβάνονται από. Θα δημιουργήσουμε τώρα το MovieClip η μετάβαση θα αρχίσει με.

Κάντε κλικ στο πρώτο πλαίσιο για τη στιβάδα του "img1". Την εισαγωγή μιας εικόνας με το μέγεθος του καμβά πατώντας [πατήστε το πλήκτρο Ctrl-R] ή "Αρχείο" -> "Εισαγωγή" -> "Εισαγωγή στο Στάδιο ...".

Τώρα μετατρέψτε την εικόνα σε ένα MovieClip και το όνομα αυτό "img1".

Ορίστε το όνομα εμφάνισης του μόλις δημιουργήσατε MovieClip να "img1".

Βήμα 6 - Δημιουργία MovieClip End

Το τέλος MovieClip θα περιέχει κείμενο αντί της εικόνας. Η επίτευξη του στόχου αυτού θα χρειαστεί μια ελαφρώς διαφορετική προσέγγιση.

Επιλέξτε το πρώτο καρέ του στρώματος "img2" (ok, κακή ονοματοδοσία, μπορείτε να το διορθώσετε ) Και σχεδιάστε ένα ορθογώνιο με το μέγεθος του καμβά. Θέλετε να βεβαιωθείτε ότι το τέλος MovieClip έχει τις ίδιες διαστάσεις όπως και το Start MovieClip. Thats γιατί πρώτα θα συντάξει ένα αόρατο σχήμα με το ίδιο μέγεθος με το Start MovieClip.

Επιλέξτε το σχήμα και ορίστε την τιμή άλφα σε 0 (από το σχήμα είναι ακόμα εκεί, αλλά αόρατος).

Μετατρέψτε το σχήμα σε ένα MovieClip [] πιέστε το πλήκτρο F8 ή δεξί κλικ πάνω στο MovieClip -> "Μετατροπή σε σύμβολο ...» και το όνομα αυτό "img2".

Κάντε διπλό κλικ στο μόλις δημιουργήσατε MovieClip, δημιουργήστε ένα νέο κενό στρώμα και να θέσει κάποιο κείμενο σχετικά ότι οι νεοσυσταθείσες στρώμα.

Το κεφάλι πίσω στην κύρια χρονοδιάγραμμα και που στο όνομα εμφάνισης του MovieClip να "img2".

Βήμα 7 - Προσθήκη ανατροπής ActionScript

Επιλέξτε το στρώμα "σενάριο" και ανοίξτε το "Ενέργειες" παράθυρο με το "Windows" -> "Ενέργειες" ή [] πιέστε το πλήκτρο F9.

Αν θέλετε απλά να έχουν μια μετάβαση σε περίπτωση ανατροπής (και όχι back-μετάβαση στην εγκατάσταση), αντιγράψτε τις ακόλουθες γραμμές στο παράθυρο κώδικα.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver)?

 _onOver λειτουργία (ε: MouseEvent) (
  var myFilter: CubeTransitionEffectAS3 = νέα CubeTransitionEffectAS3 ()?
  myFilter.mouseEnabled = false?
  myFilter.mouseChildren = false?
  addChild (myFilter)?

  myFilter.init (img1, img2, 75, "l-> r", 2 "easeInOutCubic", false)?
 )

Στην πρώτη γραμμή προσθέτετε τον ακροατή περίπτωση ανατροπής με το κουμπί. Στη λειτουργία "_onOver" (γραμμή 3) δημιουργείτε για πρώτη φορά μια εμφάνιση του CubeTransitionEffectAS3 πριν να απενεργοποιήσετε το ποντίκι διαδραστικότητα του συστατικού (γραμμή 4 και 5). Θυμηθείτε, το κουμπί που δημιουργήσατε νωρίτερα φροντίζει για τις επιπτώσεις του ποντικιού και δεν θέλετε το αποτέλεσμα να παρεμβαίνει σε αυτό.

Στην γραμμή 9 τελικά θα εκκινήσουν τα αποτελέσματα ( τεκμηρίωση της παραμέτρου εδώ ). Το σημαντικό κομμάτι είναι οι δύο πρώτες παράμετρο. Ορίσετε ότι η μετάβαση αρχίζει με "img1» και τελειώνει με «img2".

Εξαγωγή FLA αρχείο σας. Όπως βλέπετε, το στοιχείο που λειτουργεί στην τέλεια με το διάφανο φόντο του "img2».

Βήμα 8 - Πιο περίπλοκη ActionScript

Εντάξει, με το προηγούμενο κωδικό της ανατροπής λειτουργεί μια χαρά. Αλλά τι γίνεται αν θέλετε επίσης να έχουν μια λειτουργία εγκατάσταση που αντιστρέφει τη μετάβαση από το "img2" σε "img1"; Για την επίτευξη αυτού θα πρέπει να έχετε ένα πιο σύνθετο κώδικα. Διαγράψτε το σενάριο και να εισάγετε τα ακόλουθα:

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver)? btn.addEventListener (MouseEvent.ROLL_OUT, _onOut)? var λειτουργίας = false? var goin = false? var goOut = false? _onOver λειτουργία (ε: MouseEvent) (if (! λειτουργία) (_createAnimation («in»)? λειτουργίας = αλήθεια?) else (goin = false? goOut = αλήθεια?)) _onOut λειτουργία (ε: MouseEvent) (if (! λειτουργία) (_createAnimation ("out")? λειτουργίας = αλήθεια? ) else (goin = αλήθεια? goOut = false?)) _inAnimationDone λειτουργία (ε: Event) (e.target.removeFilter ()? img1.visible = false? εάν (goin) (_createAnimation ("out")?) else ( λειτουργίας = false? goOut = false?)) _outAnimationDone λειτουργία (ε: Event) (e.target.removeFilter ()? img2.visible = false? εάν (goOut) (_createAnimation («in»),?) else (λειτουργίας = false ? goin = false?)) _createAnimation λειτουργίας (dir: String) (var myFilter: CubeTransitionEffectAS3 = νέα CubeTransitionEffectAS3 ()? myFilter.mouseEnabled = false? myFilter.mouseChildren = false? addChild (myFilter)? εάν (σκην == "σε" ) (myFilter.init (img1, img2, 24, "l-> r", 2 "easeInOutCubic", false)? myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone)?) else if (dir == "out") (myFilter.init (img2, img1, 24, "r-> l", 2 "easeInOutCubic", false)? myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone)?)) 

Είναι σημαντικό να γνωρίζετε, ότι μπορείτε να αντιστρέψετε ΔΕΝ την κατεύθυνση της μετάβασης κατά τη διάρκεια του αποτελέσματος είναι σε λειτουργία. Αντ 'αυτού, μπορείτε να "θυμάται" την ενέργεια του χρήστη, περιμένετε έως ότου το αποτέλεσμα γίνεται και να εφαρμόσει τη μετάβαση ρεβέρ.

Οι μεταβλητές "goin" και "goOut" (γραμμή 5 και 6) χρησιμοποιούνται για το σκοπό αυτό. Μπορείτε να ορίσετε τους όταν οι λειτουργίες "_onOver" και "_onOut" (γραμμή 8 και 18) εκτελούνται. Αλλά μόνον εάν το var λειτουργία είναι αλήθεια, αν είναι ψευδής (γραμμή 9 και 19), ξεκινάτε τη μετάβαση αμέσως (γραμμή 10 και 20).

Η λειτουργία "_createAnimation" (γραμμή 52) είναι η λειτουργία βοηθός σας στην αρχή της κίνησης ανάλογα με την κατεύθυνση "dir" που πέρασε σαν παράμετρο.

Παρατηρήστε ότι, μετά την κλήση του "removeFilter" μέθοδο (η γραμμή 29 και 41) τόσο το Start MovieClip και το τέλος MovieClip ορίζονται στο ορατό (έξω από το αποτέλεσμα). Thats γιατί εσείς ορίσετε την ορατότητα MovieClip - τη μετάβαση άρχισε με - τα πλαστά (γραμμή 30 και 42).

Download

Κάντε κλικ εδώ για να κατεβάσετε το FLA από αυτό το σεμινάριο. Σημείωση: Το αρχείο. Fla δεν περιλαμβάνει το συστατικό αποτέλεσμα. Για να καταστεί το έργο FLA, θα πρέπει να αγοράσει τα εφέ μετάβασης Cube εδώ .

Εδώ μπορείτε να βρείτε ένα video tutorial για το πώς να εφαρμόσουν ένα διαφορετικό αποτέλεσμα .