Background Adjustments for MeagaZine3 Books

http://martyrologium.thulb.uni-jena.de/book/

Adjusting digital Books Depending on the style of the book (catalogue, magazine, photo book, report, company flyer) and the standard „CI“ (Corporate Identity) the look&feel can be adjusted. One way are colors and background images. Another necessary option are customized icons for the buttons (not discussed in this paper). Examples of different looks:

http://scale-magazine.com 2

2

Preparations ▪ If the PDF already is converted, you can save time: disable a new conversion in setting make@convert_PDF=false and tell MZ3-Tool3 to use the already collected parameters like page size and number of pages: make@use_title_param=true ▪ If no bookmarks are needed, set details@bookmarks_URL = ““ ▪ If the gallery feature is not desired (show the selected image in fullscreen mode), set the corresponding parameter details@gallery = false ▪ Same for the search; if not needed set details@searchindex = ““ ▪ To show a book edge even if the „book“ is small, you can increase the details@pagethickness = 1

3

3

Helpful Links The parameters and settings mentioned so far are just a small part of all available options. A complete list of (plugins), elements (Video, Audio, Area) and book attributes can be found in the WIKI. If an attribute like pagethickness is missing in the details config file, you can simply add it: Insert a line within the tag and the correct syntax: value 4

4

Background Color of the Container The background color of the browser window, used for the Online version of MegaZine3, is set with the „data-mz3-bgcolor“ entry in the index.html file. You can directly set the color value there. A more comfortable option is to set the details@index_bgcolor parameter in the ‚details‘ config file:

#e0e0e0 This is a light grey. This example shows the change when setting index_bgcolor to #073800

5

5

Background Color of Pages The color of the pages, which only are visible if the places content like images does not fill the whole page, can be set with details@book_bgcolor. This setting results in a light green: # 44bbbb That color also influences the color of the book edge. To show the effect on a page in the following example the images are scaled down so that a 40px border is visible : -40

and

-40

6

6

Images as Background for Pages Alternatively you also can use an image as page background. A set of images that can be used for this (images for left, right and spreadpages) are available in the MZ3-Tool3 package. You can activate those images with the parameter details@bground_img. A value of „*“ makes use of the default images: * left page

right page

spreadpage

7

7

Customized Page Background Images You can use your own images as page background also. Those images must be copied into the pg_bground/ sub folder of the software/ folder. MZ3-Tool3 takes care about copying that folder to the final set of folders in the export folders Path and base name are defined as details@bground_img parameter: my_bg/green.img Remark: Only specify the base name, i.e. do not include the page specifier! A complete set is made out of 3 images. The naming of the images must follow this rule: left page: *_pl_n, right page: *_pr_n, spreadpage: *_s_n With „n“ as chapter number and ‚*‘ representing the base name. With this you could defined a set per chapter.

green_pl_1.jpg

green_pr_1.jpg

8

8

Customization Results

*

my_bg/green.jpg

9

9

Customized Book Foreground ‚Around‘ the book there are 3 areas you can fill with content, which can spread across the whole container:: 1. Foreground:

The foreground spans the whole window and if in front of the book

Usually a logo is placed in the foreground, so it is not hidden by the pages.

10

10

Customized Book Background 2. Background: Also the background spans the whole window, but is layered behind the book This kind of background can be used to show a background scene (library room, vacation scene, …) or to put some kind of art. It is possible to include real ActionScript3 Code within a foreground or background tag; with no need for any compile run. Making use of the powerful API it is possible to modify the background images dependent on the page number. Which allows interesting effects as shown in the Martyrologicum Book, where the book looks and operates very realistically. 11

11

Area behind the Book 1. Book Background

It is possible to place an image behind the area of an opened book. This area only is visible if the book is closed

Often this area is used to place some help information like in the example on the right. Or to use the space for advertisements. This information is no more visible once the book is opened, since the pages cover the whole area.

http://www.wycliffe.ca/wycliffe/wordalive/2012_fall 12

12

Example1: Logo in Foreground A logo or any image can be positioned over and around the book with the following parameter settings: 1. 2. 3.

details@fg_img_src details@fg_img_area details@fg_img_URL

path and name of the image; relative to megazine.swf The area of the image (size and position) Address of an URL used as link on a click within the area

Example: assets_c/poweredby.png pw-40-160,ph/2-22,pw-40,ph/2+23 http://megazine3.de The ‚powered by‘ will be shown at the right and middle of the window. pw=window width, w=width of image, h=height of image, ph=window height (p: parent) The source of the image must be placed in the folder /assets_c/, which is available in the folder defined with details@customizationpath; like: software/custom/ This folder is automatically copied into the megazine/ folder by MZ3-Tool3 during collecting the export data 13

13

Example2: AS3 Code within Background Another option supported is to define a path and name to an XML file using details@bg_img_src That folder must be a subfolder within customizationpath. Therefore the parameter must be set correctly. If the extension of the filename that is defined with fg_img_src ends with „.xml“, than the content of that file will be inserted into the megazine.mz3 configuration file, enclosed within tags. This allows adding more than just one single image to the background Example for a logo, as content of bground/: