(Which you noted in Step 1 of Part 1, remember? Mine had been set to 400 pixels.)ĥ.) From the Animate dropdown, select Linear and give it a time value that you'd like to use. If I had a lot of Dynamic Panels on the page, it'd be easier to pick this one out as a result.)Ĥ.) Set the Width value to the full width of the progress bar's outline. (And as you can see in the screenshot below, I gave mine the convenient name of "Progress Bar Fill". In the Widget Interactions and Notes pane, select the Interactions tab and then double-click the OnClick event.Ģ.) In the Add Actions list on the left, under the Dynamic Panels section, choose the Set Panel Size action.ģ.) Now, in the Configure Actions section on the right, check the box for the Dynamic Panel you created to use as the Progress Meter Fill. The resulting prototype won't really do anything, but that's ok, we're just verifying that we've got the basic wireframe layout in place.ġ.) Select the button you created at the end of Part 1. To help make it clearer in the static wireframe that this is a progress meter, resize the Dynamic Panel to only partially fill the outline.ĥ.) Add a button to the page, which you'll use to trigger the animation of the progress bar filling up.Ħ.) Preview the prototype in your web browser by either going to the Publish menu and choosing Preview, or hitting the F5 key. You can do this by right-clicking on it and choosing Convert to Dynamic Panel from the menu.Ĥ.) Position the Dynamic Panel directly over top of the progress bar outline rectangle. This rectangle will act as the filled-in portion of the progress bar.ģ.) Convert the filled-in rectangle to a Dynamic Panel. While it doesn't matter much in a page with very few objects, these things quickly pile up and when you're setting up actions, figuring out which object in your list to perform the action on is really difficult if nothing has a label! You do this by entering a value in the Name field of the Widget Interactions and Notes pane for each object.Ģ.) Duplicate the rectangle created in Step 1, but give it a color fill. Protip: I highly recommend giving descriptive names to all the objects you create in any Axure prototype. (Take note of the width of this rectangle, you'll need to know it later on. This will act as the outline of the meter. Please note that this tutorial does require the use of Axure 7.0 or later, which introduced the "Set Panel Size" action that the method used here relies upon.ġ.) Add a rectangle to the page and resize it to be the full shape of the progress bar. Here's a sneak preview of what you'll be building: (For more information about Axure and getting started with it, check out: ) Now head over to the next article to learn about Working with Pages.Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. Notes: Add and edit widget and page notes.įor more details on the Axure RP environment, check out Axure Docs.Interactions: Add and edit interactions and other interactive properties on the page or selected widget.Components: Add, remove, rename and organize components, which are centrally managed sets of widgets that you can reuse throughout your file.You can also load folders of images from a local drive. Via the Libraries pane you can switch between libraries of widgets, load additional libraries, and create your own custom libraries. Drag the widgets from the Libraries pane and drop them onto the canvas. Libraries: Resource for widgets such as buttons, images, text and shapes.Outline: View a searchable, sortable, and filterable list of all widgets, components, and dynamic panels on the current diagram.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |