ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Pages and HotSpots</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 = dark; // or any HTML color such as "violet" or "#333333"
const outerColor = light;
new Frame(scaling, width, height, color, outerColor, ready);
function ready() {
// given F (Frame), S (Stage), W (width), H (height)
// ZIM BITS - Pages and HotSpots (2016 - updated 2022)
// Pages lets you swipe or click between pages
// you make the pages (containers) and add them to the Pages object
// usually the pages are on the full stage
// in this example we add them to a masked container
// STEPS
// 1. make a container to hold the pages (or use the stage)
// NOTE: AS OF ZIM CAT - there is a new Page() class/object!
// that is just a Container with a backing Rectangle
// see https://zimjs.com/cat/page.html for new transition effects too!
// 2. make a mask so that transitions are not seen
// 3. make pages - usually Containers but could be Shapes or BitMaps
// 4. create a new Pages object
// 5. pass in the individual page objects with swipe instructions
// 6. add a transition and transition speed
// 7. add the pages object to the container
// 8. create a HotSpots object to handle all navigation
// 9. pass in an array of pages, their interface objects and events to call
// 10. make a Pane with alerts (optional of course)
// 11. make an alert function that matches the pages object swipe alert string
// 1. make a container to hold the pages (or use the stage)
const w = 300;
const h = 400;
const holder = new Container(w, h)
.pos(100, 100)
.center();
// 2. make a mask so that transitions are not seen
// add the mask underneath the page container
const mask = new Rectangle(w,h).center(S, 0);
holder.setMask(mask); // do not chain setMask
// 3. make pages - usually Containers but could be Shapes or BitMaps
// just using loop to make sample pages
// you will probably make each page individually
// make the whole page using using only objects on that page
// clone assets that you need on multiple pages
// this way, transitions will work properly
// so once again, this looping is for sample pages only
// you will make individual pages
const numPages = 3; // example Pages object made to use 3 pages
const pageList = [];
const colors = series(purple, green, blue);
// OR SEE ZIM Arrow() with pages parameter for a better way
const arrow = new Triangle({a:50, color:"white"})
.rot(90)
.reg(null, w*.4)
.loc(w/2, h/2)
.removeFrom();
let p; let r;
for (let i=0; i<numPages; i++) {
p = new Page(w,h,colors);
pageList.push(p);
p.arrowR = arrow.clone()
.addTo(p);
p.arrowL = arrow.clone()
.rot(270)
.addTo(p);
}
// make easier page names to reference
const page1 = pageList[0];
const page2 = pageList[1];
const page3 = pageList[2];
// get rid of the first and last arrows
page1.arrowL.removeFrom(page1)
page3.arrowR.removeFrom(page3);
// 4. create a new Pages object
const pages = new Pages({
holder:holder,
// 5. pass in the individual page objects with swipe instructions
pages:[
// swipe:["right", "left", "down", "up"]
{page:page1, swipe:[null,page2,"alert","alert"]},
{page:page2, swipe:[page1,page3,null,null]},
{page:page3, swipe:[page2,null,null,null]}
],
// 6. add a transition and transition speed
transition:"slide",
speed:.4
})
// 7. add the pages object to the container
.addTo(holder);
// 8. create a HotSpots object to handle all navigation
const hotSpots = new HotSpots([
// 9. pass in an array of pages, their interface objects and events to call
{page:page1, rect:page1.arrowR, call:function(){pages.go(page2, "right");}},
{page:page2, rect:page2.arrowL, call:function(){pages.go(page1, "left");}},
{page:page2, rect:page2.arrowR, call:function(){pages.go(page3, "right");}},
{page:page3, rect:page3.arrowL, call:function(){pages.go(page2, "left");}},
]);
// 10. make a Pane with alerts (optional of course)
const pane = new Pane({
container:S,
width:450, height:150,
content:"SWIPE SIDEWAYS",
color:grey,
corner:0
}).show();
// 11. make an alert function that matches the pages object swipe alert string
pages.on("alert", function(e) {
pane.show();
});
// EXTRA
// You can also capture events for when pages change
// a more complex version of pages can be found here:
// https://zimjs.com/examples/pages.html
// with multiple swipe directions and orientations
// you can also nest pages to accomodate any hierarchies
// pages can also include Layout() objects for responsive design
const title = "Pages and Page Control";
new Label(title, 30, null, "#666")
.pos(40, 40);
const docItems = "Frame,Container,Rectangle,Triangle,Label,Pane,pos,rot,reg,addTo,removeFrom,center,setMask,Pages,HotSpots,Layout,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>