Omdat Flash niet draait op een iPad zoek ik een alternatief voor bewegend beeld op een website. Daarom dacht ik eraan om in Fireworks CS3 een Animated GIF te maken. Tot voor kort heb ik Fireworks altijd 'links laten liggen', maar ik zie nu dat er sinds ImageReady veel meer mogelijk is met een Animated GIF in Fireworks.

Mijn vraag is:
Als ik een Animated GIF exporteer als Dreamweaver html of als Dreamweaver xhtml, is deze dan zichtbaar op een iPad?

Dus als volgt:
(stap 1)
export: html and images
html: export html file

(stap 2)
options > export > dreamweaver html of dreamweaver xhtml

Of zijn er ook andere gratis opties om Flash te vervangen?

iREM, ik ben ook benieuwd.

Dus als je het even hebt getest, deel je bevindingen dan met ons, svp.

Ja werkt gewoon omdat een animated gif niets meer is dan een plaatje met wat frames erin.

Vergeet niet dat deze maar 256 kleuren heeft dus mocht je daar onder blijven dan is de stock-oude animated gif een super oplossing.

Gewoon in Photoshop of Fireworks een animated gif maken en dan opslaan als .gif dit bestand kun je dan in je website plaatsen zoals elke andere afbeelding en klaar is ome Henk.

Maar het ligt er een beetje aan wat je wilt doen wat er zijn veel manieren om dingen te laten bewegen via simpel HTML5 en een beetje CSS3 bijv.

Hier komt bijv. geen plaatje bij kijken.
http://codepen.io/Simonclavey/pen/njwvy

En mocht je heel veel tijd hebben dan kun je ook de Mona Lisa opbouwen in pixels.
http://codepen.io/jaysalvat/pen/HaqBf

(Bewerkt door Shmoo om 12:21, 10-10-2012)

Inderdaad simpel via Photoshop. Kiezen voor Window > Animation.
En via 'Save for Web & Devices...' kiezen voor GIF (dus geen Animated GIF meer).

Het werkt inderdaad simpel, dit keer uiteraard nog een eenvoudige uitvoering: een foto die een andere foto opvolgt. Maar zeker voldoende.

Nu nog bekijken op een iPad, want die heb ik helaas zelf nog niet. Binnenkort toch maar eens kopen.
Enig idee wanneer de nieuwe versie uitkomt? En dan bedoel ik niet de iPad mini  

gebruik zelf de laatste versie van bannerzest pro, die kiest afhankelijk van het apparaat of hij flash of html 5 laat zien, maar het  is maar net wat je ermee wilt bereiken.

Mocht je een stevige Mac hebben met genoeg ruimte dan kun je ook Apple's Xcode downloaden uit de MAS daar zit een programma bij dat iOS-simulator heet en kun je de website testen in een iPad en iPhone omgeving op je Mac zonder dat je al die devices hoeft te kopen.

Ik test dagelijks alles wat ik maak op die manier.

@Shmoo:
Aangezien ik nog onder versie 10.5.8 draai kon ik alleen xcode 3.0 downloaden, maar kan het daarin niet zo snel vinden. Zat het toen nog niet in die versie van xcode?

Die animated GIF die nu draait is het laten afwisselen van foto's. Alleen is dit met 'harde' overgangen. Dus niet zo mooi. Zou liever zien dat het in elkaar overloopt (zoals dat met Flash wel kan) kan dat op een simpele manier?

Geen idee of dat toen ook al beschikbaar was maar Apple kennende zal je de iOS-simulator dan niet kunnen updaten naar iOS 5 of 6 want dat vereist dan weer een up-to-date Xcode.

Waarschijnlijk is de beste oplossing dan een klein stukje jQuery (Javascript) in je website plaatsen en het .GIF idee laten varen want je zou natuurlijk al die vloeiende effecten in de Animated GIF kunnen stoppen zodat je een mooiere overgang krijgt tussen de afbeeldingen alleen wordt het bestand dan uiteindelijk 2 of 3Mb groot en das voor niemand leuk, zeker niet voor smartphone gebruikers die databundels hebben.

Hier een voorbeeld van wat ik denk dat jij zoekt, de afbeelding kun je natuurlijk zo groot of klein maken als je zelf wilt.
Dit alles bij elkaar (zonder foto's) is het nog geen 10Kb groot dus heel erg vriendelijk voor mobiele producten.

http://jsfiddle.net/paulmason411/TZy7A/2/

En dit is de Tutorial.
http://paulmason.name/item/simple-jquery-carousel-slider-tutorial

Heel erg simpel en werkt altijd.

iOS-simulator ? jQuery ? HTML5 ? FireWorks ???
We slaan een beetje door hier...

Een GIF-bestand is (zoals al eerder werd gezegd) niets meer of minder dan een serie plaatjes ("frames") in één bestand, weliswaar met een belabberde compressie (weinig kleurnuances), maar in afwisselend tempo in te stellen. Een paar foto's achter elkaar tonen is dus heel simpel, ook qua bestandsgrootte. Als je echter mooie, vloeiende overgangen wil, dan moet je dat stapsgewijs bereiken door meerdere frames tussen ieder begin- en eind-frame te maken. Dan worden het dus wel veel frames, dus een zwaarder bestand. Maar goed, in 1993 was dat riskant - anno 2012 zal ons dat worst wezen.

Hoe maak je zoiets ? Met Photoshop (en heel lang geleden ImageReady) kan je in het Animatie-paneel die frames maken en zien. Zie hier een uitgebreide stappenplan voor een dergelijke animatie.

Let op dat in latere CS-versies het Animatie-paneel "Tijdlijn" heet en op Frame-animatie moet staan, niet op Video-tijdlijn. Dat wordt ook vermeldt in bovenstaande stappenplan. Je kan de fraaie en veel nauwkeurigere Videotijdlijn wel gebruiken, maar die biedt meer mogelijkheden dan wat de GIF lief is...

Merk op dat je voor een GIF uiteindelijk drie soorten bewerkingen kan doen met lagen, waarvan je er twee vaak zult gebruiken: 1. Zichtbaarheid (oogje aan/uit of dekking instellen); 2. Positie (hoger/lager, naar links/rechts, maar geen rotatie of schalen) en 3. Stijlen (die gebruik je wellicht weinig).

(Bewerkt door Peter Villevoye om 22:22, 19-10-2012)

Ik noemde bannerzest omdat dat een relatief goedkoop programmaatje is dat de code voor je genereert en online zet, met allerlei extra mogelijkheden en extra's. Zonder dat je je hoeft te bekommeren om flash of html5.
Je hoeft letterlijk 2 of 3 regels script te copy/pasten op de plaats in je webpagina.
Ik had niet de indruk dat TS erg handig met Photoshop was, zo kun je het langdurig experimenteren met extra frames vermijden om tot een vloeiend resultaat te komen.

misschien ook eens kijken naar Adobe Edge:
http://html.adobe.com/edge/animate/

volledig CSS en HTML5

is gratis.

(Bewerkt door Feek om 9:08, 20-10-2012)

Nee, Edge is niet meer gratis ! De tijd van de Previews is bijna voorbij (je kunt deze ook niet meer van Adobe Labs downloaden). Het programma heet nu voluit Adobe Edge Animate, en maakt deel uit van een hele set visuele en technische HTML-software: http://html.adobe.com/

Ik vrees overigens dat iemand die vraagt of een GIF als HTML bewaard kan worden en zodoende zichtbaar wordt op een iPad omdat die geen Flash aankan, ook niet erg vertrouwd zal zijn of worden met het knippen/plakken van scriptjes... Dat is ook helemaal niet erg; ik stel de meeste grafo's altijd graag gerust dat ze ver weg mogen blijven van die code-materie. Dus beslist een leuke tip voor de meelezers, maar niet voor de vraagsteller.

(Bewerkt door Peter Villevoye om 9:33, 20-10-2012)

OK, misschien een beetje te complex... maar aardig om te noemen.

Overigens heb ik het gewoon gratis kunnen downloaden via https://creative.adobe.com/

(lees meer op creativebits)

(Bewerkt door Feek om 11:59, 20-10-2012)

@iREM

Mochten deze simpele codes je (nog) niet helemaal duidelijk zijn durf te vragen wat je niet begrijp want ik ging er even vanuit dat je wel wist wat hier de bedoeling van is omdat ik ergens Dreamweaver zag staan.

@shmoo

Ik ben nu bezig in dreamweaver met het stukje jQuery.

Ik heb het stukje HTML geplaatst in de HTML code waar de slider moet komen te staan en tevens aangegeven welke plaatjes hij moet nemen.

Het stukje CSS geplaatst in mijn CSS Style (.css).

Maar wat doe ik precies met het stukje Javascript? Ik dacht als kladblok tekst opslaan als javacode (.JS).
Maar hij doet nog weinig, wat doe ik mis?

@Shmoo: op de een of andere manier lukte het niet met jouw script voorbeeld, maar ik heb me nu iets verdiept in JQuery, en via het ZIP bestand op http://www.noobtutorials.nl/jquery/jquery-image-rotator is het me gelukt!

En dat voor een grafo  

Ik zie nu pas dat je de 22ste ook al had gereageerd, dit heb ik helemaal niet meegekregen..

Maar idd. het stukje Javascript moet je dan opslaan in een leeg document met de extensie .js
Daarna moet je dit bestand aanspreken in je website door deze code in de head van je HTML document te plaatsen.

<html>
<head>
… hier staan nog meer codes …

<script src="http://www.example.com/js/document.js" type="text/javascript"></script>

</head>
<body>
… hier begint de website ..
…


@Shmoo: Heb je eventueel nog een voorstel voor een JQuery verticale scrollbar voor in een tekstbox? Ik heb geprobeerd http://baijs.nl/tinyscrollbar/ te gebruiken, maar die krijg ik helaas niet echt aan de praat.

Die zal denk ik wel werken maar in de HTML moet je de div van de scrollbar nog een bepaalde ID geven.

Kijk naar de jQuery.

<script type="text/javascript">
   $(document).ready(function(){

       $('#scrollbar1').tinyscrollbar();

   });
</script>


Zie je dat er staat $('#scrollbar1')  dat wil zegen dat hij op zoek gaat in de HTML naar bijv een div met de ID scrollbar1

Dus zoiets in de html.


<div class="container">
    <div id="scrollbar1">
        *** in deze div komt dan de scroller ***
    </div>
</div>


Dat kun je ook aan de CSS weer aflezen.


#scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { background-color: #003D5D; }
#scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }
#scrollbar1 .track { background-color: #D8EEFD; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#scrollbar1 .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }


In CSS worden ID's met een # aangegeven en een CLASS met een . punt.
Dus scrollbar1 is een ID omdat er een # voor staat en viewport en thumbs een class omdat er een punt voor staat in de CSS.

Dat zal er denk ik verkeerd gaan..