windows-like interface

[studio2]

Ik heb nu even geen toegang tot een ftp server, dus ik kan helaas geen schetsjes voor mijn nieuwe website laten zien (misschien later). Maar ik zal het even proberen uit te leggen.

Dit is de bedoeling:
Zodra je in het menu op een icoon klikt open je een nieuw venstertje, dit venstertje is niet beeld vullend. Nu wil ik gaan realiseren dat de vensters in willekeurig volgorde over elkaar heen kunnen komen staan. Dus, het ene moment ligt schermpje 2 bovenop, en als je klikt op schermpje 2 (welke er nog half onderuit steekt) komt schermpje 2 bovenop te liggen.

Hoe ga ik dat aanpakken?

(ik ga toch even die schetjes proberen op te loaden, want ik krijg het zo niet goed uitgelegd =) )

[studio2]

De schetsjes:


http://www.spiegel.nl/schets_pim/prev1.jpg

http://www.spiegel.nl/schets_pim/prev2.jpg

http://www.spiegel.nl/schets_pim/prev3.jpg

http://www.spiegel.nl/schets_pim/prev4.jpg

http://www.spiegel.nl/schets_pim/prev5.jpg


Ik hoop dat mbv de schetjes mijn vraag iets beter te begrijpen is.

Alvast bedankt ;)

[Flashgirl]

Ik neem aan dat de venstertjes binnen je Flashmovie zelf moeten opkomen (dus geen aparte browserwindowtjes moeten zijn)? Ik verplaats de topic daarom even naar het ActionScript forum.

[studio2]

Ik neem aan dat de venstertjes binnen je Flashmovie zelf moeten opkomen (dus geen aparte browserwindowtjes moeten zijn)? Ik verplaats de topic daarom even naar het ActionScript forum.


Dat klopt ja,
maar ik ga er eigenlijk van uit dat het ook is op te lossen met movieclips oid.
Maar nu hier maar staan.

[Gerrit55]

met swapdepth kun je een mc naar voren of naar achteren zetten

Voorbeeld (http://www.ol55.nl/flash/swapdepths.swf)
fla (MX) (http://www.ol55.nl/flash/swapdepths.fla)

[studio2]

met swapdepth kun je een mc naar voren of naar achteren zetten

Voorbeeld (http://www.ol55.nl/flash/swapdepths.swf)
fla (MX) (http://www.ol55.nl/flash/swapdepths.fla)

Tnx, ik hoop dat het hier mee gaat lukken. Ik ga de site eerst maar eens bouwen.

Als iemand nog andere oplossingen heeft zijn die ook heel erg welkom ;)

[theFlashWizard]

dat is iig waarmee het altijd wordt gedaan.. maar window interfases zijn ook niet echt orginele ideeen.. maja..

[studio2]

dat is iig waarmee het altijd wordt gedaan.. maar window interfases zijn ook niet echt orginele ideeen.. maja..


Nee, maar wel passend in dit concept.
Bovendien kan ik niet zeggen dat ik het ooit eerder op een website heb gezien :S

[studio2]

Nog even een vraagje over het script:
In het script zou ergens moeten staan dat bij het terug op de achtergrondplaatsen van de mc, de mc achterstevoren word afgespeeld..

waar staat dit? en hoe kan ik het uitzetten?

Stage.scaleMode = "noScale"

stop()

scherm1.onRelease = scherm2.onRelease = scherm3.onRelease = function() {
if (this.zoomed) {
this.onEnterFrame = function() {
if (this._currentframe > 1) {
this.prevFrame();
} else {
delete this.onEnterFrame;
this.swapDepths(this.oudedepth);
this.zoomed = false;
}
}
} else {
this.oudedepth = this.getDepth()
this.swapDepths(10000);
this.zoomed = true;
this.play();
}

[theFlashWizard]

ergens nog wel.. :P hier je script met uitleg als comment erbij

scherm1.onRelease = scherm2.onRelease = scherm3.onRelease = function() {
//na drukken op die mc's gebeurt er dit:
if (this.zoomed) {
//wanneer de variabele zoomed op true staat doe hij dit:
this.onEnterFrame = function() {
//voer onEnterFrame (dus meestal 12x per sec (12fps)) uit:
if (this._currentframe > 1) {
//wanneer het huidige frame nog boven 1 zit doe dit:
this.prevFrame();
//ga naar het vorige frame
} else {
//anders:
delete this.onEnterFrame;
//stop met het onEnterFrame afspelen van deze functie
this.swapDepths(this.oudedepth);
//wissel van diepte
this.zoomed = false;
//zet de variabele zoomed of false
}
}
} else {
this.oudedepth = this.getDepth()
this.swapDepths(10000);
this.zoomed = true;
this.play();
}
}

duidelijk? :)
maar volgens mij had je het ook allemaal gewoon kunne opzoeke in flash help hoor.. want daar staat alles per item besproke..

[studio2]

ergens nog wel.. :P hier je script met uitleg als comment erbij

scherm1.onRelease = scherm2.onRelease = scherm3.onRelease = function() {
//na drukken op die mc's gebeurt er dit:
if (this.zoomed) {
//wanneer de variabele zoomed op true staat doe hij dit:
this.onEnterFrame = function() {
//voer onEnterFrame (dus meestal 12x per sec (12fps)) uit:
if (this._currentframe > 1) {
//wanneer het huidige frame nog boven 1 zit doe dit:
this.prevFrame();
//ga naar het vorige frame
} else {
//anders:
delete this.onEnterFrame;
//stop met het onEnterFrame afspelen van deze functie
this.swapDepths(this.oudedepth);
//wissel van diepte
this.zoomed = false;
//zet de variabele zoomed of false
}
}
} else {
this.oudedepth = this.getDepth()
this.swapDepths(10000);
this.zoomed = true;
this.play();
}
}

duidelijk? :)
maar volgens mij had je het ook allemaal gewoon kunne opzoeke in flash help hoor.. want daar staat alles per item besproke..

Haha, heel erg bedankt voor je uitleg ;)
maar nu weet ik nog niet wat ik wilde weten:

wat moet in aanpassen om te zorgen dat de mc niet achterstevoren wordt afgespeeld?

ik heb this.prevFrame(); al een keer vervangen door stop(); maar dat werkte niet [V]

[theFlashWizard]

je wilt niet dat hij steeds n frame trug gaat.. dat doet hij nu onEnterFrame.. gok is wat je er dan uit zou moeten halen.. ;)

[studio2]

je wilt niet dat hij steeds n frame trug gaat.. dat doet hij nu onEnterFrame.. gok is wat je er dan uit zou moeten halen.. ;)


Stage.scaleMode = "noScale"

stop()

scherm1.onRelease = scherm2.onRelease = scherm3.onRelease = function() {
if (this.zoomed) {
this.swapDepths(this.oudedepth);
this.zoomed = false;
} else {
this.oudedepth = this.getDepth()
this.swapDepths(10000);
this.zoomed = true;
this.play();
}

zo dan? anders weet ik het echt niet :#

[studio2]

ja het werkt!
(tenmiste, nadat ik this.play() er ook nog heb uitgehaald)

he maar bedankt iig ;)

[theFlashWizard]

goed gedaan! :)
de meeste komen er niet uit als ik het zo uitleg en zeg gok is.. :P
maar mooi zo :)

[Thierry]

Hoe maak je je movieclip zo dat als hij al bovenop ligt en je er nog een keer erop klikt dat hij niet weer van diepte veranderd? Enig idee...?

[studio2]

Geen idee Thierry,

ik denk dat wij het zelde willen weten namelijk:


Hoe zorg ik ervoor dat alleen de onderliggende lagen klikbaar zijn?
M.a.w: het scherm dat boven ligt, is niet over zijn geheel aanklikbaar.
Nu is dat wel zo, en daardoor werken buttons in dat bovenste schermpje niet!

(ik hoop dat het duidelijk is)

[studio2]

Hoe maak je je movieclip zo dat als hij al bovenop ligt en je er nog een keer erop klikt dat hij niet weer van diepte veranderd? Enig idee...?


antwoord op jouw probleem..
haal het regeltje "this.swapDepths(this.oudedepth);" weg.


helaas is mijn probleem daar nog niet mee opgelost. ik wil namelijk niet dat het 'actieve venster' wat bovenop ligt dus, als een grote button word behandeld!

heeft iemand de oplossing?

[SaphuA]

Nee, maar wel passend in dit concept.
Bovendien kan ik niet zeggen dat ik het ooit eerder op een website heb gezien :S
Oh jawel :) Binnekort wel ;)
http://www.drewsrestaurant.com/saphua/junk/index.html

Edit: Is nog iets oudere versie met paar kleine bugs/spelfouten, maar tis maar om ff te laten zien he :)

[theFlashWizard]

geef alle vensters standaart namen erachter met n cijfer erachter
enable (_enabled = true) ze allemaal ( dmv een for loop ) bij klikken op 1 van de venster en doe dan this.enabled = false

dus stel je hebt 5 vensters:
A = 5
for(i=1;i<=A;i++){
_root["venster"+i].onRelease = function(){
for(i=1;i<=A;i++){
_root["venster"+i].enabled = true
}
this.enabled = false
}

dacht ik zo uit me hoofd..

[studio2]

geef alle vensters standaart namen erachter met n cijfer erachter
enable (_enabled = true) ze allemaal ( dmv een for loop ) bij klikken op 1 van de venster en doe dan this.enabled = false

dus stel je hebt 5 vensters:
A = 5
for(i=1;i<=A;i++){
_root["venster"+i].onRelease = function(){
for(i=1;i<=A;i++){
_root["venster"+i].enabled = true
}
this.enabled = false
}

dacht ik zo uit me hoofd..


ik begrijp alleen niet hoe ik dit script dan moet toepassen icm het andere script...!

[Gerrit55]

goh wat een verhaal over swapdepths, mijn as was een voorbeeld op een eerder probleem met detphs en tweens afspelen van een MC.

Binnen een MC kun je een eigen variabele aanmaken.
this.zoomed == true als je mc op de voorgrond staat.
this.oudedepth == de depth waar die oorspronkelijk vandaan kwam, zou je hem weer terug willen zetten

als je dus doet;

uniekediepte = 10000;

mc.onRelease = function() {
if (this.zoomed) {
// zodra je hier komt staat je MC op de voorgrond, dus kun je hier je actie zetten
mc2.gotoAndPlay(framenummer);
// of
getUrl("start.htm", "_blank")
} else {
// de mc staat niet op de voogrond dus op de voorgrond zetten
this.oudedepth = this.getDepth(); // bewaar de oude waarde
this.swapDepths(uniekediepte++); // zet mc op voorgrond en verhoog uniekediepte voor een evt. andere mc
this.zoomed = true; // geef aan dat je mc nu bovenaan staat
// als je nog andere acties wilt doen kun je dat hier zetten
this.play();
}
}


het zichtbare deel van een mc op een lager level is wel klikbaar, maar niet als ie bedekt is door een mc op een hoger level.

[studio2]

goh wat een verhaal over swapdepths, mijn as was een voorbeeld op een eerder probleem met detphs en tweens afspelen van een MC.

Binnen een MC kun je een eigen variabele aanmaken.
this.zoomed == true als je mc op de voorgrond staat.
this.oudedepth == de depth waar die oorspronkelijk vandaan kwam, zou je hem weer terug willen zetten

als je dus doet;

uniekediepte = 10000;

mc.onRelease = function() {
if (this.zoomed) {
// zodra je hier komt staat je MC op de voorgrond, dus kun je hier je actie zetten
mc2.gotoAndPlay(framenummer);
// of
getUrl("start.htm", "_blank")
} else {
// de mc staat niet op de voogrond dus op de voorgrond zetten
this.oudedepth = this.getDepth(); // bewaar de oude waarde
this.swapDepths(uniekediepte++); // zet mc op voorgrond en verhoog uniekediepte voor een evt. andere mc
this.zoomed = true; // geef aan dat je mc nu bovenaan staat
// als je nog andere acties wilt doen kun je dat hier zetten
this.play();
}
}


het zichtbare deel van een mc op een lager level is wel klikbaar, maar niet als ie bedekt is door een mc op een hoger level.


Ja bedankt hiervoor, het werkt prima, maar niet zoals ik wil. Ik zal het even zo duidelijk mogelijk uitleggen.

Mijn fla bestaat uit enkele venstertjes, nl profiel, portfolio en contact.
Wat ik zou willen: Als je op een venstertje klikt, dat half achter een ander venstertje verscholen staat, dat het dan naar voren komt.
(tot zover werkt je script 101%)
Maar dan:
In al deze venstertjes (elk venstertje is een movieclip) zitten ook buttons (bijvoorbeeld een kruisje rechtsboven om het venstertje af te sluiten). Helaas zorgt je script, en ook het script van theFlashWizard ervoor dat de movieclip veranderd in één grote button.
En daardoor werken alle andere knoppen (in de movieclip) niet meer.

Dus waar ik naar opzoek ben is dit:
Het bovenliggende venster is NIET aanklikbaar, dit werkt dus gewoon als iedere ander mc.
De venstertjes die daar onder liggen, (en er half onderuit steken) zij WEL klikbaar. Als je hier op klikt, komt dit scherm naar de voorgrond. Vanaf dat moment is dit scherm NIET MEER aanklikbaar. Het scherm wat zojuist op de voorgrond stond, is naar achteren verschoven, en functioneerd NU WEL als één grote button.


Ik hoop dat het duidelijk is, en ik begrijp heel goed dat ik hier misschien wel het onmogelijke sta te eisen ;) daarom ben ik heel erg blij met alle hulp die ik van jullie krijg en als het niet blijkt te kunnen moet ik misschien maar op zoek naar een andere oplossing... :)

[theFlashWizard]

zet het hele venster in 1 mc, maak van het achtergrond figuur (ter grootte van het totale venster) ook een mc en zorg dat je daarmee dan het complete venster mc kan slepen..
ik maak wel ff n voorbeeldje..

[Gerrit55]

zet het hele venster in 1 mc, maak van het achtergrond figuur (ter grootte van het totale venster) ook een mc en zorg dat je daarmee dan het complete venster mc kan slepen..
ik maak wel ff n voorbeeldje..

De eerste functie die op de MC staat is:
mc.onrelease = function() // voor swapdepths
op een mc.bg.onrelease reageert flash dus niet

[theFlashWizard]

dan zal je die ook moete laten reageren op de achtergrond..

of mischien kun je de hele onRelease in een functie neerzetten.
Alle vensters bij hun onRelease die functie laten uitvoeren. in die functie staat dan ook wannneer je op mij klikt verwijder mijn onRelease. Dit zou der voor kunnen zorgen dat de algemene onRelease functie tijdelijk verdwijnt en dat de buttons in het venster gaan werken.
ook moet je dan instellen dat als je dan op het volgende venster klikt de oude weer de oude onRelease krijgt door die weer gelijk te maken aan die functie..

is dit n btje n begrijpbaar verhaal geworde? :$

dat iedereen behalve mij verhaal in 1 algemene onRelease functie doe je door al je vensters de onRelease te geven in een for loop en dan met this de onRelease weer te verwijdere..

[studio2]

dan zal je die ook moete laten reageren op de achtergrond..

of mischien kun je de hele onRelease in een functie neerzetten.
Alle vensters bij hun onRelease die functie laten uitvoeren. in die functie staat dan ook wannneer je op mij klikt verwijder mijn onRelease. Dit zou der voor kunnen zorgen dat de algemene onRelease functie tijdelijk verdwijnt en dat de buttons in het venster gaan werken.
ook moet je dan instellen dat als je dan op het volgende venster klikt de oude weer de oude onRelease krijgt door die weer gelijk te maken aan die functie..

is dit n btje n begrijpbaar verhaal geworde? :$

dat iedereen behalve mij verhaal in 1 algemene onRelease functie doe je door al je vensters de onRelease te geven in een for loop en dan met this de onRelease weer te verwijdere..


Ik geloof dat ik je een heel klein beetje begrijp :) Ik zal het nog eens 2 keer over lezen misshcien helpt dat, maar dan nog is mijn as kennis nog niet zodanig dat ik jouw verhaal hierboven zou kunnen toepassen.

Hoe zou ik die functie moeten maken zoals je die in de eerste paar regels beschrijft?

[Gerrit55]

uniek = 100;

// titels instellen
window1.titelbalk.titel.text = "Portfolio";
window2.titelbalk.titel.text = "Profiel";
window3.titelbalk.titel.text = "Contact";

/*
// action op de titelbalk : klikken, dan kun je de mc slepen
// (alleen indien op voorgrond)
on (press) {
startDrag(this._parent)
}
on (release) {
stopDrag()
}
*/

function verwissel (window) {
// Alleen uitvoeren als de window NIET op de voorgrond staat
if (!window.opvoorgrond) {
// depth bewaren
window.oudedepth = window.getDepth()
// omwisselen
window.swapdepths(uniek++);
// staat nu op de voorgrond
window.opvoorgrond = true;
// animatie window 2x zo groot maken
window.onEnterframe = function() {
if (window._xscale >200) {
window._xscale = 200;
window._yscale = 200;
// wis je oEF
delete window.onEnterFrame;
// wis je onRelease, zodat je andere mc's in je window werken
delete window.onRelease ;
} else {
// window vergroten
window._xscale += 20;
window._yscale += 20;
}
}
}
}

// zet voor alle MC's de functie onRelase op de functie verwissel
window1.onRelease = window2.onRelease = window3.onRelease = function() {
verwissel(this);
}

// de mc binnen window om je window te sluiten of terug te zetten naar het oude formaat
window1.sluit.onRelease = window2.sluit.onRelease = window3.sluit.onRelease = function() {
mc = this._parent;
// alleen uitvoeren als de mc op de voorgrond staat
if (mc.opvoorgrond) {
mc.swapDepths(mc.oudedepth);
mc.opvoorgrond = false;
// mc weer verkleinen tot org. grootte
mc.onEnterFrame = function() {
if (this._xscale <= 100) {
this._xscale = 100;
this._yscale = 100;
delete this.onEnterFrame ;
// functie onRelease herstellen
this.onRelease = function () { verwissel(this); }
} else {
this._xscale -= 20;
this._yscale -=20;
}
}
}
}


Voorbeeld (http://www.ol55.nl/flash/windowswap.html)
Fla (http://www.ol55.nl/flash/windowswap.fla)

[SaphuA]

Hey ol55,
Dat ziet er al netjes uit :)
Er zijn nog een paar kleine dingetjes wat ik persoonlijk zou veranderen:
- Je kunt beter de achtergrond van een window ook een knop maken, zodat je er niet doorheen kunt klikken. Dan zorg je gewoon dat deze geen muiscursor gebruikt zodat het een normaal veld lijkt.
- Het is minder mooi als je de titelbalk en het X-knopje ook meescaled. De titelbalk zou eigenlijk alleen horizontaal mee moeten vergroten, maar de text en verticaal moet gewoon gelijk blijven.

Kijk nog maar eens goed naar mijn site, daar zie je dat eigenlijk alleen de text/achtergrond volledig scaled (Dit is wel een oude versie btw, dus niet schikken als het er niet mooi uitziet of als er spelfouten inzitten ;)):
http://www.drewsrestaurant.com/saphua/junk/index.html

[studio2]

Ik vind het werkelijkwaar een schitterend script, en het werkt ook nog mooi, maar ik heb er niks aan.

het script wat ik zoek is waarschijnlijk heel simpel.

Eerst moet er namelijk gechecktworden of het schermpje op de voorgrond staat:
ja? dan kun je er niet op klikken
nee? dan kun je er op klikken. Als je dat doet gaat het schermpje naar de voorgrond.

Tegen het schermpje wat net op de voorgrond stond, moet verteld worden dat het terug naar de achtergrond moet, en dus weer klikbaar word.


Zoiets, en verder niets, geen geresize, maar hoe ik dit moet waarmaken weet ik niet [V]

[SaphuA]

Studio2, 99% van wat je nodig hebt zit al in de source van ol55...

[studio2]

Studio2, 99% van wat je nodig hebt zit al in de source van ol55...


Dit script gaat uit van 1 en dezelfde mc die 3x gebruikt word.
Hoe pas ik dit script toe op 3 verschillende mc's ??

[studio2]

Even ter verduidelijking.

Eerder al hadden we dit script

Stage.scaleMode = "noScale"

stop()

scherm1.onRelease = scherm2.onRelease = scherm3.onRelease = function() {
if (this.zoomed) {
this.swapDepths(this.oudedepth);
this.zoomed = false;
} else {
this.oudedepth = this.getDepth()
this.swapDepths(10000);
this.zoomed = true;
}

Dit script is zeer eenvoudig, en doet precies wat ik wil, op 1 ding na: Ook het venster op de voorgrond is klikbaar waardoor onderliggende buttons niet meer werken.

Het enige wat dus toegevoegd hoeft te worden is een functie dit dit alles disabled als this.zoomed = true..

maar hoe?

[Gerrit55]

- Maak een button met alleen hitvlak ter grootte van je mc
- In je MC plaats de button over je mc heen en geef instancenaam "button"

As vervangen

_root.onLoad = function() {
// welk scherm staat op de voorgrond
scherm3.button._visible = false;
}
scherm1.button.onRelease = scherm2.button.onRelease = scherm3.button.onRelease = function() {
mc = this._parent; // bv. mc == "scherm1"
mc.oudedepth = mc.getDepth()
mc.swapDepths(10000);
// Alle andere scherm klikbaar maken
for (i=1; i<4;i++) {
_root["scherm" + i].button._visible = true;
}
// Behalve diegene die nu op de voorgrond staat
this._visible = false;
}



Hierme kun je alleen klikken op de MC's die NIET op de voorgrond staan,
als je erop klikt wordt die button uitgeschakeld en alle andere ingeschakeld

[studio2]

- Maak een button met alleen hitvlak ter grootte van je mc
- In je MC plaats de button over je mc heen en geef instancenaam "button"

As vervangen

_root.onLoad = function() {
// welk scherm staat op de voorgrond
scherm3.button._visible = false;
}
scherm1.button.onRelease = scherm2.button.onRelease = scherm3.button.onRelease = function() {
mc = this._parent; // bv. mc == "scherm1"
mc.oudedepth = mc.getDepth()
mc.swapDepths(10000);
// Alle andere scherm klikbaar maken
for (i=1; i<4;i++) {
_root["scherm" + i].button._visible = true;
}
// Behalve diegene die nu op de voorgrond staat
this._visible = false;
}



Hierme kun je alleen klikken op de MC's die NIET op de voorgrond staan,
als je erop klikt wordt die button uitgeschakeld en alle andere ingeschakeld


Het script ziet er werkelijk heel goed uit, maar het lijkt niet te werken.

Ik heb boven alle 3 de schermpjes een button met alleen een hitvlak gemaakt > instance naam: button

het complete script zoals hierboven geplakt in het framescript van de movie (dus niet de mc)

wat doe ik verkeerd?

[Gerrit55]

Voorbeeld (http://www.ol55.nl/flash/windowswap2.html)
FLA (http://www.ol55.nl/flash/windowswap2.fla)

[studio2]

Voorbeeld (http://www.ol55.nl/flash/windowswap2.html)
FLA (http://www.ol55.nl/flash/windowswap2.fla)


Dat lijkt toch idd het script te zijn wat ik nodig heb :)
ik ga het later vandaag uitproberen! Heel erg bedankt!!!