Platypus Web Builder

What is the Web Builder?

The Platypus Web Builder is really three tools in one.

1. A children’s story writer
2. A presentation medium for education or business
3. A profession web site development tool

Underneath it all it develops web pages but that is only important if you plan to place your work on the Internet or an intranet. For those developing stories, school projects or presentation it doesn’t matter how it works as long as it does what you want it to do.

Flexibility is one of the beauties of the Web Builder. You only need to learn one package to develop skills in three different areas of multimedia.

What are its limitations?

You might think that being based on web pages is very restrictive. Common limits normally associated with web page development are:

1. Inability to use sound or video effectively
2. Inability to place images and text were you want them
3. Limited behaviours
4. Poor compatibility between browsers
5. Restricted to page turning interfaces.

Platypus Web Builder removes these restrictions

by automatically calling into play the advanced abilities of Dynamic HTML and JavaScript. As a user, you are blissfully unaware of the complex programming that Platypus is building into your pages, but with a few click of the mouse you can create abilities that would send experience web developers running for cover.

Because only one of the possible uses of the Web Builder is building for the Internet, Platypus does not need to concern itself with the limits of the web.

- If you are developing an animated adventure, or a business presentation, you will happily include video and voice over and all-manner of objects without regard for other people's browsers or slowness of connections.
- If you are developing for the Internet you will need to limit yourself to safe features that work well on every platform, but on several sites you may have already seen a warning such as, "This site is best viewed with IE5 or later". Now you will know why.

Microsoft Internet Explorer ® 5.x (IE5) is freely available from Win95, and is included on all windows machines of Win98 or later (even if you use a different browser). Because IE5 is so ubiquitous and so powerful, Platypus has set about releasing its power to you. Platypus will build DHTML and JavaScript for you automatically and enable you to include

- Flash
- Shockwave
- Java
- Sound
- Video
- CGI

and more…….

Is Platypus Web Builder like any other package?

You can make comparisons between

- Platypus and story writers
- Platypus and presentation tools
- Platypus and Web development tools

BUT no other package draws all of these things together with a clear focus on the needs of education and small business. Platypus puts the complex behaviour that you want at your fingertips. Platypus is your expert, producing professional output from novice users.

LESSON ONE

How to write a multimedia story.

To start a new story

Open the Platypus Web Builder (PWB) by selecting it from the program menu or double clicking the PlatypusWeb Builder icon.

Start a new page by selecting File>New from the window menu or clicking the page icon on the tool bar.

Click the 'three dot browse button' on the far right and navigate to your way into 'inside' your work folder and press OK.

Windows Tip To make a new folder, place the mouse pointer in the file window click the right mouse button select New>Folder from the mouse menu rename your folder 'Story' or whatever double click on it to open click on select to make this your building folder

Platypus Tip You may have noticed that Platypus suggested the name "index.html" for the first page. You could have changed the name but by accepting it you have gained a great advantage. Platypus knows that this is home page and will offer you automatic links to it from any image you place on subsequent pages.

Your page is completely blank. Most children begin with a story that follows one page after the other, like a book. Stories like this will want [BACK] [HOME] [NEXT] buttons and a nice background. We can set these things up once and store them as a template. Whenever we start a new page we select the template and everything is created for us.

Creating a template.

(When creating a template all steps are optional.)

STEP ONE Select a background

You can chose a background from the media list in the left hand panel by clicking on Backgrounds to opening that list. You will find three categories of backgrounds

- scenes
(Photographs of scenes)
- tiles
(Textures)
- backdrops
(Designs for formal presentations)

Platypus Tip You can add to this list by adding folders or files to the clipart folder

Choose tiles and click on creamcanvas.jpg. The tile will be displayed as a preview image at the bottom of the panel. Clicking on the small image will place it automatically into your background.

Design Tip You can have very complex backgrounds but they are hard to work with. It is often better to have a plain colour or even just white. This leaves you complete freedom to use other colours for images and text without making your screen difficult to read, ugly or busy

STEP TWO Placing buttons

Platypus has several special buttons for you to use. These buttons already have rollover states and actions. You can find then in the objects list on the left hand side.

Select a [NEXT] button (eg

Green Next) from this set of objects.

Double click the button on the object menu and it will jump into your page.

To place it anywhere on the page click on it once and notice the little square handles that appear on the corners and sides.

While the handles are showing select Position>Absolute from the main menu or just press the drawing pin on the tool bar. This lets you drag the button to wherever you want on the screen.

In a similar way select and place [BACK] and [HOME] and arrange them on the page as shown.

This will be your starting template.

STEP THREE Saving the template

Select File > Save As story.htt . ( Notice the 'Save as type' selection in the Save As Dialog)

Platypus Tip It might be wise now to save the image as index.html again or you run the risk of accidentally saving your new work on the template too.

Creating your home page.

Use this start template to contimue to develop your first/home page.

STEP ONE Removing unwanted buttons

Firstly since this is your first page, get rid of the [BACK] button. Click on the back button and press your DELETE key.

Secondly since this is the home page get rid of the [HOME] button the same way.

STEP TWO Writing a heading

Get a text box by selecting Insert>Text Box from the window menu or clicking the Text Box icon on the tool bar. You will notice a grey outline appear on your screen.

Click inside the box once to display the little handles and drag the box to the centre of the screen. You can use the tiny handles to stretch the box to the required shape.

Click inside the box again to enter the edit mode and type your title. 'Today at School'. Highlight these words with your mouse and select Format > Font… from the window menu or click on the Font icon on the toolbar. Choose a nice font, style, size and colour.

Click way from the textbox to deselect it.

STEP THREE Place a teacher image

Get an image from the Media list by selecting Images which you will find directly under the Backgrounds. Images opens to show images in several categories. Click on People and find ladystanding.gif. Click on this image and it will highlight and appear in the preview area at the bottom of the panel.

Click on the preview and you will see the amazing Platypus Insert image wizard. This wizard can give your simple image a surprising range of abilities. You can just press OK and Platypus will place the image on the screen. You can click on the image and resize her about half her normal size. While she is still selected, free her to be moved anywhere by selecting Position>Absolute or just clicking the pin image on the toolbar. Now you can consider the image as having its own drawing pin that allows you to stick it where-ever you like. Place the teacher under the title on the left hand side.

Click way from the image to deselect it.

STEP FOUR Write the story text

Click the textbox icon again to get a fresh textbox. Click in it once to select it and then drag it to the bottom of the screen. Click in it again to get the text cursor and then type "My teacher asked which animal has the longest neck?"

Click way from the textbox to deselect it.

STEP FOUR Place an invisible image.

The answer to the question is a giraffe. You can place a giraffe image on the screen but leave it invisible until it is required. From the images list open plants and animals. Click on giraffe.gif and then click on its image in the preview area. This time tick the box labeled "make image invisible" and then press OK.

Now you might be surprised to see it appear on the screen, but you are working in the Editor mode. To see what it looks like on a web page select View>Browser Mode or just press the world icon on the toolbar. You will not see it. Return to the Platypus Interactive Editor selecting View>Editor Mode or just press the Platypus icon on the toolbar.

When the giraffe returns, select it by clicking on it and then pin it by selecting Position>Absolute or just click the pin icon on the toolbar. Make it small and place it on the right hand side just under the title.

Click way from the image to deselect it.

STEP FIVE Place the student image

Open the Kids and school folder in the image and click on girlsittingatdesk.gif . Click its preview and study the insert dialogue box. We will attach some complex behaviours to this image.

1. In the section marked "When mouse is over the image " open the selector opposite "Popup another image", and select the giraffe. (the others refer to the home back and next buttons and the teacher). Select giraffe from the popup list.
2. In the section marked " When the image is clicked" click on the radio button opposite "Play a sound file".
3. Type in the name of the sound file you want to record. (you could browse and select an existing sound file, perhaps from the clipart).
4. Click on the sound icon to get the sound recorder.
5. Click on record and say the wards "a giraffe?".
6. click the stop button to stop recording (You have a maximum of 1 minute of recording time.)
7. Select File > Exit on the recorder and save the recording as you exit.
8. Click OK when have finished.

You can pin the girl sitting at the desk and place her where ever you like.

Click away to remove the handles.

STEP SIX Testing your page

Press the world button on the toolbar to see how it works.

Notice that

- the giraffe appears when the mouse rolls over the girl
- the girl speaks when her image is clicked.

You can have many such objects on your page.

Press the platypus icon button to return to the edit mode.

STEP SEVEN Saving your page.

Select File> Save As and save your have as index.html . You will need to over-write the existing file.

Creating another page.

STEP ONE Loading the template.

Select File>New or click on the new page icon on the toolbar.

This time you will find your template in the window. click on story.htt and press OK.

STEP TWO Removing unwanted buttons

Firstly since this is your second page, the previous page is the home page so get rid of the [BACK] button. Click on the back button and press your DELETE key.

Continue developing this page as you like.

Develop all other pages in a similar way.