[Adobe Animate] HTML5 Banner mit clickTag IAB Standard erstellen

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

Diverses

Themen

Beiträge

Moderatoren

Letzter Beitrag

Was sonst nirgends rein passt...

3224

16167

boskop

5. Feb 2024, 23:41

Peter Lenz

sacrifice_87

Beiträge gesamt: 7

15. Apr 2020, 14:07
Beitrag # 1 von 1
Bewertung:
(39449 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)

Aktuell

Farbmanagement

ColorLogic präsentiert CoPrA 10: Revolution der Farbprofilierung mit verbesserten â€¨Funktionen

| 27.09.2023

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.

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

Veranstaltungen

14.05.2024

Einsparpotenziale in der Weiterverarbeitung

Online
Dienstag, 14. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Prozessoptimierung ist ein Teamsport! Keine Software und keine Maschine allein kann Ihnen helfen, die Effizienzpotenziale Ihres Betriebes maximal auszuschöpfen. Von der Auftragsannahme über die Vorstufe und den Druck bis hin zur Weiterverarbeitung – alles muss optimal ineinandergreifen. Apropos Weiterverarbeitung – in vielen Druckbetrieben fristet sie in Sachen Prozessoptimierung immer noch ein Schattendasein. Dabei liegen hier mittlerweile die größten Einsparpotenziale! In einem Webinar von Horizon und Impressed erfahren Sie, wie Sie diese Einsparungen realisieren können. Horizon, bekannt für innovative Lösungen in der Druckweiterverarbeitung, bietet mit iCE LiNK eine Workflowlösung für die Weiterverarbeitung. iCE LiNK überwacht, visualisiert und analysiert Produktionsabläufe und unterstützt bei der Wartung – damit immer alles reibungslos läuft. Den gleichen Anspruch hat der von Impressed entwickelte Impressed Workflow Server – er ist die smarte PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt. Im Webinar zeigen Ihnen die Experten von Horizon und Impressed, wie beide Lösungen im Team die Effizienz und Produktivität Ihres Betriebes steigern können. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Organisator: Impressed / Horizon

https://www.impressed.de/schulung.php?c=sDetail&sid=327

Einsparpotenziale in der Weiterverarbeitung

Veranstaltungen

16.05.2024

Und es geht doch: Automatisierung im Großformatdruck!

Online
Donnerstag, 16. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Günther Business Solutions und Impressed treten in einem Webinar den Gegenbeweis an. Experten beider Unternehmen zeigen, wie Großformatdrucker vom Einsatz zweier bewährter Lösungen profitieren können: • von advanter print+sign von Günther Business Solutions, dem ERP-System für den Großformatdruck, dass alle Phasen der Wertschöpfung im Large Format Printing abdeckt • von Impressed Workflow Server, der smarten PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt Über die Kombination beider Lösungen können Großformatdrucker ihre Prozesse mit modernen Workflows Schritt für Schritt automatisieren – und so zügig deutliche Zeit- und Kosteneinsparungen realisieren. Das Webinar sollten Sie sich nicht entgehen lassen – damit Sie keine Effizienzpotenziale mehr liegen lassen. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Nein

Organisator: Impressed / Günther Business Solutions

https://www.impressed.de/schulung.php?c=sDetail&sid=326

Und es geht doch: Automatisierung im Großformatdruck!

Weitere Events

Neuste Foreneinträge

Hilfe, Shortcuts funktionieren nicht mehr!

Switch/PitStop: Sprachdatei vom Report ändern

Mit Preflight Registerfarbe ALL nach Grau konvertieren geht nicht

Absatzsetzer in CC24 ME lösen Probleme aus

Quark Objekte lassen sich nicht neben Layout ziehen.

Barrierefreie PDFs | Mögliche unangebrachte Verwendung des Strukturelements xy

Barrierefreiheit in indesign 2022: figure-Tags haben als Attributobjekt "block" statt "inline"?

Kontrollkästchen in PDF-Formular

Indesign Tabelle ausrichten

Mehrfach geschichtete und übereinander gelagerte PDFs bereinigen

Weitere Stellenangebote