Updated flowers image & related examples.

Signed-off-by: Grant Skinner <[email protected]>
MannyC · Dec 1, 2014 · b810333 · b810333
1 parent e236b1d
commit b810333
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/_assets/art/flowers.jpg b/_assets/art/flowers.jpg
diff --git a/examples/AlphaMaskReveal.html b/examples/AlphaMaskReveal.html
@@ -22,7 +22,7 @@ <h1>AlphaMaskFilter reveal</h1>
 		an mask using the <code>AlphaMaskFilter</code> filter. Another copy of the image is added below with a
 		<code>BlurFilter</code> and <code>ColorMatrixFilter</code> to make the effect cooler.</p>
 </header>
-<canvas id="testCanvas" width="960" height="250"></canvas>
+<canvas id="testCanvas" width="960" height="400"></canvas>
 
 
 <script>
@@ -68,7 +68,7 @@ <h1>AlphaMaskFilter reveal</h1>
 		bitmap = new createjs.Bitmap(image);
 
 		blur = new createjs.Bitmap(image);
-		blur.filters = [new createjs.BlurFilter(32, 32, 2), new createjs.ColorMatrixFilter(new createjs.ColorMatrix(40))];
+		blur.filters = [new createjs.BlurFilter(24, 24, 2), new createjs.ColorMatrixFilter(new createjs.ColorMatrix(60))];
 		blur.cache(0, 0, 960, 400);
 
 		text.text = "Click and Drag to Reveal the Image.";

diff --git a/examples/Filters.html b/examples/Filters.html
@@ -10,7 +10,7 @@
 	<script type="text/javascript" src="../lib/easeljs-NEXT.combined.js"></script>
 	<!-- We also provide hosted minified versions of all CreateJS libraries.
 	  http://code.createjs.com -->
-
+	
 	<script>
 	var img;
 
@@ -28,41 +28,43 @@
 		// create a new stage and point it at our canvas:
 		stage = new createjs.Stage(canvas);
 
-		var bmp = new createjs.Bitmap(img);
-		bmp.x = (canvas.width-2*img.width)/3;
-		bmp.y = (canvas.height-2*img.height)/3;
+		var bmp = new createjs.Bitmap(img).set({scaleX:0.5, scaleY:0.5});
 		stage.addChild(bmp);
 
 
-		var blurFilter = new createjs.BlurFilter(32, 16, 2);
+		var colorMatrix = new createjs.ColorMatrix();
+		colorMatrix.adjustSaturation(-100);
+		colorMatrix.adjustContrast(50);
+		var blackAndWhiteFilter = new createjs.ColorMatrixFilter(colorMatrix);
 		bmp = bmp.clone();
-		bmp.filters = [blurFilter];
 		// filters are only displayed when the display object is cached
 		// later, you can call updateCache() to update changes to your filters
+		bmp.filters = [blackAndWhiteFilter];
 		bmp.cache(0,0,img.width,img.height);
-		bmp.x += bmp.x+img.width;
+		bmp.x = 480;
 		stage.addChild(bmp);
 
-
-		var greyScaleFilter = new createjs.ColorMatrixFilter([
-			0.33,0.33,0.33,0,0, // red
-			0.33,0.33,0.33,0,0, // green
-			0.33,0.33,0.33,0,0, // blue
-			0,0,0,1,0  // alpha
-		]);
+		var blurFilter = new createjs.BlurFilter(64, 0, 1);
 		bmp = bmp.clone();
-		bmp.filters = [greyScaleFilter];
+		bmp.filters = [blurFilter];
 		bmp.cache(0,0,img.width,img.height);
-		bmp.y += bmp.y+img.height;
+		bmp.y = 200;
 		stage.addChild(bmp);
 
 
-		var removeRedFilter = new createjs.ColorFilter(0,1,1,1); // red, green, blue, alpha
+		var removeRedFilter = new createjs.ColorFilter(0.25,0.75,1,1); // red, green, blue, alpha
 		bmp = bmp.clone();
 		bmp.filters = [removeRedFilter];
 		bmp.cache(0,0,img.width,img.height);
-		bmp.x = (canvas.width-2*img.width)/3;
+		bmp.x = 0;
 		stage.addChild(bmp);
+
+		var frame = new createjs.Shape();
+		frame.graphics.setStrokeStyle(10).beginStroke("#000")
+			.moveTo(480, 0).lineTo(480, 400)
+			.moveTo(0, 200).lineTo(960, 200);
+		frame.compositeOperation = "destination-out"; // punch the frame out.
+		stage.addChild(frame);
 
 		// draw to the canvas:
 		stage.update();
@@ -74,11 +76,11 @@
 <body onload="init();">
 	<header id="header" class="EaselJS">
 	    <h1>Filters</h1>
-	    <p>Demonstrates using filters. Top-left: original. Top-right: <code>BlurFilter</code>. Bottom-left: <code>ColorFilter</code>. Bottom-right: <code>ColorMatrixFilter</code>.</p>
+	    <p>Demonstrates using filters. Top-left: original. Top-right: <code>ColorMatrixFilter</code>. Bottom-left: <code>ColorFilter</code>. Bottom-right: <code>BlurFilter</code>.</p>
 	</header>
 
 	<div class="canvasHolder">
-		<canvas id="testCanvas" width="960" height="400"></canvas>
+		<canvas id="testCanvas" width="960" height="400" style="background:none;"></canvas>
 	</div>
 </body>
 </html>