Depot43-Unterlagen

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>Zim-CreateJS-Animation - ZIM Stage</title>
      <script src="https://d309knd7es5f10.cloudfront.net/createjs.min.js"></script>
      <script>
        var zon = true; 
        var zns = false; 
      </script>
    <script src="https://d309knd7es5f10.cloudfront.net/zim_6.7.3.js"></script>

    <script>
	var scaling = "fit";
	var width = 1000;
	var height = 800;
	var frame = new Frame(scaling, width, height);
	frame.on("ready", function() {

		var stage = frame.stage;
		var stageW = frame.width;
		var stageH = frame.height;
		frame.outerColor = "#f00";
		frame.color = "#ccc";

		stage.update();
	});
    </script>
    <style>

    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
    <body>

    </body>
</html>


 

            

Hinweis:

Für den Aufbau der Bühne (stage) werden Variablen erstellt:

var scaling = "fit";
 var width = 1000;
 var height = 800;

Die Variable "scaling" legt die Art der Bühne als canvas-Element fest:

fit > skaliert am Browserfenster, bleibt im gleichen Verhältniss
full > skaliert mit dem Browserfenster
outside > setzt die Bühne aussherhalb des Browserfensters
tagID > skaliert nicht erwartet eine feste Grösse
width > Breite des Canvas
height > Höhe des Canvas

Die Variablen werden als Objekt zusammengefasst, die Werte als Parameter übergeben:

var frame = new Frame(scaling, width, height);

Sie werden innerhalb einer "ready-Methode" ausgewertet und mit "stage.update()" abgeschlossen:

frame.on("ready", function() {

    var stage = frame.stage;
    var stageW = frame.width;
    var stageH = frame.height;
    frame.outerColor = "#f00";
    frame.color = "#ccc";

stage.update();
 });

Zeilen 14 bis 27.