[HTML] Spotlight effect

[Verwijderd]

hellow,

ik ben voor men eindwerk (reclamevormgeving) met nachtmountainbiken bezig en ben daar dus ook een site voor aan het bouwen. Met dit laatste zit ik een beetje in de knoei.
Het is de bedoeling dat de muiscursor als een soort zaklamp fungeert met als achtergrond een stilstaande beelden van bosachtige omgevingen en als je met de muis zou bewegen hoor je het geluid van een rijdende moutainbike + dan zou er ook wat beweging in de achtergrond moeten komen.
het is dus de bedoeling om echt het gevoel te geven dat je op de fiets door het bos aant rijden bent in de donker.

Hier staat een eerste filmpje, het is dus de bedoeling deze sfeer door te trekken naar de site.

ik heb al liggen foefelen met dreamweaver en fireworks, maar twil niet echt lukken.
dit begint er al wel op te lijken, maar dan spreken we nog niet over geluid en bewegende achtergrondbeelden tijdens het bewegen van de muis......

als er iemand is die me hiermee kan voort helpen, dat zou ongelooflijk bangelijk zijn.

EDIT:
http://users.pandora.be/khermans/tmp/ (internet explorer only)
daar zullen de vorderingen verschijnen

[ Voor 4% gewijzigd door Verwijderd op 16-05-2007 18:52 ]

[Verwijderd]

Waarschijnlijk zou je met Flash een heel end kunnen komen...

[frickY]

Dit doen in DHTML is een ramo. Flash is hiervoor veel beter geschikt.

[SchizoDuckie]

frickY schreef op woensdag 16 mei 2007 @ 18:20:
Dit doen in DHTML is een ramo. Flash is hiervoor veel beter geschikt.

wat is een ramo

[AtleX]

offtopic:
ramo - o == ram, ram + p == ramp. Een simpele typfout dus.

En ik denk dat voor dit soort dingen Flash de aangewezen tool is. Met (D)HTML word dit zeer moeilijk en het is maar de vraag of je het een beetje fatsoenlijk cross browser werkend krijgt.

[ Voor 54% gewijzigd door AtleX op 16-05-2007 18:41 ]

[SchizoDuckie]

AtleX schreef op woensdag 16 mei 2007 @ 18:40:

offtopic:
ramo - o == ram, ram + p == ramp. Een simpele typfout dus.

En ik denk dat voor dit soort dingen Flash de aangewezen tool is. Met (D)HTML word dit zeer moeilijk en het is maar de vraag of je het een beetje fatsoenlijk cross browser werkend krijgt.

Dat ligt echt aan je eigen kennis niveau imo. Je kan dit ook makkelijk in DHTML werkend krijgen met een simpele layer met een gat erin die je verplaatst a.d.h.v. je cursor positie en voor cross browser meuk hebben we tegenwoordig mooie frameworks als Mootools die het lompe werk voor je regelen.

De vraag is imo eerder of het echt wat toevoegt aan de experience van je site of dat het alleen maar irritant is...

[Verwijderd]

Yow Mannen!!!

Bangelijk al die antwoorden, probleem is echter dat Flash chinees is voor mij,
wat ik voorlopig al wél heb kunnen ineenboksen is:

http://users.pandora.be/khermans/tmp/
(OPGELET, ENKEL IE !) Jullie hadden dus gelijk over DHTML
(Enkel de WHAT knop werkt voorlopig)

ik vind het al aardig gelukt en dit is precies wat ik zocht van effect!
nu zou ik nog beweging en geluid moeten kunnen realiseren enkel terwijl de muis beweegt

any ideas?

[ Voor 16% gewijzigd door Verwijderd op 16-05-2007 18:51 ]

[japaveh]

Dit soort oplossingen, die alleen in IE werken, zijn natuurlijk alleen bruikbaar in websites die je ofwel alleen zelf gebruikt ofwel in een omgeving waar bijvoorbeeld alleen IE beschikbaar is.

Voor een algemene site is dit een no-go, tenzij je kunt leven met het feit dat het effect in andere browsers maar half werkt.

[ Voor 15% gewijzigd door japaveh op 16-05-2007 18:59 ]

[Swaptor]

DHTML is voor dit soort toepassingen zoals al gezegd een ramp, ik zou het in Flash proberen aangezien dit hier een uitstekende toepassing voor is.

offtopic:
Wat is 'bangelijk'?

[Noork]

Werkt hier niet in Opera9.

Maar dit soort dingen zijn eigenlijk not done. Een menu op een website moet gewoon duidelijk zijn.

[Verwijderd]

Noork schreef op woensdag 16 mei 2007 @ 19:18:
Werkt hier niet in Opera9.

Maar dit soort dingen zijn eigenlijk not done. Een menu op een website moet gewoon duidelijk zijn.

goh wat raar dat het niet werkt in opera

en smaken verschillen wat helaas nog steeds niet iedereen begrijpt

[martijnve]

Kijk voor de grap eens naar het cpu gebruik als je met je muis door dat ding heen gaat.

spoiler:

Hier @ IE7 (bah) @ Vista 32Bit: 100% op beide cores

[ Voor 42% gewijzigd door martijnve op 16-05-2007 19:33 ]

[Noork]

Verwijderd schreef op woensdag 16 mei 2007 @ 19:26:
[...]
en smaken verschillen wat helaas nog steeds niet iedereen begrijpt

Dit heeft meer met usability dan met smaak te maken.

[Cadezo]

martijnve schreef op woensdag 16 mei 2007 @ 19:33:
Kijk voor de grap eens naar het cpu gebruik als je met je muis door dat ding heen gaat.

spoiler:

Hier @ IE7 (bah) @ Vista 32Bit: 100% op beide cores

ja, idd, ziet omhoog naar ruim 90% hier...

[SchizoDuckie]

oh god je wil dit gebruiken voor je navigatie?

Leuk idee, maar ooit gehoord van Mystery Meat Navigation

[BtM909]

Modbreak:

Mensen, even inhoudelijk op het probleem ingaan, heb je niks toe te voegen of alleen commentaar op CPU gebruik, dan kan je beter naar een ander subforum gaan kijken

[Verwijderd]

Ok, een kleine update, we hebben de site volledig opnieuw aangepakt en de raad van de tweakers volledig opgevolgd... dus nu is de site na hard zwoegen, volledig in flash gemaakt.

hier kan je de website bekijken http://users.pandora.be/khermans/sven/


maar zoals je kan zien, rest er nog een groot probleem, namelijk de lamp volgt de muis wel, maar zijn x-y-waarden verschillen elke keer je refreshed... wat navigeren byzonder moeilijk maakt...

ik heb ettelijke sites doorzocht naar een heldere uitleg over hoe je een object perfect de muis kan doen volgen, en zo hebben we dus de code al min of meer werkend gekregen...

hier is de code van een gigantisch zwart vlak dat zich over de afbeelding beweegt met een transparant centrum...
dit is de setting



en deze code hoort dus bij dat grote vlak...

code:

// Acties Mc, naam is flashlight
onClipEvent (enterFrame) {
if (this.hitTest(_root._xmouse-250, _root._ymouse-250, true)) {
flashlight = _parent.flashlight.getBounds(this);
startDrag (this, false, flashlight.xMin=_xmouse, flashlight.yMin=_ymouse, flashlight.xMax=_xmouse+4500000, flashlight.yMax=_xmouse+100000);
}//xmin,ymin etc aanpassen en klaar
}

onClipEvent(enterFrame){
    Mouse.hide();
    customCursorMC._x = _root._xmouse;
    customCursorMC._y = _root._ymouse;

Voor degene die het interessant zou vinden om te testen/experimenteren?
hier is het volledige flashdocument (2mb)

ik ben echt benieuw naar de fouten, ik ben namelijk beginnende in Flash... en kan er dus alleen maar uit leren.

hartelijk dank bij voorbaat

[ Voor 5% gewijzigd door Verwijderd op 10-06-2007 17:23 ]

[RobIII]

offtopic:
Prodigy , maar besef je wel dat het auteursrechtelijk beschermd materiaal is?

[Verwijderd]

RobIII schreef op zondag 10 juni 2007 @ 18:32:

offtopic:
Prodigy , maar besef je wel dat het auteursrechtelijk beschermd materiaal is?

15 secondjes mag toch zeker? in de itunes Music store heb je ook voorbeeldjes

[ Voor 9% gewijzigd door Verwijderd op 11-06-2007 17:41 ]

[apokalypse]

BtM909 schreef op woensdag 16 mei 2007 @ 19:52:
[modbreak]Mensen, even inhoudelijk op het probleem ingaan, heb je niks toe te voegen of alleen commentaar op CPU gebruik, dan kan je beter naar een ander subforum gaan kijken ;)[/]

mag ik erbij vermelden dat ik het CPU gebruik wel nuttige info vind en dat het wellicht ook de keuze voor flash (of niet) verbeterd?

OT

15 secondjes mag toch zeker? in de itunes Music store heb je ook voorbeeldjes

Ik zou het er niet op wagen.

[ Voor 14% gewijzigd door apokalypse op 12-06-2007 00:14 ]

[BtM909]

apokalypse schreef op dinsdag 12 juni 2007 @ 00:12:
[...]

mag ik erbij vermelden dat ik het CPU gebruik wel nuttige info vind en dat het wellicht ook de keuze voor flash of niet verbeterd?

Nee, want zowel in Flash als DHTML kan je je CPU stressen en dat is nu niet de vraag van TS

[sopsop]

D'r zitten nog wel wat foutjes in je flash. Als ik helemaal naar linksboven ga met de muis, verschijnt er een niet donker stuk in de rechteronderhoek. En de lichtspot kan ik niet helemaal naar de rechterkant bewegen omdat de lichtbundel een stuk naar links verschoven is t.o.v. de mousepointer.

[s441558]

Het lijkt erop de de "lamp" niet overeenkomt met de positie van de muis. Elke keer als ik de site laad, is de witte vlek ergens anders dan mijn muiscursor.

Wat mij daarbij opviel is dat het elke keer op een andere plek t.o.v. mijn muiscursor is. Bijvoorbeeld de eerste keer dat ik op je site kwam stond ie ongeveer 10 cm boven mijn muiscursor. De 2e keer Schuinlinksboven, op ongeveer 5 cm.

Ik heb geen verstand van Flash, maar het lijkt erop dat de vlek op een bepaalde plek begint, terwijl de cursor op een willekeurige plek kan beginnen. Zodra de website (flash) start, dan ligt de plek van de vlek t.o.v. de muiscursor vast.

[Verwijderd]

Ik weet niet precies of dit is wat je zoekt, maar dit staat op DynamicDrive:

http://www.dynamicdrive.com/dynamicindex4/spotlight.htm

[RobIII]

Verwijderd schreef op dinsdag 12 juni 2007 @ 13:58:
Ik weet niet precies of dit is wat je zoekt, maar dit staat op DynamicDrive:

http://www.dynamicdrive.com/dynamicindex4/spotlight.htm

Het is iig niet erg cross-browser
Daarnaast staat deze URL let-ter-lijk in de topicstart

[ Voor 9% gewijzigd door RobIII op 12-06-2007 14:01 ]

[BasieP]

Verwijderd schreef op maandag 11 juni 2007 @ 17:40:
[...]


15 secondjes mag toch zeker? in de itunes Music store heb je ook voorbeeldjes

ik heb wel eens gehoord dat je 30 seconden mag doen. (doet last.fm ook) echter zou ik het wel even nakijken als ik jouw was (simpel mailtje naar BUMA/STEMRA bijv.)

[Verwijderd]

BasieP schreef op dinsdag 12 juni 2007 @ 14:02:
[...]

ik heb wel eens gehoord dat je 30 seconden mag doen. (doet last.fm ook) echter zou ik het wel even nakijken als ik jouw was (simpel mailtje naar BUMA/STEMRA bijv.)

uiteindelijk is het voor een eindwerk, dus hoogstwss zal het maar iets eenmaligs zijn... en niet meer dan 20 mensen zullen het te zien krijgen...

maar ik dank iedereen voor de interesse en de updates, maar het probleem was dus al vastgesteld, maar nu zoek ik de oplossing die ik tot dusver nergens heb gevonden.. er zit een kemel van een fout in die code, maar wie weet waar

alvast erg bedankt voor alle reacties!