Tulin tässä miettineeksi, että millä konsteilla yleensä ammattilaiset hoitavat vaativamman ja intraktiivisuutta sisältävän grafiikan piirron web-sivuilla. Täytyi itsekkin kato saada vähän tyylikkämmät sivut ny.
Asetaan nyt esimerkki ongelmaksi seuraava: sivuilla on vaikka jokin iso kuva tyyliin, 1200*800, joissa on muutamia yksityiskohtia, joita käyttäjän on mahdollista klikkailla. Tyylikkäämmät sivut saadaksemme halutaan kuitenkin, että kun käyttäjä vie kursorin, jonkin näistä kuvan sisällä olevista yksityiskohdista, yli, tapahtuu näytöllä vaikka lyhyt animaatio; yksityiskohta(tällä kertaa vaikka auto) kasvaa isommaksi ja sen ympärille tulee vielä siniset kirkkaat rajaukset kuvaamaan sitä, että käyttäjä on valitsemassa autoa. Ongelma; kuinka tehdä tällaiset sivut käyttäen hyväksi selainkielta: HTML, PHP, javascript tai kenties jokin muu. Kuinka voi saada jollain taulukko grafiikalla, joissa ei voi määritellä kunnolla edes koordinaatteja, edellä esitetyn kaltaistaisia sivuja.
Täytyykö sitten vaikka PHP:hen upottaa joku taulukko, jonka backgroundiksi asettaa pääkuvan ja sitten animaatiot tapahtuu jossain saman taulukon soluissa, kun tapahtumankäsittelijät antavat siihen luvan. Tämähän taas sitten edellyttäis tiukkaa laskentaa siitä, että animaatiot tapahtuvat oikeissa kohdissa suhteessa pääkuvaan ja kuullostaa muutenkin vähän kömpelöltä.
Koko ruton 1200*800 kokoista kuvaa on taas varmaan turha päivittää joka animaatiokerta, koska se olisi hidasta. Miten sanoisitte, hyvät ohjelmointiputkalaiset, kuinka ammattimies hoitelee vastaavat ceissit?
Vai onko niin, että tarvittaisi jo pikkuhiljaa joustavaa selainpohjaista grafiikka kirjastoa HTML:n rinnalle, että voitas tehdä näyttävämpiä sivuja ilman applettilautauksia tai taulukkokikkailuja?
ps. Ja taas hyvä ku muistan tarkistaa otsikon...
Luultavasti käytetyin konsti on nykyään Flash, koska JavaScript-tuki on eri selaimissa hyvin vaihteleva eikä toistaiseksi anna riittävän hyvin mahdollisuutta animaatioihin.
Periaatteessa tuo onnistuu myös jakamalla kuva pienemmiksi kuviksi ja säätämällä kyseiselle alueelle onmouseover-tapahtumaan (tai CSS:llä :hover-pseudoelementtiin) kuvan vaihto esimerkiksi animoiduksi GIF-kuvaksi. Animaatiosta on kuitenkin vaikea päästä sulavasti takaisin alkuperäiseen kuvaan näillä keinoilla.
Mutta toimiiko noi Flash sovellukset nyt sitten suoraan selaimessa, vai täytyykö sekin avata uuteen ikkunaan tai jotain?
Ehdotit, että kuvan voi vaihtaa animoiduksi GIF- kuvaksi; onko se sitten niin, että animoidut GIF kuvat päivittävät vain ne alueet kuvasta, jossa tapahtuu liikettä?
Jos on tosi ammattilainen, niin hän muistaa, että Flash ei ole tuettu joka paikassa. Varsinkin organisaatioiden koneissa tilanne on se, että Flash ei ole yli puolessa tapauksessa tuettu ollenkaan. Tilastojen valossa työaikana selataan paljon nettiä ja kun koneissa ei ole flashia, niin minkäs teet kun ei ole oikeuksia myöskään asentaa.
Flash on kiva, mutta huonosti tuettu. Javascript tuki sentään löytyy hieman suuremmassa osassa tapauksia verrattuna Flashiin.
Itse karsastan niitä mediatoimistoja (sekä nettisivuja) jotka vannoo vain ja ainoastaan Flashin nimeen. Sivujen pitää toimia jotenkin muutenkin kuin pelkällä Flashilla.
Kotikoneissa tilanne tietysti hieman toinen.
-W-
Ja Flash nyt on muutenkin ihan hirveää, ihan muutamia erikoistapauksia lukuunottamatta.
Spritegrafiikka on vaihtoehto. Käytännössä kyseessä on taustakuva, jossa jokainen frame on samankokoinen kuin näkyvä alue, ja tämän jälkeen voidaan animointi jättää CSS:n ja JS:n harteille.
CSS:ssä onnistuu luonnollisesti vain kylmä on/off :hoverin avulla. Jos kuvasarja on vaakasuuntainen, niin yksinkertaisesti vaihtaa left: 0; :hoverin avulla left: 100%; ja sillä saadaan aikaan täysvaihto ilman animaation juhlaa.
JavaScriptillä taas voidaan ottaa animointi vahvemmin haltuun. Varmaankin jollakin konstilla onnistuu selvittää se, mitkä mittasuhteet taustakuvana olevalla kuvalla on, jolloin olisi mahdollista tehdä geneerinen funktio joka hoitaisi animoinnit useammallekin määritellylle elementille - toki jos aina käyttää samaa määrää frameja samoilla mittasuhteilla, niin asiat helpottuu huomattavasti. Tiettyjen frameworkien käyttö voi helpottaa taakkaa, esim. jQuery tai Prototype.js ainakin helpottavat elementteihin viittaamista.
Tämän jälkeen jääkin jäljelle se kuvasarjan tekeminen kuvankäsittelyohjelmalla. Siinä ei auta muu kuin omien kuvankäsittelytaitojen kehittäminen.
Paulus M kirjoitti:
Mutta toimiiko noi Flash sovellukset nyt sitten suoraan selaimessa, vai täytyykö sekin avata uuteen ikkunaan tai jotain?
Ei sitä välttämättä edes huomaa, että sivu on tehty flashilla. Eli avautuu normaalisti suoraan siihen selain-ikkunaan. Esimerkiksi Coca-cola.fi on näemmä tehty flashilla.
Flashan on maksullinen ja kalliskin vielä, tuskin paljoa menetät jos pysyt erossa siitä.
GIF -animaatiot voidaan oman (GIMP)käsitykseni mukaan optimoida niin, että joka kehykseen tallennetaan vain ne pikselit, jotka ovat muuttuneet edellisestä kehyksestä, joskin tässä kokoluokassa voi siitä huolimatta olla aika konstikas juttu.
Flash on ilmanen 30pvän testijakson ajan ja jolla voit testata aivan vapaasti, kun et ala mitään kaupallista sillä vääntämään. 30 päivän jälkeen Flash ohjelmasi vain pyytää sinua ostamaan lisenssin, et siis menetä mitään.
Itse suosittelen kokeilemaan. Flash on aloittelijalle sentäs paljon helpompi oppia kuin alkaa suoraan erilaisillä javascript-kirjaistoilla kikkailemaan.
En ainakaan käyttäisi flashia, se on täs konees niin hidas ettei edes youtube-videot oikeen toimi. Mielummin vaikka javascript-purkkaviritelmä.
osta uusi kone.
Dude kirjoitti:
En ainakaan käyttäisi flashia, se on täs konees niin hidas ettei edes youtube-videot oikeen toimi.
Oma koneeni on toki hidas, mut kyllä se pyörittää 720p animea mplayerilla ihan sulavasti. Youtube -flash-videot kokoruudussa sen sijaan tökkii ku ajatus ennen aamukahvia.
Aihe on jo aika vanha, joten et voi enää vastata siihen.