### Author Topic: Vertically aligning (middle/top/bottom) my slideshow  (Read 4944 times)

#### Matt Stone

• Jr. Member
• Posts: 27
##### Vertically aligning (middle/top/bottom) my slideshow
« on: January 23, 2011, 02:55:10 AM »
I'm having a heck of a time with vertically aligning my flash app. I have a small app inside a table cell, but it butts up against the top of the cell, unless I make the height of the cell unreasonably large. Worse yet, the pages are in the top of their presentation area, so when the page animates during turning to having the "corner" of the page above the top, it just truncates. Here's what I have for the megazine.mz3 file:
Code: (xml)
`<?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE book View Source for full doctype...> <book clipchildren="false" startpage="3" asulextension=".xxx" position="center, middle" bgcolor="0x000000" pagewidth="242" pageheight="242" plugins="links, achors, slideshow" slidedelay="2" sliderepeat="true" slidestart="true" lang="de,en" reflection="FALSE" zoominit="1" pagesounds="false" dragspeed="0.1" pagethickness=".2" minscale="0.5" maxscale="1.2" centercovers="false" thumbloadtext="wait" thumbloadtextsize="12" autodrag="true" bggradient="true" cornerhint="true" cornerhintdelay="3000" cornerhintlocation="bottom" dontremove="vid" dragarea="top, middle, bottom" dragkeepdist="auto" dragrange="auto" edgeclickable="true" elementsfadein="true" errorlevel="NONE" fadein="false" flashmenuitems="false" foldfx="0.5" guipath="gui/" handcursor="false" ignoresyslang="false" instantjumpcount="5" langpath="langs/" langwarn="false" loadparallel="2" lowqualitycount="2" ltr="true" maxloaded="22" maxthickness="30" noasul="false" nolangs="false" pageoffset="0" pagepreview="true" pluginpath="plugins/" pluginsamesecdomain="false" priorities="vid(20);snd(15);area(5);nav(5);txt(5)" qualitycontrol="true" reflectionalpha="0.25" reflectionfade="false" reflectionoffset="0" reflectionskip="false" rotate="0" shadows="0.5" soundcount="3,2,5,1,1" spinecurvature="-0.5" thumbauto="false" thumbmaxmem="65536" thumbscale="0.25" thumbstatic="false" waitfornoturning="true" wheelzoom="true" zoomdoubleclick="false" zoomliquidscaling="true" zoomliquidsnap="false" zoommaxscale="2" zoomminscale=".25" zoomsnap="0.25,0.5,1,2,4,8" zoomsteps="5" zoomwheel="true" bookmarksalongedge="true" consolekey="#" consolehtml="false" galleryalign="center middle" galleryfade="false" galleryfs="true" gallerymute="false" galleryzoominit="0" galleryzoommax="1" galleryzoomsteps="5" gaaccount="UA-000-000" helpmodal="true" helpopen="once" openhelp="once" enablejs="true" jsenabled="true" linksoverlay="true" overlaylinks="true" colorizefullchapter="false" navbarcolorizefullchapter="false" navbarpagenumbersinbox="true" optionsmodal="true" overlayfade="250" printmaxpages="50" printselectcurrent="true" printstretch="true" printthumbsperpage="25" searchclear="true" searchexcerptlength="200" searchfocusclear="true" searchhighlight="true" searchhighlightcolor="0xFFEF00" searchlimit="20" searchmethod="client" searchprovider="plugins/scripts/search.php" searchquery="?q=\$1&cat=\$2&excerptlen=\$3" searchresults="matches" sidebardelay="1000" sidebarslideduration="0.125" sidebarclosedelay="10000" swfaddressupdate="true"><!-- <pagebackground>	<box anchors="0,0,pw,ph" width="242" height="300" /></pagebackground>--><chapter slidedelay="0" edgecolor="2" top="1" position="center, middle" delay="0" fade="2000" ><spreadpage slidedelay="0" fade="2000" width="484" height="242">  <img src="Images\page01.png" priority="10" top="0" aa="false" allowbmpcaching="true" cache="true" height="auto" keepar="false" rasterize="false" sameappdomain="false" samesecdomain="false" width="auto" target="_blank" position="left middle"/>   <img src="Images\page02.png" priority="11" top="0" aa="false" allowbmpcaching="true" cache="true" height="auto" keepar="false" rasterize="false" sameappdomain="false" samesecdomain="false" width="auto" target="_blank" position="right middle"/>   </spreadpage><page slidedelay="0" stiff="false" allowbmpcaching="true" buffer="false" buffer_aa="false" buffer_animate="false" spread="false" delay="0" fade="2000" anchor="startover">  <img src="Images\page03.png" priority="3" top="0" aa="false" allowbmpcaching="true" cache="true" height="auto" keepar="false" rasterize="false" sameappdomain="false" samesecdomain="false" width="auto" target="_blank" position="left middle"/>   </page><page slidedelay="0" stiff="false" allowbmpcaching="true" buffer="false" buffer_aa="false" buffer_animate="false" spread="false" delay="0" fade="2000">  <img src="Images\page04.png" priority="4" top="0" aa="false" allowbmpcaching="true" cache="true" height="auto" keepar="false" rasterize="false" sameappdomain="false" samesecdomain="false" width="auto" target="_blank" position="right middle"/>   </page><page slidedelay="0" stiff="false" allowbmpcaching="true" buffer="false" buffer_aa="false" buffer_animate="false" spread="false" delay="0" fade="2000">  <img src="Images\page05.png" priority="5" top="0" aa="false" allowbmpcaching="true" cache="true" height="auto" keepar="false" rasterize="false" sameappdomain="false" samesecdomain="false" width="auto" target="_blank" position="left middle"/>   </page><page slidedelay="0" stiff="false" allowbmpcaching="true" buffer="false" buffer_aa="false" buffer_animate="false" spread="false" delay="0" fade="2000">  <img src="Images\page06.png" priority="6" top="0" aa="false" allowbmpcaching="true" cache="true" height="auto" keepar="false" rasterize="false" sameappdomain="false" samesecdomain="false" width="auto" target="_blank" position="right middle" achor="last" startpage="3"/>   </page>  </chapter>  </book> `

And here is the table info:

Code: (xml)
`                <table style=" text-align: left; width: 100%;"                  border="0" cellpadding="2" cellspacing="2">                  <tbody>                    <tr style="height: 226px;">                      <td><br>                      </td>                    </tr>                    <tr>                      <td style="text-align: center; vertical-align:                        middle; height: 300px;"><br>                        <div style="vertical-align: middle"                          id="megazine">                          <h1>MegaZine3 requires FlashPlayer 9</h1>                          <p><a href="http://get.adobe.com/flashplayer/"><imgsrc="http://www.adobe.com/images/shared/download_buttons/get_adobe_flash_player.png"                                alt="Get Adobe Flash Player"></a></p>                          <p>Please try the above link first. If you                            still encounter problems after installing                            the Flash Player, try this one:</p>                          <p><a href="http://get.adobe.com/shockwave/"><imgsrc="http://www.adobe.com/images/shared/download_buttons/get_adobe_shockwave_player.png"                                alt="Get Adobe Shockwave Player"></a></p>                          <p><a href="http://www.megazine3.de/">Powered                              by MegaZine3</a></p>                        </div>                      </td>                    </tr>                    <tr>                      <td>                        <table style=" text-align: left; width: 100%;                          height: 186px; border-top: 0pt none;                          border-bottom: 0pt none;                          -moz-border-top-colors: none;                          -moz-border-right-colors: none;                          -moz-border-bottom-colors: none;                          -moz-border-left-colors: none;                          -moz-border-image: none; background: none                          no-repeat scroll 0% 0% transparent;"                          cellpadding="0" cellspacing="0">                          <tbody>                            <tr>                              <td style=" vertical-align: top; width:                                280px;"><br>                              </td>                              <td style=" text-align: center;                                vertical-align: middle; width: 370px;">                                <table style=" text-align: left; width:                                  100%; height: 100%;" border="0"                                  cellpadding="2" cellspacing="2">                                  <tbody>                                    <tr>                                      <td style=" vertical-align: top;                                        height: 20%;">                                        <ul style="font-style: italic;">                                          <li><small>No Registration                                              required to try it</small></li>                                          <li><small>No time-consuming                                              software to download </small></li>                                        </ul>                                      </td>                                    </tr>                                    <tr>                                      <td style="text-align: center;                                        vertical-align: top;"> Some info <br>                                      </td>                                    </tr>                                  </tbody>                                </table>                              </td>                              <td style=" vertical-align: top;"><br>                              </td>                            </tr>                          </tbody>                        </table>                      </td>                    </tr>                  </tbody>                </table> `

What I wanted to do is to center the pages vertically so that the animated pages are viewable when they are manually moved above and below the page boundaries. You can see it in action at http://tinyurl.com/4sat4qb> .

You may notice I also have the problem of the pages displaying in the right order...that's a separate topic.
« Last Edit: February 04, 2011, 03:59:44 AM by Florian Nücke »

#### Hans Nücke

• Hero Member
• Posts: 960
• MegaZine3 Sales Manager
##### Re: Vertically aligning (middle/top/bottom) my slideshow
« Reply #1 on: January 24, 2011, 08:49:50 AM »

#### Matt Stone

• Jr. Member
• Posts: 27
##### Re: Vertically aligning (middle/top/bottom) my slideshow
« Reply #2 on: January 24, 2011, 09:02:50 AM »

#### Matt Stone

• Jr. Member
• Posts: 27
##### Re: Vertically aligning (middle/top/bottom) my slideshow
« Reply #3 on: January 27, 2011, 11:51:29 PM »
Doesn't anyone know how to do this?

#### Matt Stone

• Jr. Member
• Posts: 27
##### Re: Vertically aligning (middle/top/bottom) my slideshow
« Reply #4 on: January 29, 2011, 07:02:55 AM »
That does "center" the book, as it cuts off anything outside the defined "window" that's 242 px high. Thing is, the animated page, while flipping, crosses that 242 px window, both above and below. This is what I wanted to account for. If I had a height of at least 300 px and centered the book vertically, then the animated page (while turning the page) wouldn't get cut off. But that's the rub...I can't figure out how to center the page vertically.

I know this shouldn't be so complicated...I just can't find out how...

#### Matt Stone

• Jr. Member
• Posts: 27
##### Re: Vertically aligning (middle/top/bottom) my slideshow
« Reply #5 on: February 03, 2011, 05:42:08 PM »
Could somebody answer this for me? I'm stumped, cannot find a way to vertically center my slideshow!

#### Florian Nücke

• κρύα πόδια
• Hero Member
• Posts: 1979
• MegaZine3 Developer
##### Re: Vertically aligning (middle/top/bottom) my slideshow
« Reply #6 on: February 04, 2011, 03:50:22 AM »
OK, there's a
in your td, offsetting the book slightly to the bottom, you might want to get right of that.
Then, you pagebackground is higher than your pages, leading to the pages being offset to the top (causing the grey area to appear [exclusively] below the book). If you do need it, you could try giving it a negative y position (being (pagebackground.height - pageheight) / 2).
And finally, to avoid any *possible* clipping at all while turning, you'd have to make the box quite a bit higher. As high as pageheight + 2 * (pagediagonale - pageheight) in fact. But unless someone provokes it, something less will be quite sufficient (for the slideshow at least).
For the Snark was a Boojum, you see.

 Before you ask a question After you get an answerplease document your problem with the answer in the Project Wiki. (e.g. in the FAQs)help others out if you can, by answering their questions on the forum.

#### Matt Stone

• Jr. Member
• Posts: 27
##### Re: Vertically aligning (middle/top/bottom) my slideshow
« Reply #7 on: February 04, 2011, 03:57:34 AM »
Where do I give it a negative y position...and/or make the box higher? I'm lost.

#### Florian Nücke

• κρύα πόδια
• Hero Member
• Posts: 1979
• MegaZine3 Developer
##### Re: Vertically aligning (middle/top/bottom) my slideshow
« Reply #8 on: February 04, 2011, 04:05:04 AM »