Mit Slider Film steuern
0 
klawischnigg
0 
Rolf B
0 Rolf B
Mit Slider Film steuern
Gunnar BittersmannHallo,
ich habe 100 durchnummerierte Bilder die ich durch einen Slider steuern möchte. Der Slider beginnt ganz links. Wird drauf geklickt und die Maustaste festgehalten und nach rechts geschoben sollen die Bilder der Reihenfolge nach angezeigt werden. Wird der Slider nach links verschoben so das ganze anders herum.
Gibt es dafür ein Beispiel oder auch ein Programm?
-
Hi there,
ich habe 100 durchnummerierte Bilder die ich durch einen Slider steuern möchte. Der Slider beginnt ganz links. Wird drauf geklickt und die Maustaste festgehalten und nach rechts geschoben sollen die Bilder der Reihenfolge nach angezeigt werden. Wird der Slider nach links verschoben so das ganze anders herum.
Gibt es dafür ein Beispiel oder auch ein Programm?
Ja, schaust Du da...
-
Hallo klawischnigg,
weißt Du, ob slick gerade das kann, was Uwe möchte: Mit der Maus einen Slider verschieben und das Bild wechselt synchron mit der Verschiebung?
Zumindest zeigen die Beispiele, die slick auf der Startseite hat, sowas nicht. Die Doku wollte ich mir jetzt nicht "eben mal" reinziehen.
Rolf
--
sumpsi - posui - obstruxi-
Hi there,
weißt Du, ob slick gerade das kann, was Uwe möchte: Mit der Maus einen Slider verschieben und das Bild wechselt synchron mit der Verschiebung?
Ja, ein bisschen wird er schon noch arbeiten müssen.
Leider hat er uns ja im Unklaren gelassen, wobei genau er jetzt Unterstützung benötigt. Ein fertiges Programm, das er sich vorstellt, wird er vermutlich nirgends bekommen...
-
-
-
Hallo Uwe,
naja, ein Slider ist mit <input type="range"> schnell erstellt.
Ein input-Event ist schnell registriert.
Die naive Lösung wäre dann, im input-Eventhandler das src Attribut eines img Elements zu verändern.
Nur wird das kein schöner Film, weil der Brauser jedes Bild erst bei Bedarf lädt. Man muss die Bilder also im Voraus laden. In 100 img Elemente, die ausgeblendet sind (mit display:none) und von denen das, das gerade aktiv ist, eingeblendet wird. Diese img liegen alle an der gleichen Position (position:absolute) übereinander.
Diese img Elemente erzeugst Du sinnvollerweise per JavaScript in einer Schleife, und registriert auf jedem einen Eventhandler für das load Event. Das ist immer die gleiche Funktion, und sie muss nur zählen, wieviele Bilder geladen sind. Sobald der Zähler auf 100 steht, kannst Du den slider aktivieren.
Das ist alles kein Hexenwerk. Fang mal an, zum Beispiel in einem codepen oder einem jsfiddle, und dann können wir uns das gemeinsam anschauen und uns über Fragen, die Du noch hast, unterhalten.
Das setzt natürlich voraus, dass Du Grundkenntnisse in CSS und JavaScript hast. Hast Du die nicht, würde ich empfehlen, dass Du Dir erstmal die Tutorials in unserem Wiki vornimmst.
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
Nur wird das kein schöner Film, weil der Brauser jedes Bild erst bei Bedarf lädt. Man muss die Bilder also im Voraus laden.
Du hast außer Augen verloren, dass 100 Bilder vorzuladen nicht das ist, was man tun sollte.
Dabei hat dein Posting so verheißungsvoll angefangen: „Film“. Genau. Wenn man einen Film will, dann sollte man ein Videoformat verwenden, nicht 100 Einzelbilder.
😷 LLAP
--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon-
Hallo Gunnar,
wenn man ein <video> Element so steuern kann, wie es Uwe gerne möchte, dann ja.
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
wenn man ein <video> Element so steuern kann, wie es Uwe gerne möchte, dann ja.
Kennst du einen Video-Player, bei dem das nicht der Fall wäre, d.h. der keinen Slider hat, um im Video vorwärts/rückwärts zu gehen?
😷 LLAP
--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon-
Hallo Gunnar,
Einzelbildweise? Oder in Basisframe-Sprüngen?
Rolf
--
sumpsi - posui - obstruxi-
Vielen Dank,
für die Antworten und eure Mühe. Ja wie ist es wenn man als älteres Semester beginnt sich mit aktiven Inhalten zu beschäftigen. Man fängt mit einem Programm an das eine grafische Benutzeroberfläche hat in meinem Fall Adobe Animate, ist ja schön einfach. Ein paar einfache Steuerungsbefehle gibt es auch und schon ist man der Macher. Dann wird es etwas komplizierter wie in diesem Fall, 50 Bilder liegen in der Zeitleiste in dem Beispiel wandert das Rechteck nur von links nach rechts. Eine Sliderleiste erstellt den in diesem Bereich soll sich dann der Slider bewegen. Den Slider erstellt in ein Movieclip umgewandelt. Dann hat man ja das Aktionen Fenster und erkennt es gibt gar keinen Befehl mit dem man ganz einfach dem Slider sagen kann hallo wenn du angeklickt und nach rechts gezogen wirst springe in der Zeitleiste immer ein Bild weiter, bleibe aber in deinem Sliderbereich. Nun weiß man ja JavaScript ist in aber das sind derzeit noch böhmische Dörfer. Mein Versuch wäre gewesen ein Skript zu erstellen und dieses dann in Animate zu laden.
-
Hallo Uwe,
na super - du suchst also eine Lösung mit ActionScript in Adobe Animate. Es ist sehr freundlich, dass Du rein zufällig mit dieser kleinen Information herüberkommst.
Wie man dein Problem im Browser lösen könnte, darüber haben wir nun diskutiert.
In Animate - keine Ahnung. ActionScript ist ein Abkömmling von JavaScript, sicher, aber es dürfte Unterschiede geben. Und das technische Framework, auf dem man programmiert, ist komplett anders. Im Browser ist es das DOM, sowie diverse Web-APIs, die der Browser mitbringt, und in Animate ist es - naja - Animate. Du kannst mit Animate zwar eine HTML5 Animation erstellen, aber ob Du deshalb gegen das DOM programmierst oder gegen eine von Animate bereitgestellte Zwischenschicht - keine Ahnung-
Hast Du das hier durchgearbeitet? Das sieht sehr umfangreich aus und im Gegensatz zu Microsoft scheint Adobe Wert auf brauchbare Dokumentation zu legen.
Rolf
--
sumpsi - posui - obstruxi-
Sorry und Stop,
wo habe ich geschrieben das ich eine Lösung für Action Script suche. In das Aktionen Fenster kann man ganz normal JavaScript einschreiben. Es wäre schön gewesen für genau diesen Fall mal ein JavaScript Beispiel zu haben um das mal nach zu vollziehen. Und auch zu probieren ob man das Skript in Animate nutzen kann.
Nochmal Sorry, ich wollte nicht verwirren
-
Hallo Uwe,
wo habe ich geschrieben das ich eine Lösung für Action Script suche.
Du hast „Animate“ geschrieben. Das ist ursprünglich ein Tool für Flash gewesen und kann seit 5 Jahren auch HTML5 Animationen erzeugen. Deswegen bin ich von ActionScript ausgegangen.
Aber wenn ich nochmal genauer nachlese - ein HTML Canvas Dokument kann auch JavaScript verwenden. Es muss aber die von Animate bereitgestellten CreateJS APIs verwenden, weil die Bilder auf einen Canvas gemalt werden (eine Zeichenfläche, die der Browser bereitstellt). D.h. du musst irgendwie - wenn ich das richtig lese - mit der Bühne interagieren. Und nicht direkt mit dem Browser.
Und da bin ich - und vermutlich die meisten anderen hier auch - raus.
Rolf
--
sumpsi - posui - obstruxi-
Okay,
danke für eure Hilfe und einen guten Rutsch.
-
-
-
-
-
-
-
-
-
