Animation aus Adobe Edge Animate in Typo3 integrieren

Hallo,

ich habe mir eine Animation in Adobe Edge Animate erstellt und möchte diese nun in meinen bestehenden Typo3 - Auftritt integrieren. Erster Versuch war eine kleine Grafik, die animiert ist, später würde ich auch gerne große Header damit einbinden.

Exportiert man die Animation aus Adobe Edge Animate erhält man eine .html-Datei, insgesamt sieben .js-Dateien und einen Ordner mit den entsprechenden Grafiken.
In der .html-Datei wird eigentlich nur eine der .js-Dateien geladen.

Um die Animation in Typo3 einzubinden habe ich bereits versucht den Pfad zur .js-Datei entsprechend anzupassen (in der .html-Datei und allen .js-Dateien) und den html-Code in ein Inhaltselement "Reines html" einzubinden, leider klappte das nicht. Es wird im Frontend nichts angezeigt.

Hat hier schon jemand Erfahrung mit Adobe Edge Animate oder kann mir generell erklären, wie ich Java-Script auf einer Seite einbinden kann?

Vielen Dank!

Kaum die Frage gestellt und schon selbst die Lösung gefunden. Falls jemand das gleiche Problem haben sollte, hier die kurze Erklärung:

1. Alle benötigten Dateien von Edge Animate auf den Fileadmin hochladen. Ich habe die Dateien bei mir in einem Unterordner des Template-Verzeichnisses liegen. In diesem Ordner müssen sich die folgenden Dateien und Ordner befinden:
- edge_includes
- images
- [Projekt]_edge.js
- [Projekt]_edgeActions.js
- [Projekt]_edgePreload.js

2. Danach im Template unter "Setup" den folgenden Code mit den Pfaden zu den einzelnen Java-Script-Dateien (die sich im Ordner "edge_includes" befinden) eingeben:

page.headerData = COA 
page.headerData.11 = TEXT 
page.headerData.11.value = <script type="text/javascript" src="fileadmin/[Pfad]/edge_includes/edge.1.0.0.min.js"></script> 
page.headerData.11.value = <script type="text/javascript" src="fileadmin/[Pfad]/edge_includes/jquery-1.7.1.min.js"></script>
page.headerData.11.value = <script type="text/javascript" src="fileadmin/[Pfad]/edge_includes/jquery.easing.1.3.js"></script>
page.headerData.11.value = <script type="text/javascript" src="fileadmin/[Pfad]/edge_includes/json2_min.js"></script>

3. (kann auch als 1. gemacht werden) Pfade in den unterschiedlichen Dateien anpassen.
Folgende Dateien müssen bearbeitet werden:

- [Projekt]_edge.js: Pfad zum Ordner "images":

//images folder
var im='fileadmin/[Pfad]/images/';

- [Projekt]_edgePreload.js: Pfad zu den .js-Dateien:

   aLoader = [
    { load: "/fileadmin/[Pfad]/edge_includes/jquery-1.7.1.min.js"},
    { load: "/fileadmin/[Pfad]/edge_includes/jquery.easing.1.3.js"},
    { load: "/fileadmin/[Pfad]/edge_includes/edge.1.0.0.min.js"},
        {test: !hasJSON, yep:"/fileadmin/[Pfad]/edge_includes/json2_min.js"},
          { load: "/fileadmin/[Pfad]/[Projekt]_edge.js"},
          { load: "/fileadmin/[Pfad]/[Projekt]_edgeActions.js"}];

- [Projekt].html: Pfad zur [Projekt]_edgePreload.js:

<script type="text/javascript" charset="utf-8" src="/fileadmin/[Pfad]/[Projekt]_edgePreload.js"></script>

4. Zum Schluss den html-Code aus der [Projekt].html-Datei in ein Inhaltselement "Reines HTML" einfügen.

Und schon habt ihr die Edge Animate Animation in eurer Typo3-Seite. 🙂

Hi!

Dieses Thema ist zwar eigentlich auch für mich gelöst, aber ich habe trotzdem noch eine weitere Frage dazu:

Wie sieht es mit der Performance bei dir aus?
Ich habe zwei Edge Animate Animationen in Typo3 auf einer Seite (Slider + Zeitstrahl) und die CPU-Last geht dadurch stark nach oben...

Liegt das an den Daten an sich, an der Kombination zweier Animationen auf einer Seite oder an einer "ungeschickten" Einbindung?

Meine, etwas dynamischere, Lösung:
Ich habe mit Gridelements in TYPO3 6.2 ein DCE angelegt. Vier Felder für Pfad, Breite, Höhe und Edge-ID. Die Animation als ».oam« abspeichern und in Dreamweaver in ein test.html einfügen. Daraus die 4 Parameter in das neu erstellte TAYPO3-Content-Element übernehmen. Die Animations-Dateien (edgeanimate_assets) auf den Server laden und den Pfad im Content-Element auswählen.

Hier das Gridelements-Template dazu:

{namespace dce=Tx_Dce_ViewHelpers}
<f:layout name="Default" />

<f:section name="main">
	<!--Adobe Edge Runtime-->
	<script>
	var custHtmlRoot="{dce:typolinkUrl(parameter:'{field.path}')}Assets/"; 
	var varwidth="{field.boxwidth}px";
	var varheight="{field.boxheight}px";
	var script = document.createElement('script'); 

	script.type= "text/javascript";
	script.src = "http://animate.adobe.com/runtime/5.0.1/edge.5.0.1.min.js";

	var head = document.getElementsByTagName('head')[0], done=false;
	script.onload = script.onreadystatechange = function(){
		if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
			done=true;
			var opts ={
		scaleToFit: "both",
		centerStage: "none", 
		minW: "0", 
		maxW: varwidth, 
		width: varwidth, 
		height: varheight,
		bScaleToParent: true
		};
		opts.htmlRoot =custHtmlRoot;
			AdobeEdge.loadComposition('{field.filename}', '{field.edgeid}', opts,
			{"dom":{}}, {"dom":{}});		
			script.onload = script.onreadystatechange = null;
			head.removeChild(script);
		}
	};
	head.appendChild(script);
	</script>
<!--Adobe Edge Runtime End -->
	<div id="Stage" class="{field.edgeid}"></div>
</f:section>

Gridelements? DCE?
Da weiß ich erst mal nichts mit anzufangen...

Werd ich wohl etwas recherchieren müssen und schauen, ob ich das hinbekomme.

Danke dafür jedenfalls!! =)