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)

  1. Importeer de afbeeldingen in de bibliotheek
  2. Maak een nieuwe laag knoppen.
  3. Sleep alle afbeeldingen het werkgebied
  4. Verklein alle afbeeldingen
  5. Kies het gereedschap uitlijnen
  6. Klik op distribueren zodat de tussenruimtes gelijk worden
  7. Selecteer 1 afbeelding
  8. Druk op F8 om de afbeelding om te zetten in een symbool.
  9. Kies in het dialoogvenster Omzetten in symbool de optie knop en noem het symbool  knop1. Klik op OK
  10. 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

  1. Dubbelklik op het knopsymbool. Je ziet nu de tijdlijn van de knop, en dus niet de hoofdtijdlijn.
  2. Voeg een hoofdfame toe aan Boven en aan Omlaag
  3. Selecteer het hoofdfame en klik op het werkblad op de knop
  4. Ga in de menubalk naar wijzigen > omzetten in symbool en kies Afbeelding
  5. 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:

  1. Selecteer knop1 in de werkruimte
  2. Geef een instantienaam in het eigenschappenvenster: knop1_aap
  3. Maak een nieuwe laag en noem deze actions

Nu ga het actionscript toevoegen aan je bestand

  1. Ga naar de menubalk, klik op venster en klik op handelingen (actions), of open het venster met functietoets F9
  2. Klik op de tijdlijn op het eerste frame van de laag actions
  3. 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;
}
  1. Sla het bestand op en maak een voorvertoning
  2. 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.