• úvod
  • témata
  • události
  • tržiště
  • diskuze
  • nástěnka
    • přihlásit
    registrace
    ztracené heslo?
    PHATEHTML5 a JS v rukou Flash developerů
    SLASH
    SLASH --- ---
    1 odpověď+4
    my sme uz pred 3 mi rokmi robili ovela viac advanced veci ako takethislolipop, (neviem ci si videl MAG campaign co sme robili pre Sony Entertainment...)
    Nasa facebook integracia bola motiontracked, takze obrazky su aplikovane za pohybu kamery, pricom aplikujeme ligtning a adaptive motion blur..

    Robime to tak ze natocime zabery a potom pouzivame mocha + after effect na vygenerovanie 4points tracking coordinates, ktore potom vyexportujeme z mochy a naimportujeme do flashu.

    Teraz momentalne robime kampan pre serial Suits (interaktive interview z postavou z Suits - Luis Litt) , kde tiez pouzivame takyto postup (ak to bude live, tak dam linku na illustraciu,..) ale sme co raz tym viac tlaceny aby to fungovalo aj v HTML..

    v HTML su s tym kopec problemov, ako performance, kompatibilita z browsermi (IE verzie bez podpory canvasu) a video formatmi (mp4 vs WebM vs ogg) ..

    Dalej su tam take male ale podstatne prekazky typu, na canvas musis pohybovat veci o cele pixely, kdezte vo flashi mozes pouzivat subpixely .. (co robi synchronizaciu pohynu s videom smooth, zatial co v html trhanu) vo flashi mozes pouzivat embed fonts na canvas nie..

    A co sa tyka mobilnych browserov, tak to je este ovela horsie. Performance je shit, na apple devices nemozes mat viac nez 1 ! zvuk sucasne (teda pokial nepouzivas iOS 6+ (iPad3 iPhone5) a web audio api, ale aj to je tam dost buggy) a apple ti nedovoli preloadnut video automaticky - user musi kliknut .. takze buffering and buffering...:( )

    a este nech mi niekto tvrdi ze html 5 v pohode nahradi flash ! :(
    TIKOT
    TIKOT --- ---
    SLASH: to demo vypadá hodně zajímavě, zrovna jsme řesili, jestli by šlo nc jako http://www.takethislollipop.com/ udělat v html, takže možná i šlo, i když by to asi hodně bolelo, ie7-8 nunost
    SLASH
    SLASH --- ---
    1 odpověď
    PHATE: no ved cakam uz 5 dni ze nieco vyprodukujes :D :D :D
    PHATE
    PHATE --- ---
    1 odpověď
    SLASH: wow, tak http://acko.net/blog/projective-texturing-with-canvas/ je fakt pecka. btw jestli to potrebujete na komercni projekt, proc neoslovit nejakyho js-3d killera, ktery vam to naprogramuje?
    SLASH
    SLASH --- ---
    2 odpovědi
    PHATE: toto riesenie je zatial najblizsie tomu co robi distord.. On na to pouzil kod tohto chlapika kym bol ten kod este online :(

    cez CSS3 sa to mozno riesit da , ale tretina nasich klientov poziva IE6 - IE8 (nanestastie).

    My toto potrebujeme tiez pouzit na motion tracking, takze v podstate by stacilo extrahovat ten kod a wrapnut do nejakeho distord classu, ktory by mal interace na
    addBitmap
    moveBitmap (point1,pont2,point3,point4)..
    a mozno trochu to este zoptimalizovat :

    napriklad pouzitim adaptivnej tessalacie : http://tulrich.com/geekstuff/canvas/perspective.html

    alebo implementacio viac advanced perspective interpolation, ktora by vobec nevyzadovala tesalaciu a nepracovala s affine matrices..
    PHATE
    PHATE --- ---
    1 odpověď
    OOPS: Aha...diky za tip. O vikendu to chci zkusit dokoncit. S praci na canvasu se zatim rozkoukavam a tohle me zaujalo, protoze jsem nikde reseni teselace bitmapy na trojuhelniky nenasel.
    OOPS
    OOPS --- ---
    1 odpověď
    PHATE: mozna bych to resil pres CSS Custom Filters
    http://alteredqualia.com/css-shaders/article/ http://html.adobe.com/webstandards/csscustomfilters/
    PHATE
    PHATE --- ---
    1 odpověď
    SLASH: Jsem si dost jisty ze to pujde. Jsem na dobre ceste, ale ze by to bylo snadne jako ve flashi, tak to teda fakt ne...
    OOPS
    OOPS --- ---
    Pokud by vas zajimalo jak vytvaret UI aplikace ala Edge Reflow, Brackets, atp. v JavaScriptu, Adobe uvolnilo UI knihovnu TopCoat. Vice info zde: http://adobe.github.com/topcoat/ a zde: https://github.com/adobe/topcoat



    PHATE
    PHATE --- ---
    +1
    SLASH: hele mozna i luck. uvidim - zovna si s tim hraju. hodim pak vysledky na git.
    SLASH
    SLASH --- ---
    2 odpovědi
    PHATE: no luck ?
    SLASH
    SLASH --- ---
    SLASH: no to by bolo super! cez threeJS nakoniec cesta neviedla :(
    PHATE
    PHATE --- ---
    1 odpověď
    SLASH: o vikendu to zkusim zpracovat a pak ti povim jak bych to resil. ted moc nevim, ale slovicko nejde pro me neexistuje :)
    SLASH
    SLASH --- ---
    2 odpovědi
    PHATE: myslis :) ? problem je v tessalaci objektov a vykreslovani tych trianglov korektnej perspektive. Pozeral som sa na createJS a tam mali sice zaimplementovany matrix, ale nie graphics.filBitmap s matrix ako parameter a bez toho to nepojde..jedine ako tak pouzitelne riesenie ktore by MOHLO fungovat je fakeovat to pomocov threeJS s tym ze nehybem vobec s osou Z a vykreslujem to na nejake triangles alebo quad, ale neviem ako to bude vyzerat a ci sa to bude dat pouzit..

    ako by si to ty riesil ?
    PHATE
    PHATE --- ---
    1 odpověď
    SLASH: pokud bys nenasel, tak by to imo nemelo byt slozite napsat nad canvasem...
    SLASH
    SLASH --- ---
    1 odpověď
    nevie niekto o podobnom skripte ale v JS ?

    DistortImage demo
    http://www.rubenswieringa.com/code/as3/flex/DistortImage/
    SLASH
    SLASH --- ---
    CSS FilterLab
    http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/

    wysiwyg css filters editor..
    SUPERMARIO
    SUPERMARIO --- ---
    netusite nekdo jak splasit tuto ci podobnou knihovnu ktera dela ty prstencovy grafy zde: http://chartbeat.com/demo/#social
    OOPS
    OOPS --- ---
    SLASH: na konci mas kontakt na Taru a Devina, napis jim
    SLASH
    SLASH --- ---
    1 odpověď
    OOPS: ten gadget projekt z pipeline vyzera zaujimavo.. da sa to niekde stiahnut ako extension ?
    Kliknutím sem můžete změnit nastavení reklam