sub1text="mBED Interactor Lite is an authoring tool for adding Java driven multimedia components, called mbedlets, to your Web site. In this tutorial, you'll use mBED Interactor to build the Starfish Coffee Company homepage. Have fun!"
sub1caption=""
</SLOTS>
<PROPERTIES>
LOCATION=13,35
RECT=13,35,25,49
VALUE=1
</PROPERTIES>
</step>
<step NAME=step_2>
<SLOTS>
stepcount=5
topic=Create a New Mbedlet
sub1text=To create a new mbedlet, click the New button in the Main toolbar.
sub1image="2a.gif"
sub1caption=Main toolbar
sub2text=To set the mbedlet's size, you use the mbedlet's properties window. To open the properties window, make sure the mbedlet player is selected in the Players window.
sub2image="2b.gif"
sub2caption=Select the mbedlet player
sub3text=Click the Properties button in the Player toolbar. NOTE: Click on the Layout Window is activate Player toolbar during the tutorial.
sub3image="2c.gif"
sub3caption=Open properties window
sub4text=In the mbedlet properties window, enter 400,450 in the SIZE field.
sub4image="2d.gif"
sub4caption=Set the mbedlet size
sub5text=Close properties window
sub5image="2e.gif"
sub5caption=Close window
</SLOTS>
<PROPERTIES>
LOCATION=29,35
RECT=29,35,42,49
VALUE=2
</PROPERTIES>
</step>
<step NAME=step_3>
<SLOTS>
stepcount=4
topic=Creating the Coffee Cup
sub1text=To create the coffee cup, you'll need to create a sprite player and then add the coffee cup image to the sprite player. To create the sprite player, click the Sprite button in the Player toolbar.
sub1image="3a.gif"
sub1caption=Player toolbar
sub2text=To add the coffee cup image to the sprite player, you'll use the Data button in the next step.
sub2image="3b.gif"
sub2caption=Add Data
sub3text=Click the Data button in the Player toolbar. Locate and select the image, coffee01.gif, then click the + button in the Bitmap section. The coffee cup image is located in the images folder, inside the Tutorial Content folder. Click Done.
sub3image="3c.gif"
sub3caption=Data dialog box
sub4text=A thumbnail of the coffee cup now appears inside the sprite player in the Players window.
sub4image="3d.gif"
sub4caption="Players window"
</SLOTS>
<PROPERTIES>
LOCATION=45,35
RECT=45,35,57,50
VALUE=3
</PROPERTIES>
</step>
<step NAME=step_4>
<SLOTS>
stepcount=2
topic=Showing the Coffee Cup
sub1text=To place the coffee cup image in the Layout window, drag the sprite player from the Players window to the Layout window.
sub1image="4a.gif"
sub1caption=Drag sprite to Layout window
sub2text=In the Layout window, position the coffee cup in the middle of the window.
sub2image="4b.gif"
sub2caption=Position Coffee Cup in Layout window
</SLOTS>
<PROPERTIES>
LOCATION=61,35
RECT=61,35,73,50
VALUE=4
</PROPERTIES>
</step>
<step NAME=step_5>
<SLOTS>
stepcount=3
topic=Preview Your Mbedlet
sub1text=To preview your mbedlet, click the Play button in the Control toolbar.
sub1image="5a.gif"
sub1caption=Control Toolbar
sub2text=The mbedlet playing and the sprite of the coffee cup appears in the runtime window. As you build the remaining parts of your mbedlet, use the Play command to preview your work.
sub2image="5b.gif"
sub2caption=Runtime window
sub3text=To stop the preview, click the Stop button in the Control toolbar. Close the Runtime window.
sub3image="5c.gif"
sub3caption=Control Toolbar
</SLOTS>
<PROPERTIES>
LOCATION=78,35
RECT=78,35,90,50
VALUE=5
</PROPERTIES>
</step>
<step NAME=step_6>
<SLOTS>
stepcount=5
topic=Creating a back drop for the title
sub1text=To create a colored box, you'll need to create a box player and then adjust the color properties. To create the box player, click the Box button in the player toolbar.
sub1image="6a.gif"
sub1caption=Player toolbar
sub2text=To set the box color to brown, click the properties window in the Player toolbar.
sub2image="2c.gif"
sub2caption=Open properties window
sub3text=Click the LINECOLOR field, and select 'brown' from the color picker, then click OK. Click the FILLCOLOR field and select 'brown' from the color picker, then click OK.
sub3image="6c.gif"
sub3caption=Color Picker
sub4text=Checkmark the FILLED property. Close properties window.
sub4image="6d.gif"
sub4caption=Close properties window
sub5text=Drag the box player from the Players window to the Layout window and position the box in the top left corner. You can resize the box in the layout window as well.
sub5image="6e.gif"
sub5caption=Position box in Layout window
</SLOTS>
<PROPERTIES>
LOCATION=95,35
RECT=95,35,107,50
VALUE=6
</PROPERTIES>
</step>
<step NAME=step_7>
<SLOTS>
stepcount=5
topic=Creating the Starfish Coffee Title
sub1text=To create the Starfish Coffee title, you'll use a text player. Click the Text button in the Player toolbar.
sub1image="7a.gif"
sub1caption=Create Text player
sub2text=To specify the title, font size and color, click the Properties button in the Player toolbar.
sub2image="2c.gif"
sub2caption=Open properties window
sub3text=In the value field, enter the title, Starfish Coffee. Make the text bold and set the font size to 24. If you'd like, click the color field, and select a different color. The default color is black. Close the properties window.
sub3image="7c.gif"
sub3caption=Set the text properties
sub4text=To place the text in the Layout window, drag the text player from the Players window to the Layout window. Position the text as shown.
sub4image="7d.gif"
sub4caption=Position text in Layout window
sub5text=In the Layout window, resize the text player so 'Starfish Coffee' is visible.
sub5image="7e.gif"
sub5caption=Resize text box in Layout window
</SLOTS>
<PROPERTIES>
LOCATION=110,35
RECT=110,35,122,50
VALUE=7
</PROPERTIES>
</step>
<step NAME=step_8>
<SLOTS>
stepcount=5
topic=Creating the Starfish Tagline
sub1text=To create the Starfish Tagline you'll use a text player again. Click the Text button in the Player toolbar.
sub1image="7a.gif"
sub1caption=Player toolbar
sub2text=To specify the tagline, font size and color, click the Properties button in the Player toolbar.
sub2image="2c.gif"
sub2caption=Open properties window
sub3text=In the value field, enter the tagline, Your Java Fix by the Sea. Make the text bold and set the font size to 16. If you'd like, click the color field, and select a different color. Close the properties window.
sub3image="8c.gif"
sub3caption=Set the text properties
sub4text=To show the tagline in the Layout window (without making it visible in the runtime window) click the Show in Layout button in the Player Toolbar. Later you'll create a path that animates and makes the tagline visible.
sub4image="8d.gif"
sub4caption=Player Toolbar
sub5text=In the Layout window, resize the text player so 'Your Java Fix by the Sea' is visible and position the tagline as shown.
sub5image="8e.gif"
sub5caption=Position text in Layout window
</SLOTS>
<PROPERTIES>
LOCATION=126,35
RECT=126,35,139,50
VALUE=8
</PROPERTIES>
</step>
<step NAME=step_9>
<SLOTS>
stepcount=4
topic=Animating the tagline along a path
sub1text=To create the path for the tagline, click the Path button in the Player toolbar.
sub1image="9a.gif"
sub1caption=Player toolbar
sub2text=Click the Properties button to open the path player's properties
sub2image="2c.gif"
sub2caption=Open properties window
sub3text=To specify the tagline as the item that travels on the path, choose TEXT2 from the Player pop-up menu. Set the duration to 1500 milliseconds. When you are done, close the dialog box.
sub3image="9c.gif"
sub3caption=Set the text properties
sub4text=Drag the path player from the Players window to the Layout window. Position the path as shown.
sub4image="9d.gif"
sub4caption=Layout Window
</SLOTS>
<PROPERTIES>
LOCATION=141,35
RECT=141,35,153,50
VALUE=9
</PROPERTIES>
</step>
<step NAME=step_10>
<SLOTS>
stepcount=5
topic=Using a Score to Play a Path
sub1text=To create a score to control the path, you'll use a score player. Click the Score button in the Player toolbar.
sub1image="10a.gif"
sub1caption=Player toolbar
sub2text=To view the score window, click the Data button on the Players toolbar.
sub2image="3b.gif"
sub2caption=Add Data
sub3text=To have the path play 3 seconds after the page loads, right mouse click on the PATH1 row and at the 3000 column. Choose PLAY from the pop-up menu.
sub3image="10c.gif"
sub3caption=Score window
sub4text=Close the Score window.
sub4image="10d.gif"
sub4caption=Close score window
sub5text=Open the properties window for the score and check the Autoplay checkbox. Close the properties window.
sub5image="10e.gif"
sub5caption=Open properties window
</SLOTS>
<PROPERTIES>
LOCATION=156,35
RECT=156,35,168,50
VALUE=10
</PROPERTIES>
</step>
<step NAME=step_11>
<SLOTS>
stepcount=4
topic=Creating the animated Starfish
sub1text=To create the animated starfish, click the Sprite button in the Player toolbar.
sub1image="3a.gif"
sub1caption=Player toolbar
sub2text=To add the starfish images to the sprite player, you'll click the Data button in the next step.
sub2image="3b.gif"
sub2caption=Add Data
sub3text=Click the Data button. Select the image, starfish01.gif, then click the + button in the Bitmap section. Repeat this for images starfish02.gif through starfish05.gif. Click done to close the dialog box.
sub3image="11c.gif"
sub3caption=Data dialog box
sub4text=Drag the sprite player from the Players window to the Layout window. Position the sprite as shown.
sub4image="11d.gif"
sub4caption=Layout Window
</SLOTS>
<PROPERTIES>
LOCATION=174,35
RECT=174,35,186,50
VALUE=11
</PROPERTIES>
</step>
<step NAME=step_12>
<SLOTS>
stepcount=4
topic=Animating the Starfish
sub1text=To set the starfish to animate, you'll use the sprite properties window. To open the Properties window, make sure the starfish player is selected in the Players window.
sub1image="12a.gif"
sub1caption=Players window
sub2text=Click the Properties button in the Player toolbar.
sub2image="2c.gif"
sub2caption=Open properties window
sub3text=In the starfish properties window, check mark PLAY FOREVER and AUTOPLAY.
sub3image="12c.gif"
sub3caption=Set sprite properties
sub4text=To set the speed of the animation, enter a number in the FLIPINTERVAL field. Type in 200 for this example. Close the properties window.
sub4image="12d.gif"
sub4caption=Set sprite properties
</SLOTS>
<PROPERTIES>
LOCATION=191,35
RECT=191,35,203,50
VALUE=12
</PROPERTIES>
</step>
<step NAME=step_13>
<SLOTS>
stepcount=5
topic=Creating menu item with hyperlink
sub1text=To create the Company Text, click the Text button in the Player toolbar.
sub1image="7a.gif"
sub1caption=Players toolbar
sub2text=To set the color, font size and value of the text, click the Properties button in the Player toolbar. In the value field, enter Company. Make the text italics and set the font size to 14.
sub2image="13b.gif"
sub2caption=Set the text properties
sub3text=To specify a hyperlink, click the Web tab. Type http://www.mbed.com in the hyperlink field.
sub3image="13c.gif"
sub3caption=Web tab
sub4text=Close the properties window.
sub4image="13d.gif"
sub4caption=Close properties window
sub5text=Drag the text player from the Players window to the Layout window. Position the text as shown.
sub5image="13e.gif"
sub5caption=Layout window
</SLOTS>
<PROPERTIES>
LOCATION=208,35
RECT=208,35,220,50
VALUE=13
</PROPERTIES>
</step>
<step NAME=step_14>
<SLOTS>
stepcount=4
topic=Adding Sound
sub1text=To play an .au file from your mbedlet, click the Sound button in the Player toolbar
sub1image="14a.gif"
sub1caption=Player toolbar
sub2text=To add the .au file to the sound player, you'll click the Data button in the next step.
sub2image="3b.gif"
sub2caption=Add Data
sub3text=Click the Data button. Select the .au file, click.au. The click.au file is located in the sound folder, inside the TutorialContent folder. Click the done button.
sub3image="14c.gif"
sub3caption=Data dialog box
sub4text=Double-click SOUND1 in the Players window to preview the sound.
sub4image="14d.gif"
sub4caption=Players window
</SLOTS>
<PROPERTIES>
LOCATION=225,35
RECT=225,35,237,50
VALUE=14
</PROPERTIES>
</step>
<step NAME=step_15>
<SLOTS>
stepcount=5
topic=Playing the sound
sub1text=In order for the click sound to play, it needs to receive a message that tells it to do the action. To create such a message, select the TEXT3 player and click the Handlers button in the Player toolbar.
sub1image="15a.gif"
sub1caption=Player toolbar
sub2text=Click + to create a new handler. A handler defines the messages that a player responds to, and the actions that it takes when it receives the messages. You'll create a handler that responds when your mouse is over the TEXT3.
sub2image="15b.gif"
sub2caption=Handlers window
sub3text=To make the sound respond when you mouse over it, specify 'mouse enter' in the Message field. Right-click the default MOUSEUP message, and choose MOUSEENTER from the pop-up menu.
sub3image="15c.gif"
sub3caption=Set the message
sub4text=Click the Insert Line button, and then specify the sound as the player that will perform an action. Right-click the default player TEXT3, and choose SOUND1 from the pop-up menu.
sub4image="15d.gif"
sub4caption=Choose the player
sub5text=Specify play as the action. Right-click the default action SHOW, and choose PLAY from the pop-up menu. When you are done, close the window.
sub5image="15e.gif"
sub5caption=Choose the action
</SLOTS>
<PROPERTIES>
LOCATION=241,35
RECT=241,35,253,50
VALUE=15
</PROPERTIES>
</step>
<step NAME=step_16>
<SLOTS>
stepcount=2
topic=Creating more menu items.
sub1text=To create menu items, for "Products, Order, Facts and Contact Us", repeat steps 11 through 15. NOTE: You can copy and paste players, then modify properties.
sub1image="16a.gif"
sub1caption=Layout window
sub2text=Click the Play Button in the Control toolbar to preview your mbedlet
sub2image="5a.gif"
sub2caption=Control toolbar
</SLOTS>
<PROPERTIES>
LOCATION=258,35
RECT=258,35,270,50
VALUE=16
</PROPERTIES>
</step>
<step NAME=step_17>
<SLOTS>
stepcount=1
topic=Mbedlet Complete
sub1text=Congratulations! You have just completed your first Java mbedlet. To learn more about mBED Interactor Lite, see the online user guide.
