Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
              
            
!

CSS

              
                
              
            
!

JS

              
                /* BEGIN EARTH  */
var earth_ss = new createjs.SpriteSheet({
	images: ["https://i.imgur.com/pJF7hc8.png"], 
	frames: [[729,0,136,129],[0,0,727,939]]
}); //  Earth texture
function earthShadow() {
    this.super_constructor();

    this.spriteSheet = earth_ss;
	this.gotoAndStop(1);
} // Optional shadow
function earth_tween2() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.instance = new Sprite({spriteSheet: earth_ss});
	this.instance.parent = this;
	this.instance.setTransform(-195,-64);

	this.instance_1 = new Sprite({spriteSheet: earth_ss});
	this.instance_1.parent = this;
	this.instance_1.setTransform(-69,-64);

	this.instance_2 = new Sprite({spriteSheet: earth_ss});
	this.instance_2.parent = this;
	this.instance_2.setTransform(60,-64);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_2},{t:this.instance_1},{t:this.instance}]}).wait(1));

} // Motion Tween
function earth_tween1() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 1
    // Layer 1
	this.instance = new Sprite({spriteSheet: earth_ss});
	this.instance.parent = this;
	this.instance.setTransform(-191,-65);

	this.instance_1 = new Sprite({spriteSheet: earth_ss});
	this.instance_1.parent = this;
	this.instance_1.setTransform(-66,-65);

	this.instance_2 = new Sprite({spriteSheet: earth_ss});
	this.instance_2.parent = this;
	this.instance_2.setTransform(59,-65);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_2},{t:this.instance_1},{t:this.instance}]}).wait(1));

} // Motion tween
function worldMap() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 2 (mask)
	var mask = new cjs.Shape();
	mask._off = true;
	mask.graphics.p("AkWKVQiBg3hjhjQhkhjg2iBQg5iFAAiSQAAiRA5iFQA2iBBkhjQBjhjCBg3QCFg4CRAAQEqAADSDSQBiBjA3CBQA4CFABCRQgBCSg4CFQg3CBhiBjQhkBjiBA3QiFA4iSAAQiRAAiFg4g");
	mask.setTransform(64.5,64.5);

	// Layer 1
	this.instance = new earth_tween1("synched",0);
	this.instance.parent = this;
	this.instance.setTransform(195.5,64.3);

	this.instance_1 = new earth_tween2("synched",0);
	this.instance_1.parent = this;
	this.instance_1.setTransform(-58.5,64.3);

	var maskedShapeInstanceList = [this.instance,this.instance_1];

	for(var shapedInstanceItr = 0; shapedInstanceItr < maskedShapeInstanceList.length; shapedInstanceItr++) {
		maskedShapeInstanceList[shapedInstanceItr].mask = mask;
	}

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance}]}).to({state:[{t:this.instance_1}]},89).wait(1));
	this.timeline.addTween(cjs.Tween.get(this.instance).to({_off:true,x:-58.5},89).wait(1));
    
} // The spritesheet is used to create an animation
function Earth() {

    this.super_constructor();
    var cjs = createjs;

    	// Layer 1
	this.shape = new cjs.Shape();
	this.shape.graphics.lf(["rgba(26,23,27,0.498)","rgba(26,23,27,0.471)","rgba(26,23,27,0)"],[0,0.027,1],-35.8,0,35.9,0).s().p("ABPKVQh/g2hkhkQhjhjg2iBQg5iFAAiSQAAiRA5iFQA2iBBjhjQDRjSEqAAQhXA7hXB3QitDuAAEsQAAE5CtDpQBXB1BXA2QiSAAiGg4g");
	this.shape.setTransform(66.2,149.6);

	this.instance = new worldMap();
	this.instance.parent = this;
	this.instance.setTransform(106,149,1,1,0,0,0,68,64.3);

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.f("#73D1D9").s().p("AkWKVQiBg3hjhjQhkhjg2iBQg4iFAAiSQAAiRA4iFQA2iBBkhjQBjhjCBg3QCFg4CRAAQEpAADTDSQBiBjA3CBQA4CFAACRQAACSg4CFQg3CBhiBjQhkBjiBA3QiFA4iSAAQiRAAiFg4g");
	this.shape_1.setTransform(102.1,149.6);


	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.instance},{t:this.shape}]}).wait(1));

    
} // Main Class that creates the 'Earth' object

// zim.js allows us extend objects drawn on the canvas
extend(earthShadow, zim.Sprite);
extend(earth_tween2, zim.MovieClip);
extend(earth_tween1, zim.MovieClip);
extend(worldMap, zim.MovieClip);
extend(Earth, zim.MovieClip);
/* END EARTH  */

/* BEGIN JUPITER  */
var jupiter_ss = new createjs.SpriteSheet({
	images: ["https://i.imgur.com/q0mccNc.png"],
	frames: [[0,0,727,943],[729,0,292,291]]
}); // Jupiter spritesheet
function JupiterShadow() {
    this.super_constructor();

    this.spriteSheet = jupiter_ss;
	this.gotoAndStop(0);
}
function JupiterTexture() {
    this.super_constructor();

    this.spriteSheet = jupiter_ss;
	this.gotoAndStop(1);
}
function JupiterTween(){
    this.super_constructor();
    var cjs = createjs;

    	// Layer 1
	this.instance = new Sprite({spriteSheet: jupiter_ss});
    this.instance.gotoAndStop(1);
    this.instance.parent = this;
	this.instance.setTransform(-405.3,-59.2);

	this.instance_1 = new Sprite({spriteSheet: jupiter_ss});
    this.instance_1.gotoAndStop(1);
	this.instance_1.parent = this;
	this.instance_1.setTransform(-138.9,-186.2);

	this.instance_2 = new Sprite({spriteSheet: jupiter_ss});
    this.instance_2.gotoAndStop(1);
	this.instance_2.parent = this;
	this.instance_2.setTransform(128,-306);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_2},{t:this.instance_1},{t:this.instance}]}).wait(1));

}
function JupiterShadow2() {
    this.super_constructor(0,0);    

	// Layer 1
	this.shadow = new Sprite({spriteSheet: jupiter_ss});
    this.shadow.gotoAndStop(0);
	this.shadow.parent = this;
	this.shadow.setTransform(0,0,0.379,0.379);

	this.addChild(this.shadow);

}
function JupiterMap() {
    this.super_constructor(0,-1); 
    var cjs = createjs;   


	// mask (mask)
	var mask = new cjs.Shape();
	mask._off = true;
	mask.graphics.p("AgCQXQjMgBi+hOQi9hNiSiPQiXiThSjFQhTjEABjSQABjMBOi+QBNi9COiSQCUiXDEhSQDFhSDSAAQDMABC9BOQC+BNCSCPQCXCTBSDFQBTDEgBDSQgBDMhOC+QhNC9iPCSQiUCXjEBSQjDBSjRAAIgCAAg");
	mask.setTransform(104.7,103.7);

	// Layer 1
	this.instance = new JupiterTween("synched",0);
	this.instance.parent = this;
	this.instance.setTransform(-235.9,294.2,1.17,1.17);

	var maskedShapeInstanceList = [this.instance];

	for(var shapedInstanceItr = 0; shapedInstanceItr < maskedShapeInstanceList.length; shapedInstanceItr++) {
		maskedShapeInstanceList[shapedInstanceItr].mask = mask;
	}

	this.timeline.addTween(cjs.Tween.get(this.instance).to({x:402.2,y:-7.8},119).wait(1));

}
function Jupiter () {
    this.super_constructor(-665.6); 
    var cjs = createjs;   


	// Layer 1
	this.shape = new cjs.Shape();
	this.shape.graphics.lf(["rgba(26,23,27,0.498)","rgba(26,23,27,0.471)","rgba(26,23,27,0)"],[0,0.027,1],-52.3,0,52.3,0).s().p("AB0PEQi7hPiRiRQiRiRhPi8QhSjCAAjVQAAjUBSjCQBPi8CRiRQCRiRC7hPQDChSDVAAQh+BWh/CtQj9FbAAG3QAAHID9FVQB/CqB+BPQjVAAjChSg");
	this.shape.setTransform(96.6,219.3);

	this.instance = new JupiterMap();
	this.instance.parent = this;
	this.instance.setTransform(149,220.1,1,1,0,0,0,104.5,104.1);

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.f("#CE6F3E").s().p("AgCQXQjMgBi9hOQi+hNiSiPQiXiThSjFQhSjEABjSQAAjMBNi+QBOi9CPiSQCTiXDEhSQDFhSDSAAQDMABC9BOQC+BNCSCPQCXCTBSDFQBSDEgBDSQAADMhOC+QhOC9iOCSQiTCXjFBSQjDBSjRAAIgCAAg");
	this.shape_1.setTransform(148.9,219.3);

	this.instance_1 = new JupiterShadow2();
	this.instance_1.parent = this;
	this.instance_1.setTransform(137.8,178.8,1,1,0,0,0,137.8,178.8);
	this.instance_1.alpha = 0.199;

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_1},{t:this.shape_1},{t:this.instance},{t:this.shape}]}).wait(1));

} // Main Jupiter class

extend(JupiterShadow, zim.Sprite);
extend(JupiterShadow2, zim.Container);
extend(Jupiter, zim.MovieClip);
extend(JupiterTexture, zim.Sprite);
extend(JupiterTween, zim.MovieClip);
extend(JupiterMap, zim.MovieClip);
/* END JUPITER  */


/* BEGIN MARS  */
var mars_ss = new createjs.SpriteSheet({
	images: ["https://i.imgur.com/iRpurIW.png"],
	frames: [[729,0,130,130],[0,0,727,940]]
});
function Mars_Tween2() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.instance = new Sprite({spriteSheet: mars_ss});
	this.instance.parent = this;
	this.instance.setTransform(-66,58);

	this.instance_1 = new Sprite({spriteSheet: mars_ss});
	this.instance_1.parent = this;
	this.instance_1.setTransform(-66,-66);

	this.instance_2 = new Sprite({spriteSheet: mars_ss});
	this.instance_2.parent = this;
	this.instance_2.setTransform(-65,-191);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_2},{t:this.instance_1},{t:this.instance}]}).wait(1));


}
function Mars_Tween1() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 1
    	// Layer 1
	this.instance = new Sprite({spriteSheet: mars_ss});
	this.instance.parent = this;
	this.instance.setTransform(-65,65);

	this.instance_1 = new Sprite({spriteSheet: mars_ss});
	this.instance_1.parent = this;
	this.instance_1.setTransform(-65,-61);

	this.instance_2 = new Sprite({spriteSheet: mars_ss});
	this.instance_2.parent = this;
	this.instance_2.setTransform(-65,-191);

	this.shape = new cjs.Shape();
	this.shape.graphics.f("#D84443").s().p("Ag1ATQgWgIAAgLQAAgKAWgIQAXgIAeAAQAgAAAWAIQAWAIAAAKQAAALgWAIQgWAIggAAQgfAAgWgIg");
	this.shape.setTransform(-30.4,-109.2);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape},{t:this.instance_2},{t:this.instance_1},{t:this.instance}]}).wait(1));


}
function MarsMap() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 2 (mask)
	var mask = new cjs.Shape();
	mask._off = true;
	mask.graphics.p("AnLHNQi+i/gBkOQABkMC+jAQC/i+EMAAQEOAAC/C+QC+DAABEMQgBEOi+C/Qi/C+kOAAQkMAAi/i+g");
	mask.setTransform(65.2,64.9);

	// Layer 1
	this.instance = new Mars_Tween1("synched",0);
	this.instance.parent = this;
	this.instance.setTransform(64.8,-61.7);

	this.instance_1 = new Mars_Tween2("synched",0);
	this.instance_1.parent = this;
	this.instance_1.setTransform(64.8,191.3);

	var maskedShapeInstanceList = [this.instance,this.instance_1];

	for(var shapedInstanceItr = 0; shapedInstanceItr < maskedShapeInstanceList.length; shapedInstanceItr++) {
		maskedShapeInstanceList[shapedInstanceItr].mask = mask;
	}

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance}]}).to({state:[{t:this.instance_1}]},89).wait(1));
	this.timeline.addTween(cjs.Tween.get(this.instance).to({_off:true,y:191.3},89).wait(1));
}
function Mars() {

    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.shape = new cjs.Shape();
	this.shape.graphics.lf(["rgba(26,23,27,0.498)","rgba(26,23,27,0.471)","rgba(26,23,27,0)"],[0,0.027,1],-32.5,0,32.6,0).s().p("AiGHNQi+i/gBkOQABkNC+i+QC+i/EOAAQhPA1hPBsQidDYAAERQAAEcCdDUQBPBqBPAxQkOAAi+i+g");
	this.shape.setTransform(60.1,135.9);

	this.instance = new MarsMap();
	this.instance.parent = this;
	this.instance.setTransform(92.4,135.6,1,1,0,0,0,64.8,64.8);

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.f("#E27F7F").s().p("AnMHMQi+i+AAkOQAAkNC+i/QDAi+EMAAQEOAAC/C+QC+C/AAENQAAEOi+C+Qi/C/kOAAQkMAAjAi/g");
	this.shape_1.setTransform(92.7,136);

	

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.instance},{t:this.shape}]}).wait(1));

    
}

extend(Mars_Tween2, zim.MovieClip);
extend(Mars_Tween1, zim.MovieClip);
extend(MarsMap, zim.MovieClip);
extend(Mars, zim.MovieClip);
/* END MARS  */


/* BEGIN MERCURY  */
var mercury_ss = new createjs.SpriteSheet({
	images: ["https://i.imgur.com/kMZkvsv.png"],
	frames: [[758,0,83,88], [0,0,756,939]]
});
function Merc_Tween2() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.instance = new Sprite({spriteSheet: mercury_ss});
	this.instance.parent = this;
	this.instance.setTransform(-41,81);

	this.instance_1 = new Sprite({spriteSheet: mercury_ss});
	this.instance_1.parent = this;
	this.instance_1.setTransform(-41,-7);

	this.instance_2 = new Sprite({spriteSheet: mercury_ss});
	this.instance_2.parent = this;
	this.instance_2.setTransform(-41,-96);

	this.instance_3 = new Sprite({spriteSheet: mercury_ss});
	this.instance_3.parent = this;
	this.instance_3.setTransform(-41,-186);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_3},{t:this.instance_2},{t:this.instance_1},{t:this.instance}]}).wait(1));

}
function Merc_Tween1() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.instance = new Sprite({spriteSheet: mercury_ss});
	this.instance.parent = this;
	this.instance.setTransform(-41,86);

	this.instance_1 = new Sprite({spriteSheet: mercury_ss});
	this.instance_1.parent = this;
	this.instance_1.setTransform(-41,-4);

	this.instance_2 = new Sprite({spriteSheet: mercury_ss});
	this.instance_2.parent = this;
	this.instance_2.setTransform(-41,-95);

	this.instance_3 = new Sprite({spriteSheet: mercury_ss});
	this.instance_3.parent = this;
	this.instance_3.setTransform(-41,-186);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_3},{t:this.instance_2},{t:this.instance_1},{t:this.instance}]}).wait(1));

}
function MercMap() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 2 (mask)
	var mask = new cjs.Shape();
	mask._off = true;
	mask.graphics.p("AmBGCQigigAAjiQAAjhCgifQCgihDhAAQDiAACgChQCgCgAADgQAADiigCgQigCfjiAAQjhAAigifg");
	mask.setTransform(41.6,40.7);

	// Layer 1
	this.instance = new Merc_Tween1("synched",0);
	this.instance.parent = this;
	this.instance.setTransform(41.3,186.3);

	this.instance_1 = new Merc_Tween2("synched",0);
	this.instance_1.parent = this;
	this.instance_1.setTransform(41.3,-97.6);

	var maskedShapeInstanceList = [this.instance,this.instance_1];

	for(var shapedInstanceItr = 0; shapedInstanceItr < maskedShapeInstanceList.length; shapedInstanceItr++) {
		maskedShapeInstanceList[shapedInstanceItr].mask = mask;
	}

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance}]}).to({state:[{t:this.instance_1}]},151).wait(1));
	this.timeline.addTween(cjs.Tween.get(this.instance).to({_off:true,y:-97.6},151).wait(1));

}
function Mercury() {

    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.shape = new cjs.Shape();
	this.shape.graphics.lf(["rgba(26,23,27,0.498)","rgba(26,23,27,0.471)","rgba(26,23,27,0)"],[0,0.027,1],-27.2,0,27.3,0).s().p("AhwGCQigigAAjiQAAjhCgifQCfihDiAAIgpAiQgyAtgpA5QiEC1AADkQAADuCECyQBCBYBCApQjiAAififg");
	this.shape.setTransform(50.4,113.7);

	this.instance = new MercMap();
	this.instance.parent = this;
	this.instance.setTransform(75.6,115.2,1,1,0,0,0,41.3,43.8);

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.f("#BA935C").s().p("AmBGCQigigAAjiQAAjhCgifQCgihDhAAQDiAACgChQCgCgAADgQAADiigCgQigCfjiAAQjhAAigifg");
	this.shape_1.setTransform(77.6,113.7);


	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.instance},{t:this.shape}]}).wait(1));

    
}

extend(Merc_Tween2, zim.MovieClip);
extend(Merc_Tween1, zim.MovieClip);
extend(MercMap, zim.MovieClip);
extend(Mercury, zim.MovieClip);
/* END MERCURY  */


/* BEGIN NEPTUNE  */
var neptune_ss = new createjs.SpriteSheet({
	images: ["https://i.imgur.com/8mKvRf3.png"],
	frames: [[0,943,285,193], [287,943,285,185], [0,0,758,941]]
});
function Neptune_Tween2() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.instance = new Sprite({spriteSheet: neptune_ss});
	this.instance.parent = this;
	this.instance.setTransform(-143,-96);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));

}
function Neptune_Tween1() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.instance = new Sprite({spriteSheet: neptune_ss});
	this.instance.parent = this;
	this.instance.setTransform(-143,-89);

	this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
}
function NeptuneMap() {
    this.super_constructor();
    var cjs = createjs;

    // map (mask)
	var mask = new cjs.Shape();
	mask._off = true;
	mask.graphics.p("Ak3E4QiBiCAAi2QAAi2CBiBQCBiBC2AAQC3AACBCBQCBCBAAC2QAAC2iBCCQiBCBi3AAQi2AAiBiBg");
	mask.setTransform(35.5,30.5);

	// Layer 1
	this.instance = new Neptune_Tween1("synched",0);
	this.instance.parent = this;
	this.instance.setTransform(142.6,-23);

	this.instance_1 = new Neptune_Tween2("synched",0);
	this.instance_1.parent = this;
	this.instance_1.setTransform(-75.4,96.3);

	var maskedShapeInstanceList = [this.instance,this.instance_1];

	for(var shapedInstanceItr = 0; shapedInstanceItr < maskedShapeInstanceList.length; shapedInstanceItr++) {
		maskedShapeInstanceList[shapedInstanceItr].mask = mask;
	}

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance}]}).to({state:[{t:this.instance_1}]},89).wait(1));
	this.timeline.addTween(cjs.Tween.get(this.instance).to({_off:true,x:-75.4,y:96.3},89).wait(1));

}
function Neptune() {

    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.shape = new cjs.Shape();
	this.shape.graphics.lf(["rgba(26,23,27,0.498)","rgba(26,23,27,0.471)","rgba(26,23,27,0)"],[0,0.027,1],-22,0,22.1,0).s().p("AhaE4QiCiBAAi3QAAi1CCiCQCAiBC2AAQg1Akg1BKQhqCSAAC4QAADABqCQQA1BIA1AhQi2AAiAiBg");
	this.shape.setTransform(40.7,92.3);

	this.instance = new NeptuneMap();
	this.instance.parent = this;
	this.instance.setTransform(59.1,95.2,1,1,0,0,0,33.3,36.6);

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.f("#6C8EC1").s().p("Ak3E4QiBiBAAi3QAAi1CBiCQCBiBC2AAQC2AACCCBQCBCCAAC1QAAC3iBCBQiCCBi2AAQi2AAiBiBg");
	this.shape_1.setTransform(62.8,92.3);


	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.instance},{t:this.shape}]}).wait(1));

}

extend(Neptune_Tween2, zim.MovieClip);
extend(Neptune_Tween1, zim.MovieClip);
extend(NeptuneMap, zim.MovieClip);
extend(Neptune, zim.MovieClip);
/* END NEPTUNE  */


/* BEGIN SATURN  */
var saturn_ss = new createjs.SpriteSheet({
	images: ["https://i.imgur.com/7NDJRkN.png"],
	frames: [[0,945,170,133], [0,0,1131,943]]
});
function Saturn_Tween() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.instance = new Sprite({spriteSheet: saturn_ss});
	this.instance.parent = this;
	this.instance.setTransform(-197,-54);

	this.instance_1 = new Sprite({spriteSheet: saturn_ss});
	this.instance_1.parent = this;
	this.instance_1.setTransform(-197,-169);

	this.instance_2 = new Sprite({spriteSheet: saturn_ss});
	this.instance_2.parent = this;
	this.instance_2.setTransform(-197,-283);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_2},{t:this.instance_1},{t:this.instance}]}).wait(1));


}
function SaturnMap() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 2 (mask)
	var mask = new cjs.Shape();
	mask._off = true;
	mask.graphics.p("AmRGSQiminAAjrQAAjqCmimQCnimDqgBQDrABCnCmQClCmAADqQAADrilCnQinCljrAAQjqAAinilg");
	mask.setTransform(56.8,56.8);

	// Layer 1
	this.instance = new Saturn_Tween("synched",0);
	this.instance.parent = this;
	this.instance.setTransform(168.7,56.8);

	var maskedShapeInstanceList = [this.instance];

	for(var shapedInstanceItr = 0; shapedInstanceItr < maskedShapeInstanceList.length; shapedInstanceItr++) {
		maskedShapeInstanceList[shapedInstanceItr].mask = mask;
	}

	this.timeline.addTween(cjs.Tween.get(this.instance).to({y:282.8},149).wait(1));
}
function Group() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#FFFFFF").s().p("AG7GPQh4gPiKgoQiRgriShCQiJg9h6hLQhzhHhahKQhshagxhOQgzhQAWgwQAYg1BpgIQBlgJCcAiIgdAaQhMgMgtAGQgwAFgKAYQgTApBWBPQBHBBB7BLQCABMCaBFQCnBLCXAtQCTAsBdAEQBaAEAQgjQATgshghVIAAgpQB1BYA2BMQA4BPgWAyQgUAuhVAQQgqAIg1AAQg0AAg+gHg");
    this.shape.setTransform(76.3,40.6);
    
    this.addChild(this.shape);

}
function Path() {
    this.super_constructor();
    var cjs = createjs;
    // Layer 1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#FFFFFF").s().p("AECH4QjSgzjShfQjBhWiphxQjziih8inQh9ioAvhnQAshiC/gNQC7gMEMBHIgYAQQjRgziNAKQiQALghBIQgfBFBOBrQBLBnCgB0QDACKECB1QETB7D1AyQC1AkB2gOQB7gPAehCQAfhGhRhtQhOhqilh1IgEgeQDcCVBrCOQBuCSgrBfQgtBljGAUQgvAFgzAAQikAAjQgzg");
    this.shape.setTransform(98.2,55.5);
    
    this.addChild(this.shape);
}
function Saturn() {

    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.text = new cjs.Text("", "12px 'TimesNewRomanPSMT'", "#B0D236");
	this.text.lineHeight = 15;
	this.text.parent = this;
	this.text.setTransform(11.2,447.2);

	this.instance = new Group();
	this.instance.parent = this;
	this.instance.setTransform(125.4,112.9,1,1,0,0,0,76.3,40.6);
	this.instance.alpha = 0.199;

	this.instance_1 = new Path();
	this.instance_1.parent = this;
	this.instance_1.setTransform(122.3,120.2,1,1,0,0,0,98.3,55.5);
	this.instance_1.alpha = 0.5;

	this.shape = new cjs.Shape();
	this.shape.graphics.lf(["rgba(26,23,27,0.498)","rgba(26,23,27,0.471)","rgba(26,23,27,0)"],[0,0.027,1],-28.3,0,28.4,0).s().p("Ah1GRQimimAAjrQAAjqCmimQCminDrABQhFAuhEBeQiKC9AADtQAAD3CKC6QBEBbBFAsQjrAAiming");
	this.shape.setTransform(95.5,119.2);

	this.instance_2 = new SaturnMap();
	this.instance_2.parent = this;
	this.instance_2.setTransform(124,119.2,1,1,0,0,0,56.8,56.8);

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.f("#E2D6B1").s().p("AmRGRQilimAAjrQAAjqClimQCninDqABQDrgBCmCnQCnCmAADqQAADrinCmQimCnjrAAQjqAAining");
	this.shape_1.setTransform(124,119.2);


	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.instance_2},{t:this.shape},{t:this.instance_1},{t:this.instance},{t:this.text}]}).wait(1));

    
}

extend(Saturn_Tween, zim.MovieClip);
extend(SaturnMap, zim.MovieClip);
extend(Saturn, zim.MovieClip);
extend(Group, zim.Container);
extend(Path, zim.Container);
/* END SATURN  */


/* BEGIN URANUS  */
var uranus_ss = new createjs.SpriteSheet({
	images: ["https://i.imgur.com/3UfKZWU.png"],
	frames: [[733,0,113,101], [0,0,731,941]]
});
function Uranus_Tween() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.instance = new Sprite({spriteSheet: uranus_ss});
	this.instance.parent = this;
	this.instance.setTransform(54,155);

	this.instance_1 = new Sprite({spriteSheet: uranus_ss});
	this.instance_1.parent = this;
	this.instance_1.setTransform(54,52);

	this.instance_2 = new Sprite({spriteSheet: uranus_ss});
	this.instance_2.parent = this;
	this.instance_2.setTransform(54,-50);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_2},{t:this.instance_1},{t:this.instance}]}).wait(1));

}
function UranusMap() {
    this.super_constructor();
    var cjs = createjs;

    // mask (mask)
	var mask = new cjs.Shape();
	mask._off = true;
	mask.graphics.p("AmRGSQilinAAjrQAAjqClinQCnimDqAAQDrAACmCmQCnCnAADqQAADrinCnQimCljrAAQjqAAinilg");
	mask.setTransform(55.7,50);

	// Layer 1
	this.instance = new Uranus_Tween("synched",0);
	this.instance.parent = this;
	this.instance.setTransform(-54.8,49.9);

	var maskedShapeInstanceList = [this.instance];

	for(var shapedInstanceItr = 0; shapedInstanceItr < maskedShapeInstanceList.length; shapedInstanceItr++) {
		maskedShapeInstanceList[shapedInstanceItr].mask = mask;
	}

	this.timeline.addTween(cjs.Tween.get(this.instance).to({x:-53.8,y:-143.5},219).wait(1));

}
function Uranus() {

    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.shape = new cjs.Shape();
	this.shape.graphics.lf(["rgba(26,23,27,0.498)","rgba(26,23,27,0.471)","rgba(26,23,27,0)"],[0,0.027,1],-28.3,0,28.4,0).s().p("Ah1GRQimimAAjrQAAjqCmimQCmimDrgBQhFAvhEBeQiKC9AADtQAAD3CKC6QBEBbBFAsQjrgBimimg");
	this.shape.setTransform(52.4,118.7);

	this.instance = new UranusMap();
	this.instance.parent = this;
	this.instance.setTransform(81.7,118.5,1,1,0,0,0,56.7,49.9);

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.f("#91C2AD").s().p("AmQGRQinimAAjrQAAjqCnimQCmimDqgBQDrABCmCmQCmCmAADqQAADrimCmQimCmjrABQjqgBimimg");
	this.shape_1.setTransform(80.8,118.7);


	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.instance},{t:this.shape}]}).wait(1));
 
}

extend(Uranus_Tween, zim.MovieClip);
extend(UranusMap, zim.MovieClip);
extend(Uranus, zim.MovieClip);
/* END URANUS  */


/* BEGIN VENUS  */
var venus_ss = new createjs.SpriteSheet({
	images: ["https://i.imgur.com/w7zSd1Y.png"],
	frames: [[729,0,164,147], [0,0,727,939]]
});
function venus_shadow() {
    this.super_constructor();

    this.spriteSheet = venus_ss;
	this.gotoAndStop(0);
}
function venus_bitmap() {
    this.super_constructor();

    this.spriteSheet = venus_ss;
	this.gotoAndStop(1);
}
function Venus_Tween2() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.instance = new Sprite({spriteSheet: venus_ss});
	this.instance.parent = this;
	this.instance.setTransform(-81,147);

	this.instance_1 = new Sprite({spriteSheet: venus_ss});
	this.instance_1.parent = this;
	this.instance_1.setTransform(-81,0);

	this.instance_2 = new Sprite({spriteSheet: venus_ss});
	this.instance_2.parent = this;
	this.instance_2.setTransform(-81,-147);

	this.instance_3 = new Sprite({spriteSheet: venus_ss});
	this.instance_3.parent = this;
	this.instance_3.setTransform(-81,-294);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_3},{t:this.instance_2},{t:this.instance_1},{t:this.instance}]}).wait(1));

}
function Venus_Tween1() {
    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.instance = new Sprite({spriteSheet: venus_ss});
	this.instance.parent = this;
	this.instance.setTransform(-82,142);

	this.instance_1 = new Sprite({spriteSheet: venus_ss});
	this.instance_1.parent = this;
	this.instance_1.setTransform(-82,-3);

	this.instance_2 = new Sprite({spriteSheet: venus_ss});
	this.instance_2.parent = this;
	this.instance_2.setTransform(-82,-150);

	this.instance_3 = new Sprite({spriteSheet: venus_ss});
	this.instance_3.parent = this;
	this.instance_3.setTransform(-82,-294);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_3},{t:this.instance_2},{t:this.instance_1},{t:this.instance}]}).wait(1));

}
function VenusMap() {
    this.super_constructor();
    var cjs = createjs;

    // mask (mask)
	var mask = new cjs.Shape();
	mask._off = true;
	var mask_graphics_0 = new cjs.Graphics().p("Ak+LzQiTg+hyhxQhxhyg+iTQhBiZAAimQAAimBBiYQA+iTBxhxQByhyCTg+QCYhBCmAAQCnAACYBBQCTA+ByByQBxBxA+CTQBBCYAACmQAACmhBCZQg+CThxByQhyBxiTA+QiYBBingBQimABiYhBg");
	var mask_graphics_299 = new cjs.Graphics().p("Ak+LzQiTg+hyhxQhxhyg+iTQhBiZAAimQAAimBBiYQA+iTBxhxQByhyCTg+QCYhBCmAAQCnAACYBBQCTA+ByByQBxBxA+CTQBBCYAACmQAACmhBCZQg+CThxByQhyBxiTA+QiYBBingBQimABiYhBg");

	this.timeline.addTween(cjs.Tween.get(mask).to({graphics:mask_graphics_0,x:81.8,y:76}).wait(299).to({graphics:mask_graphics_299,x:81.8,y:76}).wait(1));

	// Layer 1
	this.instance = new Venus_Tween1("synched",0);
	this.instance.parent = this;
	this.instance.setTransform(81.9,294.3);

	this.instance_1 = new Venus_Tween2("synched",0);
	this.instance_1.parent = this;
	this.instance_1.setTransform(82,-148.1);

	var maskedShapeInstanceList = [this.instance,this.instance_1];

	for(var shapedInstanceItr = 0; shapedInstanceItr < maskedShapeInstanceList.length; shapedInstanceItr++) {
		maskedShapeInstanceList[shapedInstanceItr].mask = mask;
	}

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance}]}).to({state:[{t:this.instance_1}]},299).wait(1));
	this.timeline.addTween(cjs.Tween.get(this.instance).to({_off:true,x:82,y:-148.1},299).wait(1));

}
function Venus() {

    this.super_constructor();
    var cjs = createjs;

    // Layer 1
	this.shape = new cjs.Shape();
	this.shape.graphics.lf(["rgba(26,23,27,0.498)","rgba(26,23,27,0.471)","rgba(26,23,27,0)"],[0,0.027,1],-40.9,0,41,0).s().p("ABbLzQiSg+hyhxQhxhyg+iTQhBiYAAinQAAilBBiZQA+iTBxhyQByhxCSg+QCYhBCnAAQhjBEhjCIQjHEQAAFXQAAFlDHEMQBjCFBjA+QinAAiYhBg");
	this.shape.setTransform(75.6,170.8);

	this.instance = new VenusMap();
	this.instance.parent = this;
	this.instance.setTransform(116.7,168.8,1,1,0,0,0,81.9,73.7);

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.f("#CBBA97").s().p("Ak+LzQiTg+hyhyQhxhxg+iTQhBiYAAinQAAimBBiYQA+iTBxhxQByhyCTg+QCYhBCmABQCngBCYBBQCTA+ByByQBxBxA+CTQBBCYAACmQAACnhBCYQg+CThxBxQhyByiTA+QiYBAinAAQimAAiYhAg");
	this.shape_1.setTransform(116.6,170.9);


	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.instance},{t:this.shape}]}).wait(1));

    
}

// convert to zim classes
extend(venus_bitmap, zim.Sprite);
extend(venus_shadow, zim.Sprite);
extend(Venus_Tween1, zim.MovieClip);
extend(Venus_Tween2, zim.MovieClip);
extend(VenusMap, zim.MovieClip);
extend(Venus, zim.MovieClip); 
/* END VENUS  */


var fire_sheet = new createjs.SpriteSheet({
	images: ["https://i.imgur.com/GrE12F2.png"],
	frames: [
		[1557,439,380,466],
		[758,583,358,476],
		[378,1206,362,499],
		[1428,1312,360,428],
		[1084,1312,342,452],
		[742,1128,340,481],
		[0,1206,376,565],
		[412,0,373,581],
		[787,0,372,560],
		[397,624,359,502],
		[1161,0,394,527],
		[0,624,395,580],
		[0,0,410,622],
		[1118,947,428,363],
		[1161,529,394,416],
		[1557,907,349,403],
		[1557,0,419,437]
	]

}); // spritesheet of fire animation made with createjs
function FireClip(){
    this.super_constructor();
    // this.initialize();
    var cjs = createjs;


    // Layer_1
    this.instance = new Sprite({spriteSheet: fire_sheet});
    this.instance.parent = this;
    this.instance.gotoAndStop(0);
    this.instance.setTransform(152,194.6);

    this.instance_1 = new Sprite({spriteSheet: fire_sheet});
    this.instance_1.parent = this;
    this.instance_1.gotoAndStop(1);
    this.instance_1.setTransform(140,179.6);

    this.instance_2 = new Sprite({spriteSheet: fire_sheet});
    this.instance_2.parent = this;
    this.instance_2.gotoAndStop(2);
    this.instance_2.setTransform(136,156.6);

    this.instance_3 = new Sprite({spriteSheet: fire_sheet});
    this.instance_3.parent = this;
    this.instance_3.gotoAndStop(3);
    this.instance_3.setTransform(142,227.6);

    this.instance_4 = new Sprite({spriteSheet: fire_sheet});
    this.instance_4.parent = this;
    this.instance_4.gotoAndStop(4);
    this.instance_4.setTransform(135,206.6);

    this.instance_5 = new Sprite({spriteSheet: fire_sheet});
    this.instance_5.parent = this;
    this.instance_5.gotoAndStop(5);
    this.instance_5.setTransform(130,174.6);

    this.instance_6 = new Sprite({spriteSheet: fire_sheet});
    this.instance_6.parent = this;
    this.instance_6.gotoAndStop(6);
    this.instance_6.setTransform(105,93.6);

    this.instance_7 = new Sprite({spriteSheet: fire_sheet});
    this.instance_7.parent = this;
    this.instance_7.gotoAndStop(7);
    this.instance_7.setTransform(112,76.6);

    this.instance_8 = new Sprite({spriteSheet: fire_sheet});
    this.instance_8.parent = this;
    this.instance_8.gotoAndStop(8);
    this.instance_8.setTransform(103,96.6);

    this.instance_9 = new Sprite({spriteSheet: fire_sheet});
    this.instance_9.parent = this;
    this.instance_9.gotoAndStop(9);
    this.instance_9.setTransform(124,154.6);

    this.instance_10 = new Sprite({spriteSheet: fire_sheet});
    this.instance_10.parent = this;
    this.instance_10.gotoAndStop(10);
    this.instance_10.setTransform(84,129.6);

    this.instance_11 = new Sprite({spriteSheet: fire_sheet});
    this.instance_11.parent = this;
    this.instance_11.gotoAndStop(11);
    this.instance_11.setTransform(58,76.6);

    this.instance_12 = new Sprite({spriteSheet: fire_sheet});
    this.instance_12.parent = this;
    this.instance_12.gotoAndStop(12);
    this.instance_12.setTransform(35,33.6);

    this.instance_13 = new Sprite({spriteSheet: fire_sheet});
    this.instance_13.parent = this;
    this.instance_13.gotoAndStop(13);
    this.instance_13.setTransform(16,292.6);

    this.instance_14 = new Sprite({spriteSheet: fire_sheet});
    this.instance_14.parent = this;
    this.instance_14.gotoAndStop(14);
    this.instance_14.setTransform(48,239.6);

    this.instance_15 = new Sprite({spriteSheet: fire_sheet});
    this.instance_15.parent = this;
    this.instance_15.gotoAndStop(15);
    this.instance_15.setTransform(79,251.6);

    this.instance_16 = new Sprite({spriteSheet: fire_sheet});
    this.instance_16.parent = this;
    this.instance_16.gotoAndStop(16);
    this.instance_16.setTransform(59,217.6);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance}]}).to({state:[{t:this.instance_1}]},1).to({state:[{t:this.instance_2}]},1).to({state:[{t:this.instance_3}]},1).to({state:[{t:this.instance_4}]},1).to({state:[{t:this.instance_5}]},1).to({state:[{t:this.instance_6}]},1).to({state:[{t:this.instance_7}]},1).to({state:[{t:this.instance_8}]},1).to({state:[{t:this.instance_9}]},1).to({state:[{t:this.instance_10}]},1).to({state:[{t:this.instance_11}]},1).to({state:[{t:this.instance_12}]},1).to({state:[{t:this.instance_13}]},1).to({state:[{t:this.instance_14}]},1).to({state:[{t:this.instance_15}]},1).to({state:[{t:this.instance_16}]},1).wait(1));

} // The fire animation class
extend(FireClip, zim.MovieClip); // use zimjs to make it a MovieClip


/* FUNCTIONS FOR CREATING THE SUN AND PLANETS */
function createTheSun(stage) {
	var beam6 = new Circle(650,'#da9300').center(stage).pos({x: -520}).alp(0.3);
	var beam5 = new Circle(550,'#da9300').center(stage).pos({x: -550}).alp(0.3);
	var beam4 = new Circle(450,'#da9300').center(stage).pos({x: -520}).alp(0.3);
	var beam3 = new Circle(350,'#da9300').center(stage).pos({x: -450}).alp(0.2);
	var beam2 = new Circle(50, '#da9300').addTo(stage).scaleTo(stage).pos({x: -480, y: 6}).alp(0.2);
	var flame2 = new FireClip().addTo(stage);
	var beam1 = new Circle(20, '#da9300').addTo(stage).scaleTo(stage).pos({x: -550, y: 6});
	var flame = new FireClip();
	var flame3 = new FireClip();

	flame.pos({x: 350, y: 400}).rot(100).sca(1.1);
	flame3.pos({x: 300, y: -350}).rot(80).sca(1.3);
	flame2.pos({x: 100, y: -400}).rot(45).sca(0.9);

	stage.addChild(flame, flame3);
}
function createThePlanets(container, stage) {
	var planetTip = new zim.Tip({
		text:"Planet's name",
		backgroundColor: '#01073E',
		color:white,
		outside:true, // outside the circle
		target:stage,
		align:"center",
		valign:"bottom",
		margin:14,
		corner:10,
		size:32
	});

	var jupiter = new Jupiter().addTo(container).setTransform(760,300,1,1,0,0,180,137.8,178.8)
	.tap(function () {
		planetTip.text = 'Jupiter';
		planetTip.show();
    zog('tapped');
	});
	
	var earth = new Earth().addTo(container).setTransform(400,320,0.774,0.774,0,0,180,94.5,122.3)
	.tap(function () {
		planetTip.text = 'Earth';
		planetTip.show();
	});
	var mars = new Mars().addTo(container).setTransform(550,330,0.7,0.7,0,0,180,85.6,111.1)
	.tap(function () {
		planetTip.text = 'Mars';
		planetTip.show();
	});
	var venus = new Venus().addTo(container).setTransform(240,320,0.794,0.794,0,0,180,107.9,139.6)
	.tap(function () {
		planetTip.text = 'Venus';
		planetTip.show();
	});
	var mercury = new Mercury().addTo(container).setTransform(90,350,0.674,0.674,0,0,180,74.5,93)
	.tap(function () {
		planetTip.text = 'Mercury';
		planetTip.show();
	});
	var saturn = new Saturn().addTo(container).setTransform(1010,480,1.131,1.131,0,0,180,116.3,231.3)
	.tap(function () {
		planetTip.text = 'Saturn';
		planetTip.show();
	});
	var uranus = new Uranus().addTo(container).setTransform(1210.3,335,1.131,1.131,0,0,180,75.2,96.9)
	.tap(function () {
		planetTip.text = 'Uranus';
		planetTip.show();
	});
	var neptune = new Neptune().addTo(container).setTransform(1390.6,340,1.131,1.131,0,0,180,60.6,75.3)
	.tap(function () {
		planetTip.text = 'Neptune';
		planetTip.show();
	});
}


var scaling = "full"; // makes stage the window size but does not scale content
var assets = ["LptvQuW.png", "space.jpg", "GrE12F2.png", ];
var path = "https://i.imgur.com/";
var frame_params = {
	scaling: 'full',
	assets: assets,
	path: path
};


var frame = new Frame(frame_params); // see docs for more options and info
frame.on("ready", function() {
	zog("ready from ZIM Frame");

	
	var stage = frame.stage;
	var stageW = frame.width;
	var stageH = frame.height;
	frame.color = '#01073E'; // ZIM colors now available globally
	
   var background = frame.asset("LptvQuW.png").center(stage).alp(0).animate({alpha:1}, 2000); // access asset (zim.Bitmap) // A Starry background image
	var planets_container = new zim.Container(1250, 800); // The planets are grouped together here
  var sun_container = new zim.Container(700, window.innerHeight).pos({x: -150});
  planets_container.sca(0.8).pos({x: 120, y: 60}).addChild(sun_container); // scale and reposition the planets

	createTheSun(sun_container);
  createThePlanets(planets_container, stage);
  
  stage.addChild(planets_container); // Add to the stage
  // make the Layout - more useful for FULL scale mode
	var layout = new Layout({
		holder:stage,
		regions:[
			{object:planets_container, marginTop:10, maxWidth:80, },
			// {object:sun_container, marginTop:5, maxWidth:1680},
		],
		lastMargin:5,
	});
 
	// add to LayoutManager to resize or dispose all layouts together
	// disposing only removes keyboard events to show boundaries
	var manager = new LayoutManager();
	manager.add(layout);


	fnStartAnimation = function() {
		createjs.Ticker.setFPS(30);
		createjs.Ticker.addEventListener("tick", stage);
	};

	fnStartAnimation();


	// put resizing code in here
	// resize also gets called initially
	frame.on("resize", resize);
	function resize(e) {
		stageW = frame.width;
		stageH = frame.height;
		// can redraw things at different sizes or use scaling here
		manager.resize(); 
		background.center().pos({y: -150}); // centers on stage - addTo() and others as well! */
		stage.update();
	}

}); // end of ready

              
            
!
999px

Console