Flash-handleidingen maken met Wink
Hebt u ooit al eens een computerprobleem via de telefoon moeten uitleggen? Dan weet hoe lastig dat kan zijn! Maak het u (en vooral anderen) voortaan makkelijk met Wink. Met deze gratis tool presenteert u de hele procedure in een handig Flash-filmpje. Het programma maakt automatisch schermbeelden (screenshots) en kan bovendien uw stem opnemen.
Hebt u ooit al eens een computerprobleem via de telefoon moeten uitleggen? Dan weet hoe lastig dat kan zijn! Maak het u (en vooral anderen) voortaan makkelijk met Wink. Met deze gratis tool presenteert u de hele procedure in een handig Flash-filmpje. Het programma maakt automatisch schermbeelden (screenshots) en kan bovendien uw stem opnemen. Het filmpje kunt u vervolgens kwijt in het populaire Flash-formaat of zet u om in een handig exe-bestand. Voortaan maakt u dus uw eigen geanimeerde instructiefilmpje.
Stap 1
Surf naar www.debugmode.com/wink en haal de meest recente versie van Wink binnen. Er is ook een Linux-versie, maar in deze workshop richten wij ons uitsluitend op de Windows-variant. Nadat u het gedownloade zip-bestand hebt uitgepakt voert u het exe-bestand uit. Verklaar u akkoord met de licentieovereenkomst, kies de gewenste installatiemap (standaard is dat \Program Files\DebugMode\Wink) en druk op deknop Install. Laat de tool gerust een programmagroep in het startmenu creëren. Na afloop start u Wink op via de Windows-startknop, Alle programma's, Debugmode, Wink. In deze programmagroep vindt u trouwens ook een Engelstalige pdf-handleiding.
Stap 2
Voor u aan de slag gaat, controleert u bij voorkeur enkele instellingen. Open hiervoor het menu File en kies Preferences. Er verschijnt een dialoogvenster met heel wat opties. Laat u dat niet verontrusten, want de standaardinstellingen voldoen gewoonlijk wel. Controleer bij Change hotkeys for [...] wel even of u de drie sneltoetsen voor het vastleggen van de schermbeelden geschikt vindt. Standaard zijn dat Pause, Shift+Pause en Alt+Pause. Bevestig uw eventuele wijzigingen met OK. In het File-menu kunt u ook Choose Language, Dutch selecteren, maar vreemd (en jammer) genoeg blijft Wink ook dan aan het Engels vasthouden.
Stap 3
Tijd nu voor een eerste project: we willen met behulp van een becommentarieerde animatie uitleggen hoe u in Windows een driver kunt updaten. Daarvoor kiest u New in het menu File. Het venster van de New Project Wizard verschijnt. Laat alvast het vinkje staan bij Start by capturing screenshots en geef in het uitklapmenu te kennen dat u geen Screen maar een Window wilt vastleggen. Hebt u ooit voor een ander project toch het volledige scherm (Screen) nodig, zorg er dan voor dat u de schermresolutie niet tè hoog instelt, anders loopt u het risico dat de kijker tijdens uw filmpje voortdurend moet scrollen.
Stap 4
Nu starten we het eerste venster dat we voor ons project nodig hebben: het Windows Configuratiescherm. Zorg er bij voorkeur voor dat dit net zo groot is als het venster van het Apparaatbeheer dat u later in uw driver-handleiding nodig zult hebben. Nadat u in het Wink-venster op de knop Choose hebt gedrukt, klikt u het venster van het Configuratiescherm aan: dat krijgt nu groene hoeken mee. Wilt u dat Wink straks automatisch schermbeelden opneemt zodra u een muisknop of een andere toets indrukt, laat dan het vinkje staan bij Mouse Click en bij Key Press. Om tegelijk ook commentaar te kunnen opnemen plaatst u een vinkje bij Record Audio. Bevestig met OK en daarna met Minimize To Tray.
Stap 5
De opname kan nu beginnen. Zorg er alvast voor dat het venster van het Configuratiescherm actief is. Telkens u nu op de Pausetoets drukt, neemt Wink een schermopname van dit venster. Het kan echter ook 'automatischer'. Zodra u namelijk de toetscombinatie Alt+Pause indrukt, maakt Wink een schermopname telkens u een toets of een muisknop indrukt (afhankelijk van uw instellingen in de vorige stap). Wink gaat hiermee door tot u nogmaals Alt+Pause indrukt. U kunt echter ook Shift+Pause inzetten: in dit geval maakt Wink non-stop schermopnames tot u diezelfde toetscombinatie nogmaals indrukt. Vergeet ondertussen ook niet het nodige commentaar in uw microfoon in te spreken tijdens uw demonstratie, als dat tenminste de bedoeling was. Let er wel op niet tè snel te werk te gaan, zodat Wink uw uitleg en bewegingen netjes kan bijbenen. Is uw demonstratie (binnen dit venster) afgelopen, klik dan het Wink-pictogram, rechts op de Windows-taakbalk, met de rechtermuisknop aan en kies Finish Capture.
Stap 6
U komt nu opnieuw terecht in het hoofdvenster van Wink. Onderaan ziet u alle schermopnames (frames) netjes opgelijnd. Stel uw opnames alvast veilig via File, Save en sla het als een wnk-bestand op. Op dezelfde manier kunt u nu de volgende opnames (binnen het venster van Systeemeigenschappen en nadien binnen het venster van het Apparaatbeheer) inblikken, waarbij u ook deze twee opnames in een apart wnk-bestand opslaat. Open nu de drie opnamebestanden in Wink. Ga naar het tweede opnamebestand, selecteer alle frames (met Ctrl+a), kopieer die naar het klembord (met Ctrl+c), ga naar het laatste frame uit het eerste opnamebestand en voeg de gekopieerde frames achteraan toe (met Ctrl+v). Herhaal dit voor de frames uit het derde opnamebestand. Uw eerste opnamebestand bevat nu alle frames uit uw handleiding. Frames verplaatsen doet u heel eenvoudig door ze met de muis te verslepen, en een geselecteerd frame verwijderen is niet moeilijker dan op de Delete-toets drukken. In het Properties-paneel kunt u voor elk frame ook instellen hoelang dat zichtbaar moet blijven: Stay in this frame for [...] sec.
Stap 7
U merkt dat Wink standaard ook de muiscursor mee opneemt: die komt trouwens erg opvallend in beeld in de vorm van een gearceerd vierkantje. Handig is wel dat u dit vanuit het hoofdvenster van Wink op elk moment nog naar een andere positie kunt verschuiven. Als u op dit vierkantje dubbelklikt, verschijnt bovendien een dialoogvenster dat u toelaat een ander cursorontwerp te selecteren. Via de knop Import from kunt u zelfs een eigen ontwerp ophalen. Hebt u bij bepaalde frames liever géén cursor, dan hoeft u in het Properties-paneel slechts het vinkje te verwijderen naast Cursor. Op dezelfde manier haalt u trouwens ook de bijhorende audio weg.
Stap 8
Het is eveneens mogelijk frames van tekstballonnen te voorzien. Selecteer hiervoor een of meer frames en druk op het vierde knopje (Add Textbox) bovenin het Properties-paneel. Een geel tekstkader verschijnt in de geselecteerde frames. De locatie en de grootte past u met eenvoudige versleepbewegingen van de muis aan en via een dubbelklik in het kader kunt u eigen tekst invoeren. Liever een ander ontwerp? Geen probleem: een ommetje naar de knop Choose Callout in het Properties-paneel volstaat en via de knop Create New ontwerpt u van de grond af uw eigen tekstkader. Via de knoppen Choose Font en Choose Text Align past u net zo makkelijk ook het lettertype en de uitlijning van uw tekst aan.
Stap 9
Op vergelijkbare manier voegt u ook afbeeldingen (Add Image) en uiteenlopende vormen (Add Preset Shape) aan uw frames toe. Deze objecten kunt u niet alleen bewerken: u kunt ze ook geheel zelf creëren. We geven een voorbeeld. Druk op de knop Add Preset Shape (bovenin het Properties-paneel) en druk vervolgens op Create New. Geef een geschikte naam aan de te ontwerpen vorm (bijvoorbeeld: Eigenvormen.Uitroepteken). Er verschijnt nu een dialoogvenster waarin u de vorm verder gestalte kunt geven. Via de knopjes bovenaan tekent u de gewenste vorm(en) en in het paneel Shape Properties legt u allerlei eigenschappen vast, waaronder lijndikte en vulkleur. Bovenaan rechts selecteert u wel eerst de vorm die u wilt bewerken. Tweemaal bevestigen met OK en uw vorm prijkt al in het frame.
Stap 10
Wat echter als u de kijker snel even wit meetronen naar een interessante website, of als u hem de gelegenheid wil geven een stuk van de handleiding over te slaan? Ook dat kan, met behulp van navigatieknoppen. U vindt hiervan vier types in het Properties-paneel terug: Add Previous Button (laat de kijker naar het vorige frame terugkeren), Add Next Button (brengt hem naar het volgende frame), Add Goto URL Button (roept een webpagina op) en Add Goto Frame Button (voert hem naar een specifiek framenummer in uw presentatie). In dit laatste geval verschijnt een dialoogvenster waar u het doelframe maar hoeft te selecteren. Zodra u met OK bevestigt, verschijnt een groen knopje in het bronframe. Dat kunt u echter schalen en verplaatsen, maar ook door een eigen exemplaar vervangen: hiervoor maakt u gebruik van de knop Choose Image. Het is misschien geen slecht idee zo'n knop van een verklarend tekstballonnetje te laten vergezellen.
Stap 11
Uw presentatie is afgewerkt en het grote moment is aangebroken: inblikken in een heus Flash-filmpje! Zorg er wel eerst voor dat u uw project veilig en wel in een wnkbestand hebt opgeslagen, zodat u het nadien altijd nog kunt bewerken. Open vervolgens het menu Project en kies Settings. Kies het gewenste formaat bij Output File Type (Macromedia Flash of Windows Executables) en leg ook de bestandnaam en bestandslocatie vast. Wellicht verkiest u het vinkje bij Enable Audio Output te laten staan. De andere instellingen kunt u in principe ongemoeid laten. Handig voor de kijker is alvast de optie Add control bar to flash output, zodat hij zelf de voortgang van de animatie kan bepalen. Ook nuttig bij 'zwaardere' animaties: Add preloader to flash output, zodat de kijker weet dat er een animatie in aantocht is. Zodra u hebt bevestigd met OK, kiest u Render in hetzelfde menu. Even later is uw presentatie klaar! Hebt u voor een swf-bestand geopteerd, dan genereert Wink automatisch ook een bijhorend htmlbestand van waaruit het flashfilmpje automatisch opstart. Veel kijkgenot!
Deze workshop komt uit Computer Idee 06, jaargang 2009.