Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    12,175

    Info Simple Rollover Layered Menus

    A number of people get confused when creating a NavBar with rollover effects.

    Here is a simple demonstrator: Xara - Simple Rollover Layered Menu.xar

    Try creating a Yellow button that matches the red one with its sub-menu.

    This approach allows you to be highly creative but you need to master the fundamentals:

    1. A button shape on MouseOff.
    2. A collection of shapes in a new Layer.
    3. The button has a Web Animation effect to the Layer.
    4. The button needs to have a fully connected area with the pop-up objects so use a Transparent undershape on the Layer.


    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    20,042

    Default Re: Simple Rollover Layered Menus

    Now there's a coincident Acorn. For the past couple of hours I've been working on a xar you created on another thread and I know you know how to create buttons without images, I've used almost the same same technique you mention, the 99% transparent button. I like to use this method as it eradicates Xara's outdated navbars/buttons being converted into images, especially now we have 'fit to width'.

    LINK

    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Quadro 2000 Graphics Card + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive
    Xara Designer Pro X 17 + Xara 3D Maker 7

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    12,175

    Default Re: Simple Rollover Layered Menus

    Quote Originally Posted by Egg Bramhill View Post
    Now there's a coincident Acorn. For the past couple of hours I've been working on a xar you created on another thread and I know you know how to create buttons without images, I've used almost the same same technique you mention, the 99% transparent button. I like to use this method as it eradicates Xara's outdated navbars/buttons being converted into images, especially now we have 'fit to width'.

    LINK

    As you say Egg, snap.

    When I "corrected" the other one, I kept finding twitches of things not quite right so I decided to build a simpler one the way i would consider sensible.

    The lack of groups being turning into images is second nature for me now.
    I do commend your Diamond. Rather than Skew the box I would create a square, turn 45deg and then just flatten.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    20,042

    Default Re: Simple Rollover Layered Menus

    I do commend your Diamond. Rather than Skew the box I would create a square, turn 45deg and then just flatten.
    That's exactly what I did Acorn ??
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Quadro 2000 Graphics Card + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive
    Xara Designer Pro X 17 + Xara 3D Maker 7

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    12,175

    Default Re: Simple Rollover Layered Menus

    Quote Originally Posted by Egg Bramhill View Post
    That's exactly what I did Acorn ??
    Egg,

    The About Diamond is angled @ 13.679deg.
    The rest are all different @ 7.766deg, @ 9.801deg, @ 11.811deg, @ 12.138deg & @ 14.34deg.

    Set them all to 0deg and you have skewed boxes.

    Skew is hard to control whereas rotate and squash is easy to replicate and describe.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  6. #6
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    20,042

    Default Re: Simple Rollover Layered Menus

    ... whereas rotate and squash is easy to replicate and describe.
    Rotate & Squash is how I did it Acorn. Can you try doing the same and note the rotate angle changes from 45 downwards?

    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Quadro 2000 Graphics Card + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive
    Xara Designer Pro X 17 + Xara 3D Maker 7

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    12,175

    Red face Re: Simple Rollover Layered Menus

    Quote Originally Posted by Egg Bramhill View Post
    Rotate & Squash is how I did it Acorn. Can you try doing the same and note the rotate angle changes from 45 downwards?
    Egg, all my bad.

    When I squashed, the angle stayed at 45 degrees - until I released the mouse as evidenced by your video.
    I was not looking at that point as almost everything else in Xara changes on the fly.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  8. #8
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    20,042

    Default Re: Simple Rollover Layered Menus

    I didn't see these rotations until you pointed them out. I wasn't rotating them at all as you can see. Is this just another bug in Xara's new rotation feature?
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Quadro 2000 Graphics Card + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive
    Xara Designer Pro X 17 + Xara 3D Maker 7

  9. #9
    Join Date
    Oct 2010
    Location
    South Africa
    Posts
    689

    Default Re: Simple Rollover Layered Menus

    Quote Originally Posted by Acorn View Post
    A number of people get confused when creating a NavBar with rollover effects.

    Here is a simple demonstrator: Xara - Simple Rollover Layered Menu.xar

    Try creating a Yellow button that matches the red one with its sub-menu.

    This approach allows you to be highly creative but you need to master the fundamentals:

    1. A button shape on MouseOff.
    2. A collection of shapes in a new Layer.
    3. The button has a Web Animation effect to the Layer.
    4. The button needs to have a fully connected area with the pop-up objects so use a Transparent undershape on the Layer.


    Acorn
    HI Acorn.

    To add labels to the buttons - just make visible and add text? No grouping?

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    12,175

    Info Re: Simple Rollover Layered Menus

    Quote Originally Posted by letsgofishing View Post
    HI Acorn.
    To add labels to the buttons - just make visible and add text? No grouping?
    LGF

    There are two answers to your question. Yes and No.

    As the objects are all on different Layers, a (Hard-)Group is not possible as everything gets flattened onto one layer.

    1. If you are moving the button about then you should Soft-Group with its partnering objects on the pop-up layer for that button.
    2. For the button pop-up layer object, you can Hard-Group them but you need to add a special Name of htmltext. I prefer Soft-Grouping but editing is a little harder as there is no Edit Inside option.
    3. If you are comfortable with the potential accidental displacement that might happen, you do not have to group anything just Preview and check, check, check.

    Acorn

    P.S. As you can add anything to a pop-up layer, you are not constrained by boxes and text. Things could be icons, pictures, placeholders, ...
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

 

 

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
  •