Flash Alternative

graubart · 20.12.2020

Hallo,

vielleicht kennt sich hier jemand in diesem Bereich aus.
In Flash hat man Animationen erstellt, daraus eine .swf erstellt und diese dann auf die Webseite hochgeladen, fertig. Recht komfortabel aber Flash ist tot. Der Nachfolger Adobe Animate arbeitet ähnlich aber auf Basis von JavaScript. Soweit so gut.
Nun möchte ich eine oder auch mehrere in Animate erstellte interaktive Animationen in eine eigene vorhandene Webseite mit einbinden. Wenn man das in Animate veröffentlicht bekommt man eine .html und eine .js. Ich könnte die .js hochladen und den Code aus der Webseite kopieren und in die eigene Webseite einfügen. Das sollte doch anders gehen. Für vier Animationen hätte ich viermal eine .js und auch vier verschiedene Webseiten.

Schönen 4. Advent

danke

owieortho · 20.12.2020

Ich weiß zwar nicht, wie genau das HTML von Animate aussieht, aber wenn Du nur den .js-Aufruf und den relevanten Teil des HTML nimmst, kannst Du das in ein anderes HMTL-Dokument einfügen.

Für die .js-Dateien müsstest Du erst alle vier miteinander vergleichen. Die identischen Teile können sicher in einer Datei liegen. Aufpassen muss man, wenn das erzeugte JS keine unterschiedlichen Bezeichnungen für die id verwendet. Da muss dan für jede Animation nachgearbeitet werden.
Kann aber sein, dass Animate für diesen Fall passende Einstellungen bereithält.

Ohne Quelltexte kann man jetzt nicht konkreter werden. Vielleicht hilft's ja trotzdem...

Gruß, O.

graubart · 20.12.2020

Danke für die Antwort,

Ich hätte mir den Export doch etwas einfacher vorgestellt, das Gefrimel mit dem Code ist zu umständlich. Mit einer Animation ja o.k. aber bei mehreren ist das nicht praktikabel. Vielleicht übersehe ich ja etwas in Animate.

https://abload.de/image.php?img=bild_1qejt8.jpg

das wäre der Code der Webseite.

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>test</title>

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src=""></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp=AdobeAn.getComposition("128C9E25B8871A47AF499D86E13B64B4");
var lib=comp.getLibrary();
handleComplete({},comp);
}
function handleComplete(evt,comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib=comp.getLibrary();
var ss=comp.getSpriteSheet();
exportRoot = new lib.Unbenannt1();
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.framerate = lib.properties.fps;
createjs.Ticker.addEventListener("tick", stage);
}
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true,'both',false,1,[canvas,anim_container,dom_overlay_container]);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
</script>

</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:550px; height:400px">
<canvas id="canvas" width="550" height="400" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:550px; height:400px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>