How to use all those parameters available to get optimal results?
(you can download this long text as PDF file ;-)
I created 2 little zoom demo books you can look at:
demo book with zoomdoubleclick and
demo book with liquid scaling and gallery
Showing the same image with text in different resolutions.
The MZ3 File and the images can be downloaded for own tests. But attention: it has about 36 MB!
Just the 2 MZ3 Files are available without the images also (much smaller ;-).
Background "theory":
There are dozens of parameters you can use to adjust the final book to your needs.
Although we hopefully did a good job in setting useful default values, in many cases you can and should achieve better results in changing some of the default settings.
You can find all those parameters you can tweak at book, page and element level in the wiki; like:
Book Attributes (56!)
Page Attributes (9)
IMG Attributes (6)
Use the key words on the left of the wiki, the links on the main page of the wiki and the search function to find areas of interest.
Here some ideas and tipps on what knobs you have to optimize your books with jpg images. Not a complete list, more a teaser to encourage you to get deeper into the features and functions and options you have with MegaZine3!
At the end you have to find the best working set of parameters and configuration yourselves, dependent on your data, your design and your customer expectations.
First (because this question came up several times):
The gallery still works the same with v2.x as it did with v1.x. And it is still available. But if you're used to v1.x you should read the information about migration in the wiki, since some names of parameters changed!
In gallery mode (full screen) it is not possible to operate the book in the standard way because of FLASH security restrictions. In neither version. For example it is not allowed to enter data like page number or search strings.
But... with the latest version 2.0.6 you can set a parameter called zoomstep, Which defines how much you change the zoomscale with one click of the zoom button (or lock of the mouse wheel).
Using that new parameter together with reasonable settings for zoomminscale, zoommaxscale and zoominit you can optimize the quality of the presented JPG images of your book.
Together with the scale attribute you can switch/reload different resolution JPGs, which will support in having always the optimal quality.
So something like:
<book plugins="console print ... ..."
zoomstep="2.0"
zoomminscale="1.0" zoommaxscale="4.0"
zoominit="1.0"
pageheight="600" pagewidth="400" ... ... >
..
..
<page>
<img widh="400" height="600"><src>path/to/lowres.jpg</src>
<src scale="2.0">path/to/highres.jpg</src>
</img>
</page>
<spreadpage buffer="true">
<img widh="400" height="600"><src>path/to/image01-1x.jpg</src>
<src scale="2.0">path/to/image01-2x.jpg</src>
<src scale="3.0">path/to/image01-3x.jpg</src>
<src scale="4.0">path/to/image01-4x.jpg</src>
</img>
</spreadpage>
will do the following:
The book will open with zoomscale="1.0", i.e. the size of the defined page with a low resolution image that perfectly fits. As long as the image and book sizes match; i.e. the image is 400x600 pixels for above example).
This is achieved by zoominit="1", which opens the book with the page size defined by pagewidth and pageheight.
The optimal sized low resolution image (here placed in a "low res" folder) is loaded, because scale is lower than the lowest defined scale (which is scale="2.0").
With this we achieve a 1:1 mapping of the image and monitor pixels: -> no scaling, high quality, fast
Zooming in to the next zoom level by button or mouse will lock at scale="2.0" because of zoomstep="1.0".
The (next) higher resolution image will be loaded. That should be 2 times the width and height (4 times bigger). In our case the original high resolution image should be downscaled (with e.g. Photoshop) to a size of 800*1200 pixels. Then again 1 image pixel fits one pixel of the monitor.
Same with scale="3.0" at the double size page (spreadpage), where we defined that.
And finally with the highest defined zoom level which is scale="4.0"; again with a best fit resolution image of the size 1600*3200.
If you had very high resolution photos (like from a 12 Mpix camera), you even could add the gallery with the original image assigned by HIRES.
Additionally to these basic "zoom tunings" there are other parameters you could play with to increase quality at not even fractions of 2, like "aa" for anti-aliasing.
If you prefer and like liquid scaling you have to find an optimum between smooth adjustment to the browser window size and quality.
BTW, the book parameter zoomdoubleclick="true" might be of interest if you do not have active (clickable) areas on your page. WIth that you can toggle between liquid scaling and full screen...
And: there is a full screen button in the nav bar that opens the book in full screen; like in gallery.
But with the same restrictions regarding entering of key strokes, though.
Advantage compared to gallery mode: There is no need for an extra definition of a HIRES path for the gallery ;-)
Just play a bit with all those options and you'll get a feeling on what might best work for you.
For those who read to the very end... some explanations to the demo book:
The first book has zoomdoubleclick enabled.
zoomdoubleclick
If you set zoomdoubleclick="false" (or delete it), the gallery for the first image works and you can see the image in full resolution when clicking on the spy glass. With zoomdoubleclick enabled you have the advantage that you can quickly and easily change between a locked zoom scale and the liquid scaling mode (i.e. the mode, where the book changes size with the browser window).
But double click or any other click will no longer work! And with that: no gallery!
The second book has zoomdoubleclick disabled and becasue of that the gallery is working
gallery and liquid scaling
Quick lesson on Liquid Scaling:
Starting in a browser or after refresh the book is in liquid scaling mode, i.e. the size varies with the browser window. Zoom the browser window and you will realize.
Then click the zoom button (or into the book to give Flash the focus and the mouse wheel works; and zoom with the mouse wheel). From that time on liquid scaling is disabled.
To reenable it, you either match the size of the book that it perfectly matches the broser window (with some experience you will realize it "snaps in"), or you refresh the browser or you make the brwoser window smaller than the lowest zoom level and then try to zoom down again. After that liquid scaling will work again.
Go to the last pages; those with the image spread across both pages. There the gallery now is enabled and you can click while the cursor shows the spy glass to open full screen with full resolution.
The last double page then shows a SWF page (look closely at the vector text!), the double page before shows a big JPG file.
That enourmous reolution only is possible in gallery mode, since this works without Flash. Flash has it's limits, maximum size of an image bust be smaller than 2880 pixel on either side!
You can switch images also in changing the language from German to Englsih and vice versa.
There are different combinations of images on the pages; i.e. different resolutions.
So you can closely wathc the effect of different zoom scales and resolutions; and what works and what not.
Then go to the last page and slowly turn the mouse wheel and zoom in and out.
You will see that at certain scale levels the laod bar pops up and a new image is loaded.
At levels 4, 9 and 12 different images are reloaded.
Do an analysis of the MZ3 files you can download to see what parameters are used; and how!
Enjoy!
MegaZine3 - tips, tricks and hints
Information, Ideas, News, Stories around MegaZine3
How to achieve best qualities with JPG files
Hans J Nücke - Tuesday, February 23, 2010
B002 Search plugin: how to use this function
Hans J Nücke - Wednesday, February 03, 2010
This overview is intended to give you a first idea. Details can be found in the Wiki.
The search function is available since version 2.0.4 and iIt only works together with SWF pages.
To make a document searchable, you need a text file that is used as an index file for the search.
All key words must be listed in a page structure. One way to create such file is with Adobe Acrobat Pro:
EN: File - Export - Text - Text (available)
DE: Datei - Export - Text - Text (verfügbar)
The exported text file must be placed in the folder megazine/plugins/scripts/index
The given name of that file must be declared in the MZ3 file (see below)
Depending on the numbering scheme of your book you might have to adjust the starting page number in setting the pageoffset.
The search plugin must be declared in the book element, together with other parameters if the default values are not correct.
Example:
<book plugins="search, .." .. .. qualitycontrol="false" searchindex="my-book" searchmethod="server" searchclear="false" ... ... >
qualitycontrol=false can improve performance of SWF pages, since unneeded resolution switches are avoided.
searchindex defines the name of the text file created with Acrobat Pro
searchmethod defines if the search is performed on the server or the client
searchclear defines if the input box will be cleared or not
Other parameter to set:
You might have to convert that text to UTF8 format (e.g. using Notepad++ for that). Use of special characters also might be critical and result in non acceptance.
The search function is available since version 2.0.4 and iIt only works together with SWF pages.
To make a document searchable, you need a text file that is used as an index file for the search.
All key words must be listed in a page structure. One way to create such file is with Adobe Acrobat Pro:
EN: File - Export - Text - Text (available)
DE: Datei - Export - Text - Text (verfügbar)
The exported text file must be placed in the folder megazine/plugins/scripts/index
The given name of that file must be declared in the MZ3 file (see below)
Depending on the numbering scheme of your book you might have to adjust the starting page number in setting the pageoffset.
The search plugin must be declared in the book element, together with other parameters if the default values are not correct.
Example:
<book plugins="search, .." .. .. qualitycontrol="false" searchindex="my-book" searchmethod="server" searchclear="false" ... ... >
qualitycontrol=false can improve performance of SWF pages, since unneeded resolution switches are avoided.
searchindex defines the name of the text file created with Acrobat Pro
searchmethod defines if the search is performed on the server or the client
searchclear defines if the input box will be cleared or not
Other parameter to set:
You might have to convert that text to UTF8 format (e.g. using Notepad++ for that). Use of special characters also might be critical and result in non acceptance.
B001 Print Plugin: short overview of how to use that feature
Hans J Nücke - Wednesday, February 03, 2010
Since version 2.0.5 a print plugin is available.
Easiest and fastest way to add this is to just include it in the list of plugins in the <book> element like <book plugins="print, .. .." .. .. >
With this definition of the print plugin, a print button is included in the navigation bar. It shows a little print icon.
Clicking that button opens an overview window with a list of thumbnails, representing the up to 12 pages before and after the actually presented 2 pages of the book. A maximum of 25 pages will be shown. The 2 pages that had been presented on the monitor are already highlighted, what indicates they are selected. Each selected page will be printed.
You can add more pages to the selecetion in clicking on the thumbnail of that page and by that highlighting it. Clicking on a selected, highlighted page again toggels the status and unselects the page.
At the bottom of the window there is an input field where page ranges of pages to be printed can be entered. You either can list single pages separated by a colon ";" or you define a page range like 3-9 which will print all pages between and including pages 3 and 9. Or you combine both methods like
1-5; 10; 14-16; 22; 25
If you leave the print selection window by clicking the upper right "X" button, all pages will be deselected and you'll be back with your book.
If you click the box with the check mark sign at the bottom right, the standard print window opens up and you can select a printer and then start to print the selected pages.
Be careful and do not select too many pages. With Flash the number of pages is restricted by the size of the available memory! If the number of selected pages is too high (the maximum can be set by a parameter in the MZ3 file), the browser might crash.
Unfortunately there is no way to get any information from Flash about the memeroy status, so we cannot avoid that situation.
Below an example of a book element declaration, showing also the use of the print parameter.
Adding print="high/resolution/path/to/hires-image.swf" to the page element, will tell the print plugin to render the defined file instead of the actual rendered page. Which results in an optimal print out.
<chapter>
<!-- without print parameter -->
<page buffer="true"><img width="826" height="1169" src="../wald/../wald/pages/page1.swf" hires="../wald/../wald/pages/page1.swf" gallery="../wald/pages"/></page>
...
...
<!-- with print parameter set -->
<page buffer="true" print="../wald/pages/page11.swf" ><img width="826" height="1169" src="../wald/pages/page11.swf" hires="../wald/pages/page11.swf" gallery="../wald/pages"/></page>
..
..
BTW: If you use liquid scaling, you in most cases can ommitt the parameter hires, which will be interpreted by the gallery plugin. Or you simply do not includ the "gallery" in the list of plugins.
With the gallery plugin active, the defined image under hires= will be presented in full screen mode if the spy glass is clicked or if you click within a page while the mouse shows a spy glass.
Easiest and fastest way to add this is to just include it in the list of plugins in the <book> element like <book plugins="print, .. .." .. .. >
With this definition of the print plugin, a print button is included in the navigation bar. It shows a little print icon.
Clicking that button opens an overview window with a list of thumbnails, representing the up to 12 pages before and after the actually presented 2 pages of the book. A maximum of 25 pages will be shown. The 2 pages that had been presented on the monitor are already highlighted, what indicates they are selected. Each selected page will be printed.
You can add more pages to the selecetion in clicking on the thumbnail of that page and by that highlighting it. Clicking on a selected, highlighted page again toggels the status and unselects the page.
At the bottom of the window there is an input field where page ranges of pages to be printed can be entered. You either can list single pages separated by a colon ";" or you define a page range like 3-9 which will print all pages between and including pages 3 and 9. Or you combine both methods like
1-5; 10; 14-16; 22; 25
If you leave the print selection window by clicking the upper right "X" button, all pages will be deselected and you'll be back with your book.
If you click the box with the check mark sign at the bottom right, the standard print window opens up and you can select a printer and then start to print the selected pages.
Be careful and do not select too many pages. With Flash the number of pages is restricted by the size of the available memory! If the number of selected pages is too high (the maximum can be set by a parameter in the MZ3 file), the browser might crash.
Unfortunately there is no way to get any information from Flash about the memeroy status, so we cannot avoid that situation.
Below an example of a book element declaration, showing also the use of the print parameter.
Adding print="high/resolution/path/to/hires-image.swf" to the page element, will tell the print plugin to render the defined file instead of the actual rendered page. Which results in an optimal print out.
<chapter>
<!-- without print parameter -->
<page buffer="true"><img width="826" height="1169" src="../wald/../wald/pages/page1.swf" hires="../wald/../wald/pages/page1.swf" gallery="../wald/pages"/></page>
...
...
<!-- with print parameter set -->
<page buffer="true" print="../wald/pages/page11.swf" ><img width="826" height="1169" src="../wald/pages/page11.swf" hires="../wald/pages/page11.swf" gallery="../wald/pages"/></page>
..
..
BTW: If you use liquid scaling, you in most cases can ommitt the parameter hires, which will be interpreted by the gallery plugin. Or you simply do not includ the "gallery" in the list of plugins.
With the gallery plugin active, the defined image under hires= will be presented in full screen mode if the spy glass is clicked or if you click within a page while the mouse shows a spy glass.
1
Recent Posts
- How to install Flash Player correctly
- New hints on Facebook: bug fix and new feature
- Videos sometimes not playing on a local PC
- New Zoom Plugin
- Some license cost calculations
- MZ3 Help window at start-up missing
- New conversion support tool for pdf files available, together with a tutorial about it's use
- How to use pdf2swf parameters to increase image quality of .swf pages
- New Options with batchpages since version v2.0.6; short introduction
- How to achieve best qualities with JPG files
Tags
PDF special demo search plugin SWF photo book License zoom Liquid Scaling overview HTML5 tip examples eBooks optimization license overview, version comparison eShop print plugin Code Snippets handbook scale v2.0.4 v2.0.5 cool stuff templates
- Code Snippets (1)
- cool stuff (2)
- demo (3)
- eBooks (2)
- eShop (1)
- examples (8)
- handbook (2)
- HTML5 (1)
- License (1)
- license overview, version comparison (1)
- Liquid Scaling (1)
- optimization (2)
- overview (3)
- PDF (3)
- photo book (1)
- print plugin (1)
- scale (1)
- search plugin (1)
- special (3)
- SWF (1)
- templates (4)
- tip (6)
- v2.0.4 (1)
- v2.0.5 (1)
- zoom (1)

