Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Flash Alternative“

G

graubart

Guest

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

Aktives Mitglied

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.
 
G

graubart

Guest

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>
<!--
NOTES:
1. All tokens are represented by '$' sign in the template.
2. You can write your code only wherever mentioned.
3. All occurrences of existing tokens will be replaced by their appropriate values.
4. Blank lines will be removed automatically.
5. Remove unnecessary comments before creating your template.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>test</title>
<!-- write your code here -->
<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>
<!-- write your code here -->
</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>
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.880
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben