Resultaat na één dag training Edge Animate

Hoe veel kun je al doen in 1 dag training? Deze week gaf ik cursus in Edge Animate. Maar er was wegens omstandigheden maar ruimte voor 1 dag uitleg. Gelukkig had ik twee ‘snelle’ cursisten.

Dit hebben we gemaakt:


Interface Edge Animate

De cursus was bij 123inkt. Uitgangspunt was een bestaande banner. Eerst de interface uitgelegd. En dan beginnen! De bestaande banner was als Gif-animatie gemaakt zonder beweging: slechts wisselende beelden en teksten. Die banner moest eind van de dag in een nieuw jasje zijn gegoten. Hieronder beschrijf ik de dilemma’s en uitdagingen waar mijn groepje een antwoord op moest vinden.

Uitdagingen met Animate

  1. Grasmat die beweegt. 123inkt heeft normaal gesproken een blauw wolkenluchtje in de achtergrond, maar omdat het hier gaat om sponsoring van jeugdvoetbal mocht er afgeweken worden. We kozen een subtiele beweging van de grasmat. Hij gebruikt een lus, zodat het einde van de animatie vloeiend overgaat in de herhaalde animatie.
  2. Compressie van Jpeg. Omdat webbanners klein moeten zijn, moest de grasmat flink gecomprimeerd worden. Eigenlijk is een grasmat dan een slechte keuze, maar we kwamen uit op een goede compressie met acceptabel beeld.
  3. Logo van 123inkt. Die bestond al in Illustrator, in sRGB mode. Dan is het een kwestie van kopiëren en plakken. Bij plakken in Edge Animate wordt een svg-bestand aangemaakt: prima schaalbaar, en lekker klein (3,5Kb).
  4. Cirkel met vriendenkorting: Het is een animatie van een cirkel die de letters alleen laat zien binnen de cirkel. De cirkel beweegt naar beneden, maar de letters er in staan stil en bewegen niet mee. Dat moet apart ingesteld worden in Edge Animate (d.m.v. overflow=hidden).
  5. De animatie waarin de cirkel groter wordt heeft een Ease-Out, Elastisch (dan veert ie nog wat na). Die moet knallen en opvallen. Mag best een beetje opdringerig zijn. Ook de kleur rood helpt daar in.
  6. Om niet de hele tijd snel bewegende dingen te krijgen, kozen we voor een fade-in van het gele vlak met zwarte tekst: even rust in de advertentie. Dat doen we door de Opacity te animeren.
  7. Aan die rust komt een snel einde door de tweede tekst, die de eerste weg stoot.
  8. Daarna schuift het gele vlak omhoog. Omdat er geanimeerd wordt met een clipwaarde van de omvattende container, zie je de letters èn het gele vlak verdwijnen.
  9. En aan het eind van de tijdlijn gekomen, wanneer het gele vlak naar boven is verdwenen, zie je de grasmat weer even schuiven: naar links totdat ie aan het eind van de animatie weer precies op de positie is gekomen die hij aan het begin óók had. Dan lijkt het vloeiend door te schuiven.

Wil je de bestanden zelf zien? Dan kun je ze hier downloaden.

Volg zelf ook een cursus Edge Animate. 

Zo ziet die training er uit

Samenvatting
Naam van Artikel
Adobe Edge Animate: wat kun je al na een dag doen?
Beschrijving
Een kort verslag over wat al haalbaar is in een cursus van 1 dag. Eigenlijk moet je er twee dagen voor nemen. Maar als het alleen gaat om banners, kan je in een dag al een heel eind komen.
Auteur


Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

*

Onderwerpen