?
Solved

How to make the flipbook/flexbook scale with the browser size?

Posted on 2008-02-07
11
Medium Priority
?
1,794 Views
Last Modified: 2008-03-06
Hey experts!

I'm currently working with the Flexbook component (with the Landscape Zoomer, all credits goes to Ely Greenfield), and I got a problem with the general layout: when I shrink the browser' size (or change the resolution of the screen), the book stays with it's original size and doesn't fit the browser anymore.

I thought I could fix it but the flexbook control doesn't let me put a % value to it's height/width.

I don't know if only a property that I haven't set correctly or if my whole layout has to be changed, but I've try for hours to fix it and now out of ideas!

I would really appreciate if someome could help me out. I've posted the code of my customized Flexbook.

Thanks a lot and have a nice day.
Frank



<!-- This is the lanscape used to zoom the pictures. --> 
	<containers:Landscape width="100%" top="100" bottom="50" paddingLeft="30" paddingTop="30" paddingBottom="30" paddingRight="30" id="landscape" 
		zoomLimit="none"
		clipContent="false"
		cachePolicy="off"
        horizontalCenter="0"
	    verticalCenter="0" right="0"
	    >	
	    
		<!-- This box contains the book and is also used to zoom the content of the pages when the mouse scrollers is used -->
		<HBox width="100%" horizontalAlign="center" verticalAlign="top" id="bookContainer">
			<!-- The Book itself; I put a height of 500 because all my pictures are this size.
                 Anyway, when I try to put 100%, the system give me an error. 718 is the width of the whole book.
                 I know this is probably the source of the problem, but I couldn't find an alternative solution...
			-->
			<controls:FlexBook id="book" y="47" left="40" right="40" top="40" height="500" width="718"
					horizontalCenter="0"
					animateCurrentPageIndex="true"
					showCornerTease="true"
					edgeAndCornerSize="30"
					itemSize="halfPage"
					hardbackCovers="false"
					hardbackPages="false"
					>
				
				<!-- The pages inside the book -->
				<controls:itemRenderer>
					<Component>
						<VBox>								
							<controls:Zoomer>
								<controls:SuperImage horizontalCenter="0" toolTip="{data.slice(data.indexOf(',')+1)}" data="{data.slice(data.indexOf(',')+1)}" />
							</controls:Zoomer>
						</VBox>
					</Component>
				</controls:itemRenderer>
	
				<controls:cover>
					<Image source="images/001_01S.jpg" click="this.focusOn(event.currentTarget)" />
				</controls:cover>
 
				<Image source="images/002_01S.jpg" click="this.focusOn(event.currentTarget)" />
				<Image source="images/003_01S.jpg" click="this.focusOn(event.currentTarget)" />			
				</controls:FlexBook>
			</HBox>
	</containers:Landscape>

Open in new window

0
Comment
Question by:The_Kingpin08
  • 7
  • 2
  • 2
11 Comments
 
LVL 17

Expert Comment

by:julianopolito
ID: 20848175
it won't shrink because the way it initializes. For flexbook to work it takes the width and height in pixels so it can create some internals. If you use a bind like this:
<FlexBook width="{application.width*0.7}"
for example (this would be 70%) it will work only for the loading time. So if you shrink the browser and reload it will work, but not while reducing the browser. You could try using the resize event of the application. I'll make some tests and send you.
0
 
LVL 19

Expert Comment

by:Gary Benade
ID: 20848228
I don't have landscape so I couldn't test this for you, but it's how I've done it in the past and it works, let me know
<!-- This is the lanscape used to zoom the pictures. --> 
	<containers:Landscape width="100%" top="100" bottom="50" paddingLeft="30" paddingTop="30" paddingBottom="30" paddingRight="30" id="landscape" 
		zoomLimit="none"
		clipContent="false"
		cachePolicy="off"
        horizontalCenter="0"
	    verticalCenter="0" right="0"
	    >	
	    
		<!-- This box contains the book and is also used to zoom the content of the pages when the mouse scrollers is used -->
		<Canvas y="47" left="40" right="40" top="40" id="bookContainer">
			<!-- The Book itself; I put a height of 500 because all my pictures are this size.
                 Anyway, when I try to put 100%, the system give me an error. 718 is the width of the whole book.
                 I know this is probably the source of the problem, but I couldn't find an alternative solution...
			-->
			<controls:FlexBook id="book" width="100%" height="100%" 
					animateCurrentPageIndex="true"
					showCornerTease="true"
					edgeAndCornerSize="30"
					itemSize="halfPage"
					hardbackCovers="false"
					hardbackPages="false"
					verticalCenter="0" 
					horizontalCenter="0"
					>
				
				<!-- The pages inside the book -->
				<controls:itemRenderer>
					<Component>
						<VBox>								
							<controls:Zoomer>
								<controls:SuperImage horizontalCenter="0" toolTip="{data.slice(data.indexOf(',')+1)}" data="{data.slice(data.indexOf(',')+1)}" />
							</controls:Zoomer>
						</VBox>
					</Component>
				</controls:itemRenderer>
	
				<controls:cover>
					<Image source="images/001_01S.jpg" click="this.focusOn(event.currentTarget)" />
				</controls:cover>
 
				<Image source="images/002_01S.jpg" click="this.focusOn(event.currentTarget)" />
				<Image source="images/003_01S.jpg" click="this.focusOn(event.currentTarget)" />			
				</controls:FlexBook>
			</Canvas>
	</containers:Landscape>

Open in new window

0
 
LVL 17

Expert Comment

by:julianopolito
ID: 20848235
you can use the method setActualSize in the resize event of the application. To test put 3 buttons somewhere with the code below, so you can see what happens:

                     <Button label="size" click="book.setActualSize(200,300)" />
      <Button label="size" click="book.setActualSize(500,300)" />
      <Button label="size" click="book.setActualSize(700,400)" />

Now instead of setting a literal size, just put some expression in it like:
                     <Button label="size" click="book.setActualSize(application.width*0.5,application.height*0.5)" />

This would set the size to 50% ofthe application size. So you can make a function for the resize handler and use setActualSize to change size based on new size.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 19

Expert Comment

by:Gary Benade
ID: 20848240
line 11 should be
<Canvas left="40" right="40" top="40" bottom="40" id="bookContainer">
0
 
LVL 17

Expert Comment

by:julianopolito
ID: 20848260
Also I tested here, and my solution works for the flexbook but not for the landscape. Í need to make some tests to know hwo to make it work for the landscape. For the flex book, just put the flexbook component with no landscape , name it "book" and put the following in the resize for application tag:

resize="if(book != null)book.setActualSize(application.width*0.5,application.height*0.5)"

This will resize the flexbook component 50% the size of the browser window.
0
 
LVL 17

Expert Comment

by:julianopolito
ID: 20849540
You can do that to the landscape. But you mus adjust the constrains (top, bottom) cause the will cause the flexbook to remain below the visible area (for example you set the top="300" ) .
Here I set the landscape to percentage size, and then resize flexbook accordingly

      





<containers:Landscape id="landscape"
	width="80%" 
	height="80%" 
	paddingLeft="30" paddingTop="30" paddingBottom="30" 
	paddingRight="30" 
	zoomLimit="none"
	clipContent="false"
	cachePolicy="off"
         horizontalCenter="0"
	verticalCenter="0" right="0"
	resize="if(book != null) book.setActualSize(landscape.width,landscape.height)">	

Open in new window

0
 
LVL 17

Expert Comment

by:julianopolito
ID: 20849553
also you should adjust the HBox inside the landscape because when you resize the stage , it will create scrollbars. The HBox could be like this:
<mx:HBox width="100%" height="100%"
      verticalScrollPolicy="off" horizontalScrollPolicy="off"
      horizontalAlign="center" verticalAlign="bottom" >      

But resizing the stage too much will cut part of the flexbook as well
0
 

Author Comment

by:The_Kingpin08
ID: 20850849
If I get rid of the landscape container, would I be able to resize the whole book correctly?

I'm asking because the landscape has causes me more trouble than anything so far. I thought I needed to keep it because my function focusOn for the zoom uses this container.

Anyway, to be honest with you, I wanted to create something similar to zinio's book (http://www.zinio.com/express2?issn=1054-4836). If you check their preview, you can see that the book doesn't overlay the top&bottom bar, and that it resize itself when the browser shrinks.

Would something like this be possible in my case? If not, I'll try to play with what you guys gave me!

hobbit72, when I put some % value in the Flexbook, I get an error.

ntError: Error #2015: Invalid BitmapData.
at flash.display::BitmapData$iinit()
at qs.controls::FlexBook/qs.controls:FlexBook::updateDisplayList()[C:\...\Flex Builder 2\Book\src\qs\controls\FlexBook.as:977]


Thanks for the help,
Frank
public  function focusOn(target:*):void{
			/* When the user clicks on a page, if it already has the focus we zoom out to the original size.
			   If the page gets the focus, we zoom in the image with a scale of 2.8
			*/ 		
				if(landscape.selection.length == 1 && landscape.selection[0] == target)
				{ landscape.selection = [];landscape.height=100; }
				else
				{ landscape.selection = [target];landscape.height=10; }					
			}

Open in new window

0
 
LVL 17

Expert Comment

by:julianopolito
ID: 20851311
remove landscape, and in the application tag put

resize="if(book != null)book.setActualSize(application.width*0.5,application.height*0.5)"

Change 0.5 to either percentage you want.
0
 

Author Comment

by:The_Kingpin08
ID: 20862346
I try removing the landscape, but the zoom doesn't work anymore as I thought. I try replacing it with another container with the same name, but it still doesn't work.

In your opinion, is there a way to do this without removing the landscape?à

Thanks,
Frank
0
 
LVL 17

Accepted Solution

by:
julianopolito earned 2000 total points
ID: 20862711
put landscape in percentage size, and put the resize not in application, but in landscape, so flexbook will be relatively sized to landscape. I could not find a way yet to make the scroll appear in zoom mode
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

588 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question