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

Περίληψη

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

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

Απαιτήσεις

Flash CS3 ή Flash CS4.

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

Βήμα 1 - Εγκατάσταση του στοιχείου αποτέλεσμα

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

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

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

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

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

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

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

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

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

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

Κάντε διπλό κλικ στο κουμπί. Τώρα σύρετε το πρώτο keyframe "Πάνω" στον τελευταίο πλαίσιο Hit "". Αυτό εξασφαλίζει, ότι το κουμπί θα είναι διαδραστικό, αλλά δεν είναι ορατά.

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

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

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

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

Τώρα μετατροπή αυτής της εικόνας σε μια Movieclip και το όνομα "img1".

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

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

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

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

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

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

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

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

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

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

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

 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 (! running) (
  _createAnimation ( "in")?
  running = true?
  ) else (
  goin = false?
  goOut = true?
  )
 )

 _onOut λειτουργία (ε: MouseEvent) (
  if (! running) (
  _createAnimation ( "out")?
  running = true?
  ) else (
  goin = true?
  goOut = false?
  )
 )

 _inAnimationDone λειτουργία (e: Event) (
  e.target.removeFilter ()?
  img1.visible = false?

  αν (goin) (
  _createAnimation ( "out")?
  ) else (
  running = false?
  goOut = false?
  )
 )

 _outAnimationDone λειτουργία (e: Event) (
  e.target.removeFilter ()?
  img2.visible = false?

  αν (goOut) (
  _createAnimation ( "in")?
  ) else (
  running = false?
  goin = false?
  )
 )

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

  if (dir == "στο") (
  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) τόσο η Ξεκινήστε Movieclip και το τέλος Movieclip που να είναι ορατό (από το αποτέλεσμα). Thats γιατί ορίσετε την ορατότητα Movieclip - η μετάβαση ξεκίνησε με - την ψευδείς (γραμμή 30 και 42).

Λήψη

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

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