mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 27.04.2024 00:01 Benutzername: Passwort: Auto-Login

Thema: [ActionScript] Tweenings per undokumentierter Klasse vom 09.06.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Multimedia -> [ActionScript] Tweenings per undokumentierter Klasse
Autor Nachricht
phihochzwei
Moderator
Threadersteller

Dabei seit: 08.06.2006
Ort: Mülheim an der Ruhr
Alter: 46
Geschlecht: Männlich
Verfasst Fr 09.06.2006 14:56
Titel

[ActionScript] Tweenings per undokumentierter Klasse

Antworten mit Zitat Zum Seitenanfang

Da ich persönlich ja überzeugter Gegner von jedweder Form des manuellen Tweens bin (Keyframe für Keyframe für Keyframe für ....) hier eine gute Möglichkeit für all diejenigen, die noch wenig Erfahrung im "Selber-Scripten" haben:


Seit Flash MX 2004 liefert Macromedia netterweise ein paar Klassen mit, die sich wie folgt benutzen:

>>>>
Code:

MeinMovieClip = _root.Clip_mc // Gewünschter MC
MeineProperty = "_alpha" // Property die geändert werden soll (_x, _y,_alpha etc etc)
MeinEasing = mx.transitions.easing.Strong.easeOut // Easing-Type, dazu später mehr
MeinAnfang = 100 // Anfangswert
MeinEnde = 0 // Endwert
MeineZeit = 1.5 //Zeitraum in dem das ganze stattfinden soll
Frames = true // Gibt an ob der Zeitraum in Frames(false) oder Sekunden(true) angegeben wird


MeinTween = new mx.transitions.Tween(MeinMovieClip , MeineProperty, MeinEasing, MeinAnfang,MeinEnde, MeineZeit, Frames); 

>>>>


Nun gibt es verschiedene Easing-Typen, die ihr euch grafisch als Kurven vorstellen könnt, wie damals in der Schule, Sinus, Cosinus etc. Verfügbar sind folgende Typen:


>>>>
    mx.transitions.easing.Regular.easeOut
    mx.transitions.easing.Regular.easeIn
    mx.transitions.easing.Regular.easeInOut


    mx.transitions.easing.Bounce.easeOut
    mx.transitions.easing.Bounce.easeIn
    mx.transitions.easing.Bounce.easeInOut


    mx.transitions.easing.Back.easeOut
    mx.transitions.easing.Back.easeIn
    mx.transitions.easing.Back.easeInOut


    mx.transitions.easing.Strong.easeOut
    mx.transitions.easing.Strong.easeIn
    mx.transitions.easing.Strong.easeInOut


    mx.transitions.easing.Elastic.easeOut
    mx.transitions.easing.Elastic.easeIn
    mx.transitions.easing.Elastic.easeInOut

    mx.transitions.easing.None.easeNone

>>>>


Falls nun jemand denkt, daß dies für in Unpraktisch ist, da er ja an das Ende seiner Bewegung, seines Einblendens eine Aktion gekoppelt hat, kein Problem. Dafür hat Macromedia folgendes Event vorgesehen.




>>>>
Code:

MeinTween.onMotionFinished = function(){
_root.gotoAndStop(2)
trace("MeinTween beendet")
}
[/list]
>>>>


Vorteil gegenüber der allgemein verbreiteten "onEnterFrame"-Methode ist ganz einfach, daß eine "onEnterFrame"-Funktion, wenn man sie nicht ständig entfernt und wieder hinzufügt, jedes mal feuert wenn man den Frame "betritt", bzw. wenn die Bühne neu gerendert wird. Und das kostet.

Man kann diese Methode auf jede Property anwenden, die als Datentyp Number hat. _alpha, _x, _width, _rotation, _yscale etc etc.
Ich hoffe ich konnte irgendwem damit helfen


Zuletzt bearbeitet von phihochzwei am So 27.08.2006 19:56, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
l'Audiophile

Dabei seit: 16.09.2004
Ort: Berlin
Alter: 43
Geschlecht: Männlich
Verfasst Fr 09.06.2006 15:15
Titel

Antworten mit Zitat Zum Seitenanfang

Guter Einstieg hier im Forum und willkommen im kleinen aber feinen MGI-Flash-Club. *zwinker*
Schön aufgelistet! *Thumbs up!*

Man sollte auch mal einen Blick auf das Animation Package von Alexander Uhlmann werfen, welches auch einige mächtige AS 2.0-Klassen und Methoden rund um Tweens bietet.

Ich hab Sarky mal ne PN geschrieben, damit er das hier mal zu den Flash-Tutorials verschiebt.

Gruß PeJot


// Edit
Anmerkung:
Für diejenigen, die sich für das Thema interessieren und wissen möchte, welche Eigenschaften vorhanden sind und wie die einzelnen Klassen aufgebaut sind, bzw. wie die Methoden arbeiten, lohnt sich ein Blick in folgende Ordner der Flashinstallation.

de\First Run\Classes\mx\transitions
bzw.
de\First Run\Classes\mx\transitions\easing

Lächel


Zuletzt bearbeitet von l'Audiophile am Fr 09.06.2006 15:27, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Pixelpole

Dabei seit: 25.10.2004
Ort: Trier
Alter: 37
Geschlecht: Männlich
Verfasst Fr 27.02.2009 13:40
Titel

Antworten mit Zitat Zum Seitenanfang

Da ich das ganze in AS2 recht praktisch fand, hier der ganze schmu noch einmal für AS3
Der Code sieht länger aus als er wirklich ist weil ich dreckstück mir viele Kommentare erlaubt habe.

Code:

//Dieses Paket enthält die Tweening Klasse
import fl.transitions.Tween;

//Dies sind die verschiedenen Easeing Typen
//ihr könnt selbstverständlich auch nur einzeilne
//Easing Typen laden die ihr grade braucht (solltet
//ihr auch ihr faulen Säcke! Fürs Tut gehts klar...).
import fl.transitions.easing.*;

//Der MovieClip oder das Objekt das ihr lustig tweenen wollt.
//Hier sind nicht nur MovieClips nötig. Der einfachheit halber
//belassen wir es jetzt allerdings hierbei.
var mc:MovieClip = lustigerMovieClipBlaDerPejotMagFlamingArtsAchselhoehlen;

//Die Property die ihr tween wollt. Das hier ist eigentlich genau wie
//in AS2
var tweenProp:String = 'x';

//Hier unterscheidet sich AS3 ein wenig. Die einzelnen Easing Klassen
//findet ihr in eurem Flash Verzeichnis unter
//de\Configuration\ActionScript 3.0\Classes\fl\transitions\easing
var easing:Function = Regular.easeIn;

//Der Startwert eures Tweens
var begin:int = 0;

//Der Endwert eures Tweens
var end:int = 100;

//Der Zeitraum in dem euer Tween passieren soll.
var time:int = 1.5;

//Gibt an ob der Zeitraum in Frames(false) oder Sekunden(true) angegeben werden soll
var frames:Boolean = true;

//Und hier die lustige Tweening Klasse. Wie man sieht ist die Parameterliste die selbe,
//ansonsten ist es doch recht ähnlich.
var myTween:Tween = new Tween(mc, tweenProp, easing, begin, end, time, frames);


Und hier noch einmal schnell alle easing typen:

Back.easieIn
Back.easeOut
Back.easeInOut

Bounce.easieIn
Bounce.easeOut
Bounce.easeInOut

Elastic.easieIn
Elastic.easeOut
Elastic.easeInOut

None.easieIn
None.easeOut
None.easeInOut

Regular.easieIn
Regular.easeOut
Regular.easeInOut

Strong.easieIn
Strong.easeOut
Strong.easeInOut

so. fertig. Lächel

Wie ihr seht ist der ganze Spaß recht ähnlich und kann genauso unkompliziert verwendet werden wie das obere Beispiel.

Viel Spaß mit dem Schmu...aber ich bin mir zu 98% sicher das es sowieso keine Sau interessiert...

geht mir eigentlich nur um eines Pole.Beiträge += 1 Grins
  View user's profile Private Nachricht senden
bacon

Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 27.02.2009 14:00
Titel

Antworten mit Zitat Zum Seitenanfang

Der Penner hier erklärts ganz gut:
http://www.robertpenner.com/easing/
  View user's profile Private Nachricht senden
Pixelpole

Dabei seit: 25.10.2004
Ort: Trier
Alter: 37
Geschlecht: Männlich
Verfasst Fr 27.02.2009 14:27
Titel

Antworten mit Zitat Zum Seitenanfang

Die Theorie ist wirklich gut *Thumbs up!*

Was mich grade noch auf etwas bringt: Es ist in AS selbstverständlich auch möglich eigene Easing Typen zu verwenden.

Hierbei kann man sich gut am Code der mit Flash CS3 mitgelieferten Klassen orientieren:


Hier mal als Beispiel die Regular Klasse:

Code:

// Copyright © 2007. Adobe Systems Incorporated. All Rights Reserved.
package fl.transitions.easing
{

/**
 *  The Regular class defines three easing functions to implement
 *  accelerated motion with ActionScript animations. The acceleration of motion
 *  for a Regular easing equation is the same as for a timeline tween at 100% easing
 *  and is less dramatic than for the Strong easing equation.
 *  The Regular class is identical to the fl.motion.easing.Quadratic class in functionality.
 *
 * @playerversion Flash 9.0
 * @langversion 3.0
 * @keyword Ease, Transition   
 * @see fl.transitions.TransitionManager   
 */ 
public class Regular
{


   //--------------------------------------------------------------------------
   //
   //  Class methods
   //
   //--------------------------------------------------------------------------

    /**
     * The <code>easeIn()</code> method starts motion from a zero velocity
     * and then accelerates motion as it executes.
     *
     * @param t Specifies the current time, between 0 and duration inclusive.
     *
     * @param b Specifies the initial value of the animation property.
     *
     * @param c Specifies the total change in the animation property.
     *
     * @param d Specifies the duration of the motion.
     *
     * @return The value of the interpolated property at the specified time.
     *
     * @includeExample examples/Regular.easeIn.1.as -noswf
     *
     * @playerversion Flash 9.0
     * @langversion 3.0
     * @keyword Ease, Transition   
     * @see fl.transitions.TransitionManager         
     */ 
   public static function easeIn(t:Number, b:Number,
                          c:Number, d:Number):Number
   {
      return c * (t /= d) * t + b;
   }

    /**
     * The <code>easeOut()</code> method starts motion fast
     * and then decelerates motion to a zero velocity as it executes.
     *
     * @param t Specifies the current time, between 0 and duration inclusive.
     *
     * @param b Specifies the initial value of the animation property.
     *
     * @param c Specifies the total change in the animation property.
     *
     * @param d Specifies the duration of the motion.
     *
     * @return The value of the interpolated property at the specified time.
     *
     * @includeExample examples/Regular.easeOut.1.as -noswf
     *
     * @playerversion Flash 9.0
     * @langversion 3.0
     * @keyword Ease, Transition   
     * @see fl.transitions.TransitionManager         
     */ 
   public static function easeOut(t:Number, b:Number,
                           c:Number, d:Number):Number
   {
      return -c * (t /= d) * (t - 2) + b;
   }

    /**
     * The <code>easeInOut()</code> method combines the motion
     * of the <code>easeIn()</code> and <code>easeOut()</code> methods
     * to start the motion from a zero velocity,
     * accelerate motion, then decelerate to a zero velocity.
     *
     * @param t Specifies the current time, between 0 and duration inclusive.
     *
     * @param b Specifies the initial value of the animation property.
     *
     * @param c Specifies the total change in the animation property.
     *
     * @param d Specifies the duration of the motion.
     *
     * @return The value of the interpolated property at the specified time.
     *
     * @includeExample examples/Regular.easeInOut.1.as -noswf
     *
     * @playerversion Flash 9.0
     * @langversion 3.0
     * @keyword Ease, Transition   
     * @see fl.transitions.TransitionManager         
     */ 
   public static function easeInOut(t:Number, b:Number,
                            c:Number, d:Number):Number
   {
      if ((t /= d / 2) < 1)
         return c / 2 * t * t + b;

      return -c / 2 * ((--t) * (t - 2) - 1) + b;
   }
}

}


Robert Penners Pakete sind zwar nur für AS1 und AS2 geschrieben, es sollte allerdings problemlos möglich sein sie für AS3 zu modifizieren.
  View user's profile Private Nachricht senden
Pixelpole

Dabei seit: 25.10.2004
Ort: Trier
Alter: 37
Geschlecht: Männlich
Verfasst Fr 27.02.2009 14:40
Titel

Antworten mit Zitat Zum Seitenanfang

und noch ein Nachtrag:

das ganze Teil hat natürlich auch ein paar events für die man sich listener basteln kann:

Hier ein kleiner Auszug aus der Doku dazu:

motionChange
Indicates that the Tween has changed and the screen has been updated.

motionFinish
Indicates that the Tween has reached the end and finished.

motionLoop
Indicates that the Tween has restarted playing from the beginning in looping mode.

motionResume
Indicates that the Tween has resumed playing after being paused.

motionStart
Indicates that the motion has started playing.

motionStop
Indicates that the Tween has been stopped with an explicit call to Tween.stop().
  View user's profile Private Nachricht senden
 
Ähnliche Themen Undokumentierter Bug in der Lightbox?
Tweenings vor FLVs abspielen ohne Performanceprobleme?
Klasse für SQL Anweisungen
SVG id aktiviert Klasse
JavaScript - CSS - Klasse ändern
BitmapData Klasse und loadmovie
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Multimedia


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.