![]() ![]() For this, we'll add in a Wait action, which you'll find in the Miscellaneous section. I went with "Copying files."Ħ.) Next, we're going to add in a delay so that the text will stay there for a moment before we put in another Set Text action to change it to the next bit of status text. Delete the existing "Progress status text appears here" and set it to something that makes sense as the first stage of the imaginary process that this progress meter exists for. Good luck finding the right thing if you do that! -)ĥ.) Now let's edit the text that will appear for the label. Otherwise, your list of widgets on the page to choose from will be full of generic names. (And note that if you've been labeling everything per my earlier protip, it'll be easy to find this. Let's edit its text to be "Progress status text appears here"Ģ.) We're going to be editing what happens after clicking the button which starts the progress meter, so select it and double-click on Case 1 of the OnClick event.ģ.) We'll be making use of the Set Text action, so select it from within the Widgets section of the actions list.Ĥ.) In the Configure Actions section, select the Label widget that you created earlier. Part 3: Adding Progress Text As an added bonus, let's get even fancier and add in some progress status text that changes as the meter fills up.ġ.) Add a Label widget above the progress meter. Upon clicking the button, the meter should now fill up, taking as long as you set in step 5. This time, the progress meter will start out unfilled. Follow the same steps as 3 & 4, but this time, set the Width value to 0 (and don't give it an Animation.)Ĩ.) Preview the prototype in your web browser. (I wanted mine to take 5 seconds, so I set the time to 5000ms.)Ħ.) Hit the OK button to confirm the new action and close the window.ħ.) Finally, we need to make sure that the progress meter starts off in the unfilled state, so in the Page Properties pane, go to the Page Interactions tab and double-click the OnPageLoad event. (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: ) 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. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |