Muse: Change appearance with a rollover state button

Hi,
I'm a newbie user of Muse (demo actually), trying to duplicate a simple "mouseover' html effect in Muse with a state widget to control appearance of an overlay graphic element on a page. Can I pop in a gif on top of a base element (also gif) so it aligns properly?
What is required to simulate this simple mouseover effect? Is it going to involve a layer, or a state widget to control it? Both?? I viewed the method by which a background or text can be changed and assume that a similar thing can be done to a placed graphic- make it appear on mouseover (rollover). Alas, it doesn't seem to be. Can you help?

Thanks, Brad. I'll give that a try. mouseover widget doesn't cut it. Unless I can cascade them. I need to make the overlay appear and disappear on mouseover, if that makes sense. To see it work the 'old way' have a look here: Techworks Pro: Services
Once we figured it out, it was pretty simple to build. Muse has so far made it quite challenging! May be a learning curve.

Similar Messages

  • Tree node images changes.. with start and stop button

    I create the animator extends JPanel, which start and stop can be controlled with Swing Timer. It works fine with animation control over the panel.
    Now, I have a tree with each image at each node.
    when the start button clicks, one node image should be animated.
    It is implementable. If animation.gif would have worked, I did't have to do this, but animation gif has fatal error with time interval.
    any words would be appreciated. Thanks =

    Damn !
    With version 1.2.1 I think you'll have to create a new class that extends PositionPathInterpolator and add a pause() anr resume() method to it.
    i suggest something like:
    public class MyPositionPathInterpolator() extends PositionPathInterpolator {
    // add some constructors if necessary
    private float pauseAlphaValue = 0;
    // override computeTransform method
    public void computeTransform(float alphaValue, Transform3D transform) {
       float newAlphaValue = alphaValue + pauseAlphaValue; // calculate new alpha value
       if(newAlphaValue > 1)  // modify it if it is out of bounds
          newAlphaValue -= 1;
       else if (newAlphaValue < 0)
          newAlphaValue += 1;
       super.computeTransform(newAlphaValue, transform); // computeTransform with the right alpha value
    public void pause() {
       this.setEnable(false); // it won't compute transform anymore
       pauseAlphaValue = this.getAlpha().value(); // retrieve current alphavalue
    public void resume() {
       pauseAlphaValue -= this.getAlpha().value();
       this.setEnable(true) // restart computing transform
    }Now you invoke pause and resume methods on your myPositionPathInterpolator object when user clicks on the buttons.
    Of course it is a trick and it will work only with increasing alpha.
    c ya
    GnG

  • Scaling a button with rollover state (IDCS3)

    If you have a button with a rollover state and then scale it, only the currently visible state is scaled.
    Would you guys consider this a bug or intentional?
    Any hints on how I can scale all states without laboriously editing the content of every button state?
    Cheers, Graham.

    Graham,
    Nice follow up on this, but watch out!
    When you change that preference to "Adjust Scaling Percentage" anytime you scale text frames, you will create a situation where the point size changes but is displayed with the parenthetical amount.
    For instance, if you scale 12 point text down 50%, the point size for text will be displayed as 12(6)pt.
    Then if you want to change the text to 8 point, you would have to type in 16 points.
    Obviously with this simple example the numbers are easy to figure out, but with other amounts it can get very complicated.

  • Help with making a back button

    hi
    in a game im making i have a start menu that then when you click play goes to the game after playing the game, when you die a game over screen appears with a play again button in it i want to put a back button to go to the first frame.
    the way this is set up is that the game over menue is a movie clip with the play again button in it i want to have a back movie clip to make it go to the first frame
    gotoAndStop(1) dosent seem to work or mabye i am doing it wrong
    this my game class file as the game over menu does not have a class file:
    package com.alienattack{
              import flash.display.MovieClip;
              import flash.events.Event;
              import flash.utils.Timer;
              import flash.text.TextField;
              import flash.text.TextFormat;
              import flash.display.Stage;
              public class Game extends MovieClip          {
                        static var ship:MovieClip;
                        static var enemyShipTimer:Timer;
                        static var scoreText:TextField;
                        static var score:Number;
                        static var healthMeter:HealthMeter;
                        static var enemyHealthMeter:EnemyHealthMeter;
                        static var gameOverMenu:GameOverMenu;
                        static var powerUpTimer:Timer;
                        static var miniBossTimer:Timer;
                        static var RocketShipTimer:Timer;
                        var bossCountdown:Number;
                        static var Bombtimer:Timer;
                        private var _stage:Stage;
                        static var backgroundMusic = new BackgroundMusic();
                        var Bullet;
                        public function Game(){
                                     this.addEventListener(Event.ADDED_TO_STAGE,init);
                        function init(e:Event):void{
                                  _stage=stage;
                                  KeyClass.initialize(stage);
                                  stage.focus = this;
                                  ship = new Ship();
                                  ship.x = 300;
                                  ship.y = 150;
                                  _stage.addChild(ship);
                                  enemyShipTimer = new Timer(2000);
                                  enemyShipTimer.addEventListener("timer", sendEnemy);
                                  enemyShipTimer.start();
                                  RocketShipTimer = new Timer(3500);
                                  RocketShipTimer.addEventListener("timer", sendEnemyRocket);
                                  RocketShipTimer.start();
                                  resetScore();
                                  gameOverMenu = new GameOverMenu();
                                  gameOverMenu.x = 0;
                                  gameOverMenu.y = 0;
                                  addChild(gameOverMenu);
                                  gameOverMenu.visible = false;
    gameOverMenu.playAgainButton.addEventListener("mouseDown", newGame); (this is where i think the play again button is but how would i make it so it when to the first frame)
                backgroundMusic.play(0,1000);
                        static function gameOver()
                                  gameOverMenu.visible = true;
                                  enemyShipTimer.stop();
                                  miniBossTimer.stop();
                                  RocketShipTimer.stop();
                                  Bombtimer.stop();
                                  powerUpTimer.stop();
                                  for (var i in EnemyShip.list)
                                            EnemyShip.list[i].kill();
                        function newGame(e:Event)
                                  gameOverMenu.visible = false;
                                  ship.visible = true;
                                  ship.x = 300;
                                  ship.y = 150;
                                  ship.takeDamage(-ship.maxHealth);
                                  ship.addEventListener("enterFrame", ship.move);
                                  resetScore();
                                  enemyShipTimer.start();
                                  miniBossTimer.start();
                                  RocketShipTimer.start();
                                  Bombtimer.start();
                                  powerUpTimer.start();

    hi
    i make a new function back and change the new game to back but the screen does not go to the first frame
    gameOverMenu.backbutton.addEventListener("mouseDown", back);
    function back(e:Event)
                                  gotoAndStop(1);
    any help?

  • How to link several 4 state buttons to an one image area?

    HI
    I've created a page with several 4-state buttons. I am trying to have a specific image show up in a target area when a specific button is selected. When i go into my states palette, all of the buttons show up in states 2-4. I can set this up easily to be roll-overs but i really want them to be buttons and i can't figure out how to get one image for each button. HELP!
    thanks!

    Button symbols are self-contained so it may be a little trickier to do this. Try adding a hotspot on top of each button symbol and create the disjoint effect from the hotspot, rather than the button symbol slice.
    NOTE: You may have to put the rollover effect on a 5th, 6th, 7th etc.. state.
    You could also try opening the Behaviors panel and adding the effect directly from the panel, using the button slice.
    HTH

  • How to deal with those pesky touchpad buttons

    The Pavilion series laptops are really well made in a lot of respects.  I have owned my DV5t for almost 4 years now and I've been quite happy with it (except for rather anemic battery life).  There is one thing that became a nasty problem for me, that being the left touchpad button.  It is the most commonly used touchpad button and unfortunately these buttons were not well designed.  They can easily break after a certain number of hits, whereby there's no longer any spring to it.  Pressing the button ends up getting double-taps like mad.  Also, the silver coating on them tends to wear away, looking rather unsightly over time. Once you start seeing the black plastic beneath, it won't be long before the button breaks.  It's really a shame, because these tactile feel buttons work well--they just don't last.  The newer HP laptops have those "lite touch" buttons which I do not like.  The tactile feel is so much better.  Unfortunately, it seems like most laptop makers are going with those solid state buttons to avoid another component that might go wrong.  It's a shame, because with just a little more effort they could have been designed to last a very long time.
    As of this writing, I have now gone through TWO of these touchpads.  How did I manage to get another two chances?  Well, they can be replaced but unfortunately they require you to disassemble more than half of the laptop.  You see, the touchpad is integrated into the palm bezel, and the palm bezel is a piece of plastic coated metal that runs all the way to the back of the laptop.  To get at it requires about an hour of taking the laptop apart.  It's not for the faint of heart either.  However, there is a service manual available that shows you what to do and I was able to follow it... thrice.  Yes, the first button wore out after just under 2 years.  The second one held up about as long.  I use the touchpad buttons frequently, so... well, needless to say, now that I've got the 3rd bezel in place, I am going to rely mostly on an external mouse.  And when I have to use the touchpad, I am going to use it very carefully, not exerting too much pressure (note that you can also tap the touchpad itself for a single click, something good to get into the habit of doing).  Additionally, I'm going to put a sheet of protector plastic on the left mouse button to help avoid wearing out the surface.
    So... one hour to disassemble it and a little more than an hour to reassemble it.  It looked daunting to do at first, but believe me if you're patient and can follow instructions it is definitely doable.  You don't need to be an HP tech to do it.
    As for the parts, I obtained them from eBay.  Apparently there are a lot of excellent condition used parts available from a variety of sources.  I got the bezel for just under $30 shipped.  Also, the speaker grille part is metal and tends to dent, so this time around I replaced it as well as the keyboard (the original was fine, but just a little touchy on one or two keys).  With all 3 of these parts replaced, my laptop feels like new all over again.  As for obtaining parts, you'll need to do your homework with the HP parts finder.  There are many variants of the Pavilion laptop models with many parts in common, so the part you need can vary by number.  The parts catalog can help you find them.
    Anyway, that's about it.  After having done this for the 3rd time, I figured there might be others out there with this problem on the brink of tossing out the laptop or selling it for parts on the cheap.  It's salvageable!
    "If you keep an open mind, life will give you more possibilities."

    Thank you for your information and support. I may have to replace my touch pad and keyboard and you have given me hope and confidence. Thank you again,
    Jackson Gal

  • ¿Custom button with different size/shape for rollover state in Muse?

    Hello, i'm trying to make a custom button, that has one size/shape when normal, and other size/shape when rollover.
    The problem is that the area not visible in normal state is a hot area, so when then mouse rollover anywhere near, activates the button rollover state.
    So i think what i need is mask or something like that
    Is there a work around to do this? Is even possible in normal CSS - HTML5?
    Here is the website:
    http://www.audime.com/prueba/
    And here what i'm talking about:
    Thanks in advance!

    I'm not fully understanding the screenshot, but what you're describing sounds more like a Composition:Tooltip widget than a button.

  • All web pages appear with a blinking cursor like in a "word document". i can't scroll down or up using the buttons of my key board. i have to pull down the scroll bar. something in settings has changed. how to correct it??

    all web pages appear with a blinking cursor like in a "word document". i can't scroll down or up using the buttons of my key board. i have to pull down the scroll bar. something in settings has changed. how to correct it??
    == This happened ==
    Just once or twice
    == 2 days ago.

    See also this article about caret browsing: http://kb.mozillazine.org/Scrolling_with_arrow_keys_no_longer_works
    In Firefox 3.6 and later versions you can disable the F7 shortcut that toggles caret browsing by setting the pref accessibility.browsewithcaret_shortcut.enabled to false.
    To open the ''about:config'' page, type '''about:config''' in the location (address) bar and press the Enter key, just like you type the url of a website to open a website.
    If you see a warning then you can confirm that you want to access that page.

  • Syncing Button Rollover States

    I'm building a website for myself (currently with the Muse trial, but I am planning to buy), and I have a question regarding button rollover states.  The site I'm building is an architectural photography website, and the general portfolio page has a list of subcategories in the left-side menu bar.  However, I also want to have thumbnail links to each of the subcategories in the main body of the website (see image provided).  The thumbnails are for the Educational and Municipal subcategories.  I have currently set up the rollover states for all the links in the left-side menu (to turn to the light blue that is seen on the active state of the Portfolio button), and I've set the rollover states for the thumbnails (to go to 50% opacity).  Is there a way for me to synchronize these rollover states?  I would like to see a thumbnail respond in its rollover state if I roll over its corresponding button in the left-side menu, and vice versa.
    Thanks!
    Rob

    Hi,
    To accomplish that you can use the composition tool tip. A transparent triger can be placed where your menu item is and the target will be on the image with an opacity of the 50%.
    However, this will only work in one direction and will not change the menu item when you roll over to the image.
    Regards,

  • Can I change the rollover state of a placed photograph?

    I simply want to be able to have a series of separate single, small photographs with descriptions below them and when someone moves their mouse over the photograph I would like it to display a larger version of that photograph on the same screen.  Then, when they move their mouse away, the larger version of the photograph disappears.
    I thought it would be configured in the rollover state of the image, but I must be doing something wrong.  I have placed and resized a photograph on my site.  I placed it, then resized it to basically a 1.5" w x 2.25" h.  I have tried to change to the rollover state for the image and then hyperlink to a larger size of that image but it seems to hyperlink all of the states.  And, if previewed, the mouse pointer becomes a hand, and when you click on the image it opens a new tab and displays the image there -- eventhough the box is not checked to open link in new tab.
    Help! Is there a way to accomplish this?

    Ok I did this on my site for one of my clients.
    What you do is set a lightbox composite. Enable the thumbnails and on the options set the events to rollover.
    Resize your thumbnails to desired size.
    Hide the enlarged picture of the light box. Now when you hover over iton preview on muse you should get the effect. Make sure to just have the hero image of the lightbox image no fill that would normally happen when you select the image and your window would dim out.
    Hopefully that helps you if not ill be on tomorrow and will post my finished site so you can see the effect and verify if its what you asked for.
    Good Luck!
    Edit: http://sanantoniorestaurant.businesscatalyst.com/index.html Link to my client's site, on the bottom half, Specials, hover over the images.

  • When hovering over button text it does not show button rollover state

    Hi
    I'm new to captivate and I'm looking for some help please.  I have created buttons with Adobe Flash and saved them in PNG format,  I have created an upState, overState and downState.  These are working really well when I use them in Captivate.  However when I add text to my buttons and rollover the text the buttons don't change state.  They only change state when I hover over the button itself (a bit without the text).
    Any help you can give me would be greatly appreciated.
    thanks

    No, if you cover up with text, and user clicks on text, the rollover state will not function.
    I have another work flow for translation (have tutorials in several languages as well). In previous versions I used Photoshop to create buttons, using layers and having the Text layer separately, so that to translate I only needed to change that layer. But I created the regular Captivate buttons (needing three PNG's for 3 states).
    In Captivate 6 I have almost replaced all butons by Smart Shapes used as button. Since the double as text containers, translating is now done in Captivate itself. But those shape buttons do not have a rollover functionality, can cope with that, I opt to show the hand cursor.
    Really, cannot help you if you want to stick with Flash buttons that have to be layered under a text caption, unless you make the flash button transparent where the Text has to go, so that you can put the text under the Flash button.
    Lilybiri

  • Link to frame in button rollover state not working..

    Hi guys,
    What I use: Flash CS5 & Actionscript 3
    So I had my buttons working just fine and linking to a frame. But after adding a rollover state in which my button has grown in size it no longer links.
    Does anyone know how to get my buttons linking in their rollover state?

    var someObject:MovieClip;  // this is declared - only
    var someObjectMovieClip = new MovieClip(); // this is declared and instantiated
    Make sure your code uses aghains and not instancename like your code shows. 
    I don't think you understand the third and fifth items I listed either.  The third is saying that the code is not in the same frame as the item it is trying to target.  The fifth has to do with objects in consecutive frames, not linking.
    If you followed what I mentioned in the last sentence you should have a line number indicated in the error message that will tell you which line is causing the problem.  Whatever line that is, the object doesn't exist as far as the code sees it.  So if it was the line...
        instancename.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_28);
    I can guarantee you that there is no object named instancename in the frame where you have that code since it is the only object targeted in that line of code.

  • Fustrating problem with self-made 5-state button

    Hey guys, just wondering if you could help me, i don't have
    much knowledge with actionscript and i created my own 5 state
    button using a movie clip and a little bit of actionscript by
    following a tutorial online. (
    http://www.sanctifiedstudios.com/advanced-five-state-buttons/)
    Basically, when rolled over, the button slides out, and when
    rolled off, the button slides back in. The problem is, while the
    button is rolling back in, if you flick your mouse onto the button
    again quickly, instead of restarting the roll-out animation, the
    button just flickers quickly between the in position and the out
    position.
    You can see it for yourself here: www.everlightmusic.com <
    hover your mouse over the buttons on the right, move your mouse
    off, and then while its rolling back in, quickly move your mouse
    back onto it.
    The actionscript for the buttons is this:
    quote:
    this.onRollOver = function(){
    this.gotoAndPlay(20);
    this.onRollOut = function(){
    this.gotoAndPlay(30);
    this.onPress = function(){
    this.gotoAndStop(29);
    this.onRelease = function(){
    this.gotoAndStop(29);
    this.onReleaseOutside = function(){
    this.gotoAndPlay(40);
    this.onRelease = function(){
    _parent.gotoAndPlay(31)
    And here is a screenshot of the movie clip timeline:
    Click
    Any help with this would be greatly appreciated :)

    yeah this is typical when using a timeline based button
    action. two things you could do:
    1) control the state change by using a variable to indicate
    when the motion is complete (or not) like 'isOpen' - you'd need to
    do this for each button in combination with a condition in the
    handler that 'reads' the var and determines the course of action -
    of course the next problem is that if you 'rollout' while the
    motion is happening and the handler fires previous to the setting
    of the var to it's 'new' state it won't close because the condition
    would only be fired once - the only way around that would be to
    include a loop that runs until the condition is satisfied.
    2) much better than the above method (which would get messy
    fast) is to simply use the 'tween' class to create you motions, you
    can then 'open' or 'close' from what ever the current position of
    the clip is at the moment the handler is fired. you've got your
    code on the timeline of the 'button' MC (good job) so you could
    change it to something like this:

  • Invisible submit button with image rollover

    I have a need to combine a rollover image with a form submit
    button. I need the submit button to not be visible except for those
    that know where to look.
    I have a database query that displays rows of data. Each row
    has a checkbox to select that item, so the data table is in a form;
    the checkbox is a cfinput. In order to pass the parameters of the
    checked items, a submit button must be used to submit the form
    values.
    My need is for the submit button to be the rollover image.
    Only users that know where to find the rollover image will be able
    to submit the list of checked form values. "Regular" users
    shouldn't be in that area of the screen.
    So, a combined rollover image submit button is needed.
    Ideas? Thanks...Rick...

    document.yourformname.submit didn't work.
    But then discovered that the href value needs to be empty (or
    "#") to work. This code works: (rollover images with the submit()
    code):
    <a href="#"
    onClick="javascript:submit()"
    onmouseover="MM_swapImage('Image9','','images/change-meeting-date.png',1)"
    onmouseout="MM_swapImgRestore()">
    <img src="images/blank-hidden-area.png"
    name="Image9"
    width="111"
    height="11"
    border="0"
    id="Image9" />
    </a>
    When, in DW, you add the rollover image, you need to leave
    the href value empty. I suppose that lets the submit button use the
    <cfform action...> value as the results page, letting the
    form values pass to the results page.
    Now, the next step is to have two different rollover images
    with submits() that point to two different result pages, while
    still using one cfform. (Two submits in one form, each submit
    pointing to a different results page.)
    ...Rick...

  • Hotmail suddenly changed appearance and now presents with the top of the page blue with lines. I have a screenshot...

    Running Firefox 15.0. Hotmail suddenly changed appearance and my page is not at the bottom of the screen. The top 5/6 of the page is a series of horizontal blue strips. Text in the blue section is the Windows Live titles like "Home, Devices, Mobile, etc". When I try to compose a new message, text from the blue area partially covers the "To" button, so I have to position the cursor at the very bottom of the button to enter an address. I tried Hotmail in IE and it appears just fine, so it must be a compatibility problem between Hotmail & Firefox. Hotmail has not responded to my email questions. I could understand if this happened at the very beginning of a session, just after I power up, but this happened after I had been active in Hotmail and other sites. Other sites are not affected, just Hotmail, and just in Firefox.

    Reset the page zoom on pages that cause problems.
    *<b>View > Zoom > Reset</b> (Ctrl+0 (zero); Cmd+0 on Mac)
    *http://kb.mozillazine.org/Zoom_text_of_web_pages
    If you have increased the minimum font size then try the default setting "none" as a (too) high value can cause issues.
    *Tools > Options > Content : Fonts & Colors > Advanced > Minimum Font Size (none)
    Make sure that you allow websites to choose their fonts.
    *Tools > Options > Content : Fonts & Colors > Advanced > [X] "Allow pages to choose their own fonts, instead of my selections above"
    *https://support.mozilla.org/kb/Changing+fonts+and+colors
    It is better not to increase the minimum font size, but use an extension to set the default page zoom to prevent issues with overlapping text.
    Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance/Themes).
    *Don't click the Reset button on the Safe mode start window or otherwise make changes.
    *https://support.mozilla.org/kb/Safe+Mode
    *https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

Maybe you are looking for