[Flash] file laten zien als op button wordt geklikt

[QinX]

Beste tweakers,

Ik zit nu op Havo 4 en moet voor informatica een site maken. nu wil ik graag flash hierbij gebruiken.
Ik heb een simpele MP3 speler gemaakt die 2 liedjes afspeeld(1 van de vereisten van de site) maar nu wil ik doormiddel van een button buiten deze flashfile om deze mp3 speler willen kunnen verbergen of laten zien.

dus zo eigenlijk
uit

aan


maar hoe kan ik die in flash of html/javascript regelen?

aub niet te moeilijke code gebruiken aangezien ik nog niet zo geweldig goed ben in het script gebeuren

Als jullie meer willen weten over mijn *ahum* geweldige site of een screenshot willen zien laat het dan even weten. Maar don't expect much voor een eerste poging.

[TERW_DAN]

Als je die knop buiten een flashfile wil hebben dan kun je het makkelijk als volgt doen:
zet de flashfile in een div. Maak een knopje waarmee je de visibility op hidden zet.
Dan wordt het zoiets als dit:

HTML:

<div id=mp3container>Je mp3 dingetje</div>

<button onclick=hideMp3();>klik</button>

<script>
function hideMp3(){
document.getElementById('mp3container').style.visibility = "hidden";
}
</script>

Iets in die richting, hetzelfde kun je dan doen met het weer terughalen, alleen dan gooi je de visibility weer op visible. Dat kun je desnoods ook nog met 1 knopje doen, door een simpel ifstatementje dat checkt of de visibility nu hidden of visible is.

[ Voor 24% gewijzigd door TERW_DAN op 02-11-2007 22:44 ]

[QinX]

weet je hoe ik op google een tutorial kan vinden die verder hier op ingaat? want van javascript wet ik het minste van allemaal

[TERW_DAN]

QinXi schreef op vrijdag 02 november 2007 @ 21:52:
weet je hoe ik op google een tutorial kan vinden die verder hier op ingaat? want van javascript wet ik het minste van allemaal

Dit zijn een paar simpele dingen, heb eigenlijk het meeste al voor je getikt, waarmee je dus weet welke dingen je nodig hebt.

begin eens met zoeken op hoe getElementById werkt, als je dat weet dan ben je al een redelijk eind namelijk. Als je dat weet dan kun je dingen aan het object toewijzen ( = is de toewijzings operator, == de vergelijkingsoperator, haal die niet door elkaar, scheelt je een boel debuggen ).
In dit geval wil je de visibility op hidden zetten, dus zeg je document.getElementById.style.visibility = "hidden".

overigens zie ik nu een foutje, het moet .style.visibility zijn ipv .visibility

Wat ik zelf overigens een makkelijke tool vind is de IEdevtoolbaar in IE, daarmee kun je de objecten namelijk makkelijk terugvinden en ook gelijk attributen toewijzen. Voor Firefox is er firebug, die kan nog veel meer.

[ Voor 37% gewijzigd door TERW_DAN op 02-11-2007 21:59 ]

[QinX]

Wat moet er op de plek van Je MP3 dingetje? moet daar voor mij dan images/MP3.swf?

Ik zie nu dat als ik klik de tekst verdwijnt. Maar deze tekst moet ook weer terug kunnen komen.

[ Voor 37% gewijzigd door QinX op 02-11-2007 22:07 ]

[TERW_DAN]

QinXi schreef op vrijdag 02 november 2007 @ 22:06:
Wat moet er op de plek van Je MP3 dingetje? moet daar voor mij dan images/MP3.swf?

Ik zie nu dat als ik klik de tekst verdwijnt. Maar deze tekst moet ook weer terug kunnen komen.

Waar ik mp3 dingetje heb neer gezet moet je flashobject komen te staan (daar heb je als het goed is de code al wel voor als je die op een html page hebt staan).

Als de tekst verdwijnt dan ben je al een heel eind, want dan wordt het ding op hidden gezet.
Ik zou zeggen, maak een 2e knopje dat het ding weer tevoorschijn haalt. Ik zal je een tip geven, je moet de visibility dan op "visible" zetten ipv hidden. Probeer het eens uit of het je lukt met het stukje code dat hier boven staat (want op die manier leer je gelijk hoe het in elkaar zit, ik kan het wel voorkauwen, maar daar heb je natuurlijk op de langere termijn weinig aan wil je hier vaker gebruik van maken).
Als dat werkt is het makkelijk om het ding zo te maken dat je met 1 knopje kunt hiden en unhiden, maar kijk eens of je het op deze manier aan de praat krijgt.

[QinX]

Bedankt voor de uitleg ik ga eens aan de slag en laat wel weten of het me is gelukt.

Ik heb nu 2 knoppen waarvan 1 hidden doet en de andere visible dus ik ben al halverwege

Edit:
Ik heb het idee dat ik nu iets van if en else moet gebruiken.
If button is hidden then visible
Else hidden

iets in die richting of ben ik nu in de verkeerde taal bezig?

[ Voor 69% gewijzigd door QinX op 02-11-2007 22:22 ]

[TERW_DAN]

QinXi schreef op vrijdag 02 november 2007 @ 22:14:
Bedankt voor de uitleg ik ga eens aan de slag en laat wel weten of het me is gelukt.

Ik heb nu 2 knoppen waarvan 1 hidden doet en de andere visible dus ik ben al halverwege

Edit:
Ik heb het idee dat ik nu iets van if en else moet gebruiken.
If button is hidden then visible
Else hidden

iets in die richting of ben ik nu in de verkeerde taal bezig?

Op de syntax na klopt het heel aardig dus je bent op de goede weg bezig.

Ik zou zeggen, neem bijv. http://www.w3schools.com/js/js_if_else.asp eens door voor een uitgebreide uitleg over hoe je if-statements kunt gebruiken, ze zijn namelijk heel handig.
Maar zal alvast een stukje code geven hoe je het kunt doen.

HTML:

<button onclick="showMp3();">klik</button>
<script>

function showMp3(){
var mp3div = document.getElementById('mp3container');
if (mp3div.style.visibility == "hidden"){
mp3div.style.visibility = "visible";
} 

}
</script>

Wat je dus doet, je kijkt of de style.visibility op hidden staat, zo ja, dan zet je die naar visible. Je maakt een onzichtbare div dus weer zichtbaar.
Ik zou zeggen, probeer de else statement eens te maken (is niet echt moeilijk, maar wil niet alles verklappen, zeker met bovengenoemde tutorial en je vorige knopjes moet dit prima te doen zijn).

Ik heb hier overigens de document.getElementById('mp3container') gedefinieerd als variabele. Dan is het makkelijker hem vaker te gebruiken (en performancegewijs zelfs wat sneller), maar verder maakt het niet veel uit of je mp3div.style.visibility of document.getElementById('mp3container').style.visibility zegt (maar die laatste is natuurlijk veel langer).

[QinX]

gelukt

JavaScript:

<script>

function showMp3(){
var mp3div = document.getElementById('mp3container');
if (mp3div.style.visibility == "hidden"){
mp3div.style.visibility = "visible";
} 

else if (mp3div.style.visibility == "visible"){
mp3div.style.visibility = "hidden";
} 

else{
mp3div.style.visibility = "hidden";
} 

}
</script>
</head>

<body>
<div id=mp3container><object width="120" height="61">
  <param name="movie" value="MP3.swf" />
  <param name="quality" value="high" />
  <embed src="MP3.swf" quality="high" type="application/x-shockwave-flash" width="120" height="61"></embed>
</object></div>

<button onclick="showMp3();">klik</button> 

Ik wil je heel erg bedanken voor het helpen.

[QinX]

alleen nog 1 kleine vraag hoe zorg ik dat de flash file bij het laden van de pagina al hidden is?

[TERW_DAN]

Je zou zelfs die if/else statement nog iets kunne optimizen.
Je wilt namelijk maar 2 dingen. Als hij op hidden staat moet hij visible zijn, staat hij op visible moet hij hidden zijn. Wat je daarom kunt doen is zeggen

HTML:

<script>
function showMp3(){
var mp3div = document.getElementById('mp3container');
if (mp3div.style.visibility == "hidden"){
mp3div.style.visibility = "visible";
}  
else{
mp3div.style.visibility = "hidden";
}  
</script>

Op deze manier zet hij het ding altijd op hidden, als style.visibility niet op hidden staat en staat hij wel op hidden dan wordt hij visible.
Nu maakt het hier niet zoveel uit, maar als je ipv style.visibility style.display gaat gebruiken (die ook wel wordt gebruikt om dingen zichtbaar/onzichtbaar te maken) dan heb je display none, block, inline en nog wat anderen. Om ervoor te zorgen dat je stuk code dan wat meer failsafe is kun je dat op deze manier doen. Stel dat je een stuk code hebt dat ineens iets anders toewijst dan het stukje wat hier boven staat, dan werkt het gelijk niet meer. Als je kijkt of iets hidden is of IETS anders, dan heb je het gelijk allemaal te pakken.

QinXi schreef op vrijdag 02 november 2007 @ 23:07:
alleen nog 1 kleine vraag hoe zorg ik dat de flash file bij het laden van de pagina al hidden is?

Dat is heel makkelijk, zet het in een CSS style als je die gebruikt (visibility: hidden; aan de class toevoegen) of verander

code:

<div id="mp3container">mp3</div>

in

code:

<div id="mp3container" style="visibility:hidden">mp3</div>

Persoonlijk vind ik CSS classes mooier, maar in dit soort kleine dingetjes zijn ze niet echt nodig. Wil je grotere paginas gaan bouwen, dan is CSS wel handig om je in te verdiepen. Het is niet moeilijk en het is zeer krachtig als je het goed gebruikt.

[QinX]

Ik hoor inderdaad overal al dat CSS erg handig is. maar zoals je al zei bij kleine dingen is dit niet nodig en mijn site is nou niet zo heel erg groot dat CSS zo enorm belangrijk is. maar naar aanleiding van deze opdracht voor school wil ik me ook in sites gaan verdiepen en gaan maken dus miss dat in de not so far future ik overstap op CSS

voor de rest ik weet genoeg nu en wil je nogmaals bedanken voor je hulp en het niet alles voor zeggen

[TERW_DAN]

QinXi schreef op vrijdag 02 november 2007 @ 23:26:
Ik hoor inderdaad overal al dat CSS erg handig is. maar zoals je al zei bij kleine dingen is dit niet nodig en mijn site is nou niet zo heel erg groot dat CSS zo enorm belangrijk is. maar naar aanleiding van deze opdracht voor school wil ik me ook in sites gaan verdiepen en gaan maken dus miss dat in de not so far future ik overstap op CSS

Zelf maak ik ook vaak van dit soort korte stukjes html, puur om dingetjes te testen, daar gebruik ik ook geen CSS voor (maar zet gewoon de style attribuut in een tag). Met CSS zeg je heel simpel class="mp3container". Stel je voor dat je 10 paginas hebt met op iedere pagina zo'n mp3 ding, dan moet je 10 keer de style aan gaan geven op de pagina. Wil je dan bijvoorbeeld de breedte veranderen moet je dat 10 keer doen.
Met een CSS file maak je een class aan die je mp3container noemt en daarin definieer je hoe hij eruit moet zien. Wil je dan op 10 paginas het ding verandert hebben, is dat 1 regel in je CSS file. Het enige dat je hoeft te doen is de divjes (of andere elementen) de juiste class te geven.
Maar goed, verdiep je daar gewoon wat in als je een uitgebreidere site wil maken, het zal je zeker van pas komen.

voor de rest ik weet genoeg nu en wil je nogmaals bedanken voor je hulp en het niet alles voor zeggen

Ghehe, het blijft een schoolopdracht natuurlijk iedereen kan copy/pasten maar als je snapt waar je mee bezig bent leer je er nog wat van .