WebSite X5Help Center

 
Incomedia
Incomedia

Wie kann ich eine WebAnimator 3 Animation mit dem HTML-Code-Objekt in WebSite X5 einfügen?  de

Autor: Incomedia
Besucht 8970, Followers 3, Geteilt 0  

Der einfachste Weg, um eine WebAnimator 3 Animation in WebSite X5 einzufügen, ist sicher mit einem Objekt HTML5-Animation. In diesem Fall reicht es tatsächlich die Animation als WAX5-Datei zu exportieren, und diese dann im Programm zu importieren.

Aber als Alternative können die Animationen auch mit dem HTML-Code-Objekt eingefügt werden. Das ist die Vorgehensweise, die Sie folgen sollen:

1.Erstellen Sie die Animation mit WebAnimator und speichern Sie diese mit einem Namen ab (z.B. MYANIMATION).

2. Exportieren Sie die Animation aus WebAnimator in ein leeres Verzeichnis (z.B. C: \ WA_Project).

3.Öffnen Sie das Programm WebSite X5 und ziehen Sie das HTML-Code-Objekt auf eine Seite. Dann geben Sie den folgenden HTML-Code ein:

<script>
$(window).bind('resize', function () {
resizeWAObj('MYANIMATIONStage');
}).trigger('resize');

function resizeWAObj(e){
var target = $('#' + e + '.wascript');
t = $("#" + e);
i = $("#" + e + "Container").parent().width();
n = $("#" + e + "Container").parent().height();
r1 = Math.abs(i/t.width());
r2 = Math.abs(n/t.height());
fact = Math.min(r1, r2);
leftsco = (i - (t.width() * fact)) / 2;
target.attr("style", "transform:scale(" + fact + ");top:0px;left:" + leftsco + "px;");
}
</script>
<div id='MYANIMATIONStageContainer' style='position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; margin: 0px; overflow: hidden; '>
<div id="MYANIMATIONStage" class="wascript">
<script type="text/javascript" charset="utf-8" src="MYANIMATION_resources/WA_SCRIPT.js"></script>
</div>
</div>

Wenn Sie einen anderen Namen für die Animation gewählt haben, beachten Sie dabei, dass Sie im oben stehenden HTML-Code diesen von Ihnen gewählten Namen anstatt MYANIMATION verwenden sollen.

4. Das HTML-Code-Objekt muss die gleiche Höhe haben, die Sie für die WebAnimator Animation definiert haben.

Diese Einstellung kann im Programm WebAnimator in den Projekteigenschaften bearbeitet werden.

5. In der Registerkarte „Erweitert“ des HTML-Code-Objekts müssen Sie alle Dateien unter „C: \ WA_Project \ MYANIMATION_resources" einfügen. Bitte beachten Sie, dass Sie „MYANIMATION_resources" auf dem Server als relative Pfadnamen definieren sollen.

Aktivieren Sie die Option „Verknüpfen Sie die Datei (JS und CSS-Dateien)" ausschließlich für die Datei „jquery-1.7.min.js".

Hinweis:Wenn Sie die Dateien schneller importieren möchten, sollen Sie bitte die erste Datei einfügen und den korrekten Pfad definieren. Dann sollen Sie die eingefügte Datei wählen und die STRG-Taste zusammen mit dem Button „Hinzufügen“ drücken. Wählen Sie schließlich die anderen Dateien, um diese alle auf einmal einzufügen.

Für weiter technische Unterstützung können Sie sich direkt an das Forum von WebAnimator wenden: http://forum.webanimator.com/

Mehr Informationen zum Programm WebAnimator finden Sie auf: http://www.webanimator.com !

Gepostet am