vorm tween van twee foto's in flash cs 5

Status
Niet open voor verdere reacties.
J

jeel2008

Gebruiker
Lid geworden
30 okt 2008
Berichten
839
hallo, ik wil een vormtween maken van 2 foto's maar krijg het niet voor elkaar. of wel voor elkaar, maar het wordt er nogal onherkenbaar op.

foto 1 is de kast dicht, foto 2 is de kast open.
foto 1 voeg ik in in Keyframe 1 op layer 1
foto 2 op keyframe 20, op layer 1.

via wijzigen - bitmap - bitmap overtrekken maak je er vectoren van, en dan werkt het maar ziet het er niet meer uit. de kastdeur gaat open, maar de hele kat vervormt ook.

eigenlijk zou een gifanimatie volstaan, die heb ik in photshop al gemaakt. dan zie je de kastdeur in 7 stappen opengaan. probleem is echter dat ik , als de kastdeur openstaat, er een menu op wil plaatsen met aanklikbare menuitems.
kan dat?
 
Laatst bewerkt:
hallo csshunter
aha. moet je dan met layers werken?
en zijn layers eigenlijk gewoon html zodat ik ze op een pagina in joomla gebruiken kan? (door ze in de code te plakken).

hoe dan ook, heb het nu maar zo even gedaan.
dan gaat de deur ook open, zij het wat sneller: http://www.finefleurbrocante.nl/ :p
 
aha. moet je dan met layers werken?
en zijn layers eigenlijk gewoon html zodat ik ze op een pagina in joomla gebruiken kan? (door ze in de code te plakken).
Klik om te vergroten...
Ja.
Een altijd al in html aanwezige "layer" is de laag van de background van een element, waar de achtergrondkleur en/of een achtergrond-img in kan zitten.
Zo heb ik de geanimeerde kast via de css als bg-img in de kast-div gezet: een animated gif werkt dan net zo goed als wanneer deze rechtstreeks als voorgrond-img in de html-code wordt gezet! (met <img src="..." enz.>)
  • Zie de broncode van kastje-kijken.htm: alles is met css voor de background geregeld. :)
  • Dat is ook simpel in Joomla te pompen: als je de css hiervoor maar opneemt in je stylesheet.
Terzijde: in andere gevallen kan je ook méér lagen nodig hebben. Dat kan ook met html+css. Daarvoor bestaat de css-eigenschap "z-index". Naast de x-as voor horizontaal en de y-as voor verticaal is er dan ook een (virtuele) z-as: loodrecht op het scherm, de diepte in of naar voren toe, zodat je elementen op een bepaalde manier kunt stapelen.
  • Normaal gesproken stapelt een later element in de html zich bovenop een eerder element, en kan dat overlappen (bv. met een negatieve margin-top). Met de z-index kan je zelf de volgorde van stapeling bepalen.
  • Behalve de z-index is daarvoor nodig dat de elementen met een z-index tegelijkertijd ook een gedefinieerde position hebben, anders werkt het niet. Maakt niet uit welke position: relative, absolute, enz; als er maar een position bij staat.
Op jouw manier kan het ook. Dan kan je op de 2e pagina (kastopen) het geanimeerde kastje als background-img gebruiken.
  • Attentie: als je dat doet samen met het image-mappen voor de menu-items, dan heb je op die plaats een transparant gifje nodig in de html (met dezelfde maten). Anders heeft de image-map geen image als "vlees" (hier: "transparant vlees"!) om vast te pakken.
  • Zie voor iets dergelijks: de hotspot-techniek van deze tests/levensrad-fase-8.htm (daar gecombineerd met javascript voor de hovers), met toelichting in dit topic.
=====
Zelf was ik ook al aan het experimenteren met een manier om de bezoeker het kastje te laten bedienen.
  • Zie tests/kastje-kijken-2.htm en broncode.
  • Vanwege het javascript moet er nog wel aan gedokterd worden om het toegankelijk te krijgen.
=====
Verder valt me op dat de echte home-page "Welkom" pas de derde pagina is na openen van de site. Eigenlijk fungeert het kastje-openen als een soort flash-screen vooraf, en dan ook nog in twee stappen: de index.php en de /kastopen/index.php, en pas daarna de /welkom/index.php. Wel leuk, maar niet echt ter zake, en ik ben bang dat dat voor de ongeduldige bezoeker wat veel stappen zijn. Die moet zo snel mogelijk van openen site naar kopen-kopen-kopen toegeleid worden! En ook Google zal niet hoog scroren op een index.php met zonder inhoud > het is alleen een doorverwijspagina.

Ik zal nog 's broeden of je de 3 op een of andere manier mooi kunt samenvoegen. Waarschijnlijk kan je het beste het deurtje vanzelf laten opengaan met de animatie, want het openen door een klik van de bezoeker is een extra functie die niet perse hoeft (de bezoeker moet ook eerst met zijn/haar muis op reis om te kunnen klikken).
En wil de bezoeker nog eens terug naar de homepage, dan kent ie het kunstje al, en zit er ook niet op te wachten om het kastje nog eens open te klikken - om vervolgens tot de ontdekking te komen dat het kastje alleen hetzelfde te bieden heeft als wat al in het horizontale menu erboven staat.
Dat scheelt in elk geval een tussenstop! :)

Met vriendelijke groet,
CSShunter
 
Broedsel! ;)
  • www.bliksekaters.nl/tests/kastje-kijken-3.htm

  • Geanimeerde kast in de background, javascriptje voor infaden uit de kast gehaald (zie broncode voor downloaden van 't script).
  • Bij uitgeschakeld javascript: resultaat als deze kastje-kijken-4.htm
  • Bezoeker hoeft niets te doen.
  • Google ziet een homepage met tekst: ipv dit nu zoiets (daar komen de menu-links e.d. nog bij).
  • Voorleesbrowsers hebben nu ook iets om voor te lezen op de homepage.
Groetjes,
CSShunter
 
hallo csshunter, bedankt voor deze uitgebreide uitleg. ik ben net thuis, moet het vh weekend eens op mn gemakje bekijken.

maar dit: 'Verder valt me op dat de echte home-page "Welkom" pas de derde pagina ' etc

ja, dat was niet mijn idee. dat wilden ze zelf. misschien moet ik ze waarschuwen dat dat zoektechnisch niet verstandig is.
maar goed, wellicht jouw manier proberen, dan hebben ze toch profijt van de tekst op de index als ik het goed begrijp, maar daar moet ik even naar kijken. ziet er weer erg goed uit professor, mn complimenten.
 
csshunter, even kort: die tekst op de indexpagina, die er dus niet is, kan ik die niet 'stiekem' een id 'hidden' geven zodat de zoekmachines m wel zien maar het publiek niet? of is dit 'not done' wat google betreft?
 
Hoi jeel2008,
Eerst het "even kort".
Tja, een hidden tekst zou Google misschien wel in trappen (hoewel je nooit weet wat Google achter de schermen precies allemaal wel en niet kan of van plan is). *) Zelf doe ik nooit aan hidden tekst voor zoekmachines.
  • Maar als hidden tekst, dan denk ik het beste via {position: absolute, left: 0; margin-left: -9999px;} en niet via {display: none;}: de laatste heeft meer kans op ontdekking en Google-straf.
Ho! Update!
Google kent alle vormen van hidden tekst uitstekend, en ze vertellen erbij: "Verborgen tekst of links in uw inhoud kunnen ertoe leiden dat de site als onbetrouwbaar wordt beschouwd, aangezien de site informatie aan zoekmachines anders aanbiedt dan aan gebruikers."
=====
En de toegift. :)
Maar ook uit oogpunt van gebruiksvriendelijkheid en toegankelijkheid zou ik de Welkom-tekst op de eerste enige echte homepagina zetten.

Gebruiksvriendelijkheid:
  • Toen Flash pas uitgevonden was, gingen de "state-of-the-art" webbouwers opeens al hun sites laten voorafgaan door een splash-screen, met de mooiste Flash-figuren en bewegingen en overgangen er in. Daarvoor moesten de bezoekers dan wel eerst de Flash-plugin voor hun browser installeren, anders konden ze de site niet op! (er zal vast wel onderzoek geweest zijn naar hoeveel afhakers dat opleverde).
    Na wachten op het downloaden van het Flash-bestand en het geduldig bekijken van het filmpje bleef dan uiteindelijk over: één knop met "kom maar binnen".
  • Ik denk dat dat vooral was ingegeven door designers die hun kunstje zo mooi vonden, en website-eigenaars die verguld waren met de prachtige impressie over hun bedrijf / organisatie / activiteiten enz.
  • Designers: die vooral oog voor het oog hadden, en voor wie de inhoud van de site minder van belang was. Website-eigenaars: die kenden de inhoud van de site al lang en breed, en waren blij met iets extra's dat hen van de collega's / concurrenten kon onderscheiden. Werd er nog gedacht aan de arme gebruiker, die moest wachten en extra klikken tot hij/zij de informatie kreeg waarnaar zij/hij op zoek was?
  • Ja, soms wel! Dan stond er een "Skip Intro" bij. :d Daar klikte ik altijd braaf op, om van het gedoe af te zijn: ik zocht een website met informatie, geen trendy "experience" ...
  • Hoe het ook zij, de laatste jaren zie je dat hiervan behoorlijk is teruggekomen: minder splash-screens vooraf, en het moois ingebakken in de site zelf. Gelukkig, vind ik als gebruiker!
Toegankelijkheid:
Een vooraf-pagina met alleen visuele betekenis is voor slechtzienden en blinden alleen maar ballast waar ze niets mee kunnen.
Zou je een hidden tekst gaan gebruiken, dan wordt deze wel uitgesproken door voorleesbrowsers, want die reageren niet op de css waarmee de tekst gehiddend is. Hetzelfde geldt voor het bekijken met pure tekstbrowsers (die in bv. gebruik zijn bij mensen die gehinderd worden door afbeeldingen, en dan de tekst makkelijk kunnen vergroten om 'm te kunnen lezen). Ook zij zien de "hidden tekst" wel op hun scherm verschijnen.
In dit geval zou dat de Welkom-tekst zijn. Maar die horen/zien zij dan dubbel, want die komt op de volgende pagina nog eens!
  • Voorbeeld: Hidden tekst, tenminste ...
  • Met screenshots van wat text- en voorleesbrowsers hiermee doen.
  • Met links naar add-ons om zelf de resultaten van een webpagina te kunnen zien met Lynx (text-browser) en Fangs (screenreader nabootser).
Al met al zou ik (bij de opdrachtgever) een stevig pleidooi willen houden om géén te openen kastje vooraf te vertonen, maar de pagina's in elkaar te schuiven en geen kliks aan de bezoeker te vragen om binnen te komen. Argumenten dus:
  1. Slecht voor Google.
  2. Onvriendelijk voor mensen zonder visuele beperkingen: extra handeling te verrichten voordat men op de homepage/welkom-pagina komt.
  3. Onvriendelijk/verwarrend voor mensen met visuele beperking: verdubbeling welkom-tekst.
  4. Als het openen van het kastje het tonen van het menu tot resultaat heeft (en niet de Welkom-tekst), dan voegt dat niets toe, maar is integendeel volstrekt overbodig: want hetzelfde menu stond al op de vorige pagina in de menubalk!
Wat je ook nog zou kunnen doen, is een test-panel voorstellen dat een aantal werkende varianten (vrijblijvend) gaat beoordelen. Test-panel: te ronselen uit de klantenkring; zo'n 15 mensen zouden waarschijnlijk wel iets kunnen vertellen over wat de gemiddelde bezoeker ervan zal gaan vinden aan "usability" en "accessibility". Bij voorkeur ook een blinde en een slechtziende erbij, en iemand die een motorische beperking heeft (en bv. de muis niet kan bedienen).

Met vriendelijke groet,
CSShunter
___________
*) Google heeft bv. op een gegeven moment het meetellen van de meta-keywords laten vervallen voor de ranking. Die werden door gouden bergen belovende "SEO-specialisten" misbruikt voor ook een soort "hidden tekst": om met keywords als "gratis", "Britney Spears" enz. veel bezoek binnen te halen.
Ook al viel er niets gratis te bekomen, en ging de site over een pluimveebedrijf ipv BS. :(
 
Laatst bewerkt:
hallo css hunter,
van begin tot eind van je pleidooi: ik ben het er helemaal h-o-n-d-e-r-d procent mee eens.
sterker nog, net voor ik de pc aanzette zat ik al te denken om ze maar voor te stellen die hele kast te vergeten.
om precies de redenen die je noemde: irritant nadat je het 2 of 3 keer gezien hebt, slecht voor google, en uiteindelijk voegt het niets toe.
zelf zou ik ook nooit met het idee van een animatie komen, of een flashfilmpje vooraf; ten eerste omdat ik het als bezoeker al irritant vind, maar ook omdat ik er niet erg goed in ben:). al dat gepiel.
de eerste reden is echter het belangrijkst. ik hou van duidelijke, efficiente sites, liefst met veel wit denk ik; een heldere, overzichtelijke site met een duidelijke navigatie. ik bezoek nl zelden een site om te genieten vd prachtige layout, maar wel om iets snel te kunnen vinden.

afijn, ik ga ze het maar even uitleggen...
misschien kan die hele kast zichzelf in. slaat nergens op, maar je begrijpt wat ik bedoel.

ps ja, ik had ook ooit zo eens iets gehoord over trucs met verborgen tekst. en ik hou er ook helemaal niet van. wil zeker niet 'op slechte voet' met google komen. zelfs een witte tekst op een witte achtergrond, een layer over een tekst etc. misschien zou dat nog wel 'mogen' , maar dan hou ik er nog steeds niet van. fair play in de websitewereld.

even later...
hmm, niet dus, ben er net even ingedoken, en kwam al snel dit tegen:
niet doen:
* Witte tekst gebruiken op een witte achtergrond
* Tekst achter een afbeelding plaatsen
* Tekst verbergen met behulp van CSS
* De tekengrootte instellen op 0

ps 2: wat bedoelen ze hiermee eigenlijk?
Laat zoekrobots uw site crawlen zonder sessie-id's en zonder argumenten die het bezoekerspad op de site bijhouden.
 
Laatst bewerkt:
... ik bezoek nl zelden een site om te genieten vd prachtige layout, maar wel om iets snel te kunnen vinden.
Klik om te vergroten...
Precies, daar moet de layout en de functionaliteit bij helpen! :)

Ad ps2
Mm, het fijne weet ik daar ook niet van. Over sessie-id's kwam ik deze tegen: www.google.com/support/forum/p/webmasters/thread?tid=56492a93e5617988&hl=nl. Als je geen sessie-id's in je url's verwerkt, heb je er volgens mij geen last van.

Over "argumenten die het bezoekerspad op de site bijhouden": dat zijn variabelen die met php of zoiets per gebruiker aan een url worden toegevoegd, en vertellen van welke pagina op de site je vandaan gekomen bent (zodat men met de server-logboeken het klikgedrag kan analyseren). Daar koopt een Googlebot ook weinig voor. Die probeert alles te crawlen, en komt dan in de problemen als dezelfde link via een nieuwe pagina nog eens afgetast wordt: het zou dan zogenaamd een andere pagina zijn.
 
gif animatie kastje open dicht

hallo csshunter
ok, ik heb je uitleg over de css en de gif gelezen.
nu vraag ik me af: met wat maak je zo'n gif. ik heb een gif-animator (Advanced Gif Animator) ooit eens gedownload, maar die houden hun logo of zo in beeld als je gif klaar is.
tenzij je 29 dollar betaalt. wil ik best doen hoor, als het niet anders kan, maar misschien kan het wel anders.

is er een gratis gif-animator? of kan ik flash hier voor gebruiken?

ik heb nl een probleem. die mensen vonden dat een goed idee, de broodtekst op de homepage, maar dan naast het kastje.
echter, mijn eerste truc was natuurlijk helemaal geen gif (zie www.finefleurbrocante.nl) . het waren twee plaatjes op 2 verschillende paginas.

nu gaat dat trucje niet meer op (tenzij ik de welkomsttekst ook op pagina 2 zet).*
want het moet niet meer naar een andere pagina gaan, snap je?

in een iframe leggen, die kast dicht en die kast open, is ook geen optie, want na de klik moet je een andere pagina openen en die opent ofwel in de iframe, ofwel krijg je een extra tab, en dat staat nogal amateuristisch.
(dan staat de site 2x open). ik kom dus gewoon die iframe niet uit als ik een link heb in die iframe.


* heb het toch maar even zo opgelost, hopelijk kraait er geen haan naar
 
Laatst bewerkt:
Mij hoor je niet kukelen. ;)

Sinds jaar & dag gebruik ik voor tekenwerk een oude PaintShopPro vs.6 (ze zijn nu op vs. 14), waar ook een "Animation Shop" in zit.

De nieuwe versie kost € 89,99, maar ik scharrelde dat op www.oldversion.com een gratis PSP6 (en nog wat andere) te downloaden valt. :)

Hoop dat ie het doet! (in PSP maak je in laagjes de standen, daarna stuk voor stuk naar een frame in AnimationShop kopiëren en plakken).
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan