Na het maken van de workshop Met de Muis er over stuurde ik een emailtje aan Andrew Burt van Clicker, met de suggestie om het onMouseOver effect een grotere plaats te geven binnen Clicker; ik wees hem erop dat ik binnen een webpagina allerlei dingen kan realiseren, die niet mogelijk zijn binnen Clicker. Zoals het afspelen van een MP3, het toepassen van twee verschillende spraakmachines (twee talen bijv.) binnen één pagina, en natuurlijk het muiserover effect . Hij reageerde heel open en zei, dat ze zich er nog volop over aan het bezinnen zijn waaraan een nieuwe versie van Clicker moet voldoen.
Daarnaast deed hij een mogelijkheid aan de hand om een Mp3 af te spelen in een Clicker grid. Daarop voortbordurend en experimenterend, bleek dat allerlei dingen binnen te halen zijn in een grid, zolang je maar niet meer dan één webpagina in het grid opneemt. Je kunt je afvragen ,waarom je de moeite zou doen, waarom niet gewoon vanuit de browser, Internet Explorer werken. Het enige voordeel is dat Clicker een eigen leeromgeving is met zijn eigen Verkenner, opgeslagen grids zullen niet gauw zoek raken en zijn makkelijk met binnengesloten webpagina's op te roepen. Het nadeel is, dat naast het toch al bewerkelijke maken van de webpagina ook de grid nog gemaakt moet worden; toegegeven, veel werk is dat niet, maar toch weer een extra stap. In feite wordt Clicker 4 zo nu als een offline browser gebruikt, die dan wel het voordeel heeft dat de grootte van de getoonde pagina configurabel, aan te passen is. Hoe doe je het?
Een belangrijke uitbreiding van Clicker 3 naar 4 was het toepassen van de tekstbox en het wegschrijven van Clicker documenten als .htm, als webpagina; wat ze ook buiten het programma leesbaar maakt. En makkelijker te converteren. We gaan nu even laten zien hoe we een Textbox met een Mp3 bestand in een grid plaatsen. Bij opening van de grid zal het mp3 bestand automatisch afspelen. Straks laat ik zien hoe je de webpagina maakt voor deze tekstbox.
We beginnen met File New Grid. We krijgen het volgende menu te zien; voor de helderheid kies ik voor No Cells.
In het lege blauwe grid gaan we de cel plaatsen, de textbox in dit geval. Klik Grid, Insert, Insert Text Box.
Je ziet dat het tekstbox een eigen menu heeft, we treden daarover nu niet in details; wel zie je de mogelijkheid een bestand te openen. We openen het bestand MP3play.htm, dat we eerder al in de nieuwe map test hebben geplaatst. Of een ander zoals Koekplay.htm; zie onder.
We hebben Mp3play.htm gevonden en geplaatst, het ziet er zo uit; maar we zijn nog niet klaar. Dat kun je o.a. zien aan de stippellijn rond het tekstvak.
We moeten het textbox sluiten en opslaan door op een lege plek in het grid te klikken. Het eigen textbox menu verdwijnt nu weer; je hoort het mp3 bestand gelijk spelen.
Oké, dat is gebeurd. Maar we hadden eerst natuurlijk al de MP3play.htm gemaakt. Als hier geen zin meer in hebt en met een kant en klare pagina wilt werken moet je dit koekoek.mp3 (rechtsklik, doel opslaan als) en deze htm pagina Koekplay.htm downloaden.
Let op: Plaats zowel het htm bestand als het mp3 in dezelfde map, als waarin het grid staat.
Toch is het heel eenvoudig; je hoeft eigenlijk alleen de naam van het bestand zelf aan te passen; i.p.v. Koekplay.htm wolfplay.htm of zo, naar het mp3tje dat je gebruikt en daarmee overeenstemmend het roodgemaakte, de naam van het mp3 bestandje. Zo kun je aan elke grid een eigen mp3 koppelen (bewerk bij voorkeur in een teksteditor als Kladblok of Metapad).
<HTML>
<HEAD><TITLE>Webmonkey Embedded Streaming Media Player (IE)</TITLE>
</HEAD>
<BODY scroll="no">
De MP3 Player speelt een mp3 af.
<BR>
<OBJECT
ID="mediaPlayer"
CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
STANDBY="Loading Microsoft Windows Media Player components..."
TYPE="application/x-oleobject">
<PARAM NAME="fileName" VALUE="koekoek.mp3">
<PARAM NAME="animationatStart" VALUE="true">
<PARAM NAME="transparentatStart" VALUE="true">
<PARAM NAME="autoStart" VALUE="true">
<PARAM NAME="showControls" VALUE="false">
</OBJECT>
<BR>
</BODY>
</HTML>
Als je graag controle wilt over je geluidsfile, wil kunnen pauzeren of stoppen verander dan <PARAM NAME="showControls" VALUE="false"> in
<PARAM NAME="showControls" VALUE="true">
Hier vind je het.
Deel twee gaat over het gebruik van Ms Agent en javascripts in een textbox.