How to Create and Use Buttons in Sprout
Related Videos
Popular
Most Recent
Most Viewed

Description


How Do I Create and Use Buttons in my Sprout?000a000aSprout Builder is the Quick and Easy way to create sophisticated multimedia content. Our builder requires no flash programming skills. Check out http://sproutbuilder.com for more information.

Transcript


How Do I Make and Use Buttons in my Sprout? In this video, we will be showing how to use the button component inside the Sprout builder. We are going to start this one with the four-page Sprout that we already have ready. We are going to click to edit the content pages and we are going to go to the foreground. I am going to start by dragging two buttons into the canvas. I put one on the bottom left and one in the bottom right. [Demo] Over in the button Properties panel, I re-label one of my buttons Next and the other Previous. [Demo] In this panel, it is where I could change the Types alignment if I wanted to. [Demo] I can also change the buttons’ font. [Demo] Style. [Demo] Size. [Demo] And color. [Demo] I can also choose to add emboss or shadow effect. [Demo] Now, let us change the color of the button. You can set it up as a gradient or a solid color by selecting the same color and both upper boxes. Selecting down will change the color of the button while it is being clicked down. Hover is the color to the button will be when the mouse hovers over it. Selected indicates the color of the button after it has been pressed and released. You can also choose to fill the buttons with a pattern. Just remember that the image will not resize for the smaller buttons. [Demo] Here, you can see I am selecting my pattern from my Asset Manager. [Demo] Now, that our buttons are customized, let us link it to our pages for navigation. Let us go to Links and Tracking in the Properties panel. You can link your button to a website by entering the URL or to another page that you have created for your project. In our case, we are going to link the Previous button to previous page and the Next button to next page. [Demo] If I go to the Appearance panel, I can adjust opacity, borders and the corners of my buttons. [Demo] Now, I am going to leave the foreground page and go back to my content page. There I can see the buttons have been placed across the bottom of all of my pages. Next, I am going to link one of this new buttons I have added. This one, I have labeled Sprout Builder and that is the address that I am putting in the URL box. And on this home button I have added, I am using some effects that I found in the Properties panel. [Demo] At any time, you can click on Preview to see your Sprout in action. [Demo] And that is how you use buttons in your Sprout.