ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Preload Images and Sound</title>
<!-- Welcome to ZIM at https://zimjs.com - Code Creativity! -->
<!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS https://createjs.com -->
<!-- Founded by Inventor Dan Zen - http://danzen.com - Canadian New Media Award Winner -->
<!-- ZIM is free to use. You can donate to help improve ZIM at http://zimjs.com/donate -->
<script src="https://zimjs.org/cdn/1.3.4/createjs.js"></script>
<script src="https://zimjs.org/cdn/01/zim_min.js"></script>
<!-- use zimjs.com/distill for minified individual functions! -->
<script src="https://zimjs.com/bits/footer10.js"></script><!-- you will not need this -->
<script>
// SCALING OPTIONS
// scaling can have values as follows with full being the default
// FIT sets canvas and stage to dimensions and scales to fit inside window size
// FILL sets canvas and stage to dimensions and scales to fit outside window size
// FULL sets stage to window size with no scaling
// "tagID" add canvas to HTML tag of ID - set to dimensions if provided - no scaling
const scaling = FIT; // this will resize to fit inside the screen dimensions
const width = 1000;
const height = 800;
const color = darker;
const outerColor = dark;
// 1. prepare files and path to load with Frame
const assets = ["zim_promo.jpg", "welcome.mp3"];
const path = "assets/";
// 2. prepare a Waiter to show assets are loading - alternatively, can use a ProgressBar()
const waiter = new Waiter();
// 3. call Frame and set a ready event to start your app's main function
new Frame(scaling, width, height, color, outerColor, ready, assets, path, waiter);
function ready() {
// given F (Frame), S (Stage), W (width), H (height)
// ZIM BITS - Preload Images and Sound (2016 - updated 2022)
// NOTE: the ZIM code just wraps the CreateJS PreloadJS code
// so all the work was done by the CreateJS Team
// the code can be found in the ZIM Templates
// templateload.html and templateloadprogress.html
// to show a graphic on the canvas we use createjs.Bitmap()
// but we should preload the graphic and monitor the loading process before we use it
// you may want to start your app once certain assets load instead of waiting for all
// but usually, it works out okay to wait for your assets and then start the app
// NOTE: In Chrome you will get security errors when running the html file locally
// when you bring in sound and images and then apply click events (Firefox does not care)
// it is fine in a server but here is how you can fix this for testing local files
// use command line flags: // https://www.chromium.org/for-testers/command-line-flags
// ON PC - quit any open Chrome browsers
// find your Chrome shortcut, right click to properties and in the target field
// add the following command line flag after the final quotes - for example:
// "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
// ON MAC - quit any open Chrome browsers
// Quit any running instance of chrome.
// Launch /Applications/Utilities/Terminal.app
// At the command prompt enter:
// /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files
// below is the code from the ZIM Load template broken down into steps
// AS OF ZIM CAT
// asset() can be used without preloading - but preloading is still recommended
// STEPS
// 1. prepare files and path to load with Frame
// 2. prepare a Waiter to show assets are loading - alternatively, can use a ProgressBar()
// 3. call Frame and set a ready event to start your app's main function
// 4. in your app function use new Pic(file) to access an image
// 5. or use new Aud(file).play() to play a sound - must interact before playing the first sound
// 4. in your app function use new Pic(file) to access an image
// 5. or use new Aud(file).play() to play a sound - must interact before playing the first sound
// if you want to adjust volume, etc. then assign this to a variable
// const sound = new Aud("welcome.mp3").play({volume:2, loop:true});
// or after with property of the return object of play() - a CreateJS AbstractSoundInstance
// sound.volume = .5;
const sound = new Aud("welcome.mp3");
const image = new Pic("zim_promo.jpg")
// here we will center the image, fade it in and make it click to a URL
.center() // centers and adds to container (the stage in this case)
.animate({obj:{alpha:0}, time:4, from:true})
.cur()
.tap(function() {
sound.play();
});
const docItems = "Frame,Bitmap,Waiter,tap,animate,cur,center,zog";
makeFooter(S, W, H, null, docItems); // ZIM BITS footer - you will not need this
} // end of ready
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
</html>