Permalink
Browse files

Updated examples to be in line with documentation.

  • Loading branch information...
1 parent 4bbefd6 commit dc1d2a75ed4c47caa69593b7bbc20daedaba3d16 @nonken nonken committed Oct 9, 2012
Showing with 208 additions and 332 deletions.
  1. +3 −3 example/library/movies/animation-events.js
  2. +6 −6 example/library/movies/animation-gradient.js
  3. +3 −3 example/library/movies/animation-keyframes.js
  4. +2 −2 example/library/movies/animation-morph-2.js
  5. +2 −2 example/library/movies/animation-morph.js
  6. +5 −1 example/library/movies/animation-multiprop.js
  7. +4 −4 example/library/movies/animation-shared.js
  8. +1 −9 example/library/movies/animation-stars-2.js
  9. +1 −9 example/library/movies/animation-stars.js
  10. +4 −4 example/library/movies/animation-unbound.js
  11. +3 −3 example/library/movies/assets-loading-image-simple.js
  12. +6 −6 example/library/movies/audio-button.js
  13. 0 example/library/movies/bbdevcon.js
  14. +2 −2 example/library/movies/bitmap-move-rotation.js
  15. +1 −1 example/library/movies/bitmap-source.js
  16. +1 −1 example/library/movies/bitmap.js
  17. +7 −7 example/library/movies/blobs-by-manfred.js
  18. +0 −106 example/library/movies/breakout.js
  19. +6 −8 example/library/movies/charts-bars-3D.js
  20. +3 −3 example/library/movies/charts-bubbles.js
  21. +3 −3 example/library/movies/clip-and-mask.js
  22. +3 −3 example/library/movies/clip-animated.js
  23. +1 −1 example/library/movies/color.js
  24. +8 −8 example/library/movies/demo-questionaire-v2.js
  25. +1 −1 example/library/movies/displayobject-delete.js
  26. +2 −2 example/library/movies/event-bubble.js
  27. +2 −2 example/library/movies/event-drag.js
  28. +2 −2 example/library/movies/execution-order.js
  29. +2 −2 example/library/movies/fill-image.js
  30. +2 −2 example/library/movies/filter-blur.js
  31. +11 −11 example/library/movies/filter-list.js
  32. +3 −3 example/library/movies/filter-multi.js
  33. +3 −3 example/library/movies/fx-morph.js
  34. +3 −3 example/library/movies/group-add-and-remove.js
  35. +7 −7 example/library/movies/group-nested-remove.js
  36. +5 −5 example/library/movies/group-nested.js
  37. +2 −2 example/library/movies/group.js
  38. +8 −8 example/library/movies/layering.js
  39. +2 −2 example/library/movies/logo.js
  40. +3 −3 example/library/movies/movie.js
  41. +1 −1 example/library/movies/nested-movies-clear.js
  42. +2 −2 example/library/movies/pacman.js
  43. +8 −8 example/library/movies/radial-gradients.js
  44. +4 −6 example/library/movies/raining-rainbows.js
  45. +13 −13 example/library/movies/shape-arc.js
  46. +2 −2 example/library/movies/shape-center-of-arc.js
  47. +4 −4 example/library/movies/shape-clone.js
  48. +2 −2 example/library/movies/shape-getPointAtLength.js
  49. +5 −5 example/library/movies/shape-simple.js
  50. +1 −1 example/library/movies/shape-square.js
  51. +1 −1 example/library/movies/sprite.js
  52. +1 −1 example/library/movies/star-shape.js
  53. +1 −1 example/library/movies/star-using-mask.js
  54. +4 −4 example/library/movies/stepping_feet.js
  55. +6 −8 example/library/movies/text.js
  56. +1 −1 example/library/movies/tr-dropshadow.js
  57. +2 −2 example/library/movies/tr-line.js
  58. +2 −2 example/library/movies/ugly2polygon-morph.js
  59. +2 −2 example/library/movies/ugly2polygon-morph2.js
  60. +6 −6 example/library/movies/ui-button.js
  61. +1 −1 example/library/movies/ui-debugger.js
  62. +1 −1 example/library/movies/video-memory-check.js
  63. +1 −1 example/library/movies/video-onload.js
  64. +2 −2 example/library/movies/video-remote.js
  65. +2 −2 example/library/movies/video.js
@@ -2,16 +2,16 @@
* Animation events
*/
-var shape1 = bonsai.Path.rect(0, 50, 100, 100).attr({fillColor: 'red'});
-var shape2 = bonsai.Path.rect(0, 200, 100, 100).attr({fillColor: 'green'});
+var shape1 = new Rect(0, 50, 100, 100).attr({fillColor: 'red'});
+var shape2 = new Rect(0, 200, 100, 100).attr({fillColor: 'green'});
stage.children([shape1,shape2]);
var onEnd = function(animation) { console.log('animation ended'); };
var onStart = function(animation) { console.log('animation started'); };
// explicit listener
-var anim = new bonsai.Animation('1s', { x: 300 });
+var anim = new Animation('1s', { x: 300 });
anim.on('play', onStart);
anim.on('end', onEnd);
shape1.animate(anim);
@@ -1,16 +1,16 @@
/**
* Animated Color
*/
-var rect = bonsai.Path.rect(10, 10, 500, 500).attr({
+var rect = new Rect(10, 10, 500, 500).attr({
fillGradient: bonsai.gradient.linear('45', [
'green', 'yellow'
]),
strokeWidth: 20,
strokeGradient: gradient.linear(0, ['red', 'yellow', 'orange', 'red'], 2)
});
-var rectOverlay = bonsai.Path.rect(20, 20, 500, 500).attr({
- fillGradient: bonsai.gradient.radial([
+var rectOverlay = new Rect(20, 20, 500, 500).attr({
+ fillGradient: gradient.radial([
'rgba(255,255,255,0.6)', 'rgba(255,255,255,0)'
], 10, 100, 0)
});
@@ -19,14 +19,14 @@ stage.addChild(rect);
stage.addChild(rectOverlay);
rect.animate('3s', {
- fillGradient: bonsai.gradient.linear('-45', [
- bonsai.color('red').darker(.2), 'orange'
+ fillGradient: gradient.linear('-45', [
+ color('red').darker(.2), 'orange'
]),
strokeGradient: gradient.linear(0, ['blue', 'pink', 'purple', 'blue'], 2)
});
rectOverlay.animate('3s', {
- fillGradient: bonsai.gradient.radial([
+ fillGradient: gradient.radial([
'rgba(255,255,255,0.6)', 'rgba(255,255,255,0)'
], 80, 0, 100)
});
@@ -1,9 +1,9 @@
/**
* Animated attributes
*/
-var shape = bonsai.Path.rect(0, 0, 100, 100).attr({fillColor: 'red'});
+var shape = new Rect(0, 0, 100, 100).attr({fillColor: 'red'});
-var animation = new bonsai.KeyframeAnimation('4s', {
+var animation = new KeyframeAnimation('4s', {
'0s': {x: 0, y: 0},
'1s': {y: 0, x: 400},
'2s': {x: 400, y: 400},
@@ -16,7 +16,7 @@ shape.animate(animation);
// Animate the fillColor, strokeColor and position.
-var animation = new bonsai.KeyframeAnimation('4s', {
+var animation = new KeyframeAnimation('4s', {
from: {x: 400, y: 0, fillColor: 'blue', strokeColor:'black'},
'1s': {x: 0, y: 0, fillColor: 'yellow',strokeColor:'red'},
'2s': {x: 0, y: 400, fillColor: 'green', strokeColor:'green'},
@@ -9,8 +9,8 @@ that don't do anything, but can be animated by the Animation class
*/
-var a = Path.rect(10, 10, 400, 150).attr('fillColor', 'red');
-var b = Path.star(100, 100, 100, 5).attr('fillColor', 'blue');
+var a = new Rect(10, 10, 400, 150).attr('fillColor', 'red');
+var b = new Star(100, 100, 100, 5).attr('fillColor', 'blue');
var numberOfCurves = Math.max(
a.attr('segments').length,
@@ -1,8 +1,8 @@
-var a = Path.star(100, 100, 100, 5).attr({
+var a = new Star(100, 100, 100, 5).attr({
fillColor: 'red',
opacity: .5
});
-var b = Path.star(250, 250, 200, 10).attr({
+var b = new Star(250, 250, 200, 10).attr({
fillColor: 'blue'
});
@@ -1,7 +1,11 @@
/**
* Animated attributes
*/
-var rectPath = bonsai.Path.rect(50, 50, 100, 100).attr({fillColor: 'red', strokeColor: 'green', strokeWidth: 5});
+var rectPath = new Rect(50, 50, 100, 100).attr({
+ fillColor: 'red',
+ strokeColor: 'green',
+ strokeWidth: 5
+});
stage.addChild(rectPath);
@@ -1,13 +1,13 @@
/**
* Shared animations
*/
-var shape1 = bonsai.Path.rect(0, 50, 100, 100).attr({fillColor: 'red'});
-var shape2 = bonsai.Path.rect(0, 200, 100, 100).attr({fillColor: 'green'});
-var shape3 = bonsai.Path.rect(0, 350, 100, 100).attr({fillColor: 'blue'});
+var shape1 = new Rect(0, 50, 100, 100).attr({fillColor: 'red'});
+var shape2 = new Rect(0, 200, 100, 100).attr({fillColor: 'green'});
+var shape3 = new Rect(0, 350, 100, 100).attr({fillColor: 'blue'});
stage.children([shape1,shape2,shape3]);
-var fadeOutAnim = new bonsai.Animation('5000ms', { opacity: 0 });
+var fadeOutAnim = new Animation('5000ms', { opacity: 0 });
[shape1,shape2,shape3].forEach(function(shape) {
@@ -2,11 +2,6 @@ var numStars = 7;
var width = 500;
var height = 500;
-
-//*
-
-
-var Path = bonsai.Path;
var stars = (function(star) {
var stars = [];
for (var i = 0; i < numStars; i++) {
@@ -19,7 +14,7 @@ var stars = (function(star) {
}
return stars;
-}(Path.star(width/2, height/2, 1, 5)));
+}(new Star(width/2, height/2, 1, 5)));
stage.length(14);
var i = 0;
@@ -39,6 +34,3 @@ stage.on(0, function() {
i = (i + 1) % numStars;
});
-
-
-//*/
@@ -2,11 +2,6 @@ var numStars = 7;
var width = 500;
var height = 500;
-
-//*
-
-
-var Path = bonsai.Path;
var stars = (function(star) {
var stars = [];
for (var i = 0; i < numStars; i++) {
@@ -19,7 +14,7 @@ var stars = (function(star) {
}
return stars;
-}(Path.star(width/2, height/2, 1, 5)));
+}(new Star(width/2, height/2, 1, 5)));
stage.length(14);
var i = 0;
@@ -39,6 +34,3 @@ stage.on(0, function() {
i = (i + 1) % numStars;
stage.removeChild(stars[i]);
});
-
-
-//*/
@@ -1,13 +1,13 @@
/**
* Demonstrating the animation's independence of the timeline.
*/
-var shape1 = bonsai.Path.rect(0, 50, 100, 100).attr({fillColor: 'red'});
-var shape2 = bonsai.Path.rect(0, 200, 100, 100).attr({fillColor: 'green'});
-var shape3 = bonsai.Path.rect(0, 350, 100, 100).attr({fillColor: 'blue'});
+var shape1 = new Rect(0, 50, 100, 100).attr({fillColor: 'red'});
+var shape2 = new Rect(0, 200, 100, 100).attr({fillColor: 'green'});
+var shape3 = new Rect(0, 350, 100, 100).attr({fillColor: 'blue'});
stage.children([shape1,shape2,shape3]);
-var fadeOutAnim = new bonsai.Animation(
+var fadeOutAnim = new Animation(
'5s',
{ opacity: 0 },
{ isTimelineBound: false }
@@ -5,13 +5,13 @@
var attributes = {x:20, y:20, width:200, height:200};
// as data uri
-var imageDataUri = new bonsai.Bitmap('').attr(attributes);
+var imageDataUri = new Bitmap('').attr(attributes);
stage.addChild(imageDataUri);
// as local source
-var imageLocal = new bonsai.Bitmap('').attr(attributes);
+var imageLocal = new Bitmap('').attr(attributes);
stage.addChild(imageLocal);
// as external source
-var imageExternal = new bonsai.Bitmap('').attr(attributes);
+var imageExternal = new Bitmap('').attr(attributes);
stage.addChild(imageExternal);
@@ -18,29 +18,29 @@ new Button('Boooom!', 50, 50).on('click', function() {
// BUTTON IMPLEMENTATION
function Button(text, x, y) {
- var button = new bonsai.Group().addTo(stage).attr({x: x, y: y});
+ var button = new Group().addTo(stage).attr({x: x, y: y});
- button.bg = bonsai.Path.rect(0, 0, 100, 40, 5).attr({
- fillGradient: bonsai.gradient.radial(['#19D600', '#0F8000'], 100, 50, -20),
+ button.bg = new Rect(0, 0, 100, 40, 5).attr({
+ fillGradient: gradient.radial(['#19D600', '#0F8000'], 100, 50, -20),
strokeColor: '#CCC',
strokeWidth: 0
}).addTo(button);
button
.on('mouseover', function() {
button.bg.animate('.2s', {
- fillGradient: bonsai.gradient.radial(['#9CFF8F', '#0F8000'], 100, 50, -20),
+ fillGradient: gradient.radial(['#9CFF8F', '#0F8000'], 100, 50, -20),
strokeWidth: 3
});
})
.on('mouseout', function() {
button.bg.animate('.2s', {
- fillGradient: bonsai.gradient.radial(['#19D600', '#0F8000'], 100, 50, -20),
+ fillGradient: gradient.radial(['#19D600', '#0F8000'], 100, 50, -20),
strokeWidth: 0
});
});
- button.text = new bonsai.Text(text).attr({
+ button.text = new Text(text).attr({
x: 10,
y: 13,
fontFamily: 'Arial',
No changes.
@@ -1,12 +1,12 @@
-new bonsai.Bitmap('assets/redpanda.jpg', function(err) {
+new Bitmap('assets/redpanda.jpg', function(err) {
if (err) return;
this.attr({
origin: {x: 128, y: 128},
y: -256,
x: -256
});
stage.addChild(this);
- stage.addChild(bonsai.Path.circle(250, 250, 128).attr({fillColor: 'rgba(255, 0, 0, .5)'}));
+ stage.addChild(new Circle(250, 250, 128).attr({fillColor: 'rgba(255, 0, 0, .5)'}));
this.animate('5s', {
rotation: Math.PI * 10 + .2,
x: 149.61,
@@ -1,4 +1,4 @@
-var bitmap = new bonsai.Bitmap('assets/redpanda.jpg').addTo(stage);
+var bitmap = new Bitmap('assets/redpanda.jpg').addTo(stage);
stage.frames({
"2s": function() {
@@ -1,4 +1,4 @@
-new bonsai.Bitmap('assets/redpanda.jpg', function(err) {
+new Bitmap('assets/redpanda.jpg', function(err) {
if (err) return;
this.attr({
y: -256,
@@ -61,25 +61,25 @@ function stats(){
/* states */
function stateInit(){
- var clip = Path.rect(0,0,setup.stageWidth,setup.stageHeight).attr({fillColor:'#333333'}).addTo(groups[0]);
+ var clip = new Rect(0,0,setup.stageWidth,setup.stageHeight).attr({fillColor:'#333333'}).addTo(groups[0]);
groups[1].attr('clip',clip.clone());
- Path.rect(setup.stageCenter.x-70,setup.stageHeight-120, 140, 40, 5).attr({fillColor:'#666666',strokeColor:'#999999',strokeWidth:2}).addTo(groups[2]);
+ new Rect(setup.stageCenter.x-70,setup.stageHeight-120, 140, 40, 5).attr({fillColor:'#666666',strokeColor:'#999999',strokeWidth:2}).addTo(groups[2]);
new Text('Pause').attr({x:setup.stageCenter.x-24,y:setup.stageHeight-108,fontSize: '20px',textFillColor: 'white'}).addTo(groups[2]);
groups[2].on('click', pauseHandler);
- Path.rect(setup.stageCenter.x-120,setup.stageHeight-120, 40, 40, 5).attr({fillColor:'#666666',strokeColor:'#999999',strokeWidth:2}).addTo(groups[3]);
+ new Rect(setup.stageCenter.x-120,setup.stageHeight-120, 40, 40, 5).attr({fillColor:'#666666',strokeColor:'#999999',strokeWidth:2}).addTo(groups[3]);
new Text('-').attr({x:setup.stageCenter.x-103,y:setup.stageHeight-108,fontSize: '20px',textFillColor: 'white'}).addTo(groups[3]);
groups[3].on('click', minusHandler);
- Path.rect(setup.stageCenter.x+80,setup.stageHeight-120, 40, 40, 5).attr({fillColor:'#666666',strokeColor:'#999999',strokeWidth:2}).addTo(groups[4]);
+ new Rect(setup.stageCenter.x+80,setup.stageHeight-120, 40, 40, 5).attr({fillColor:'#666666',strokeColor:'#999999',strokeWidth:2}).addTo(groups[4]);
new Text('+').attr({x:setup.stageCenter.x+94,y:setup.stageHeight-108,fontSize: '20px',textFillColor: 'white'}).addTo(groups[4]);
groups[4].on('click', plusHandler);
new Text("Calculating...").attr({x:10,y:10,fontFamily: 'Arial',fontSize: '12px',textFillColor: 'white'}).addTo(groups[5]);
- Path.rect(setup.stageWidth-100,10, 80, 20, 0).attr({fillColor:'#666666'}).addTo(groups[6]);
+ new Rect(setup.stageWidth-100,10, 80, 20, 0).attr({fillColor:'#666666'}).addTo(groups[6]);
new Text('Scale').attr({x:setup.stageWidth-74,y:14,textFillColor: '#ffffff'}).addTo(groups[6]);
groups[6].on('click', scaleHandler);
- Path.rect(setup.stageWidth-100,30, 80, 20, 0).attr({fillColor:'#666666'}).addTo(groups[7]);
+ new Rect(setup.stageWidth-100,30, 80, 20, 0).attr({fillColor:'#666666'}).addTo(groups[7]);
new Text('Blur').attr({x:setup.stageWidth-70,y:34,textFillColor: '#333333'}).addTo(groups[7]);
groups[7].on('click', blurHandler);
- Path.rect(setup.stageWidth-100,50, 80, 20, 0).attr({fillColor:'#666666'}).addTo(groups[8]);
+ new Rect(setup.stageWidth-100,50, 80, 20, 0).attr({fillColor:'#666666'}).addTo(groups[8]);
new Text('Opacity').attr({x:setup.stageWidth-80,y:54,textFillColor: '#ffffff'}).addTo(groups[8]);
groups[8].on('click', opacityHandler);
setInterval(stats,1000);
Oops, something went wrong.

0 comments on commit dc1d2a7

Please sign in to comment.