[STEM NU!][JANUARI '10 BATTLE] Typograffie

[Neuro]

http://www.flashfocus.nl/forum/attachment.php?attachmentid=9429&stc=1&d=1264102750

TypograFFie

Letters, woorden, zinnen. Je ziet het zoveel. Als je er over nadenkt is het bijzonder dat we heel veel karakters en tekens herkennen. Afgezien van het functionele doel is het misschien een keer goed om naar het esthetische deel van typografie te kijken. Vandaar deze battle. Doe iets bijzonders met letters, karakters, fonts, woorden, letterspatiëring; breng het tot leven en dit alles met behulp van Flash. Dit kan een gave animatie zijn maar ook een gecodeerd object. Een ding moet in ieder geval centraal staan: typograFFie!


Inleveren

Plaats een link naar je inzending in een nieuwe post hier! :)


Dus


Maak iets spectaculairs waar typografie centraal staat.
Het inleveren kan beginnen op 22-01-2010 om 0:00.
Je inlevering moet binnen zijn vóór 23:59 op 22-02-2010.
Daarna volgt er een periode van 5 dagen waarop gestemd kan worden.



Iedereen veel succes en vooral veel plezier! :)

[florindustries]

Hier alvast mijn eerste inzending:

KLIK (http://Florindustries.deviantart.com/art/Fear-and-Loathing-102183395)

Ik ga het zo snel mogelijk op eigen host zetten, mr ik kan er momenteel niet op :(

[Neuro]

Ik ga het zo snel mogelijk op eigen host zetten, mr ik kan er momenteel niet op :(

Is prima zo :)
Ik heb de text aangepast.

[florindustries]

Okido :) Mogen niet-geanimeerde typo dingen ook? Want dan heb ik nog iets staan ^^ Iets nieuws maken is natuurlijk ook wel leuk, maar dan moet 'k er wel nog de tijd vr vinden..

[mknol]

Het leukste zou natuurlijk wel zijn dat je een nieuw iets maakt speciaal voor de battle; Daag jezelf uit! ;) Ik vind je animatie daarintegen erg gaaf :D

[Neuro]

Alice in wonderland.
Alle 12 hoofdstuken, +25000 woorden :p
1 uur render tijd



Men text "fitting" algoritme is nog niet perfect en ik ben nog niet tevreden over de opmaak. Maar goed, dat zal ik de komende dagen wel fixen :)

[Lukaso]

impressive!
kun je ook de bronfoto laten zien?

[ath92]

Inderdaad cool! Misschien een idee om er een ultra-high-res van te maken :P

[Neuro]

Voila, mijn definitieve inzending:

http://www.neuroproductions.be/uploads/blog/examples/alice/alice-in-wonderland_m.jpg

high-res
http://www.neuroproductions.be/uploads/blog/examples/alice/high.html

de source code (en bitmaps) kan je hier vinden:
http://www.neuroproductions.be/experiments/alice-in-wonderland-the-bitmap/

[Mr. Black]

Erg nice Neuro! :D

[mknol]

Heel erg koel, Neuro. Had ook al een dergelijk idee maar ga deze denk ik weer omgooien :) Wel tof dat je een heel boek erin gezet hebt :)

(kreeg je code overigens niet direct aan de praat, hij heeft iets over bitmapAsset en paar andere classes die missen. na het uitzetten van save-functie ging het wel goed)

[Neuro]

Tnx :)
Alice in wonderland is maar een klein dun boekje. Dus dat ging er vlot in.

BitmapAsset is een mx.core (flex) classe, dacht ik. En in de save functie staan Air classes. (Dat lokaal saven van een bitmap heb ik even gegoogeld en ik heb die code bijna letterlijk van jouw blog genomen. Dus dat had je eigenlijk moeten herkennen ;) )

[mknol]

Tnx :)
Alice in wonderland is maar een klein dun boekje. Dus dat ging er vlot in.

BitmapAsset is een mx.core (flex) classe, dacht ik. En in de save functie staan Air classes. (Dat lokaal saven van een bitmap heb ik even gegoogeld en ik heb die code bijna letterlijk van jouw blog genomen. Dus dat had je eigenlijk moeten herkennen ;) )

Ahh ik herkende wel wat inderdaad, maar dat kan natuurlijk ook toeval zijn. Maar het ging mij vooral om die classes. Je hebt niet perse AIR nodig om dit voor elkaar te krijgen overigens hoor, ik compile tegenwoordig als FP10 hiervoor. Als je mn imagesaver (http://code.google.com/p/stroep/source/browse/trunk/nl/stroep/utils/ImageSaver.as) class gebruikt, dan heb ik daar ook een saveLocal functie instaan ;)

Vette stuff iig!

[Ea.Z]

behalve 'wauw' kan ik echt niets anders zeggen, Kris. Ik weet niet wat me eerst af te vragen: Hoelang je hieraan gewerkt hebt, of hoe je dat boek in flash gekregen hebt :D
(de tekst ergens gedownload, of ooit eens moeten overtypen tijdens een strafstudie? :p )

[Neuro]

Het boek is van 1865. Dus al lang publiek domein en vrij te downloaden en te gebruiken. http://www.gutenberg.org/etext/19033. Gelukkig heb ik het niet moeten overtypen :p
De Alice illustratie die ik gebruikt heb is trouwen ook publiek domein.(van Peter Newell (http://en.wikipedia.org/wiki/Peter_Newell))

Ik heb het dit weekend gemaakt. Dus 2 dagen. Maar dat was vooral wachten op de renders en het bijschaven van de output/design. De basis code is echt niet zo ingewikkeld, en was op een paar uurtje af :)

ik compile tegenwoordig als FP10 hiervoor.

Klopt ,lokaal saven kan nu ook, dat was ik vergeten. :) Het is trouwens ook voor FP10 gecompileerd voor de grotere bitmapdata.

[mknol]

Bij deze mijn entry:
http://projects.stroep.nl/typograffie/

Ik gebruik ook een soort text-fitting systeem om overlappende teksten te voorkomen, en ease steeds naar het laatst toegevoegde woord toe.

Ik heb het idee om 'alice in wonderland' te gebruiken keihard van Neuro overgenomen, alleen dan in een heel ander jasje :) Je hebt FlashPlayer 10 nodig om het filmpje te bekijken.

[Bartj3]

erg leuk effect,
het zou nou helemaal briljant zijn als je aan het eind van het filmpje uitzoomed en dan blijkt alice getekend te zijn ;)

[mknol]

erg leuk effect,
het zou nou helemaal briljant zijn als je aan het eind van het filmpje uitzoomed en dan blijkt alice getekend te zijn ;)

Ik ben toch zeker Neuro niet :)

[matzo]

Leuk, maar op een of andere manier is het tegen natuurlijk om een hóger getal bij snelheid aan te geven om tráger te gaan... ;)

[cornedor]

best lastig om iets leuks te verzinnen wat ook nog een beetje te doen is.

[Neuro]

best lastig om iets leuks te verzinnen wat ook nog een beetje te doen is.

Bwa, je moet het niet altijd te ver zoeken. Voor developers is deze battle eigenlijk de Textfield battle. Doe iets met textfields. :)

[mknol]

Ik heb nog wel een paar ideeën: Laat letters ronddanssen in je scherm, maak een koele text-ticker of orginele newsslider, maak een font randomizer, maak het matrix-effect op nieuwe wijze, laat het alfabet zien, Toon gave woorden in 3d, maak een font editor, maak een nieuw font of maak een web2.0 generator.
Succes :)

[cornedor]

ik heb in iedergeval al het alfabet in een png van 6x130 gezet: http://corne.testingserver.nl/letters.png nu er nog iets mee doen :p (of juist niet)

[mknol]

Is er nog iemand bezig met de battle?!! :) Of durft niemand meer?

[The Pianist]

Oh, jammer ik ben een tijdje niet geweest hier.
Deze Battle had ik echt graag aangepakt, maar ik ben te laat :(

[mknol]

Hoezo te laat, je hebt nog 2 dagen :P

[The Pianist]

Ik kan geen spectakel neerzetten in 2 dagen =)
En ik wil wel alles geven bij zoiets ! (minimaal 1 week die-hard aan de slag)

Volgende keer ben ik erbij ;)

[Jan]

Helaas 4 dagen te laat en te weinig tijd om er visueel ook iets moois van te maken, maar dit is mijn 'inzending': een online true type font parser writer embedder ding... http://www.haxer.be/fontwriter/index.swf Laadt een ttf file en kies een kies een output...

save as hx levert een zip op met per character een class(in haXe) met teken informatie (zowel voor de oude als de nieuwe graphics api).
Voorbeeld van output:http://www.haxer.be/fontwriter/ChopinScript.swf (alles is met actionscript getekend. Zoom in op de outlines met rechter muisknop...)

save as as3 doet ongeveer hetzelfde maar dan voor AS3 en meer compact. Je kan de output in een frame in Flash gooien en zo testen of gebruiken in een class.
voorbeeld (gedeeltelijk)
var ChopinScript=
{
char32: /* */
{
ascent:952.32, descent:436.224, advanceWidth:276.48, leftsideBearing:0, xMin:0, xMax:0, yMin:0, yMax:0, _width:276.48, _height:0,
commands:[],
data:[]
},
char33: /* ! */
{
ascent:952.32, descent:436.224, advanceWidth:335.872, leftsideBearing:-2.048, xMin:-2.048, xMax:420.864, yMin:-9.216, yMax:696.32, _width:335.872, _height:698.368,
commands:[1,3,3,2,3,3,3,3,3,1,3,3,3,3,3,3],
data:[420.864,367.616,420.864,418.816,246.784,667.647,20 5.824,727.04,136.192,839.68,124.928,839.68,142.336 ,806.912,155.648,777.216,204.8,664.576,305.152,424 .96,322.56,382.976,347.648,355.328,372.736,327.679 ,394.24,327.679,420.864,327.679,420.864,367.616,99 .328,972.8,99.328,996.352,80.896,1014.784,62.464,1 033.215,39.936,1033.215,-2.048,1033.215,-2.048,983.04,-2.048,959.488,15.872,940.544,33.792,921.6,56.32,92 1.6,99.328,921.6,99.328,972.8]
},
char34: /* " */
{
ascent:952.32, descent:436.224, advanceWidth:223.232, leftsideBearing:130.048, xMin:130.048, xMax:342.016, yMin:496.64, yMax:686.08, _width:223.232, _height:556.032,
commands:[1,3,3,3,3,3,3,3,3,3,3,3,3,1,3,3,3,3,3,3,3,3,3,3,3, 3],
data:[342.016,385.024,342.016,440.319,289.792,497.664,26 3.168,527.36,242.688,527.36,233.472,525.312,233.47 2,520.192,233.472,515.072,240.128,512,246.784,508. 928,253.952,504.832,285.696,482.304,285.696,463.87 1,285.696,453.631,278.528,450.559,238.592,431.104, 238.592,400.384,238.592,375.808,256,356.864,273.40 8,337.919,295.936,337.919,314.368,337.919,328.192, 351.744,342.016,365.568,342.016,385.024,238.592,38 5.024,238.592,440.319,186.368,497.664,159.744,527. 36,139.264,527.36,130.048,525.312,130.048,520.192, 130.048,515.072,136.704,512,143.36,508.928,150.528 ,504.832,182.272,482.304,182.272,463.871,182.272,4 53.631,175.104,450.559,135.168,431.104,135.168,400 .384,135.168,375.808,152.576,356.864,169.984,337.9 19,192.512,337.919,210.944,337.919,224.768,351.744 ,238.592,365.568,238.592,385.024]
},
//etc...
}
//usage
sprite.graphics.drawPath(Vector.<int>(ChopinScript.char33.commands), Vector.<Number>(ChopinScript.char33.data), flash.display.GraphicsPathWinding.EVEN_ODD);


save as swf converteert de ttf naar een embedded font in een swf, die je dan kan laden en gebruiken. Maar zoals mijn inzending zelf toont kan het ook helemaal at runtime rechtstreeks naar een textveld.
Rechts kan je een className voor je embedded font kiezen en ook een range van charCode. Staat standaard op 32-127 (basic latin)
Voorbeeld: http://www.haxer.be/fontwriter/ChopinScriptt.swf (de te laden swf bevat ook een tekstveld met alle embedded characters zodat je weet welke font erin zit.)

Source is nog niet beschikbaar maar zal een van de komende dagen toegevoegd worden aan hxswfml ( http://code.google.com/p/hxswfml/ )

:)
Groeten,
Jan

[Neuro]

wow Jan, weer heel erg cool!
Kon je dit niet in het begin van de battle posten ;) Met de pure font data kan je ook wel toffe dingen doen.

[Neuro]

De battle is gesloten. Je kan vanaf nu stemmen.

[mknol]

Het gaat vrij gelijk op maar het lijkt erop dat je weer gaat winnen Neuro, het wordt vast bijna saai :P