Author Topic: Animated buttons  (Read 6264 times)

joakimhoegset

  • Full Member
  • ***
  • Posts: 79
Animated buttons
« on: October 27, 2009, 03:08:35 PM »
Hi I would like to change the background and buttons to my own.
How would I go by to add a swf file with a button inside it. Does it need code or will the asul file take care of that?
Further I would like to change the container (the background to the pagenumbergs, thumbs and buttons) and add a 9-slice scaled swf. Would this work and how?
And while Im at it has there been any progress in the printing department of 2.0?

Thanks for a great tool.

Joakim

Florian Nücke

  • κρύα πόδια
  • Administrator
  • Hero Member
  • *****
  • Posts: 1979
  • MegaZine3 Developer
    • MegaZine3
Re: Animated buttons
« Reply #1 on: October 27, 2009, 08:53:32 PM »
9-slice scaling is currently not implemented, but planned. I'd like to use the ScaleBitmap class from bytearray.org to make this work for normal images, too, but I'll have to check if that will work out regarding the licensing... planning on getting this in for 2.0.1, though.
Now, if you need your own code in the button depends on what it should do. If you only want to modify an existing button in the looks department, then you won't have to code anything. Just change the paths to the graphics used (which are normally defined in the "style" block of an ASUL file).

As for printing, Jamie who wanted to have a look into that is currently on vacation, I think he'll be back next week or so. I'm currently spending what time I can spare into possibilities regarding search (in books generated from PDFs, primarily for now), so no real date-guesstimate for printing, sorry.
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.

joakimhoegset

  • Full Member
  • ***
  • Posts: 79
Re: Animated buttons
« Reply #2 on: October 27, 2009, 09:01:31 PM »
I have changed the url for the buttons but the swf doesnot work as a button but only as an image.

this is the changes I have made.

    button.fullscreen box { background: image(gui/navigationbar/btn_fullscreen.swf); }
    button.restore box { background: image(gui/navigationbar/btn_restore.swf); }
    button.first box { background: image(gui/navigationbar/btn_page_first.swf); }
    button.last box { background: image(gui/navigationbar/btn_page_last.swf); }
    button.prev box { background: image(gui/navigationbar/btn_page_prev.swf); }
    button.next box { background: image(gui/navigationbar/btn_page_next.swf); }

Further I have been trying to get my xml to work with area and have added the code like this:

<page>
   <img src="images/2.png" left="0" top="0"></img>
   <area left="0" top="100" height="100" width="30" target="_blank" url="http://www.dn.se" title="DnLink" overlay="color(0,0,0xff00ff)" />
</page>

What am I doing wrong?
Thx,
Joakim

Florian Nücke

  • κρύα πόδια
  • Administrator
  • Hero Member
  • *****
  • Posts: 1979
  • MegaZine3 Developer
    • MegaZine3
Re: Animated buttons
« Reply #3 on: October 27, 2009, 09:35:39 PM »
Well, if the actual button behavior (upstate, overstate, downstate) is defined in the swf, you'd have to use a "Box" for that not to be ignored (i.e. not a <button>..</button> but just a <box/>). Can't remember if the buttons had to explicitly be that, or if boxed would work, too, though... well, just give it a try :P

As for the area: what's not working? Do you have all the necessary plugins loaded?
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.

joakimhoegset

  • Full Member
  • ***
  • Posts: 79
Re: Animated buttons
« Reply #4 on: October 27, 2009, 10:12:01 PM »
Thanks the area is working really well but I am wondering how to allow external links?

Joakim

joakimhoegset

  • Full Member
  • ***
  • Posts: 79
Re: Animated buttons
« Reply #5 on: October 27, 2009, 10:18:25 PM »
Hmm, I can't seem to understand what you mean by the box. In the navigationbar.asul which are in the source files you have the code for the fullscreen button for example:

 button.fullscreen box { background: image(gui/navigationbar/btn_fullscreen.png); }
 button.restore box { background: image(gui/navigationbar/btn_restore.swf); }

and later in the code:

<togglebutton name="btn_fullscreen" style="common">
<button name="$btn_normal$" style="fullscreen" title="localize(LNG_FULLSCREEN, FULLSCREEN)">
<box name="$up$"/>
<box name="$over$" style="over"/>
<box name="$down$" style="down"/>
</button>
<button name="$btn_toggled$" style="restore" title="localize(LNG_RESTORE, EXIT FULLSCREEN)">
<box name="$up$"/>
<box name="$over$" style="over"/>
<box name="$down$" style="down"/>
</button>
</togglebutton>


What do you suggest I do?
Thx,

Joakim

Florian Nücke

  • κρύα πόδια
  • Administrator
  • Hero Member
  • *****
  • Posts: 1979
  • MegaZine3 Developer
    • MegaZine3
Re: Animated buttons
« Reply #6 on: October 27, 2009, 10:27:19 PM »
Ah. If it's a togglebutton it probably won't work (because the two states have to be buttons, to make it possible to disable them)... sooo... is there anything superspecial going on in your button? Because if not, the easiest thing to do would be to save the three states (up, over, down) as three separate swfs. I.e. change

button.fullscreen box { background: image(gui/navigationbar/btn_fullscreen.swf); }

to

button.fullscreen box { background: image(gui/navigationbar/btn_fullscreen_up.swf); }
button.fullscreen box.over { background: image(gui/navigationbar/btn_fullscreen_over.swf); }
button.fullscreen box.down { background: image(gui/navigationbar/btn_fullscreen_down.swf); }



For completeness sake, what I meant originally was to change
Code: (xml)
  1. <button name="$btn_normal$" style="fullscreen" title="localize(LNG_FULLSCREEN, FULLSCREEN)">
  2. <box name="$up$"/>
  3. <box name="$over$" style="over"/>
  4. <box name="$down$" style="down"/>
  5. </button>
to
Code: (xml)
  1. <box style="fullscreen" title="localize(LNG_FULLSCREEN, FULLSCREEN)"/>
... but not sure this will even work :P [mainly because of mouseEnabled stuff, meaning it could be the loaded swf doesn't even receive any mouse events at all, and thus won't change it's state, either]
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.

joakimhoegset

  • Full Member
  • ***
  • Posts: 79
Re: Animated buttons
« Reply #7 on: October 27, 2009, 10:41:55 PM »
You were right the original ideal to change to box only didn't work as it doesn't show the swf at all. I will add three images for normal over and down.
As for my other question I would like ot be able to zoom the whole page by just either double clicking or clicking once. Don't want to use the zoom buttons. Is there a way?

Joakim

Florian Nücke

  • κρύα πόδια
  • Administrator
  • Hero Member
  • *****
  • Posts: 1979
  • MegaZine3 Developer
    • MegaZine3
Re: Animated buttons
« Reply #8 on: October 28, 2009, 12:16:47 AM »
Hmm. This would result in making it impossible to have other interactive page content, but I'm thinking adding an area covering the whole page, which will, when clicked, call a JavaScript function, which in turn (via the API in the megazine.js file) triggers a complete zoom in or out would be the easiest thing to do.
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.

joakimhoegset

  • Full Member
  • ***
  • Posts: 79
Re: Animated buttons
« Reply #9 on: October 28, 2009, 01:34:08 AM »
but by doing this you wouldn't be able to use the linked areas for external links. How do one get the best of two worlds? Can you have a single click on areas and double click on zoom? Or CTRL+click for zoom?

if so then how could it be done. And again thanks for helping with this.
Btw did you see the bug with the fullscreen and the text input gotoPage?

Thx,

Joakim

Florian Nücke

  • κρύα πόδια
  • Administrator
  • Hero Member
  • *****
  • Posts: 1979
  • MegaZine3 Developer
    • MegaZine3
Re: Animated buttons
« Reply #10 on: October 29, 2009, 01:34:13 PM »
Yeah, that's what I meant... I'll have a look into the doubleclick idea.
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.

joakimhoegset

  • Full Member
  • ***
  • Posts: 79
Re: Animated buttons
« Reply #11 on: October 29, 2009, 01:40:14 PM »
For now I will add the zoom buttons at the bottom but I can seem to get it to only zoom once (max zoom) and then to restore back to no zoom. How do I do this?

Thx
Joakim

Florian Nücke

  • κρύα πόδια
  • Administrator
  • Hero Member
  • *****
  • Posts: 1979
  • MegaZine3 Developer
    • MegaZine3
Re: Animated buttons
« Reply #12 on: October 29, 2009, 02:22:53 PM »
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.

joakimhoegset

  • Full Member
  • ***
  • Posts: 79
Re: Animated buttons
« Reply #13 on: October 29, 2009, 02:53:31 PM »
Got that and will ask in hte other post.

Joakim