Close the browser and return to Adobe Muse.
Utoljára frissítve:
Megjegyzés:
Adobe Muse is no longer adding new features and will discontinue support on March 26, 2020. For detailed information and assistance, see Adobe Muse end-of-service FAQ.
Enhanced in Adobe Muse CC 2015.1 / February 2016
You can make your design more interesting and engaging by applying state transitions to different objects on your web page. You can also set the delay, duration, and timing options for each state transition, in each object.
Bevel and Glow changes across states are supported in state transition.
Understanding the different states of objects
The State of an object determines its appearance when a user interacts with it. These interactions can be mouseovers (also called rollover), clicking, and so on. When interacted with an Object is said to transition from the default or the normal state to another state. To its end, Adobe Muse adds smooth transitions for such interactions.
Within Adobe Muse, you can apply States to various types of objects, including text, widget containers (of all types of widgets), images, hyperlinks, buttons, and so on. States can assume graphic styles, paragraph styles, character styles, and so on.
What are the different states for an object in Adobe Muse?
Adobe Muse provides the following states allowing you to style and change the appearance of an object based on user interaction.
- Normal: The Normal state determines the default appearance of an object when the web page loads. It allows you to define the state of the object when there is no interaction. An object transitions from the Normal state to other states.
- Mouse down: The Mouse down state determines the appearance of an object when it is clicked and not released.
- Rollover: The Rollover state allows you to change the appearance of an object when you hover your mouse over the object. Using the Rollover state is one of the easiest ways of differentiating between an interactive and a non-interactive object on a web page.
- Active: The Active state defines the appearance of an object when it is Active, and has already been clicked. For example, when a button is clicked or a menu is selected.
When an object transitions to the Active state, it indicates that the object is in use. Active states can also be defined to all kinds of objects, including Hyperlinks.
Assign states to objects
All objects are assigned all four states, by default. However, Adobe Muse lets you customize each of these states separately using the States Panel.
Megjegyzés:
When working with States, it is important to keep track of your selections using the Selection Indicator. This is because Adobe Muse lets you edit the Normal state of an object, by default. This means that the even if you were editing the Active state of Object A, select Object B, and reselect Object A, it assumes the Normal state. Hence, it is important that you explicitly select the State you want to edit from the States panel before styling the object, each time.
By default, edits made to an object are saved as the Normal state. However, Muse allows you to switch to a different state using the States panel, and style the object to customize a state further. You can focus on the behavior of the object for each interaction type by separately editing each of the states.
To customize or edit the state of an object, do the following:
- Open the States Panel by clicking Window > States.
- Select the object whose state you want to edit.
- Select the State that you want to edit, and continue styling the object.
- From the States Panel, select Transition and choose the Fade option. Set the Delay, Duration, and Speed options for the transition. When you select Transition, the object transitions from one state to another as per your settings.
Assign states to widgets and widget containers
-
-
Click the widget once to select the entire menu. Click the food button once again, to select the food menu item. If you accidentally click a third time and the Selection Indicator displays the word Label, press Escape once to jump up one level in the hierarchy, so that the word Menu Item is displayed.
Since the option to Edit Together is enabled in the Options panel, any changes that you make to the appearance of this food menu item are applied to all the rest of the buttons in the Horizontal Menu widget. This makes editing much faster. Unless a design requires you to apply different styling to each button, keep the default setting of the Edit Together option enabled.
-
Open the States panel by selecting its tab or choosing Window > States.
This panel enables you to edit the various ways the button’s graphic is displayed, depending on the activity of the visitor’s cursor. Notice that there are several gray boxes that define the appearance of each state.
When previewing the site, you saw that the Normal state refers to the way the menu looks when the page first loads, when the visitor's cursor is not interacting with the menu. If the visitor hovers their cursor over a button, the styles applied to the Rollover state are displayed. If the visitor presses down on the button, the styles applied to the Mouse Down state are shown. And finally, if the visitor is on that current page of the site (for example, if they clicked the about menu item and they are still viewing the about page) the button looks the way you style the Active state. This last state is optional, but it is helpful in some cases—visitors can see at a glance which page they are currently viewing.
-
In the States panel, click each item in the list: Normal, Rollover, Mouse Down, and Active states. Notice that as you click each state in the panel, the Menu widget on the page updates to display the state’s default appearance.
-
Click the Normal state again. While the Home menu item is selected, use the Fill Color Chip to choose a completely different color, such as red. When you set a different fill color, all of the menu items update their Normal state because the Edit Together option is enabled.
When you update the fill color for one of the button states, the others are automatically updated when the Edit Together option is enabled. -
Select Transition, and select the Fade option. The object transition from one state to another fades in or out, as per your settings.
You can set the following options when you choose the transition option from one state to another:
Delay: The delay time from one state to another, in seconds.
Duration: The duration of the transition.
Speed: In this option, you can make the transition Linear, or Ease the transition to the next state. You can also choose Ease In, Ease Out, or Ease In/Out options. The object transition eases in or out, as per your settings.
-
Choose File > Preview site in browser again, and see that you have customized the button’s Normal state; when the menu first loads, every button except the one that describes the current page is now red. As you hover over each button, the default gray Rollover color is displayed, creating a rollover effect.
-
For this example, select each of the states in the States panel (or select each state using the States menu next to the Selection Indicator in the Control panel) and set the Fill color to none (the white color chip with the red diagonal line). This setting effectively removes the background menu item buttons from view, so that the menu buttons are transparent and the background design shows through.
At the time of this writing, the outer container of the Horizontal Menu widget is transparent by default. However, if desired, you could use the Fill Color Picker to set its fill color, just like the menu item button containers. Later when you make your own sites, you can experiment with setting a fill color for the entire widget and then setting a different fill color for the button containers. You can also try adding a background image to design the buttons.
Bejelentkezés a fiókba