Een portfolio maken met flash
In deze les leer je het volgende:
- Wat zijn interactieve bestanden
- Knoppen maken
- Knoppen dupliceren
Interactieve bestanden
Interactieve bestanden zijn bestanden die veranderen als gevolg van acties van de gebruiker. Als de gebruiker op een knop klikt, wordt er bijvoorbeeld een grotere versie van een afbeelding weergegeven. Of er verschijnt een andere pagina op het scherm wanneer de gebruiker op een menu-item klikt. Interactiviteit kan ingewikkeld zijn en allerlei berekeningen vereisen, maar kan ook eenvoudig zijn, zoals het veranderen van de kleur van een knop.
Nieuw bestand
Maak een nieuw flash-bestand en stel de hoogte en breedte in op 960*600 pixels en sla het op met de naam portfolio.fla
Knoppen maken
In dit voorbeeld geeft elke knop een grote versie weer van de afbeelding in het contentgedeelte van het werkgebied. Om dit te bereiken ga je verscheidene symbolen maken: afbeeldingsymbolen, filmclipsymbolen en knopsymbolen. Een afbeeldingsymbool bevat de afbeeldingen en geeft een bepaald frame weer. Een filmclipsymbool animeert de toestand Boven van de knop, waarbij de afbeelding ietsje groter wordt wanneer de muisaanwijzer eroverheen wordt bewogen. Het knopsymbool bevat in zijn knoptoestanden de afbeelding-en filmclipsymbolen.
Een afbeeldingsymbool maken met meerdere frames
Kies de foto’s die je wil gaan gebruiken, en maak ze in photoshop passend (dus kleiner dan de afmetingen van je flash bestand)
- Importeer de afbeeldingen in de bibliotheek
- Maak een nieuwe laag knoppen.
- Sleep alle afbeeldingen het werkgebied
- Verklein alle afbeeldingen
- Kies het gereedschap uitlijnen
- Klik op distribueren zodat de tussenruimtes gelijk worden
- Selecteer 1 afbeelding
- Druk op F8 om de afbeelding om te zetten in een symbool.
- Kies in het dialoogvenster Omzetten in symbool de optie knop en noem het symbool knop1. Klik op OK
- Herhaal stap 7 tot en met 9 voor iedere afbeelding
Alles wordt stap voor stap uitgelegd in deze video:
1 – afbeeldingen importeren en knopsymbolen maken from Luc Brouns on Vimeo.
rollovers maken
- Dubbelklik op het knopsymbool. Je ziet nu de tijdlijn van de knop, en dus niet de hoofdtijdlijn.
- Voeg een hoofdfame toe aan Boven en aan Omlaag
- Selecteer het hoofdfame en klik op het werkblad op de knop
- Ga in de menubalk naar wijzigen > omzetten in symbool en kies Afbeelding
- Vervolgens kies je in het eigenschappenVenster > kleur > tint, en stel je tint in op 70%.
Sla het bestand op en maak een preview (CTRL Enter) Ga met je cursor over de knop om te zien wat het effect is.
2 – Rollover effect toevoegen aan knop from Luc Brouns on Vimeo.
grote foto tonen onclick
De volgende stap is het tonen van de grote foto als de gebruiker op een knop klikt. De grote foto’s moet je in een mapje zetten waar ook je flashbestand staat.
Geef de knopinstantie een naam zodat deze met Actioscript aangeroepen kan worden:
- Selecteer knop1 in de werkruimte
- Geef een instantienaam in het eigenschappenvenster: knop1_aap
- Maak een nieuwe laag en noem deze actions
Nu ga het actionscript toevoegen aan je bestand
- Ga naar de menubalk, klik op venster en klik op handelingen (actions), of open het venster met functietoets F9
- Klik op de tijdlijn op het eerste frame van de laag actions
- Voeg de volgende code toe in het handelingenvenster:
var myloader:Loader = new Loader(); knop1_aap.addEventListener(MouseEvent.CLICK, foto1); function foto1(event:MouseEvent):void { var request:URLRequest = new URLRequest(“foto/aap.jpg”); myloader.load(request); addChild(myloader); myloader.x=220; myloader.y=100; }
- Sla het bestand op en maak een voorvertoning
- Controleer of de knop werkt
3 – Grote foto tonen onClick from Luc Brouns on Vimeo.
Opdracht
Maak een bestand met minstens 4 werkende knoppen met een rollover-effect en met beeldvergroting. Pas waar nodig het actionscript aan.
Laat deze opdracht aftekenen door je docent.
Comments are closed.