Page Stacks

The stack flow is a premium extension that comes with ProStyle Plus. Each page starts on a future stack, becomes the current page, and ends up on a past stack.

The extension has a default stack configuration, but can be changed to position the stacks differently.

Default Configuration

The first story has seven pages, each with just one text item. Because it is not using the default simple flow, a flow entry must be used so that the flowType can be set to "stack".

Canvas and Frame padding is used with a shadow and background color to make a 3D border.

Angled Stack

The second story can be viewed by clicking the button labeled 2 under the editor. It adds a stacks entry which is used to change the flow’s look. The current page is positioned up and to the left and rotated a little. The pages in the future stack are positioned increasingly behind the current page. The past stack is positioned off the canvas with no opacity, so the pages appear to fly away.

Snaked Pages

The third story uses a different custom configuration that moves the pages in a two dimensional snake pattern. It overrides the pageAspectRatio to make each page short and wide.

story = {
  classes: {
    text: { font:7, width:90, align:"center" }
  },
	canvas: { padding:3 },
	frame: {
		padding:13,
		init:{
			bg:"#BADA55",
			shadow:[0.4,0.4,0.4,"rgba(0,0,0,0.4)",0,true]
		}
	},
	flow: {
		flowType:"stack",
		pages:[
			{ item:{text:"This is a seven page 'Page Stack' using the default configuration."} },
			{ item:{text:"2"} },
			{ item:{text:"3"} },
			{ item:{text:"4"} },
			{ item:{text:"5"} },
			{ item:{text:"6"} },
			{ item:{text:"7", action:{delay:2}} }
		]
	}
};
story = {
  classes: { text: {pos:{z:1}, font:7, align:"center"} },
	canvas: { padding:7, init: {bg:"#678"} },
	frame: { padding:13	},
	flow:{
		flowType:"stack",
		placement:{ pos:[-100,-100,0]},
		stacks:{
			current:{ pos:[-5,-10,-10], rot:[-10,15,-10], scale:100, opacity:100 },
			future:{ pos:[-33,-45,-35], rot:[-10,15,-10], scale:100, opacity:80,
				offset:{ pos:[-10,-9,-4], rot:[0,-5,3], scale:100, opacity:80 }},
			past:{ pos:[70,70,100], rot:[0,10,-5], scale:100, opacity:0,
				offset:{ pos:[0,0,0], rot:[0,0,0], scale:100, opacity:0 }}
		},
		pages:[
			{ item:{ text:["A 'Page Stack' with", "custom configuration."]} },
			{ item:{text:"2"} },
			{ item:{text:"3"} },
			{ item:{text:"4"} },
			{ item:{text:"5"} },
			{ item:{text:"6"} },
			{ item:{text:"7"} },
		]
	}
};
story = {
	canvas:{init:{bg:"#4E2F2F"}},
	frame:{padding:15},
	flow:{
		flowType:"stack",
		pageAspectRatio: 2.5,
		placement:{ pos:[-100,-100,0]},
		stacks:{
			current:{ scale:90},
			future:{ pos:[60,-75,-10], scale:40, opacity:80,
				offset:{ pos:[-45,0,0], opacity:80 }},
			past:{ pos:[-60,75,-10], scale:40,
				offset:{ pos:[45,0,0], opacity:80 }}
		},
		pages:[
			{
				item:{
					text:["A 'Page Stack' with", "custom configuration."],
					init:{font:7, align:"center"}
				}
			},
			{ item:{text:"2"} },
			{ item:{text:"3"} },
			{ item:{text:"4"} },
			{ item:{text:"5"} },
			{ item:{text:"6"} },
			{ item:{text:"7"} }
		]
	}
};