Professional Web Applications Themes

Adding buttons to a flipbook - Adobe Flash, Flex & Director

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

  1. #1

    Default Adding buttons to a flipbook

    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;

    }

    adobegirl Guest

  2. #2

    Default Re: Adding buttons to a flipbook

    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

    Gipoh Guest

  3. #3

    Default Re: Adding buttons to a flipbook

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

  4. #4

    Default Re: Adding buttons to a flipbook

    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);
    }

    adobegirl Guest

  5. #5

    Default Re: Adding buttons to a flipbook

    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"){};
    }
    }



    Gipoh Guest

  6. #6

    Default Re: Adding buttons to a flipbook

    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 doentation 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.[/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>

    adobegirl Guest

  7. #7

    Default Re: Adding buttons to a flipbook

    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();
    };

    Gipoh Guest

  8. #8

    Default Re: Adding buttons to a flipbook

    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
    doent 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.", "_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();
    };

    adobegirl Guest

  9. #9

    Default Re: Adding buttons to a flipbook

    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

    Gipoh Guest

  10. #10

    Default Re: Adding buttons to a flipbook

    Thanks for your follow-up replies, Gipoh. They are much appreciated. In looking
    back on the product doentation, 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.

    adobegirl Guest

  11. #11

    Default Re: Adding buttons to a flipbook

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

  12. #12

    Default Re: Adding buttons to a flipbook

    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.



    adobegirl Guest

  13. #13

    Default Re: Adding buttons to a flipbook

    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

    Gipoh Guest

  14. #14

    Default Re: Adding buttons to a flipbook

    [url]http://seoservise.ru[/url]
    Semon Seos Guest

Similar Threads

  1. Adding clickTAG code to flipbook
    By adobegirl in forum Macromedia Flash Ad Development
    Replies: 1
    Last Post: October 20th, 04:51 AM
  2. adding buttons after flv is done
    By ski760 in forum Macromedia Flash Ad Development
    Replies: 0
    Last Post: June 16th, 06:07 AM
  3. Adding buttons to videos
    By fhugusde in forum Macromedia Flash Player
    Replies: 0
    Last Post: February 8th, 11:54 PM
  4. Adding functions to buttons
    By Brian Glen Palicia in forum Macromedia Flash
    Replies: 5
    Last Post: August 9th, 07:10 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139