2D Animation & Interactivity for the Modern Web
Download this project from: http://www.swirlystudios.com/dart/template.zip
import 'dart:html' as html; import 'package:stagexl/stagexl.dart'; //*******STEP 1: Set this to your line number, 1-9 const int LINE_NUM = 1; Stage stage; RenderLoop renderLoop; ResourceManager resourceManager; TextField narrationTextField; Bitmap backgroundImage; Bitmap object1Image; Bitmap object2Image; Bitmap object3Image; void main() { initializeStage(); loadAssets(); } void loadAssets() { resourceManager = new ResourceManager() ..addSound("narration", "snd/line_${LINE_NUM}.ogg") //*****STEP 2: Replace the filenames here with your choses images ..addBitmapData("background", "img/default_background.png") //Replace 'default_background.png' with the background of your choice ..addBitmapData("object1", "img/default_object1.png") //Replace 'default_object1.png' with the background of your choice ..addBitmapData("object2", "img/default_object2.png") //Replace 'default_object2.png' with the background of your choice ..addBitmapData("object3", "img/default_object3.png"); //Replace 'default_object3.png' with the background of your choice resourceManager.load().then(onAssetsLoaded); } void onAssetsLoaded(var result) { addImages(); addNarrations(); addAnimations(); } void addImages() { backgroundImage = new Bitmap(resourceManager.getBitmapData('background')); object1Image = new Bitmap(resourceManager.getBitmapData('object1')); object2Image = new Bitmap(resourceManager.getBitmapData('object2')); object3Image = new Bitmap(resourceManager.getBitmapData('object3')); //******STEP 3: Edit the x/y values to place your images at the correct location object1Image.x = 100; object1Image.y = 100; object2Image.x = 300; object2Image.y = 150; object3Image.x = 450; object3Image.y = 100; stage.addChild(backgroundImage); stage.addChild(object1Image); stage.addChild(object2Image); stage.addChild(object3Image); } void addNarrations() { narrationTextField = new TextField(); narrationTextField.defaultTextFormat = new TextFormat('Grinched', 30, Color.White); switch(LINE_NUM) { case 1 : narrationTextField.text = "That Sam-I-am! That Sam-I-am! I do not like that Sam-I-am!"; break; case 2 : narrationTextField.text = "Do you like green eggs and ham? I do not like them, Sam-I-am. I do not like green eggs and ham."; break; case 3 : narrationTextField.text = "Would you like them here or there?"; break; case 4 : narrationTextField.text = "I would not like them here or there. I would not like them anywhere. I do not like Green Eggs and Ham. I do not like them Sam-I-am."; break; case 5 : narrationTextField.text = "Would you like them in a house? Would you like them with a mouse?"; break; case 6 : narrationTextField.text = "I would not like them in a house. I would not like them with a mouse."; break; case 7 : narrationTextField.text = "Would you eat them in a box? Would you eat them with a fox?"; break; case 8 : narrationTextField.text = "Not in a box. Not with a fox. I would not eat green eggs and ham. I do not like them Sam-I-am."; break; case 9 : narrationTextField.text = "Same. If you will let me be, I will try them you will see. I like green eggs and ham! I do! I like them Sam-I-am!"; break; default : throw ("Invalid Line Number"); } narrationTextField.x = 20; narrationTextField.y = 500; narrationTextField.width = 700; narrationTextField.height = 180; narrationTextField.wordWrap = true; stage.addChild(narrationTextField); Sound sound = resourceManager.getSound("narration"); SoundChannel soundChannel = sound.play(false); }//*******STEP 4: Delete the contents of this method, replace it with any code samples you would like from http://swirlystudios.com/dart/cookbook.html void addAnimations() { var object1Tween = new Tween(object1Image, 3.0); object1Tween.animate.x.to(600); object1Tween.animate.y.to(100); object1Tween.delay = 1.0; //object1Tween.onComplete = (Event e) { print(e); }; renderLoop.juggler.add(object1Tween); }
//---------------------------------------------------- //no need to edit items in this section void initializeStage() { var canvas = html.query('#stage'); stage = new Stage('myStage', canvas, 800, 600); renderLoop = new RenderLoop(); renderLoop.addStage(stage); } //----------------------------------------------------