Kotivulle logo, joka liikkuu (efektiä)?

[jhh]

Haluaisin tehdä kotisivulleni logon, joka liikkuu... Logo olisi jo valmiina, mutta miten ja millä ohjelmalla pystyisin helpoiten toteuttamaan tuollaisen homman? Itsellä loppuu osaaminen... =)

[symbol]

riippuu tietty liikkeestä mutta giffi voisi olla helpoin vaihtoehto. Tai sitten flash

[Juhani L]

Animoitu gif on perinteisin ja yksinkertaisin tapa. Sellaisen voi tehdä vaikka GraphicConverterilla.

Miten meinaat liikuttaa logoa? Pyörittää, vierittää, muuttaa kokoa vai jotain muuta?

[jhh]

Haluaisin että logo kääntyisi ylösalaisin ja palaisi sitten oikein päin. Tämän tarvisi tapahtua vain kerran, eli silloin kun websivu aukeaa.... Miten siis edetään? =)
Mulla on käytössä Adoben CS5, siitäkö paketista ei tässä tapauksessa ole mitään hyötyä?

[symbol]

Haluaisin että logo kääntyisi ylösalaisin ja palaisi sitten oikein päin. Tämän tarvisi tapahtua vain kerran, eli silloin kun websivu aukeaa.... Miten siis edetään? =)
Mulla on käytössä Adoben CS5, siitäkö paketista ei tässä tapauksessa ole mitään hyötyä?

Photarista avaat vain Animation paneelin ja ei ku tekemään

http://creativetechs.com/tipsblog/build ... photoshop/

[MacFinn]

Mieti vielä kahdesti ja jätä sitten tekemättä se liikkuva logo...

Mutta jos on pakko, muista, että yksinkertainen on kaunista.

[oysvesa]

Animoitu gif on perinteisin ja yksinkertaisin tapa. Sellaisen voi tehdä vaikka GraphicConverterilla.

Miten meinaat liikuttaa logoa? Pyörittää, vierittää, muuttaa kokoa vai jotain muuta?

Miten tuollainen ANIMOITU gif tehdään? Esimerkiksi nuoli, joka pitäisi saada "vilkkumaan" tms?

[Tauvo]

Oletko ajatellut myös tuuttaavia ja piippaavia ääniä. Kilinä ja kolinakin voisivat olla ärsyttäviä. Entä jos sivuston pohjaväri vilkkuisi strobo-efektillä?

[symbol]

Animoitu gif on perinteisin ja yksinkertaisin tapa. Sellaisen voi tehdä vaikka GraphicConverterilla.

Miten meinaat liikuttaa logoa? Pyörittää, vierittää, muuttaa kokoa vai jotain muuta?

Miten tuollainen ANIMOITU gif tehdään? Esimerkiksi nuoli, joka pitäisi saada "vilkkumaan" tms?

Muutama rivi ylempänä...

[peku]

Mieti vielä kahdesti ja jätä sitten tekemättä se liikkuva logo...

Mutta jos on pakko, muista, että yksinkertainen on kaunista.

Komppaan, on ärsyttävää kun sivulta hyppää silmille jotain liikkuvaa "yllättäen ja pyytämättä" . Samoin jos jokin äänitehoste alkaa soimaan. Käytettävyys ja sisältö on webbisivun tärkeimmät ominaisuudet, ei ulkoasu.

[pallo]

Viimiseen kommentoiden, jotta käytettävyys ja ulkoasu korreloivat aika vahvasti keskenään.

[peku]

Totta, mutta tiettyyn rajaan saakka. Käytettävät ja esteettömät sivut saa aikaiseksi hyvin yksinkertaisinkin keinoin, ei tarvita mitään vilkkuvaa ja liikkuvaa.

[pallo]

No seon justnoin.

[oysvesa]

Animoitu gif on perinteisin ja yksinkertaisin tapa. Sellaisen voi tehdä vaikka GraphicConverterilla.

Miten meinaat liikuttaa logoa? Pyörittää, vierittää, muuttaa kokoa vai jotain muuta?

Miten tuollainen ANIMOITU gif tehdään? Esimerkiksi nuoli, joka pitäisi saada "vilkkumaan" tms?

Muutama rivi ylempänä...

Se muutama rivi ylempänä oli PhotoShopilla. Tässä puhuttiin Graphic Converterista....

[theinonen]

Jos simppeliä animaatiota tarvitsee niin se animoitu GIF on todellakin paras vaihtoehto. Tällöin toimii kaikilla selaimilla alustasta riippumatta, eikä ole sidottu mihinkään suljettuun systeemin joka toimii ainoastaan tietyillä laite-arkkitehtuureilla. Vaikka itse animaatio ei näkyisikään tulee silti ainakin kuva ruudulle, toisin kuin esimerkiksi Flashin kanssa.

GIF animaatio voidaan yleisesti ottaen toteuttaa piirtäen ihan millä ohjelmalla huvittaa ne yksittäiset animaation freimit ja sitten jollain apuohjelmalla joita on useitakin, esimerkiksi InterGIF jota itse käytän yhdistetään nämä yksittäiset kuvat yhdeksi animoiduksi GIF tiedostoksi.

[kallekilponen]

Itsekin yhdyn edellisten kuoroon siinä, että kaikkea ylimääräistä liikettä on hyvä välttää, tai käyttää ainakin hyvin hillitysti.

Mutta jos niitä täytyy tehdä, suosittelen tutustumaan myös animoituja gifejä ja flashia modernimpaan ja iOS laiteyhteensopivampaan tapaan, eli HTML5:een.
(Alkuun pääsee vaikkapa täältä: http://animateyourhtml5.appspot.com/pres/#1 )

[barcoder]

....gifejä ja flashia modernimpaan ja iOS laiteyhteensopivampaan tapaan, eli HTML5:een.

Eikös Gif:t ole iOS-yhteensopivia?

[jalski]

Animoidun GIF-tiedoston kirjoittaminen halutuista kuvatiedostoista ei muuten ole kovinkaan vaikeaa ja onnistunee useimmilla ohjelmointityökaluilla kohtuullisen helposti.

Windows puolella .NET ohjelmointia harrastelevat voivat vaikka käyttää alla olevaa Gardens Point Component Pascal:illa kirjoitettua moduulia mallina:

Koodi: Valitse kaikki

MODULE AnimGif;


IMPORT
  Sys := "[mscorlib]System",
  IO := "[mscorlib]System.IO",
  Cpm := "[system]System.ComponentModel",
  Wfm := "[system.windows.forms]System.Windows.Forms",
  Drw := "[system.drawing]System.Drawing",
  Im  := "[system.drawing]System.Drawing.Imaging",
  RTS;


TYPE
  AnimatedGif* = POINTER TO RECORD
    files*: POINTER TO ARRAY OF Sys.String;
    delay*: INTEGER (* delay in 1/100 s *)
  END;


PROCEDURE ValidateImagefile*(IN filepath: Sys.String): BOOLEAN;
VAR
  NativeType: RTS.NativeType;
  NativeTypeName: Sys.String;
  image: Drw.Image;
  
BEGIN
  image := Drw.Bitmap.FromFile(filepath);
  RETURN TRUE;
  
  RESCUE (exc)
    NativeType := TYPEOF(exc);
    NativeTypeName := MKSTR(RTS.TypeName(NativeType)^);
    IF NativeTypeName = "System.OutOfMemoryException" THEN
      RETURN FALSE
    ELSE
      THROW (exc)
    END
END ValidateImagefile;


PROCEDURE (gif: AnimatedGif) ScanImages*(IN dirpath: Sys.String; IN filter: Sys.String), NEW;

VAR
  NativeType: RTS.NativeType;
  NativeTypeName: Sys.String;
  rslt: Wfm.DialogResult;
  
  PROCEDURE sort(VAR a: ARRAY OF Sys.String);
  VAR
    i, j: INTEGER;
    s: Sys.String;

  BEGIN
    FOR i := 1 TO LEN(a)-1 DO
      s := a[i];
      j := i;
      WHILE (j > 0) & (a[j-1] > s) DO
        a[j] := a[j-1];
        DEC(j)
      END;
      a[j] := s
    END
  END sort;

  
BEGIN  
  gif.files := IO.Directory.GetFiles(dirpath, filter);
  IF LEN(gif.files) > 0 THEN sort(gif.files) END;

  RESCUE (exc)
    NativeType := TYPEOF(exc);
    NativeTypeName := MKSTR(RTS.TypeName(NativeType)^);
    IF NativeTypeName = "System.IO.IOException" THEN
      rslt := Wfm.MessageBox.Show("Path: " + dirpath + " is a filename.",
                "Error", Wfm.MessageBoxButtons.OK, Wfm.MessageBoxIcon.Error)
    ELSIF NativeTypeName = "System.IO.DirectoryNotFoundException" THEN
      rslt := Wfm.MessageBox.Show("Path: " + dirpath + " not found.",
                "Error", Wfm.MessageBoxButtons.OK, Wfm.MessageBoxIcon.Error)
    ELSE
      THROW (exc) 
    END
END ScanImages;


PROCEDURE (gif: AnimatedGif) Output*(IN target: Sys.String), NEW;   
VAR
  NativeType: RTS.NativeType;
  NativeTypeName: Sys.String;
  rslt: Wfm.DialogResult;
  
  i: INTEGER;
  memStream: IO.MemoryStream;
  binWriter: IO.BinaryWriter;
  image: Drw.Image;
  wstream: IO.FileStream;
  buf1: POINTER TO ARRAY OF UBYTE;
  buf2: POINTER TO ARRAY OF UBYTE;
  buf3: POINTER TO ARRAY OF UBYTE;

BEGIN
  IF LEN(gif.files) = 0 THEN
    RETURN
  ELSE
    FOR i := 0 TO LEN(gif.files)-1 DO
      IF ~IO.File.Exists(gif.files[i]) THEN
        rslt := Wfm.MessageBox.Show("File: " + gif.files[i] + " not found.", "Error",
                  Wfm.MessageBoxButtons.OK, Wfm.MessageBoxIcon.Error);
        RETURN
      END;
      IF ~ValidateImagefile(gif.files[i]) THEN
        rslt := Wfm.MessageBox.Show("File: " + gif.files[i] + " is not a valid image.", "Error",
                  Wfm.MessageBoxButtons.OK, Wfm.MessageBoxIcon.Error);
        RETURN
      END
    END;
    IF IO.File.Exists(target) THEN
      rslt := Wfm.MessageBox.Show("File: " + target + " already exists, overwrite?", 
                "File already exists", Wfm.MessageBoxButtons.YesNo,
                Wfm.MessageBoxIcon.Question);
      IF rslt = Wfm.DialogResult.No THEN
        RETURN
      ELSE
        IO.File.Delete(target) 
      END
    END
  END;
  
  NEW(memStream);
  NEW(buf2,19);
  NEW(buf3,8);

  buf2[0] := 33;  (*extension introducer*)
  buf2[1] := 255; (*application extension*)
  buf2[2] := 11;  (*size of block*)
  buf2[3] := 78;  (*N*)
  buf2[4] := 69;  (*E*)
  buf2[5] := 84;  (*T*)
  buf2[6] := 83;  (*S*)
  buf2[7] := 67;  (*C*)
  buf2[8] := 65;  (*A*)
  buf2[9] := 80;  (*P*)
  buf2[10] := 69; (*E*)
  buf2[11] := 50; (*2*)
  buf2[12] := 46; (*.*)
  buf2[13] := 48; (*0*)
  buf2[14] := 3;  (*size of block*)
  buf2[15] := 1;  (**)
  buf2[16] := 0;  (**)
  buf2[17] := 0;  (**)
  buf2[18] := 0;  (*Block terminator*)
  
  buf3[0] := 33;  (*extension introducer*)
  buf3[1] := 249; (*Graphic control extension*)
  buf3[2] := 4;   (*size of block*)
  buf3[3] := 8;   (*no transparency*)
  buf3[4] := USHORT(ORD(BITS(gif.delay)*BITS(0FFH))); (*Delay time low byte*)
  buf3[5] := USHORT(ASH(ORD(BITS(gif.delay)*BITS(0FF00H)),-16)); (*Delay time high byte*)
  buf3[6] := 0; (*no transparency*)
  buf3[7] := 0; (*Block terminator*)
  
  wstream := IO.FileStream.init(target, IO.FileMode.Create);
  binWriter := IO.BinaryWriter.init(wstream);
  
  FOR i:=0 TO (LEN(gif.files)-1) BY 1 DO
    image := Drw.Bitmap.FromFile(gif.files[i]);
    image.Save(memStream, Im.ImageFormat.get_Gif());
    buf1 := memStream.ToArray();
    
    IF i = 0 THEN
      binWriter.Write(buf1,0,781);   (*Header & global color table*)
      binWriter.Write(buf2, 0, 19)   (*Application extension*)
    END;
  
    binWriter.Write(buf3, 0, 8);                    (*Graphic extension*)
    binWriter.Write(buf1, 789, LEN(buf1) - 790);    (*Image data*)

    IF i = (LEN(gif.files)-1) THEN
      binWriter.Write(";")   (*Image terminator*)
    END;

    memStream.SetLength(0);
    
  END;

    binWriter.Close();
    
    rslt := Wfm.MessageBox.Show("Wrote " + Sys.Convert.ToString(LEN(gif.files)) + " images into animated GIF file: "
            + target, "Success", Wfm.MessageBoxButtons.OK, Wfm.MessageBoxIcon.Information);
    
  RESCUE (exc)
    NativeType := TYPEOF(exc);
    NativeTypeName := MKSTR(RTS.TypeName(NativeType)^);
    IF NativeTypeName = "System.IO.DirectoryNotFoundException" THEN
      rslt := Wfm.MessageBox.Show("Output directory in path: " + target + " not found.",
                "Error", Wfm.MessageBoxButtons.OK, Wfm.MessageBoxIcon.Error)
    ELSE
      THROW (exc)
    END

END Output;


PROCEDURE WriteAnimatedGif*(IN sourcedir: Sys.String; IN filter:Sys.String; delay: INTEGER; IN odir: Sys.String; IN ofile: Sys.String);
VAR
  agif: AnimatedGif;
  
BEGIN
  NEW(agif);
  agif.delay := delay;
  agif.ScanImages(sourcedir, filter);
  agif.Output(odir + "\" + ofile)
END WriteAnimatedGif;


END AnimGif.

[kallekilponen]

....gifejä ja flashia modernimpaan ja iOS laiteyhteensopivampaan tapaan, eli HTML5:een.

Eikös Gif:t ole iOS-yhteensopivia?

Gifit ovat, Flash ei. HTML 5 tuo kuitenkin mukanaan ihan eri tasoiset mahdollisuudet kuin gif ja hyödyntää rautaakin fiksummin.

[hfcoder]

öö...
Näin asioista paljonkaan tietämättä sanoisin, että flash ei ole kovinkaan hyvä, aika moni on blokannu sen, gif taas kai liikkuisi samalla tavoin koko sivun aukiolon ajan, paitsi jo muuttaisit sen tietyn ajan jälkeen javascriptillä toiseksi (liikkumattomaksi) kuvaksi.
En kyllä osaa mitään hyvää vaihtoehtoa itse sanoa

[theinonen]

Jos siihen GIF:iin ei laita looping animationia, niin silloin animaatio näytetään ainoastaan sen yhden kerran kuten tässä kyseisessä tapauksessa haluttiinkin.

Tähän tapaan: