Wie Animation erstellen?

  • Hallo,


    Ich habe eine Animation mit Flash erstellt und möchte sie nun in HTML5 bzw. CSS3 nachbauen. leider habe ich davon nicht so richtig Ahndung.
    seit Tagen schaue ich mit Tutorials an und überlege mir ständig, wie ich das schaffen kann.


    hier mal die Animation mit AS3 programmiert:
    https://dl.dropboxusercontent.…schwung%20mouseOver2.html



    wenn möglich soll die Animation mit HTML 5 nachher genauso aussehen.


    ich weiß jetzt nur nicht wie ich das Ganze anpacken muss. bis jetzt besteht die Animation aus einem Video, das ich mit den buttons immer 24 Frames vorwärts bzw. rückwärts abspiele und immer wieder anhalte,


    ist dieses Vorgehen auch mit HTML 5 bzw. CSS 3 notfalls auch java möglich? oder geht das ganze viel einfacher?
    HTML und CSS Kenntnisse habe ich, Java habe ich noch nicht verwendet.


    es wäre richtig super, wenn ihr mir etwas helfen könntet. sonst muss ich mir was anderes überlegen. :(


    schon mal vielen Dank im Voraus!

  • Hi: also, es ist möglich, einfache Animationen nur mit HTML5 und CSS3 zu erstellen.
    Allerdings brauchst du, wenn du solche Pfeile verwenden willst, einen sog. Eventhandler, also eine Funktion, die das Event des Klickens auf den Pfeil abfängt und interpretiert. Und so einen Eventhandler gibt es nur in JavaScript.


    Und ja, mit HTML5, CSS3 und JavaScript ist es eindeutig möglich, eine Animation wie die von dir gebaute zu erstellen. Schließlich wurden schon komplette "Flash"-games ohne Flash hochgezogen, nur mit den oben genannten Ressourcen.


    WIE das Ganze geht: da bin ich überfragt :D JS Animationen sind nicht meine Stärke.

  • Danke für deine Antwort The Scout.


    Gibt es hier in diesem Forum zufällig einer, der sich mit Javascript etwas auskennt und diese Steuerung hinzubekommen?
    oder bin ich dafür im falschen Forum?

  • Gibt es hier in diesem Forum zufällig einer, der sich mit Javascript etwas auskennt und diese Steuerung hinzubekommen?


    Würde es am ehesten mit einem canvas-Element umsetzen , dem du als Hintergrund dieses Band gibtst.
    Die Schachteln dann mit Vektoren/reinen Koordinaten auf den entsprechenden Kreisbahnen drehen lassen,
    wenn der MouseClick ausgelöst wird. Schaut so betrachtet nicht besonders schwierig aus, aber ich bin
    auch nicht so ganz auf fit mit den Manipulationsmöglichkeiten dort.


    Dazu mal ein kleines Tut: http://www.html5canvastutorial…5-canvas-animation-stage/


    Und natürlich finden sich dort auch bei Mozilla viele Beispiele: https://developer.mozilla.org/…Tutorial/Basic_animations


    Theoretisch dürfte sowas aber auch schon durch reines CSS lösbar sein, kannst dir ja auch mal
    anschauen ob du einen Weg ohne JS/Flash findest :)

  • nach einigen Tutorials zu Java habe ich gemerkt, dass sich Java und AS3 sehr ähneln. Deswegen bin mir sicher das es auch mit Java hinbekommen werde, dauert halt noch ein bisschen.


    Du meinst also kein Video einbetten sondern alle Schachteln als Einzelbild, die dann mit CSS animiere. das Problem sehe ich bis jetzt dabei, dass jede Schachtel immer auf einer anderen Position ist. d.h. je nachdem wo sich die Schachtel momentan befindet muss Animation immer anders aussehen. D.h. ich müsste irgendwie den Zustand der einzelnen Schachteln abtragen sowie das sehe. also eine Idee habe ich schon gedacht, nur finde ich mein Ansatz glaube ich einfacher.


    ich werde mir mal deine vorgeschlagenen Tutorials anschauen. Danke!

  • [...] JavaScript, diese Sprache ähnelt Java [...]


    Das habe ich auch mal behauptet, möchte ich an dieser Stelle offiziell revidieren, JavaScript und Java haben etwa so viel gemeinsam wie Enten und Flugzeuge, beide können fliegen aber das war es auch. Habe jetzt etwas mehr mit Java gearbeitet und erkenne kaum nennenswerte Parallelen.


    Die Hierarchie in der ich das einteilen würde wäre: C# > JavaScript > ActionScript


    Java wirkt eher wie eine Mischung aus schlecht geschriebenen C++ und einigen C# Elementen.


    Ist jedoch auch irgendwie nur eine persönliche Meinung. Ich mag Java nach wie vor weder als Anwender noch als Entwickler!

  • ist dieses Vorgehen auch mit HTML 5 bzw. CSS 3 notfalls auch java möglich?

    Erstmal ein ganz klares Ja bzw. ja, aber nicht Java sondern JavaScript (wurde ja jetzt schon zu genüge korrigiert).
    Ich empfehle wärmsten die Seite Codrops , die wirklich die aktuellsten Animationen präsentiert, die heutzutage mit besagten Sprachen entwickelt werden.
    Hier eine Slideshow die ganz schick aussieht: TiltedContentSlideshow/ (ähnelt deiner jetzt nicht wirklich aber nur als kleiner Vorgeschmack sicher ansprechend).


    Ich habe einen kleinen Artikel über einige neuere Animationen geschrieben und dachte mir, vielleicht hilft er dir einen groben Überblick zu verschaffen, was heutzutage alles mit HTML, CSS und JavaScript möglich ist.
    Die Besten Animationen für Modernes Webdesign (Feedback würde mich freuen ^^).


    Auf Codrops kann man sich übrigens den Quellcode runterladen und selbst ein wenig damit rumbasteln.


    Liebe Grüße, Alex :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!