Sevenedge v2 - Edgeworld

[Edgeman]

Onze nieuwe website is klaar, www.sevenedge.be

De website is een visualisatie van de "Sevenedge Edgeworld" waarbij het grafisch design hoog in de vaandel staat. Reis met de mascotte Edgeman doorheen de website en ontdek zo de facetten van ons bureau.

De webstek is volledig in Flash Actionscript 3.0 gemaakt en gebruikt ook Papervision3D. Wat ook uitzonderlijk is, is dat de site zich steeds volledig aanpast aan alle resoluties. Op die manier is het geheel altijd mooi schermvullend voor de gebruiker. Ontdek ook de interactieve elementen in de site!

Wat denken jullie van ons project?

http://flashfocus.nl/images/showcase/edgeworld/edgeworld1.jpg

http://flashfocus.nl/images/showcase/edgeworld/edgeworld2.jpg

http://flashfocus.nl/images/showcase/edgeworld/edgeworld3.jpg

http://flashfocus.nl/images/showcase/edgeworld/edgeworld4.jpg

http://flashfocus.nl/images/showcase/edgeworld/edgeworld5.jpg

[ath92]

Kan het nog duidelijker? Showkees!

[Badr.]

Perfecto. :D
Goed werk word beloond .
In de Showcase er mee!

[MAKR]

van de week al gezien, stond ook op ultrashock.

ik vind hem nog steeds enorm goed, al doet hij me denken aan Neostream Interactive (http://www.neostream.com)

[tijmen_4real]

Mooie vormgeving, invulling en vette animaties.
SHOWCASE!

Leuk, die shooting spaceshuttle bij contact!
Hoe hebben jullie dat 'mannetje' ontworpen ??

[killer141100]

Ik zeg showcase, mooi gedaan!!

[WernerL]

Toen ik naar contact ging crashte FF. :S
***** flashplayer werkt niet meer in konqueror anders gebruikte ik dat wel..
maja, vette site iig.

[theaap]

Ik zeg showcase, mooi gedaan!!

Je kunt wel heel snel zeggen showcase maar , geef ook je mening waarom hem in de showcase wil hebben.

Mooie site, vindt het soms een beetje te druk. Maar het is echt een zeer mooi werkje geworden vindt vooral de toepassing van papervision 3d goed verwerkt.

Greetz

[ath92]

Je kunt wel heel snel zeggen showcase maar , geef ook je mening waarom hem in de showcase wil hebben.


Vind ik hier eigenlijk niet heel erg van toepassing. Natuurlijk moet je normaalgesproken je mening onderbouwen, maar deze site ziet er zó goed uit, dat het wel duidelijk is dat die in de showcase moet.

[killer141100]

Je kunt wel heel snel zeggen showcase maar , geef ook je mening waarom hem in de showcase wil hebben.

Mooie site, vindt het soms een beetje te druk. Maar het is echt een zeer mooi werkje geworden vindt vooral de toepassing van papervision 3d goed verwerkt.

Greetz

voor mij is dit overduidelijk showcase hoor!! als je dit vergelijkt met sommige andere site's in de showcase vind ik deze zeker evengoed of zelfs beter. En waarom haal je mijn post aan?? de 3 eerste reacties staat ook niks van mening in. Maar goed: ik vind de animate erin heel leuk, vlottte site, mooi gemaakt ook het ventje vind ik zeer leuk :p

[radem205]

Dit is misschien wel de mooiste website die ik ooit ben tegengekomen. Mede door de perfecte gebruiksvriendelijkheid in combinatie met een oogstrelend uiterlijk, echt helemaal top. Alles werkt uitstekend en hier en daar zit er een mooi subtiel spelletje cq geinig element in verborgen.

Echt helemaal top dit!! Kan er uren naar kijken:)

[bouke_]

Wat ik vooral erg goed vind aan deze site is de laadtijd. Soortgelijke sites als deze hebben vaak een erg lange laadtijd maar deze gaat lekker snel! Ook de gebruiksvriendelijkheid is erg goed wat soms ook een probleem kan zijn met soort gelijke sites.
SHOWCASE!

[excited]

wow.... showcase!

[Olorin]

Ik vind het eigenlijk niet zo geweldig...

Bij het loading scherm mist het mannetje zijn vingers als het loading bordje "ontploft"
De hoofdpagina is nogal druk, en de aandacht gaat vooral naar het poppetje en de vele felle kleuren onderin, en niet naar de content.
De schaduw/lichtval van het poppetje op de hoofdpagina lijkt niet te kloppen met de grond waarop hij zit. (vooral de onderkant van zijn voeten) Bij "Services" is dit helemaal erg.
De animaties en achtergronden en zo zien er wel mooi uit hoor (y)

[Lukaso]

kom eens met argumenten idd, ik vind het overmatige gebruik van bitmaps en video juist een beetje storend werken.

en waar vind ik al die papervision toepassingen dan?

[Edgeman]

en waar vind ik al die papervision toepassingen dan?De portfolio is volledig PV3D (3D planes die draaien) waarin je kan sorteren op project en klant. Verder zitten er in de site kleine PV3D enhancements zoals bij services is het bord "restricted area" ook real time 3D.

Maw, we hebben enkel PV3D gebruikt om de totaalevaring to versterken, niet als primaire eyecatcher. Het gebruik van video en bitmaps is vooral om te tonen aan onze potentiële klanten waar onze sterkte ligt.

[tijmen_4real]

kom eens met argumenten iddJe kunt wel heel snel zeggen showcase maar , geef ook je mening waarom hem in de showcase wil hebben.Als gebruikers het vanuit hun oogpunt niet nodig vinden om een uitspraak te beargumenteren, is dat ook een compliment voor de maker.
Met maar weinig woorden zeggen dat je iets mooi vindt kan toch ook ?
In dit geval vind ik het duidelijk genoeg, en heb ik niet meer woorden nodig om duidelijk te maken wat ik ervan vind...

Laat iedereen in hun waarde met hun reactie, en houdt het aub. on-topic !!

On-topic: Hoe hebben jullie dat mannetje gemaakt/geanimeerd ??

[Dauntless]

Ik krijg soms een error bij het switchen van pagina:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at be.sevenedge.UI.Main::SimpleEdgeLoader/removeHandler()
at flash.display::DisplayObjectContainer/removeChild()
at be.sevenedge.UI.Main::SimpleEdgeLoader/removeComplete()
at be.sevenedge.UI.Main::SimpleEdgeLoader/frame20()

Het kwam de eerste keer toen ik naar de tv pagina ging en vanaf dan kwam het bij elke pagina switch...

Voor de rest: ERG mooie site !!

[Edgeman]

Ik krijg soms een error bij het switchen van paginaEigenaardig, welke browser en versie van de Flash Player gebruik je?

[Edgeman]

On-topic: Hoe hebben jullie dat mannetje gemaakt/geanimeerd ??Onze Edgeman is volledig gerigged, geanimeerd en getextured in 3Dmax. Daarna uitgerenderd en als transparante flv in de Flash verwerkt.

[Dauntless]

WIN 9,0,115,0 (Debug player)

Is wel niet DE recentste geloof ik, maar met de recentste kan ik in FB 3.5 geen filmpjes in FP afspelen .

[Edgeman]

WIN 9,0,115,0 (Debug player)

Is wel niet DE recentste geloof ik, maar met de recentste kan ik in FB 3.5 geen filmpjes in FP afspelen .Probeer nu nog eens maar eerst de cache legen. Ps, wat is FB 3.5 :) De site krijgt nog af en toe minor updates en tweaks, we hebben nu terug een update online geplaatst.

[ath92]

Ik denk dat Dauntless met FB3.5 Firefox Beta 3.5 bedoelt. Ben het trouwens eens met wat tijmen_4real zegt.

[Tenshu]

Geweldig! Vooral vindt ik de character goed uitgewerkt.

[Dauntless]

Ik denk dat Dauntless met FB3.5 Firefox Beta 3.5 bedoelt. Ben het trouwens eens met wat tijmen_4real zegt.
Jup, sorry, typfoutje! :)

[Ea.Z]

In de Showcase er mee!
SHOWCASE!

Ik zeg showcase, mooi gedaan!!
... maar deze site ziet er zó goed uit, dat het wel duidelijk is dat die in de showcase moet.

SHOWCASE!
wow.... showcase!

So it be: Proficiat :)

[BVG]

zoooo netjes, aleen altijd jammer dat hij net niet perfect loopt kwa animaie, ligt zeker niet aan jouw maar dat sites gewoon niet zwaar kunnen zijn en soms gaan happeren..
echt sommige stukjes zijn zooi mooi :D

Mooi gedaan !

[emin]

erg mooie site!

Het enige wat me opviel is dat wanneer je een plaatje in de portfolio sluit dat dan alle plaatjes opniew aangemaakt worden. Het zou logischer zijn dat hij teruggaat naar zijn plaats en pas opniew alles opbouwt wanneer gestorteerd wordt of een nieuwe sectie wordt gekozen.

Zou je kunnen vertellen met hoeveel man er aan gewerkt is en hoeveel tijd er aan is besteed?

[Edgeman]

Zou je kunnen vertellen met hoeveel man er aan gewerkt is en hoeveel tijd er aan is besteed?Wij werken altijd met kleine teams die goed op elkaar zijn afgestemd.
Art direction, design en non-scripted animaties: Dries
Programmatie, backend, PV3D en scripted animaties: Kris
3D animaties & modelling: Cedrik
Copywriting & usability: Fré

Maar het core team bestond uit 2 man dus.
Doorlooptijd was een week of 5 tussen onze andere projecten door, waarvan 1/4 design en 3/4 programmatie.

[RA8IT]

ik vind hem echt prachtig, mooie animatie 's en zeker ook mooi design.
Echter wat me tegenzit, (moet toch wat verzinnen) is hetgeen wat al eerder genoemd is:
De schaduw/lichtval van het poppetje op de hoofdpagina lijkt niet te kloppen met de grond waarop hij zit. (vooral de onderkant van zijn voeten) Bij "Services" is dit helemaal erg.)
En dat er altijd van die scroll balken zijn, heb hem nou ook nog is bekeken op een 30inc scherm (ook erg mooi dan, toch iets anders [^] ) maar zelfs daar weer die scroll balken.
VOORBEELD (http://img390.imageshack.us/my.php?image=afbeelding1qi4.png)
Terwijl die zich verder mooi aan het scherm formaat aanpast..

Maar dit is 1 van de sites waar ik het meest van onder de indruk OOIT ben geweest.
Hoe krijg je hem zo snel trouwens?

[Edgeman]

Hoe krijg je hem zo snel trouwens?Antwoordje van Kris, onze programmeur:


1. Full AS3 site
2. Sommige delen van de code, klassen, (bvb de waterval, waterreflectie, Papervision3D) heb ik meerdere malen herzien en geoptimaliseerd
3. Samengaand met puntje (2): constant monitoren van CPU en memory gebruik en afwegen! Indien een animatie teveel cpu vroeg, dan probeerde ik die soms op een andere manier.
4. Waar je kan: gebruikt int en geen Number als datatype voor getallen (minder cpu en mem gebruik, kan je wat fps mee winnen bij zware scripts zoals oa de waterval effectjes die veelal in een loop draaien)
5. Zo weinig mogelijk masks; zo weinig mogelijk images: maw stapel geen 4 images op elkaar in verschillende movieclips, maak van die 4 dan slechts 1 image indien mogelijk
6. Redraw regions zo klein mogelijk houden (de meeste images deed ik eerst “break apart” zodat het een vector shape wordt met daarop die image als een texture; daarna sneed ik die zodanig bij (waar mogelijk) zodat zijn bounding box zo klein mogelijk werd. Op die manier is de redraw region zo klein mogelijk als je bvb een rotatie met die image doet)
7. Als je in Flash CS3, bij AS3, een MovieClip “export for actionscript” aanduidt bij linkage, dan geeft CS3 automatisch als Base class een MovieClip aan. Indien die mc niet animeert, verander dat dan naar Sprite! Sprite verbruikt minder geheugen en CPU.
8. Veel animaties zijn -waar mogelijk- iets of wat linear, maw er gebeuren geen 10 animaties op verschillende plaatsen tegelijk, maar eerder iets of wat linear en afwisselend om ook weer de redraw region zo klein mogelijk te houden.
9. AS3 resource cleaning! Bij elke klasse die van een DisplayObjectContainer zoals Sprite of MovieClip bvb overerft voorzie ik een eventListener Event.REMOVED_FROM_STAGE. Dus als die container van de Stage wordt verwijdert, dan voer ik allerlei code uit om het geheugen weer vrij te maken: filmpjes stoppen met spelen; animaties stoppen; manueel removechild op alle childs van die container; Tweener animaties stoppen en globale variabelen aan null gelijkstellen. Elke klasse die ik heb geprogrammeerd bevat in principe een soort dispose() of destroy() methode om het geheugen te legen.
10. Tijdens een transitie wordt de Stage kwaliteit even naar LOW geswitched om oudere pc’s niet de nekken; achteraf wordt die weer op HIGH gezet. Ook worden alle animaties gestopt wanneer een transitie naar een ander deel van edgeworld wordt gestart. Zo heb ik in elke klasse dus ook een freeze() methode moeten voorzien die alle animaties en flv’s stopt.
11. CacheAsBitmap property: indien een DisplayObjectContainer veel vector shapes, lijnen of tekst bevat is het meestal interessant om die te cachen via de CacheAsBitmap property. Hiermee kan je soms serieus wat fps mee winnen… maar ook mee verliezen! CacheAsBitmap is niet interessant op een container met slechts een image in die dan ook nog eens roteert. Op die manier gaat flash bij elk nieuw frame opnieuw alle bitmapdata in het geheugen cachen. Wat voor heel wat lagere fps zorgt! Ook mag je dit ook niet gebruiken op zeer grote containers. Door deze property aan te zetten wordt alle bitmapdata in het RAM van de computer geplaatst. Bij caching van grote images zal het geheugen van de client snel de hoogte in gaan.

[Chosen]

WoW!!!
Dat ziet er best wel pro uit. rond hoeveel (€€€) zou iemand hiervoor kwijt zijn? Of mag je dat niet vertellen over de forum.

[Edgeman]

WoW!!!
Dat ziet er best wel pro uit. rond hoeveel (€€€) zou iemand hiervoor kwijt zijn? Of mag je dat niet vertellen over de forum.Inderdaad, contacteer ons gerust vrijblijvend.

[leandro]

Respect :O !!!!!

[.Tine.]

Hoe zijn jullie zoal op het idee gekomen? De verschillende landschappen... Zit daar iets achter? Hebben die vleugeltjes een betekenis?

[Edgeman]

Hoe zijn jullie zoal op het idee gekomen? De verschillende landschappen... Zit daar iets achter? Hebben die vleugeltjes een betekenis?Het basisidee van de site was een "edgeworld" ontwerpen om doorheen te navigeren, als snel hebben we dan beslist om verschillende stukjes van de wereld per menusectie aan bod te laten komen.

Het belangrijkste aan ons concept was dat we potentiële klanten konden laten zien wat we kunnen zonder het geheel nodeloos ingewikkeld te maken en zonder dat de inhoud van de site in gedrang kwam. Vooral onze referenties en werken moesten er duidelijk in naar voor komen. De vleugeltjes en de landschappen zijn vooral design matig gekozen en afgestemd op de menustructuur (content). De portfolio is een archeologische ontdekking, de services is een soort "creatief testlab" waar edgeman is ontsnapt, de contact heeft een link met te ruimte (communicatie), enz. Content en design zijn dus zo goed mogelijk op elkaar afgestemd.

[Miriam]

heel goed gedaan hoor.Petje af

[Aeronobe]

Nou, die screenshots zien er verschrikkelijk mooi uit,
alleen als ik op Nederlands klik, dan laad hij mooi tot 100%,
en daar blijft hij nu al zo'n 10 min. op staan ...

Idem voor Engels ...

Dus ik geraak er niet echt ... >.>

[jay7]

echt gaaf cker showcase leuk gedaan

[Edgeman]

alleen als ik op Nederlands klik, dan laad hij mooi tot 100%,
en daar blijft hij nu al zo'n 10 min. op staan ...Dat is raar, welke browser en welke versie van de Flash Player gebruik je?

[Alassea]

Ik vind het er echt super uitzien! en hij is best snel, niet veel te lange overgangen.

Wel jammer dat het logo tijdens de overgangen helemaal pixelig wordt...

[Edgeman]

Wel jammer dat het logo tijdens de overgangen helemaal pixelig wordt...Ja dat is opzettelijk, tijdens de transities veranderd de algehele kwaliteit naar _low, om de cpu niet te zwaar te belasten.

[Aeronobe]

Dat is raar, welke browser en welke versie van de Flash Player gebruik je?

Wil je geloven dat hij het nu wel doet ? Heel raar...

En ik vind het een prachtige site,
goede gfx, makkelijk te navigeren, alles verloopt bijzonder snel
echt top :)

[jay7]

Ik heb de site nog eens beter doorzocht om te kijken over er nog wat het een of ander aan gedaan kon worden.

Deze site is erg goed echt showcase maar aangezien ik nogal critisch naar websites kijk heb ik toch nog wel iets gevonden wat minder was. Bij flash sites vind ik het namelijk erg leuk als je met de afbeeldingen vreemde dingen kunt doen dat is hierbij dus dat mannetje aan die balon. Erg grappig om die even de lucht in te slingeren maar jammer daaraan is je kunt dat mannetje alleen heel rustig heen en weer bewegen als je hem te snel beweegt dan kun je zien dat het mannetje van het draadje af komt.
Ook bij die windmolen (die je een circulerende beweging kan geven) mag je alleen hele rustige rondjes maken als je te snel met de klok meedraaid dan gaat die molen helemaal raar doen dat vind ik persoonlijk gewoon erg jammer.
Probeer daar de volgende keer een iets beter werkend ding van te maken want zulke dingen vind ik altijd.(Dat komt omdat ik op elke flash site ook echt ga zoeken of er zoiets in staat. :D) en Ik vind het prachtig om die dingen eens even uit te proberen.
Ik heb gezien dat er op elke pagina wel zo iets staat maar deze pagina van hierboven was toch wel de enige waarvan ik dacht dat het niet helemaal goed functioneert

Voor de rest echt een Prima site echt gaaf mooi gedaan echt showcase waardig ga zo door.

Groeten Jay7...! ;)

[e.l.dam]

Whow

Just whow :P

Heel mooi gemaakt!

[RA8IT]

Sorry, beetje off-topic, maar waardoor heb je dit laten maken?

<!-- _
___ ___ __ __ ___ _ __ ___ __| | __ _ ___
/ __| / _ \\ \ / / / _ \| '_ \ / _ \ / _` | / _` | / _ \
\__ \ | __/ \ V / | __/| | | || __/| (_| || (_| || __/
|___/ \___| \_/ \___||_| |_| \___| \__,_| \__, | \___|
|___/
-->

't ziet er hier niet goed uit, maar het staat in je brondcode van de site.. K heb het al eens gevonden, maar kan het nergens meer vinden. Dus hoop dat jij/een van jullie het nog weet [^]

[michelsteege]

eum... als je op de website kijken en over ons zie je dat ze zelf websites maken dus waarschijnlijk hebben ze het zelf gedaan met flash, papervsion, max

[Edgeman]

Sorry, beetje off-topic, maar waardoor heb je dit laten maken?

<!-- _
___ ___ __ __ ___ _ __ ___ __| | __ _ ___
/ __| / _ \\ \ / / / _ \| '_ \ / _ \ / _` | / _` | / _ \
\__ \ | __/ \ V / | __/| | | || __/| (_| || (_| || __/
|___/ \___| \_/ \___||_| |_| \___| \__,_| \__, | \___|
|___/
-->

't ziet er hier niet goed uit, maar het staat in je brondcode van de site.. K heb het al eens gevonden, maar kan het nergens meer vinden. Dus hoop dat jij/een van jullie het nog weet [^]There you go, http://schnoggo.com/figlet.html

[flashnoop]

Ik ben jaloers:O

[object]

Nice work!!!! Cedrik heeft al redelijk wat over jullie verteld!
Een goede maat van mij - we hebben samen 3ds max gedaan in Mons.

greetz,
Klaas

[Edgeman]

Nice work!!!! Cedrik heeft al redelijk wat over jullie verteld!
Een goede maat van mij - we hebben samen 3ds max gedaan in Mons.

greetz,
KlaasThanks, doe Cedrik zeker de groeten!

Ps, onze nieuwe Sevenedge site komt er binnen paar weken aan.

[Bartj3]

Als er dan toch een nieuwe website komt, zou je een beetje toe kunnen lichten hoe de 'physics' zijn gedaan van het mannetje aan de kabel op de over ons pagina? vond 'm erg leuk gedaan :)

[krikke85]

Als er dan toch een nieuwe website komt, zou je een beetje toe kunnen lichten hoe de 'physics' zijn gedaan van het mannetje aan de kabel op de over ons pagina? vond 'm erg leuk gedaan :)

Dag Bartj3,

Dat mannetje is feitelijk vrij eenvoudig gescript :).

Zolang het mannetje beweegt hou ik zijn oude positie constant bij en berekening ik daarmee de angle waarin hij beweegt. Ook hou ik een deltaX en deltaY (deltaX is bvb oudepositie.x - huidigepositie.x) bij. Via die angle kan ik dan het mannetje roteren zodat hij altijd roteert in de richting dat hij vliegt ('orient to path' maw) en met die deltaX en deltaY kan ik ook bepalen hoe snel men de muis heeft bewogen toen men de muisknop losliet.

Van zodra je met de muis het mannetje loslaat voer ik een Tweener uit. Dit is een Tweener van de huidige positie naar de 'rustpositie' (onder de Edgeman op zijn wolk), maar hiertussen voeg ik nog een _bezier. Maw vooraleer het mannetje zijn rustpositie bereikt doet hij nog een tussenstop. Deze tussenstop is exact het midden tussen de huidige positie en de rustpositie, maar hier tel ik nog eens die deltaX * 6 en deltaY * 6 erbij (dit zorgt ervoor dat de tussenstop afwijkt afhankelijk van de muisbeweging).

Hierdoor gaat het mannetje dus wanneer je de muis loslaat van zijn huidige positie naar die tussenstop vliegen en dan pas naar zijn rustpositie. Als je deze Tweener uitvoert met als transitie "easeOutElastic" krijg je het effect van op onze site :D.

Terwijl dit allemaal gebeurt teken ik in een graphics object constant een curve (graphics.curveTo(x,y)) zodat het touwtje verschijnt.

Groeten!

[Bartj3]

Hoi Krikke,
bedankt voor de duidelijke uitleg, ik had iets veel complexer verwacht. Zelf ook maar eens mee gaan spelen.

Bartje