Tutorials
SMIL
SMIL, tegenhanger van simpele flash animaties.
Pagina 1
Intro
Wat is precies SMIL?
het staat voor Synchronized Multimedia Integration Language en is bedoeld voor kleine presentaties. Het maakt gebruik van HTML en XML (namespaces).
Met SMIL kan je plaatjes tonen in een bepaald volgorde, achter elkaar. Maar je kan ook video's, muziek en nog meer erbij afspelen.
Ook kan je teksten laten veranderen na een bepaalde tijd.
Dit is natuurlijk ook allemaal te combineren met PHP!
het staat voor Synchronized Multimedia Integration Language en is bedoeld voor kleine presentaties. Het maakt gebruik van HTML en XML (namespaces).
Met SMIL kan je plaatjes tonen in een bepaald volgorde, achter elkaar. Maar je kan ook video's, muziek en nog meer erbij afspelen.
Ook kan je teksten laten veranderen na een bepaalde tijd.
Dit is natuurlijk ook allemaal te combineren met PHP!
Pagina 2
Ik ben al nieuwsgierig..
Om SMIL te gebruiken, heb je Internet Explorer 5.5+ nodig, het werkt helaas niet in FF. In internet explorer zal de eerste keer gevraagd worden om een plugin te installeren.
Verder moet je een klein beetje kennis hebben van XML. Ook zal je altijd de volgende regels erin moeten hebben: (de php-tags staan er voor de kleurtjes)
<?php
<html xmlns:time="urn:schemas-microsoft-com:time">
<head>
<?import namespace="time" implementation="#default#time2">
<style>.time {behavior: url(#default#time2)}</style>
</head>
?>
Verder kan je je pagina gewoon als normaal opmaken, en op de plaats waar de kleine presentatie moet komen, zal je ongeveer zoiets neer moeten zetten:
<?php
<time:seq repeatCount="indefinite">
<div class="time" dur="5s">Hallo, hier komt zometeen een plaatje!</div>
<img class="time" src="http://www.coolcarstyling.nl/autos/16/1.jpg"; dur="5s" />
</time:seq>
?>
Let hierbij vooral op [ dur="3s" ]. Hiermee geef je aan hoe lang dit element weergeven moet worden.
met [ <time:seq ] geef je aan dat de elementen achter elkaar moeten lopen. Als je opent met <time:par geef je aan dat de elementen tegelijkertijd tevoorschijn moeten komen.
Verder moet je een klein beetje kennis hebben van XML. Ook zal je altijd de volgende regels erin moeten hebben: (de php-tags staan er voor de kleurtjes)
<?php
<html xmlns:time="urn:schemas-microsoft-com:time">
<head>
<?import namespace="time" implementation="#default#time2">
<style>.time {behavior: url(#default#time2)}</style>
</head>
?>
Verder kan je je pagina gewoon als normaal opmaken, en op de plaats waar de kleine presentatie moet komen, zal je ongeveer zoiets neer moeten zetten:
<?php
<time:seq repeatCount="indefinite">
<div class="time" dur="5s">Hallo, hier komt zometeen een plaatje!</div>
<img class="time" src="http://www.coolcarstyling.nl/autos/16/1.jpg"; dur="5s" />
</time:seq>
?>
Let hierbij vooral op [ dur="3s" ]. Hiermee geef je aan hoe lang dit element weergeven moet worden.
met [ <time:seq ] geef je aan dat de elementen achter elkaar moeten lopen. Als je opent met <time:par geef je aan dat de elementen tegelijkertijd tevoorschijn moeten komen.
Pagina 3
Verder..
Met welke elementen kan je dit nog meer gebruiken?
nou, je kan het vrijwel met alle elementen gebruiken. Je moet er alleen op letten dat je class="time" en dur="?s" gebruikt..
Muziek kan je met
<embed src="muziek.mp3" class="time" dur="lengtes">
voor gebruiken, maar dit zal waarschijnlijk al beginnen met spelen bij het openen van de pagina.
Ik zal je ook laten zien hoe je PHP erin kan gebruiken:
Dit stukje is ook te vinden op: http://www.coolcarstyling.nl/smil.php
nou, je kan het vrijwel met alle elementen gebruiken. Je moet er alleen op letten dat je class="time" en dur="?s" gebruikt..
Muziek kan je met
<embed src="muziek.mp3" class="time" dur="lengtes">
voor gebruiken, maar dit zal waarschijnlijk al beginnen met spelen bij het openen van de pagina.
Ik zal je ook laten zien hoe je PHP erin kan gebruiken:
<html xmlns:time="urn:schemas-microsoft-com:time">
<head>
<?php echo '<?import namespace="time" implementation="#default#time2">'?>
<style>.time {behavior: url(#default#time2)}</style>
</head>
<body>
<div align="center">
<time:seq repeatCount="indefinite">
<?php
for($i = 0; $i < 5; $i++)
{
echo '<img class="time" src="http://www.coolcarstyling.nl/autos/'.rand(1,10).'/1.jpg" dur="3s" />';
}
?>
</time:seq>
</div>
</body>
</html>
Dit stukje is ook te vinden op: http://www.coolcarstyling.nl/smil.php
Reacties
0