Geanimeerd logo

[mendo]

Sinds enkele maanden volg ik een cursus DreamWeaver CS6. In het kader van die cursus hebben we de opdracht gekregen een eerste website te maken. Het is een vrije opdracht waarin zoveel mogelijk de tot heden behandelde leerstof wordt toegepast. Als logo heb ik een fietswiel in gedachten dat bij muisklik begint te draaien en een slepend geluid maak. Bedoeling is de animatie max. een 10 tal seconden te laten duren. In de cursus is een dergelijke opzet echter nog niet aan bod geweest.
Wie kan mij op weg zetten om dit idee te verwezenlijken?

Deze afbeelding zou de basis kunnen zijn.



Waarschijnlijk zal ik de afbeelding nog wel wat moeten verkleinen, maar dat weet ik nu nog niet zeker.

[opa52]

Misschien kan je hier iets uithalen:
http://www.imediacreatives.it/Piecemaker/

Je kan de demo downloaden daar.

[mendo]

Bedankt voor de tip. Jammer dat het om een DEMO versie gaat. DEMO's installeer ik niet graag. Ze vervuilen na verwijdering telkens weer een stukje van je systeem. Maar toch heel veel dank voor de gedane moeite hoor.

In tussentijd had ik al ten dele mijn weg gevonden. Zelf heb ik nooit met Photoshop gewerkt, mijn kinderen wel. Eén van hen gaat die afbeelding omzetten naar een transparante GIF. Het is de bedoeling die GIF viermaal op te slaan waarbij ze telkens 90° gedraaid is. Middels het tooltje unFREEz moet het dan lukken om er een draaien wiel van te maken.
Dat is dan al een eerste stap.

Daarna moet ik nog eens bekijken hoe ik een korte geluidsscène aan die afbeelding (logo) kan koppelen om dan die combinatie ook aan de "Home" knop van het menu te kunnen koppelen.

Het is dus de bedoeling dat het logo bij het openen van de Home-pagina een paar seconden zijn "ding" doet. Dus.. ronddraaiend wiel met een geluidsscène.

Verdere tips zijn welkom.

[hollygan]

een soepele wielomwenteling maken met slecht 4 beeldjes da gaat niet hoor
dat zal enkel een aardbeving met 4 zware schokken geven
deze animatie is gemaakt met 18 beeldjes (=aantal spaken)
met 36 beeldjes zou het nog soepeler gaan
de draaisnelheid kan gewijzigd worden, in dit voorbeeld blijft elk beeldje
11 hondersten staan, 5 a 6 hondersten zou de draaisnelheid verdubbelen

[mendo]

een soepele wielomwenteling maken met slecht 4 beeldjes da gaat niet hoor

Dat wiel staat niet centraal in de afbeelding. Vandaar dat schokken denk ik.

[hollygan]

het was niet mijn bedoeling hier een perfecte animatie neer te zetten, dat vergt veel meer tijd dan het half uur dat ik er aan besteed heb
ik wilde alleen tonen hoe het met een animgif kan
en schokken zie ik niet echt, wel dat de wielnaaf niet in het midden staat,
maar wie heeft dat wiel geleverd? jij toch he mendo
hier hebben we dan al geleerd dat het wiel eerst moet gecenterd worden

[mendo]

het was niet mijn bedoeling hier een perfecte animatie neer te zetten

Dat begrijp ik.

De naaf staat echter perfect gecentreerd t.o.v de velg. Het is zoals ik al zei het wiel zelf dat niet centraal in het plaatje staat. Wanneer het basisplaatje bv 90 ° verdraait en als nieuw beeldbestand opslaat en het over het eerste heen plaatst dan ga je kunnen zien wat er aan de hand is.
Maar goed, dat is een op te lossen probeempje waar ik wel weg mee weet.

[mendo]

Ja, dat is logisch en dat wist ik al. Dat is dus het probleem niet.
Kan online, maar het resultaat is pover. Zoals ik al zei, één van mijn kinderen gaat het via Photoshop arangeren.

[mendo]

Ja, dat is de theorie. Met die dunne spaken zal er meer nodig zijn verwacht ik.

[hollygan]

Als je de witte achtergrond kan wegwerken (dus doorschijnend) en dan een animatie van maken zal het effect beter zijn.

het voorbeeld dat ik plaatste is transparant
hetgeen ge door de spaken en de vier hoeken ziet is de achtergrond van seniorennet
die tranparantie is noodzakelijk want
het is niet het wiel alleen dat draait, maar ook het witte vierkant waarop het wiel staat, en dat mag je niet zien meedraaien,
daarom is het transparant gemaakt

dat zijn dan de nadelen van een animgif
professionals maken zo'n animatie met flash of met een javascript

[mendo]

Ben de ganse dag offline geweest.

Eén van hen gaat die afbeelding omzetten naar een transparante GIF.

Dat is inmiddels gebeurd. Ik vond de volgende gif in mijn postbus met als vermelding dat het nog secuurder kan worden afgewerkt mits wat meer moeite. Het is nog maar een testje.



Aan de centrering is nog maar vluchtig gewerkt, vandaar dat het wiel toch nog slingert bij het draaien. Let vooral op het centerpunt van de naaf:


En met meer omwentelingen:


Aan die centrering gaat nog gewerkt worden en dan is dat voor mij OK.

Blijft dus nog dit:

Daarna moet ik nog eens bekijken hoe ik een korte geluidsscène aan die afbeelding (logo) kan koppelen om dan die combinatie ook aan de "Home" knop van het menu te kunnen koppelen.

Het is dus de bedoeling dat het logo bij het openen van de Home-pagina een paar seconden zijn "ding" doet. Dus.. ronddraaiend wiel met een geluidsscène.

Verdere tips zijn welkom.

Het gaat dan nog om de toepasselijke codes en css regels.
Een enigszins bruikbare geluidsscène heb ik al.

[hollygan]

dit is dan het verschil tussen een animatie gemaakt met 4 beelden en een met 18 beelden
de eerste maakt één omwenteling in 4 sprongen van 90 graden in 0,4 seconden, elk beeldje is 10 honderste seconde zichtbaar
de tweede maakt een omwenteling in 18 sprongen van 20 graden in 1,8 seconden, elk beeldje is ook 10 honderste seconde zichtbaar

ik ben overtuigd dat uw mannetje met zijn kunde en zin voor preciesheid
er een een juweeltje van kan maken als hij het met 18 beelden maakt

en sorry, maar de twee voorbeelden die je hebt geplaats vind ik geen draaiende wielen maar flipperkasten
't zou zonde zijn daar uw webside mee te ontsieren

....'k zie ze liever in klokrichting draaien...

u vraagt, wij draaien

[mendo]

en sorry, maar de twee voorbeelden die je hebt geplaats vind ik geen draaiende wielen maar flipperkasten
't zou zonde zijn daar uw webside mee te ontsieren

Daar heb je gelijk in. Ik zal ga het dan ook nog verder bewerken. Ik zie ze wel liever in wijzerzin draaien.