[GastForen Diverses Was sonst nirgends rein passt... [Adobe Animate] HTML5 Banner mit clickTag IAB Standard erstellen

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

[Adobe Animate] HTML5 Banner mit clickTag IAB Standard erstellen

sacrifice_87
Beiträge gesamt: 7

15. Apr 2020, 14:07
Beitrag # 1 von 1
Bewertung:
(13953 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Liebes Forum,

ich lese häufig mit, eigene Beiträge hab ich recht wenig gemacht. Ich hoffe ich hab die richtige Kategorie gewählt? Nun versuche ich mich in Adobe's Animate einzuarbeiten um mich in Punkte Online Banner Erstellung weiterzubilden.

Eine Animation hab ich gut hingebracht,da ich die entsprechenden Tools gut von den alten Flashprogrammen etc noch im Hinterkopf hatte. Jedoch ist für mich jetzt die aktuelle Schwierigkeit den richtigen Platz für den clicktag zu platzieren, an und für sich hätte ich gedacht, dass ich diesen schon habe (aufgrund eines youtube Videos), jedoch sagt die HTML5 Check Seite dass dieser nicht funktioniert.

Code
<!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">
<meta name="ad.size" content="width=300,height=250">

<title>AniTest</title>
<script type="text/javascript">
var clickTag="EIGENEURL";
</script>


<!-- write your code here -->
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="AniTest.js"></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("0330AB32C051324BA6CB615E21B84EBD");
var lib=comp.getLibrary();
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
var lib=comp.getLibrary();
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt, comp) {
var images=comp.getImages();
if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }
}
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();
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for(i=0; i<ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
}
exportRoot = new lib.AniTest();
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(false,'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(55, 203, 198, 1.00); width:300px; height:250px">
<a href="javascript:window.open(window.clickTag)">
<canvas id="canvas" width="300" height="250" style="position: absolute; display: block; background-color:rgba(55, 203, 198, 1.00);"></canvas>
</a>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:300px; height:250px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>



Der gesamte Code kommt direkt von Adobe Animate. Den rot markierten Teil hab ich von https://www.youtube.com/watch?v=aaZ1RtuQliQ eingebaut. Auf der https://www.html5check.at/ Checksite wurde jedoch der ClickTag als nicht korrekt eingebunden definiert.
Vielleicht kann mir hier wer helfen? Oder mir einen Link zu einer zuverlässigen Quelle (da es hier zwar dutzende Ergebnisse bei Google gibt, aber wirklich korrekte hab ich nicht gefunden..). Auch bei der iab https://www.iab-austria.at/...tlinie/2-5-clicktag/ Site ist die Einbindung nur so erklärt, aber da würde die eigene URL nirgends vorkommen oder versteh ich das falsch? Diese einbettung haben die:

Code
<!doctype html> 
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<script>
var getUriParams = function() {
var query_string = {}
var query = window.location.search.substring(1);
var parmsArray = query.split('&');
if(parmsArray.length <= 0) return query_string;
for(var i = 0; i < parmsArray.length; i++) {
var pair = parmsArray[i].split('=');
var val = decodeURIComponent(pair[1]);
if (val != '' && pair[0] != '') query_string[pair[0]] = val;
}
return query_string;
}();
</script>

</head>

<body bgcolor="#F7A409" >

<a href="#clicktag" id="IAB_clicktag" target=“_blank“>IAB clicktag</a>
<a href="#clicktag2" id="IAB_clicktag2" target=“_blank“>IAB clicktag2</a>

<script>
document.getElementById('IAB_clicktag').setAttribute('href', getUriParams.clicktag);
document.getElementById('IAB_clicktag2').setAttribute('href', getUriParams.clicktag2);
</script>

</body>
</html>



Zweite Frage habe ich noch:
Wie kann ich die KB Grenze von 80 KB einhalten, wenn man jedoch für Retina Displays höhere Auflösungen benötigt? (Bspw. für GIF Exports oder PNGs?)

Vielen lieben Dank
lg

(Dieser Beitrag wurde von sacrifice_87 am 15. Apr 2020, 14:08 geändert)
X

Aktuell

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
04.09.2020 - 05.03.2021

Digicomp Academy AG, Limmatstrasse 50, 8005 Zürich
Freitag, 04. Sept. 2020, 13.00 Uhr - Freitag, 05. März 2021, 12.00 Uhr

Lehrgang

Bilden Sie sich zum zertifizierten Publishing-Multimedia-Profi aus. Neben Fotografie und Video befassen Sie sich mit der Medienproduktion, digitalen Publikationen und dem Webdesign für Desktop- und mobile Endgeräte. Mit dem Abschluss «Publisher Professional – Profil «Multimedia» verliehen durch die Digicomp Academy AG, bestätigen Sie Ihre Praxiserfahrungen und Qualifizierung in den genannten Themengebieten gegenüber Ihrem Arbeitgeber sowie Ihren Kunden.

Preis: CHF 10'500.-
Dauer: 30 Tage (ca. 210 Lektionen) – Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt

Nein

Organisator: Digicomp Academy AG

Kontaktinformation: Isil Günalp, E-Mailisil.guenalp AT digicomp DOT ch

https://www.digicomp.ch/weiterbildung/software-anwendungs-trainings/adobe-trainings/publishing-lehrgaenge/lehrgang-publisher-professional-profil-multimedia

Veranstaltungen
02.10.2020 - 11.12.2020

Digicomp Academy AG, Limmatstrasse 50, 8005 Zürich
Freitag, 02. Okt. 2020, 13.00 Uhr - Freitag, 11. Dez. 2020, 15.00 Uhr

Lehrgang

Steigen Sie in die Welt des Publishings ein und erlangen Sie die Zertifizierung von publishingNETWORK. Lernen Sie in diesem Lehrgang Druckmedien professionell zu erarbeiten, druckfertige PDFs zu erstellen und CI/CD-Vorgaben umzusetzen. Mit dem Abschluss «Publisher Basic» verliehen durch die Digicomp Academy AG, bestätigen Sie Ihre Praxiserfahrungen und Qualifizierung in den genannten Themengebieten gegenüber Ihrem Arbeitgeber sowie Ihren Kunden.

Preis: CHF 6'300.-
Dauer: 18 Tage (ca. 126 Lektionen) – Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt.

Nein

Organisator: Digicomp Academy AG

Kontaktinformation: Isil Günalp, E-Mailisil.guenalp AT digicomp DOT ch

https://www.digicomp.ch/weiterbildung/software-anwendungs-trainings/adobe-trainings/publishing-lehrgaenge/lehrgang-publisher-basic

Neuste Foreneinträge


RTF Export Fußnoten (CC2020[15.1.1],WIN10)

Werkzeugleisten verschwunden

Konvertierung von Framemaker 2019 nach Word

Indesign Fußnoten/Endnoten bei Buchfunktion

JavaScript mit IF Else um Email Adresse auszwählen

Pfad aus Zwischenablage für neues Bild ( rahmen )

Dropdown Farbmenu

Aufzählung mit hängendem Einzug in QX20?

Tabelle soll in interaktivem PDF editierbar sein - geht das?

Colormanagement bei Ausgabe von platzierten und profilierten cmyk-PDFs in 2020
medienjobs