Depot43-Unterlagen

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>Zim-CreateJS-Animation - ZIM Image</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 = 1024;
	var height = 768;

	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 = "#44f";
		frame.color = "#ccf";
		
		frame.loadAssets(["oberaxen.jpg", "bootsteg.jpg", "brunnen.jpg"], "http://depot43.ch/unterlagen/assets/zim/");
		frame.on("complete", app);
		
		var waiter = new Waiter(stage);
		waiter.show();
		
		
		function app() {

		var img1 = frame.asset("brunnen.jpg")
			.sca(0.3)
			.centerReg(stage)
			.mov(-200, -200);
			
		var img2 = frame.asset("oberaxen.jpg")
			.sca(0.4)
			.centerReg(stage)
			.mov(0, 0);
			
		var img2 = frame.asset("bootsteg.jpg")
			.sca(0.5)
			.centerReg(stage)
			.mov(200, 260);
		}

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

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

    </body>
</html>


 

            

Hinweis

Auch mit der ZIM-Bibliothek muss der Weg mit Vorausladen der Bilder gegangen werden.

Die Bilder werden erst in den "frame" geladen:

 frame.loadAssets(["oberaxen.jpg", "bootsteg.jpg", "brunnen.jpg"], "http://depot43.ch/unterlagen/assets/zim/");
 frame.on("complete", app);

Ein "waiter"-Objekt lädt die Bilder in den "Stage":

 var waiter = new Waiter(stage);
 waiter.show();

Jetzt wird jedes Bild mit "frame.asset()" platziert und mit eigenen Parametern dargestellt:

function app() {
   var img1 = frame.asset("brunnen.jpg")
  .sca(0.3)
  .centerReg(stage)
  .mov(-200, -200);

  var img2 = frame.asset("oberaxen.jpg")
  .sca(0.4)
  .centerReg(stage)
  .mov(0, 0);

  var img2 = frame.asset("bootsteg.jpg")
  .sca(0.5)
 .centerReg(stage)
  .mov(200, 260);
 }