Sprout Mobile Rich Media

In this tutorial I am going to show you how to create a Sprout header for your Myspace profile like you can see on my profile at www.myspace.com/_gersh.

What you will learn:

• Create a Sprout and use it as your Myspace header
• Create a custom size slate for your Sprout
• Add assets to your Sprout’s pages
• Create a transparent timer
• Insert into your Myspace code and place at the top of your layout

Lets Begin

1. Once logged into Sprout, click the red text in the top right hand corner of the screen that says “Launch Sprout Builder.”

2. Choose Blank Slate for your page template

3. Add a title, project description and choose your canvas size. Choose any predefined size from the drop down list or set the width and height to whatever size you need. In my case it will be 800px wide and 600px high.

4. Open your asset manager to either upload or add a url to any piece of content you plan on using like pictures, video, graphics etc then hit save. In this case I used 2 pieces of content. The first is a countdown timer .swf movie I downloaded from http://www.istockphoto.com and the second is a video from http://www.youtube.com. I uploaded the timer as a file and copied and pasted the URL of the YouTube video and uploaded to the asset manager.

5. Once your content is added to the asset manager, drag and drop it onto your page. I created 2 pages; one for the timer and the second page for the video. Close your asset manager tray, re size the timer movie and video to 800×600 and position both to X=0 and Y=0 on each page.

6. On page 1 which contains the flash timer countdown movie, you need to create a real timer to tell page 1 that when the timer reaches zero to go to page 2 and begin playing the YouTube video. You can do that by selecting the timer component from the general tab inside the components module.

Now that the real timer is added to page 1 you should click the timer object to select it and set it as transparent. Then use the drop down settings to select how many seconds the timer should run before navigating to the next page of your sprout.

7. Now you have a sprout that is 800×600 with a timer and a video that can be used as your Myspace header. Click the green button in the upper right hand corner named publish. Copy the HTML code that is given to you.

8. Paste the code into a text editor like notepad, word or an email body. Find the URL that contains the piece of flash you need to paste into your Myspace code. The URL ends with an .swf extension, contains a hexadecimal code after load/ and looks like http://farm.sproutbuilder.com/load/nABWy2gIFEhiMSI9. This is the URL snippet you need to paste into your Myspace code.

9. Log into your Myspace profile and click edit profile. You can generate code like this using a site like www.mygen.co.uk. The images below will show you where to place the Sprout .swf URL, how to re size your header table and how to push the body of your Myspace layout down the page to make room for your header at the top.

Appendix. Click the images to enlarge:

Paste your Sprout .swf URL and edit the size of your header

Push the body of your myspace page down. *This is important. It creates room at the top of your layout for your Sprout to live!

This was a guest post by Sprout user, Adam Gershenbaum. Follow him on Twitter.