Zur Navigation

Flash-Objekt skalieren

1 Lena567

Hallo Leute,

Ich möchte ein Flash-Objekt skalieren. Mit Javascript. Sodass es sich automatisch verkleinert und an die Bildschirmbreite anpasst, wenn die Displaybreite einen bestimmten Wert unterscheidet.

Habe dazu verschiedenes ausprobiert, aber leider funktioniert das alles nicht
http://lena91567.bplaced.net/flexibel/index.html
http://lena91567.bplaced.net/flexibel/index1.html
http://lena91567.bplaced.net/flexibel/index2.html
http://lena91567.bplaced.net/flexibel/index3.html
http://lena91567.bplaced.net/flexibel/index4.html
http://lena91567.bplaced.net/flexibel/index5.html


über CSS funktioniert das ganze folgendermaßen:
@media screen and (max-width: 360px) {
picture {
	transform: scale(0.295);
}
}
nun muss man dann den Faktor für verschiedene Breiten definieren.
Das ist aber etwas aufwendig.
Mit Javascript habe ich dann noch das folgende gemacht, aber das funktioniert auch nicht
http://lena91567.bplaced.net/flexibel/index6.html

Funktioniert das ganze wirklich nicht über Javascript?
Oder gibt es doch eine Lösung?

17.08.2023 11:01

2 Jörg Kruse

Als ich den Thread-Titel las und mein Browser auch noch den Flash-Film abspielte, dachte ich erst, ich hätte eine Zeitreise gemacht :) diesen Emulator Ruffle kannte ich noch nicht.

Mit Javascript habe ich dann noch das folgende gemacht, aber das funktioniert auch nicht
http://lena91567.bplaced.net/flexibel/index6.html

also damit:

<script>
// Get the display width
const displayWidth = window.innerWidth;
// Check if the display width is smaller than 660 pixels
if (displayWidth < 660) {
  // Get the picture element
  const picture = document.querySelector("picture");
  // Calculate the scaling factor
  const scaleFactor = (displayWidth / 600) * 0.9;
  // Scale the picture
  picture.style.transform = `scale(${scaleFactor})`;
}
</script>

In Firefox und Chrome wird das Video analog zum Viewport verkleinert. Falls du die Seite durch Verkleinern des Fensters testest, musst du diese noch neu laden, da das Script nur einmalig ausgeführt wird (und nicht nach jedem Resize)

17.08.2023 15:09 | geändert: 17.08.2023 15:09

1 Forenmitglied fand diesen Beitrag gut

3 Lena567

Danke Jörg für deine Antwort!

Also irgendwie funktioniert das Beispiel 6 bei mir nicht
http://lena91567.bplaced.net/flexibel/index6.html

Auch auf der folgenden Seite nicht
http://lena91567.bplaced.net/flexibel/Simulator6.html
auf dieser Seite werden verschiedene Displaybreiten simuliert

Jetzt funktioniert es doch. Keine Ahnung, wieso das jetzt funktioniert


Ich finde Ruffle richtig super.
http://lena91567.bplaced.net/flexibel/Weltmeere
(Hier dauert das Laden etwas länger, weil die Flash-Datei fast 7 MB groß ist)

17.08.2023 16:28 | geändert: 17.08.2023 16:29

5 Lena567

Ich würde gerne das Laden beschleunigen.
Wie mache ich das am besten?

Nehmen wir als Beispiel die Seite http://lena91567.bplaced.net/ruffle/human_body/index.html

Um die Flash-Datei abzuspielen, wird zuerst das ruffle-Skript (aktuell fast 100 kB gziped).
Durch dieses Skript wird dann eine wasm-Datei geladen. Diese Datei hat etwas über 4 MB gziped.

Wenn ich die wasm-Datei über die preload-Funktion vorlade, ist das empfehlenswert oder wird die Datei dann zweimal geladen, weil sie ja über das Ruffle-Skript angefordert wird?

30.08.2023 17:36

6 Jörg Kruse

wird die Datei dann zweimal geladen, weil sie ja über das Ruffle-Skript angefordert wird?

Das kannst du mit den Browser-Entwickler-Tools testen, im Firefox Inspector beispielsweise im Reiter Netzwerk, wobei der Cache dort deaktiviert sein sollte. Beim Neuladen der Seite siehst du dann in der Liste, ob die Datei ein- oder zweimal geladen wird.

30.08.2023 18:30

1 Forenmitglied fand diesen Beitrag gut

7 Lena567

Danke Jörg für die Info!

31.08.2023 08:27

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]