Don Blaauw Beginsele n illustratie en animatie in Flash

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie  BeeldMediaTechnologie/Interaction Design ’91-’96  Freelancer ’96 –’97  Vormgever Lectric ’96 –’00  Vormgever Animator bij IJsfontein ’00-’07 Een paar voorbeelden van het werk van Don (later meer) Wie is Don Blaauw??

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie  Het leren van de beginselen van illustreren en animeren in Flash  Flash, het programma (Uitleg van wat menu’s en panelen)  Illustreren tools  Animeren  Tips en truuks  huiswerk De workshop

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Flash 0 t/m 9  FutureSplash Animator (1995)  Flash 1 (1996)  Flash 2 (1997)  Flash 3 (1998)  Flash 4 (1999)  Flash 5 (2000)  Flash MX (2002)  Flash MX 2004 (2003)  Flash MX 2004 Pro (2003)  Flash 8 (2005)  Flash player 9 (2006)  Flash CS3 (2007)  Bron: Bron:

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Flash 9, de onderdelen  Menubalk  Stage  Toolbar  Timeline  Properties  Color mixer/ color swatches  Library  actions

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Flash-menubalk 01  Belangrijke onderdelen per pulldown-menu  File Aanmaak en bewaren documenten Importeren en exporteren Publish settings  Edit Copy/past in place Preferences Keyboard shortcuts  View Snapping (ctrl(of apple)-shift /) Pasteboard aan of uitzetten

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Flash-menubalk 02  Belangrijke onderdelen per pulldown-menu  Insert Insert symbol (ctrl-F8) Maak een symbool van je plaatje Insert Scene  Modify Document aanpassen (CTRL-J)  Text Alle text onderdelen zijn via de properties panel handig aan te passen.

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Flash-menubalk 03  Belangrijke onderdelen per pulldown-menu  Commands Handige commando verlichten je werk enorm :0)  Control Loop playback Enable simpleframe actions Enable buttons  Window Windows weer openen na per ongeluk sluiten Windows die je vaak zult gebruiken: Timeline,tools,properties,library,align,color, swatches,transform en actions

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Illustreren De timeline.Wat is belangrijk? Layers Maskers guide layers folders

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Illustreren 01  Waarmee kun je illustreren binnen Flash  De tools in de toolbar Outline en fill; valkuilen Onderaan de toolbar staan opties per tool De Properties panel laat nog meer opties zien Vectoren en gummen ;anders dan Illustrator Lijnen en vlakken, vullen en verlopen. de color panels Zelf doen!!

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Illustreren 02  Je afbeelding aanpassen:  Foto’s: importeren en bewerken (Tracen)  Lines to fills  Arrange [ctrl-up] en [ctrl-down]  Groeperen;Riskant  Align panel: oh zo handig Zelf doen!!

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Illustreren 03  Symbolen: Movieclips, graphics en buttons Verschillen tussen de drie Color en blend modes filters Zelf doen!! De button  library  Vals spelen library en properties  Recycle; Hergebruik van dezelfde onderdelen

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Illustreer dan!  Opdracht (10 minuten):  Maak een illustratie waar minstens 5 movieclips,3 graphics en 2 buttons in voorkomen.  Gebruik filters, color modes en blend modes.

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Animeren  De timeline.Wat is belangrijk? Layers,maskers guide layers, folders en labels  Symbolen: Movieclips en graphics Verschil in gebruik in een animatie  Soorten animatie: Tween en Shape animaties  Frame properties.wat is wat? Ease in – ease out  Test je animatie  Superhandige Animatie hulp: Onionskins

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Animatie shortcuts Essentieel!  keyframes Belangrijke animatie Shortcuts. Leer ze uit je hoofd: [F5] maak een frame aan [F6] maak van een frame een keyframe [F7] maak van een frame een lege keyframe [,] Een frame achteruit in je timeline [.] Een frame vooruit in je timeline

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Animatie binnen animatie  JA, het kan.en het is handig  Voorbeeld: de stuiterende bal  Voorbeeld: lopend poppetje  Zelf doen!

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Vrije animatie opdracht  Animeer een strand scene.  Maak tenminste 3 animaties, waarvan er 1 een animatie binnen een animatie is.  Gebruik ease-in en eae-out animaties  Gebruik van colormode- en filteranimaties

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie De andere button  De doorzichtige button en een movieclip button waarom; animaties op rollOut mogelijk  Actionscript: “The simple way” [esc] –”st” :stop invoegen [esc] –”go” :gotoandPlay invoegen [esc] –”gs” :gotoandsStop invoegen Zelf doen!

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Werken naar de opdracht toe  Gebruik je illustratie- en animatiekennis om een flash banner te maken voor je zelf bedachte bedrijf.  Gebruik 10 minuten om te brainstormen wat voor diensten je bedrijf levert en wat dat bedrijf zou willen communiceren naar op het internet.  Maak een snel storyboard in flash

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie  120x600 (Skyscraper)  160x600 (Skyscraper)  180x150 (Rectangle)  240x400 (Rectangle)  250x250 (Popup)  300x250 (Rectangle)  336x280 (Rectangle)  468x60 (Banner)  500x500 (Popup) Veel voorkomende flashbanner maten

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Huiswerk  Maak voor de volgende les een volledig werkende flashbanner in 1 van de voorgestelde formaten.  Opdracht. Interactief en animaties.

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Ter informatie en inspiratie Sites om te bekijken:    Forum:    Tutorials:     Boeken: 

28/8/07Mediamatic Maatwerk | Flash Illustratie en Animatie Vragen?

Einde