FRAME
TEMPLATES
Start your project with a ZIM Frame template. Frame makes a canvas and CreateJS stage, handles resizing, asset loading, various mobile issues, etc. See the DOCS for more. Here are the templates and instructions:
INSTRUCTIONS
- Select an image above to go to the template
- On the template page press CTRL U or ⌘ U to see the code
- Right click and save page as Web Page Only to start your app
- Click here to get examples of common META TAGS
NOTES
- The colored area above represents the content (canvas / stage)
- The dashed lines represent the screen (window / viewport)
- In the FIT and FILL mode you can align and valign the canvas
- FIT and FILL scale your content keeping the aspect ratio
- This makes positioning in code easy with one set of dimensions
- FULL makes the stage the same as the screen size
- FULL does not scale the stage so handle scaling in app
- See ZIM scale(), scaleTo(), fit() and Layout() for scaling help
- TAG adds the canvas and the stage to an HTML element specified by tag ID
- TAG sets the width and height of the stage to the tag dimensions
- unless you specify dimensions and then it uses the specified dimensions
- See the code and docs for parameters and information
- See the ZIM Basics 01 video for a mention of this page
ADVICE
- FULL is the most professional solution for mobile apps
- FIT is a handy easy-to-code solution for full-screen Web apps
- FILL can be used for full-screen apps where border does not matter
- for instance, drawing on a page or making fireworks
- TAG is used to embed a canvas inside a Web page
- Use zim.fit() to fit content of a TAG frame to fit the area of the tag
- Giving TAG dimensions is like a positioning a picture
- WARNING - be careful with CSS scaling
- Caching your shapes and text is faster but can make scaling more noticable
- Use a bigger canvas and scale down for FIT, FILL and TAG (with dimensions)