« previous next »
Pages: [1]

Author Topic: Vertically aligning (middle/top/bottom) my slideshow  (Read 2204 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)
  1. <?xml version="1.0" encoding="utf-8" ?> 
  2. <!DOCTYPE book View Source for full doctype...> 
  3. <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">
  4. <!-- 
  5. <pagebackground>
  6. 	<box anchors="0,0,pw,ph" width="242" height="300" />
  7. </pagebackground>
  8. -->
  9. <chapter slidedelay="0" edgecolor="2" top="1" position="center, middle" delay="0" fade="2000" >
  10. <spreadpage slidedelay="0" fade="2000" width="484" height="242">
  11.   <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"/> 
  12.   <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"/> 
  13.   </spreadpage>
  14. <page slidedelay="0" stiff="false" allowbmpcaching="true" buffer="false" buffer_aa="false" buffer_animate="false" spread="false" delay="0" fade="2000" anchor="startover">
  15.   <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"/> 
  16.   </page>
  17. <page slidedelay="0" stiff="false" allowbmpcaching="true" buffer="false" buffer_aa="false" buffer_animate="false" spread="false" delay="0" fade="2000">
  18.   <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"/> 
  19.   </page>
  20. <page slidedelay="0" stiff="false" allowbmpcaching="true" buffer="false" buffer_aa="false" buffer_animate="false" spread="false" delay="0" fade="2000">
  21.   <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"/> 
  22.   </page>
  23. <page slidedelay="0" stiff="false" allowbmpcaching="true" buffer="false" buffer_aa="false" buffer_animate="false" spread="false" delay="0" fade="2000">
  24.   <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"/> 
  25.   </page>
  26.   </chapter>
  27.   </book>
  28.  

And here is the table info:


Code: (xml)
  1.                 <table style=" text-align: left; width: 100%;"
  2.                   border="0" cellpadding="2" cellspacing="2">
  3.                   <tbody>
  4.                     <tr style="height: 226px;">
  5.                       <td><br>
  6.                       </td>
  7.                     </tr>
  8.                     <tr>
  9.                       <td style="text-align: center; vertical-align:
  10.                         middle; height: 300px;"><br>
  11.                         <div style="vertical-align: middle"
  12.                           id="megazine">
  13.                           <h1>MegaZine3 requires FlashPlayer 9</h1>
  14.                           <p><a href="http://get.adobe.com/flashplayer/"><img
  15. src="http://www.adobe.com/images/shared/download_buttons/get_adobe_flash_player.png"
  16.                                 alt="Get Adobe Flash Player"></a></p>
  17.                           <p>Please try the above link first. If you
  18.                             still encounter problems after installing
  19.                             the Flash Player, try this one:</p>
  20.                           <p><a href="http://get.adobe.com/shockwave/"><img
  21. src="http://www.adobe.com/images/shared/download_buttons/get_adobe_shockwave_player.png"
  22.                                 alt="Get Adobe Shockwave Player"></a></p>
  23.                           <p><a href="http://www.megazine3.de/">Powered
  24.                               by MegaZine3</a></p>
  25.                         </div>
  26.                       </td>
  27.                     </tr>
  28.                     <tr>
  29.                       <td>
  30.                         <table style=" text-align: left; width: 100%;
  31.                           height: 186px; border-top: 0pt none;
  32.                           border-bottom: 0pt none;
  33.                           -moz-border-top-colors: none;
  34.                           -moz-border-right-colors: none;
  35.                           -moz-border-bottom-colors: none;
  36.                           -moz-border-left-colors: none;
  37.                           -moz-border-image: none; background: none
  38.                           no-repeat scroll 0% 0% transparent;"
  39.                           cellpadding="0" cellspacing="0">
  40.                           <tbody>
  41.                             <tr>
  42.                               <td style=" vertical-align: top; width:
  43.                                 280px;"><br>
  44.                               </td>
  45.                               <td style=" text-align: center;
  46.                                 vertical-align: middle; width: 370px;">
  47.                                 <table style=" text-align: left; width:
  48.                                   100%; height: 100%;" border="0"
  49.                                   cellpadding="2" cellspacing="2">
  50.                                   <tbody>
  51.                                     <tr>
  52.                                       <td style=" vertical-align: top;
  53.                                         height: 20%;">
  54.                                         <ul style="font-style: italic;">
  55.                                           <li><small>No Registration
  56.                                               required to try it</small></li>
  57.                                           <li><small>No time-consuming
  58.                                               software to download </small></li>
  59.                                         </ul>
  60.                                       </td>
  61.                                     </tr>
  62.                                     <tr>
  63.                                       <td style="text-align: center;
  64.                                         vertical-align: top;"> Some info <br>
  65.                                       </td>
  66.                                     </tr>
  67.                                   </tbody>
  68.                                 </table>
  69.                               </td>
  70.                               <td style=" vertical-align: top;"><br>
  71.                               </td>
  72.                             </tr>
  73.                           </tbody>
  74.                         </table>
  75.                       </td>
  76.                     </tr>
  77.                   </tbody>
  78.                 </table>
  79.  

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 »
Logged

Hans Nücke

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

Matt Stone

  • Jr. Member
  • **
  • Posts: 27
Re: Vertically aligning (middle/top/bottom) my slideshow
« Reply #2 on: January 24, 2011, 09:02:50 am »
clipchildren="false" is already set!
Logged

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?
Logged

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...
Logged

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!
Please HELP!
Logged

Florian Nücke

  • κρύα πόδια
  • Administrator
  • Hero Member
  • *****
  • Posts: 1989
  • MegaZine3 Developer
    • MegaZine3
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).
Logged
For the Snark was a Boojum, you see.

Before you ask a question
          After you get an answer
  • please 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.
Logged

Florian Nücke

  • κρύα πόδια
  • Administrator
  • Hero Member
  • *****
  • Posts: 1989
  • MegaZine3 Developer
    • MegaZine3
Re: Vertically aligning (middle/top/bottom) my slideshow
« Reply #8 on: February 04, 2011, 04:05:04 am »
Oh, didn't see the comments, sorry. Took the liberty of adding highlighting to your post.

Then that was an incorrect assumption. Just had a closer look at the Net tab, and it seems the engine can't load the GUI definitions (megazine.asul), as you changed the extension to 'xxx', and there's no file with name 'megazine.xxx' on the server. In that case the engine falls back to using no 'layouting' at all, meaning the content just sticks to the top left :P

Please make the asul file available again. My assumption is you took it out due to the padding, that led to the book being draggable? Please just adjust the anchors accordingly, i.e. change
<scrollpane id="pagecontainer" anchors="25,75,pw-25,ph-75" ...
to
<scrollpane id="pagecontainer" anchors="0,0,pw,ph" ...
Logged
For the Snark was a Boojum, you see.

Before you ask a question
          After you get an answer
  • please 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.
Pages: [1]
« previous next »