This post is a simple tutorial that should give you a good grasp on the basics of creating a Sprout widget using Sproutbuilder.

First thing, of course, is creating an account with Sproutbuilder. It’s free and a great addition to your arsenal of online tools.

Once you have an account, you can launch the builder and create a new widget.

Selecting a template

You can choose from a number of starting templates or begin with a blank slate. There are many different templates and you can create widgets of a wide variety of sizes and shapes. For the purpose of this tutorial I am starting with a blank slate in the default size of 360 x 280.

Sproutbuilder Work Space

Above is a screen shot of your workspace. On the left is your toolbar, at the bottom is your page controls, and on the right you can control the properties of selected elements.

Although you have tools to create a basic background design within the builder, I prefer to use graphics software to create the image elements of my widgets (in my case Adobe Photoshop).

Photoshop Screenshot

Using Photoshop I created a new image with the dimensions 360 x 280 and designed the master background. Once you are happy with your background, save it for the web and return to the builder.

Assets

At the top right of your workspace you will see a tab that says Assets. This is where you can upload and deploy images and other resources into your widget. Upload your background image and then drag the thumbnail onto your workspace. Since the background image is already the correct size for your widget you can set it to its original size on the element properties bar. You can tell it is properly positioned if the x, y, and r values are 0 and w and h are 360 and 280 respectively.

Master

If you are going to be using the same background image for every page of your widget, you will want to do the previous step on the master page background. To work with your master pages, click the master pages tab on the pages toolbar at the bottom of your workspace. You will see two blank pages, a foreground and a background. The background controls the background image for every page, and the foreground allows you to include elements that you want on every page. The advantage to the master pages is that you avoid the repetition of adding a background or elements to every page, as well as ensuring that those elements are always aligned properly.

The first page I am creating will serve as the index page. It is the page that the widget begins on and allows the user to navigate to their desired page. For this widget I am going to make the interface look like a computer terminal, and I am choosing to use that interface for all of my pages. Here is the screen PNG image I created in Photoshop to use as a master foreground element for my pages:

Screen

I switch to the pages tab from the master pages and start working on the index. In this case, I am going to create a very simple index using text, though you could use images, buttons, etc. to link to the other pages. To create text you select the text tool on the left-hand bar and you will see a tool set with text box above your page. From here you can select your font, size, and color and enter your desired text. It is important that each link be a separate text element so you can independently link each one to its corresponding page. Once you have created your index you can begin creating your individual pages.

Components options

Sproutbuilder offers a ton of options for components to include in your widget. Above your will see the three different categories expanded: Media, General, and Services. With media you can include images, sound, video, or a jukebox that plays a list of uploaded song files. General includes some cool options such as a countdown, which I will use in this widget, a thumbnail menu of your pages for navigation, a timer that can change pages after a certain amount of time has elapsed, buttons, a slideshow, and more. Services allows you to integrate features of outside services into your widget, such as an RSS feed from a site, which I will use, microblogging services, google forms and charts, etc.

I am going to create two pages for this widget: one that displays the last few posts from Future Majority, and one that counts down to election day. On the pages bar I click new to create a new page. It will automatically be populated with the background and foreground elements from the master. For the countdown I will use the text tool to create the headers and the countdown component set to November 4th. You can set the setting for selected components on the right-hand properties bar. For the Future Majority page I use the news feed component and enter the RSS feed address in the properties bar. To add a component all you have to do is click on it in the components bar.

Properties

Once all of your components are in place you can begin configuring some stylistic options with the properties tools. To link an element to another page or an external URL, select the element by clicking on it, expand the Links & Tracking portion, and choose which page or enter the appropriate URL. You will use this with the navigation elements on the index page as well as with any back to index elements.

I have also included some actions for some of my elements to add to the widget’s style. I want my text buttons to glow on mouse-over and to delay on load. To do this you expand Effects & Animations. You can choose which state you want to add an effect to: default, mouse-over, mouse-down, page-show, or page-hide. You can add effects and animations to any or all of these states. To create the mouse-over glow I select mouse-over and add two effects: brighten and glow. I set the brighten factor to 25 and for the glow I choose a green color slightly lighter than the font and change the blur to 8. You have a lot of flexibility with your effects, so play with them until you get it just right. To get the text to fade-in one line after another I choose page-show and the fade-in effect. With each subsequent line I increase how long the wait after load is to appear.

Pages

The final thing I do when creating a widget is setting the page transitions. You do this from the pages bar at the bottom of the screen. On the right you will see options next to effect. You can choose from none, fade, wipe left, or wipe right. Next to that you can select the transition speed: fast, medium, or slow. For this widget I am just going to use a medium fade.

And that’s it, a basic widget has been created. Let’s see how it looks.


Now this is a very basic widget and a very quick overview. Sprout widgets can be very powerful since they allow you to use Flash, though the Flash design is much more time-consuming and requires some additional skills. I may do a tutorial on creating a Flash-based widget later on, but for now you can create some pretty nice widgets without Flash.

The best way to learn more about the features of Sproutbuilder and widget building is to get your hands dirty and start experimenting yourself. It’s how I learned how to do it, and I’m sure once you start you will come up with a bunch of cool ways to build and deploy Sprout widgets.