Adding buttons to a flipbook

[adobegirl]

Hello,

I am building a Flash flipbook:
[url]http://www.northbay.com/Advertising/GiftGuide2008/index.html[/url]

This is one .swf file that I created from an extension I downloaded (and I
have also emailed their support with the same question I am about to ask here).

The pages are .jpgs that are imported into the .fla file via an external XML
file in the Parameters.

What I need to do on page 8 is make the button "clickable". The way I have
attempted to do this is by making page 8 a .swf file while the rest of the
pages are still .jpgs and the XML file reflects that. On the page .swf file I
made a button symbol and assigned the attached Actionscript (using Actionscript
2).

It hasn't worked, so I'm looking for suggestions. I probably need to add some
additional Actionscript to the main .swf file that has the XML file in the
Parameters, but am not sure what will do the trick. Any help would be greatly
appreciated.

Thank you.

on(release) {
getURL("http://www.google.com", "_blank"):
}

on(rollOver) {
book.flipOnClickProp = false;

}

on(rollOut) {
book.flipOnClickProp = true;

}

[Gipoh]

Hi there,
It isn't easy to say what you have to do because this little part of the code
looks ok to me. However I think the pageflip script has a layer that disables
the clicks in the "images". So what you can do is maybe put a layer higher then
pages and in this layer you put a button with the actionscript:

on(release) {
getURL("http://www.google.com", "_blank"):
}

You will have to add some code that it only works when the page is on number
8. For example:

OnClipEvent(enterFrame){
if(page==8){
btn._visible = true;
}
}

Greetings,
Guido Braak

[adobegirl]

Thanks, Guido. I will give that a try and keep you posted.

[adobegirl]

Guido,

I followed your suggestion and in the main file (not the individual page)
added a button layer as the top layer and inserted the code as written in your
post. I made the transparent button cover the right side page.

Now when I go to the flipping book, the right pages appear to have
click-through links when you mouse over them. Instead of an arrow you see a
hand to indicate that you can click. However, when you do click on Page 8,
nothing happens. Here is the link again:
[url]http://www.northbay.com/Advertising/GiftGuide2008/index.html[/url]

I am going to show the actions that are in the first frame of the top layer
before adding the transparent button and your suggested code at the top to give
a better idea of what I am working with.

Any additional suggestions would be appreciated.

var zoomRatios = [2,4,8,16];
var zoomed = false;
var zoomCount = 0;

navbar_mc.go_btn.onPress = gotoPage;
navbar_mc.next_btn.onPress = nextPage;
navbar_mc.prev_btn.onPress = prevPage;

zoom_mc.zoom_in_btn.onPress = openZoom;
zoom_mc.zoom_out_btn.onPress = closeZoom;
zoom_mc.zoom_out_btn._visible = false;

service_mc.help_btn.onPress = openInfoWindow;
service_mc.print_left_btn.onPress = printLeftPage;
service_mc.print_right_btn.onPress = printRightPage;



myBook.onStartFlip = function(i) {
if (i == undefined) {
return;
}
myBook.flipOnClickProp = true;
showHint();
};
myBook.onFlipBack = function() {
myBook.flipOnClickProp = false;
hideHint();
};
myBook.onClick = function(i, page, isCorner) {
hideHint();
};
myBook.onPutPage = function() {
myBook.flipOnClickProp = false;
var res = "";
if (this.leftPageNumber && this.rightPageNumber) {
res = this.leftPageNumber+" / "+this.rightPageNumber;
} else if (this.rightPageNumber == 0) {
res = this.rightPageNumber;
} else if (this.leftPageNumber && !this.rightPageNumber) {
res = this.leftPageNumber;
}
navbar_mc.current_page_txt.text = res;
};



function gotoPage() {
if( zoomed )return;
var destPageNumber = Number(navbar_mc.page_number_txt.text);
if (!isNaN(destPageNumber)) {
myBook.flipGotoPage(destPageNumber);
}
}
function nextPage() {
if( zoomed )return;
myBook.flipForward();
}
function prevPage() {
if( zoomed )return;
myBook.flipBack();
}
function startZoomingMode() {
zoomed = !zoomed;
if (zoomed) {
Mouse.hide();
myBook.enabledProp = false;
_root.attachMovie("ZoomPointer", "zoom_pointer_mc", 100);
zoom_pointer_mc._x = _xmouse;
zoom_pointer_mc._y = _ymouse;
zoom_pointer_mc.onMouseMove = function() {
this._x = _xmouse;
this._y = _ymouse;
};
} else {
Mouse.show();
myBook.enabledProp = true;
zoom_pointer_mc.removeMovieClip();
}
}
function openInfoWindow() {
myBook.enabledProp = false;
_root.attachMovie("InfoWindow", "info_mc", 1000);
info_mc._x = Stage.width/2-info_mc._width/2;
info_mc._y = Stage.height/2-info_mc._height/2;
info_mc.close_btn.onRelease = closeInfoWindow;
}
function closeInfoWindow() {
myBook.enabledProp = true;
info_mc.removeMovieClip();
}

function printLeftPage() {
print_box.printIt(myBook.leftPageNumber, myBook);
}
function printRightPage() {
print_box.printIt(myBook.rightPageNumber, myBook);
}

function showHint() {
_root.attachMovie("Hint", "hint_mc", 200);
hint_mc._x = _xmouse;
hint_mc._y = _ymouse;
if( (hint_mc._y + hint_mc._height) > Stage.height )hint_mc._y -= ((hint_mc._y
+ hint_mc._height)-Stage.height + 10);
if( (hint_mc._x + hint_mc._width) > Stage.width )hint_mc._x -= ((hint_mc._x +
hint_mc._width)-Stage.width + 10);

hint_mc.onMouseMove = moveHint;
Mouse.hide();
}
function moveHint(){
this._x = _xmouse;
this._y = _ymouse;

if( (this._y + this._height) > Stage.height )this._y -= ((this._y +
this._height)-Stage.height + 10);
if( (this._x + this._width) > Stage.width )this._x -= ((this._x +
this._width)-Stage.width + 10);
};

function hideHint() {
hint_mc.onMouseMove = undefined;
hint_mc.removeMovieClip();
Mouse.show();
}

function openZoom(){
myBook.enabledProp = false;
var ratio = zoomRatios[zoomCount++];
if( zoomRatios[zoomCount+1] == undefined )
zoom_mc.zoom_in_btn._visible = false;
else
zoom_mc.zoom_in_btn._visible = true;

if(!zoomed) {
ow = myBook._bookWidth;
oh = myBook._bookHeight;
drawZoomMask();
cx = myBook._x;
cy = myBook._y;
}

myBook.setSize(ow * ratio, oh * ratio);

var left = cx-myBook._bookWidth/2 + ow/2;
var top = cy-myBook._bookHeight/2 + oh/2;
var right = cx+myBook._bookWidth/2 - ow/2;
var bottom = cy+myBook._bookHeight/2 - oh/2;

mask_mc.onMouseDown = function(){myBook.startDrag(false, left, top,
right,bottom);};
mask_mc.onMouseUp = function(){myBook.stopDrag();};
mask_mc.onRollOver = function(){};

zoomed = true;
zoom_mc.zoom_out_btn._visible = true;
}

function closeZoom(){
if(!zoomed)return;
if(zoomCount > 1){
zoomCount-=2;
openZoom();
return;
}

myBook.enabledProp = true;
myBook.setSize(ow, oh);
myBook._x = cx;
myBook._y = cy;
myBook.setMask(null);
mask_mc.removeMovieClip();
myBook.stopDrag();
mask_mc.onMouseDown = undefined;
mask_mc.onMouseUp = undefined;
zoomed = false;
zoomCount = 0;
zoom_mc.zoom_out_btn._visible = false;
zoom_mc.zoom_in_btn._visible = true;
}


function drawZoomMask(){
var cx = myBook._x;
var cy = myBook._y;

var x0 = cx - ow/2;
var y0 = cy - oh/2;
var x1 = cx + ow/2;
var y1 = cy + oh/2;

_root.createEmptyMovieClip( "mask_mc", 2000 );
mask_mc.lineStyle();
mask_mc.beginFill( 0, 100 );
mask_mc.moveTo( x0, y0 );
mask_mc.lineTo( x1, y0 );
mask_mc.lineTo( x1, y1 );
mask_mc.lineTo( x0, y1 );
mask_mc.lineTo( x0, y0 );
mask_mc.endFill();

myBook.setMask( mask_mc);
}

[Gipoh]

Hi,
Ik looked at the code but I don't see any code for the button. But I will help
you a little bit on your way.

You created the button and you have put at instancename for example "url_btn".
After that we will start to put the code.

_root.url_btn._visible = false; // like this the button will not be available
to other pages
_root.urlpages = new Array("", "", "http://www.google.com","", "","", "","",
""); // with this you can say on which page you want to have a button and where
to link to.

I dont know exactly how the code works (because the code above isnt all the
code) but I think you can do this:

_root.createEmptyMovieClip( "checkpage", 2000 );
_root.checkpage.onEnterFrame = function () {
if(_root.urlpages[mybook.rightPageNumber] != ""){
_root.url_btn._visible = true;
_root.url_btn.onRelease = function(getURL("http://www.google.com",
"_blank"){};
}
}

[adobegirl]

I'm afraid I'm confused by your last post. Let me be more specific about what
is going on. I created this project from an extension that someone recommended
on these forums. I did not write all that code. I downloaded the Flash
Component Demo from [url]http://www.page-flip.com/demos.htm[/url] . (the second product in
the list of three). I have gone over the demo and the .pdf documentation that
came with the download. They each give suggested snippets of code to achieve
various things but are not specific about whether the code is placed in the
main file or the individual page file, or whether it should be assigned to a
Movie Clip in a particular instance. It is very vague.

I tried making the buttons Movie Clips and assigning the getURL code to the
movieclips on the individual page file but that did not work. I have tried a
number of things. I have emailed Support twice and have gotten no response.
This is worrisome as I need to have this ready by Nov. 1. Please help....

When you look at page 7 of the Flash Component Demo, it gives button code but
it is unclear whether that button code goes in the file of the individual page
or the code that is in the first frame on the actions layer in the main file.
The main file uses the Parameters and the pages are specified in an external
XML file within the Parameters. I am attaching the XML code to give you more
insight. I also tried assigning hyperlinks to the pages but not only did that
not work, it is not a suitable solution as the pages will likely have more than
one button.

Let's just say that I will have two buttons on each page.

The button instances can be named btn_page1B1 (meaning Page 1, Button 1)


btn_page1B2

(Page 1, Button 2)

btn_page2B1

(Page 2, Button 1)

btn_page2B2

(Page 2, Button 2)

and so forth.

And let's say that for now Button 1 will link to [url]http://www.google.com[/url] and
Button 2 will link to [url]http://www.yahoo.com[/url] (though in actuality each button
will link to a different URL). The Page 1 links will only be on Page 1, Page 2
links only on Page 2 and so forth.

How can I make this happen? Thanks in advance for any suggestion you may have.


<FlippingBook>
<width>600</width>
<height>400</height>

<scaleContent>true</scaleContent>
<firstPage>0</firstPage>
<alwaysOpened> false </alwaysOpened>
<autoFlip> 50 </autoFlip>
<flipOnClick> true </flipOnClick>

<staticShadowsDepth> 1 </staticShadowsDepth>
<dynamicShadowsDepth> 1 </dynamicShadowsDepth>

<moveSpeed> 2 </moveSpeed>
<closeSpeed> 3 </closeSpeed>
<gotoSpeed> 3 </gotoSpeed>

<flipSound></flipSound>
<pageBack> 0x791a18 </pageBack>

<loadOnDemand> true </loadOnDemand>
<cachePages> true </cachePages>

<cacheSize> 4 </cacheSize>
<preloaderType> Progress Bar </preloaderType>
<userPreloaderId></userPreloaderId>

<pages>
<page>pages/page001.swf?printURL=pages/page001_big.swf</page>
<page>pages/page002.swf?printURL=pages/page002_big.swf</page>
<page>pages/page003.swf?printURL=pages/page003_big.swf</page>
<page>pages/page004.swf?printURL=pages/page004_big.swf</page>
<page>pages/page005.swf?printURL=pages/page005_big.swf</page>
<page>pages/page006.swf?printURL=pages/page006_big.swf</page>
<page>pages/page007.swf?printURL=pages/page007_big.swf</page>
<page>pages/page008.swf?printURL=pages/page008_big.swf</page>
<page>pages/page009.swf?printURL=pages/page009_big.swf</page>
</pages>
</FlippingBook>

[Gipoh]

Hi there,
Don't worry about it because it is done quite simply. I looked and found the
following page:
[url]http://www.page-flip.com/new-demos/01-simple-catalogue/pages/08.swf[/url]
This page has the buttons you were talking about. So its in the swf. You dont
have to change anything in the main swf only in the swfs that you load into the
pageflip engine. This is in the code of the page... I hope it helps you.



function onInit()
{
autoFlip = book.autoFlipProp;
if (!visible)
{
disableButtons();
} // end if
} // End of the function
function onOpen()
{
enableButtons();
} // End of the function
function onClose()
{
disableButtons();
} // End of the function
function turnFlipOff()
{
book.autoFlipProp = 0;
book.flipOnClickProp = false;
} // End of the function
function turnFlipOn()
{
book.autoFlipProp = autoFlip;
book.flipOnClickProp = true;
} // End of the function
function enableButtons()
{
products_btn.enabled = true;
popup_btn.enabled = true;
} // End of the function
function disableButtons()
{
products_btn.enabled = false;
popup_btn.enabled = false;
} // End of the function
click_sound = new Sound(this);
click_sound.attachSound("clickSound");
rollOver_sound = new Sound(this);
rollOver_sound.attachSound("rollOverSound");
products_btn.onRelease = function ()
{
getURL("http://www.page-flip.com/order.htm", "_blank");
click_sound.start(0, 1);
};
popup_btn.onRelease = function ()
{
getURL("javascript:MM_openBrWindow(\'pages/page8.htm\',\'\', 300, 375)",
"_self");
click_sound.start(0, 1);
};
products_btn.onRollOver = function ()
{
turnFlipOff();
hl2_mc.gotoAndPlay(1);
rollOver_sound.start(0, 1);
};
products_btn.onRollOut = function ()
{
hl2_mc.gotoAndPlay(11);
turnFlipOn();
};
popup_btn.onRollOver = function ()
{
turnFlipOff();
hl1_mc.gotoAndPlay(1);
rollOver_sound.start(0, 1);
};
popup_btn.onRollOut = function ()
{
hl1_mc.gotoAndPlay(11);
turnFlipOn();
};

[adobegirl]

Thank you. I tried to customize this code for my purposes and pages 7 and 8 are
now scrunched. Take a look:

[url]http://www.northbay.com/Advertising/GiftGuide2008/index.html[/url]

Also the buttons don't work. The button names are PetaOutlet1_btn and
PetOutlet2_btn. For now, I have one button going to Yahoo and one going to
Google for test purposes. Unfortunately, the buttons still aren't working. I'm
attaching my customized version of the individual page code. What am I doing
wrong?

Now for a really dumb question: Is this Actionscript 2 or 3? Because my
document is set up for Actionscript 2. Also, how do you view the Actionscript
of .swf files online?



function onInit()
{
autoFlip = book.autoFlipProp;
if (!visible)
{
disableButtons();
} // end if
} // End of the function
function onOpen()
{
enableButtons();
} // End of the function
function onClose()
{
disableButtons();
} // End of the function
function turnFlipOff()
{
book.autoFlipProp = 0;
book.flipOnClickProp = false;
} // End of the function
function turnFlipOn()
{
book.autoFlipProp = autoFlip;
book.flipOnClickProp = true;
} // End of the function
function enableButtons()
{
products_btn.enabled = true;
popup_btn.enabled = true;
} // End of the function
function disableButtons()
{
products_btn.enabled = false;
popup_btn.enabled = false;
} // End of the function
click_sound = new Sound(this);
click_sound.attachSound("clickSound");
rollOver_sound = new Sound(this);
rollOver_sound.attachSound("rollOverSound");
PetaOutlet1_btn.onRelease = function ()
{
getURL("http://www.google.com", "_blank");
click_sound.start(0, 1);
};
PetaOutlet2_btn.onRelease = function ()
{
getURL("http://www.yahoo.com", "_blank");
click_sound.start(0, 1);
};
PetaOutlet1_btn.onRollOver = function ()
{
turnFlipOff();
hl2_mc.gotoAndPlay(1);
rollOver_sound.start(0, 1);
};
PetaOutlet1_btn.onRollOut = function ()
{
hl2_mc.gotoAndPlay(11);
turnFlipOn();
};
PetaOutlet2_btn.onRollOver = function ()
{
turnFlipOff();
hl1_mc.gotoAndPlay(1);
rollOver_sound.start(0, 1);
};
popup_btn.onRollOut = function ()
{
hl1_mc.gotoAndPlay(11);
turnFlipOn();
};

[Gipoh]

Hi,
You forgot to change the following code in the actionscript. It is
Actionscript 3 I think.

function enableButtons()
{
products_btn.enabled = true;
popup_btn.enabled = true;
} // End of the function
function disableButtons()
{
products_btn.enabled = false;
popup_btn.enabled = false;
} // End of the function

// TO ->

function enableButtons()
{
products_btn.enabled = true;
popup_btn.enabled = true;
PetaOutlet1_btn.enabled = true;
PetaOutlet2_btn.enabled = true;
} // End of the function

function disableButtons()
{
products_btn.enabled = false;
popup_btn.enabled = false;
PetaOutlet1_btn.enabled = false;
PetaOutlet2_btn.enabled = false;
} // End of the function

[adobegirl]

Thanks for your follow-up replies, Gipoh. They are much appreciated. In looking
back on the product documentation, this must be Actionscript 2.

I tried your suggestion and nothing happened, unfortunately. I'm going to try
a few other things and let you know what happens.

[Gipoh]

Hi there,
I hope things worked out. Let me know.

[adobegirl]

Here is the update:

I have been re-reading the manual that came with the extension I'm using and
reading more about Actionscript in general so I have a better understanding of
how this works. Unfortunately, the page with the buttons is still distorted
even though I've tried the suggestions in the manual to fix that. Even worse,
when you get to the end of the book and start flipping it backwards, the button
URL (Google) opens up in a new window. It's as if the button has been clicked,
but it hasn't. If you click the buttons on page 8 and then click the corners
you'll see what I mean.

[Gipoh]

It is working for me. However on the other pages I can still click on it. But
did you put the following code in the page because normally when it "closes"
(see function onClose) it disables the buttons.

function disableButtons()
{
products_btn.enabled = false;
popup_btn.enabled = false;
PetaOutlet1_btn.enabled = false;
PetaOutlet2_btn.enabled = false;
} // End of the function

[Semon Seos]

[url]http://seoservise.ru[/url]