een externe afbeelding in Flash importeren - een fotoalbum
Een externe afbeelding in Flash importeren zorgt ervoor dat bij vele afbeeldingen
de Flash-movie niet te groot wordt.
Ook kun je verder gaan door zelfs een Flash-album te maken.
Hiernaast een album, waarbij uit 'gemak' de foto's niet apart verkleind
zijn voor de knoppen. Dit is makkelijk voor de klant, maar heeft een vertraging
en een vermindering van beeldkwaliteit tot gevolg.
De swf is 1 kB groot terwijl de 6 afbeeldingen in grootte varieëren
tussen 270 kB en 414 kB!!
een foto importeren
Flash kan foto's met bestandstype *.jpg importeren. Het jpg-bestand mag
géén progressieve compressie hebben. Het is
bovendien zeer aan te bevelen in PhotoShop (of een ander beeldbewerkingspakket)
de foto's op het juiste formaat te schalen. Schalen binnen Flash kan wel,
maar levert vertraging en een slechtere beeldkwaliteit op. Voorbereiding.
In deze oefening worden alle bestanden eerst op een grootte van 600 bij 450
pixels gebracht. Bovendien zijn ze opgeslagen als f1.jpg, f2.jpg, f3.jpg,......f6.jpg.
Deze namen komen straks in het script weer terug. Alle foto's staan in een
mapje fotos. Deze map staat naast het flash-bestand.
( Helaas lukt het importeren van *.png-bestanden niet. Het kan alleen met
*.jpg-bestanden, waarbij er géén progressieve compressie gebruikt
mag wordenn Natuurlijk kun je van andere bestandtypen natuurlijk ook eerst
een *.swf maken en deze dit swf-bestand importeren op dezelfde manier zoals
we dat in deze oefening doen. wellicht kun je er dan eerst nog een animatie
in de swf-movie maken!)
Start Flash, maak een nieuw document. Voor deze training heeft deze een
grootte van 750 bij 500 pixels zodat de foto's er goed inpassen, met de knoppen
er nog naast. De achtergrondkleur is naar eigen inzicht. De toetscombinatie
CTRL+2 (+2) zorgt ervoor
dat de stage volledig in beeld is.
Noem de eerste laag fotolaag en trek een rechthoek. Kleur en rand
doen er niet toe, als het zelf maar kunt zien. Deze rechthoek wordt straks
door de foto vervangen. Als je hem helemaal selecteert, dan kun je in de property-balk
de grootte aanpassen tot 600 bij 450 pixels. Dan kun je hem op een postitie
brengen zoals je dat zelf goed vindt, in ieder geval met ruimte voor de knoppen.
Kies Modify >> Convert to Symbol... om hem tot movieclip
om te zetten. Geef hem als naam vlak mee.
Geef hem ook de instance-naam houder mee.
Sla je flashdocument op naast de map fotos.
Maak een nieuwe laag akties. Open het aktie-venster (Flash MX gebruikers
zetten die in de Expert-mode als dat nog niet het geval is.) Wijs het eerste
frame aan in de aktielaag.
Voer het volgende script in:
loadMovie("fotos/f1.jpg","houder");
Hierbij is loadMovie de actie, die plaatsvindt zodra de movie speelt;
fotos/ de mapnaam waar de foto's in zitten; f1.JPG de naam
van de foto en houder de naam van de movie-clip die vervangen wordt
door de foto. Daarbij zal de linker-bovenkant van de foto op de plaats van
de linker bovenkant van de movieclip komen.
Test de movie. Sla deze op. Je ziet het is eenvoudig om een afbeelding in
een flash-movie te laden. Kijk bovendien maar eens hoe klein de flash-movie
is. Bij het inleveren van een project (of het up-loaden van een site) is het
natuurlijk wel van belang de map met foto's ook in te leveren.
een foto importeren, door op een knop te klikken
Teken een eenvoudige vorm, die als knop kan dienen. Maak er op de welbekende
wijze een knop van en geef hem als instance-naam knop1 mee.
Sleep er nog een instance van die knop op de stage, en noem die knop2.
Het script dat er al staat is als volgt uit te breiden:
Naast het al laden van de eerste foto zal er nadat er op knop2 gedrukt wordt
(knop2.onRelease = function()) de movieclip houder met f2
worden gevuld uit de map fotos/.
Dit kun je uitbreiden met -tig knoppen.
gebruiksvriendelijke voor eigenaar en bezoeker:
Knoppen automatisch de afbeelding verkleind meegeven
Voor de gebruiker is het wellicht wenselijk dat de knop een verkleinde
afbeelding van de foto is. Enig denken over de voorgaande materie leert dat
een movieclip te vervangen is door een foto. Dat gaan we dan ook doen. De
eigenaar die de site onderhoudt heeft dan automatisch goede knoppen, zonder
dat hij het Flash-document opnieuw moet bewerken.
Gooi de knoppen weg. We moeten immers movie-clips hebben, omdat die door
een afbeelding kunnen worden vervangen.
Maak weer een rechthoekje op de plaats van de "knop". Zet hem
om naar movieclip, bijvoorbeeld met de naam knop.
Geef hem de instance-naam knop1.
Klik dubbel op de movie-clip knop je zou nu de vorm kunnen bewerken.
Zet deze vorm echter om naar opnieuw een movie-clip met als naam houder
en de instance-naam knophouder. Deze movie-clip -in een movie-clip-
wordt straks de afbeelding, en aan de movie-clip knop1 wordt dan
de actie gekoppeld dat er een afbeelding geladen moet worden in houder.
We werken hier met een movieclip in een andere movieclip. Elk van deze wordt
door een script aangestuurd. De movieclip knophouder wordt door een
afbeelding vervangen. Als dat is gebeud, kan er geen script meer op werken.
Je kunt nog wel script op knop1 loslaten, die de knop bijvoorbeeld
10 keer zo klein maakt als de afbeelding.
Ga terug naar Scene 1 en sleep nog een knop uit de bibliotheek
(of kopieer knop1) en geef de instance van deze knop de naam knop2.
Wijs het script nu weer aan. Er komen een paar regels tussen.
De rode en felgroene regels laden op dezelfde manier de afbeeldingen als we
hierboven gedaan hebben.
Er wordt echter telkens een regel toegevoegd knop1._xscale=knop1._yscale=10;
die de knop1 horizontaal tot 10% verkleind (_xscale) en vertikaal tot 10%
verkleind (_yscale=10).
Het zou ook mogelijk (en beter) zijn dat er vooraf kleine afbeeldingen van
de foto's staan opgeslagen (bijvoorbeeld fotoklein1.jpg), dan zou
die op de plaats van de knop kunnen worden ingeladen, en dan hoeft er niet
verkleind te worden in Flash. Dit is als je telkens andere foto's wil laten
zien wel bewerkelijker.
Dit script kun je voor meerdere foto's uitbreiden. Het script wordt dan
wel erg veel groter. Per knop 3 regels script!
Wellicht verderop een manier om het aantal scriptregels binnen de perken te
houden en met het script nog meer effecten aan de knoppen toe te voegen zoals
boven aan deze pagina.
ge-avanceerder: een roll-over effect in de knoppen
We gebruiken tot nu toe geen echte knop, en dat gaan we ook niet doen. Het lukt
niet met script de knop zelf te sturen. We schrijven het script dus voor knoppen,
die in Flash eigenlijk movieclips zijn. In het voorbeeld heb ik 7 knoppen, en
voor iedere knop zal dan 10 regels script nodig zijn om te vertellen wat er
gebeurt als je met je muis erover gaat, en wat er gebeurt als je met je muis
weer van de knop vertrekt. Dat wordt heel veel script. Het is daarom nu eenvoudiger
het script aan de knop in de bibliotheek te koppelen. Dan wordt het script vanzelf
in elk van de knoppen op de stage meegenomen. Dat scheelt heel wat regels script
schrijven. Het nadeel is wel, dat er nu script op 2 plaatsen in het flash-document
staat: 1 keer in frame 1 van de hoofdmovie, en een keer in frame een van de
moviecip knop.
Haal eerst de script-regels
knop1._xscale=knop1._yscale=10;
en
knop2._xscale=knop2._yscale=10;
weer weg. (als je de moevie nu test, zijn de knoppen veel te groot. we gaan
het script nu in de knop zelf plaatsen.
Klik dubbel op de movieclip knop in de bibliotheek. Voeg daar het
volgende script aan toe:
betekent dat het script betrekking heeft op de knop, waar nu het script in
geplaatst is. Elke instance van de knop wordt nu 10 keer horizontaal en vertikaal
kleiner geschaald. We hoeven dat dus niet meer apart voor elke knop te schrijven.
dat is het handige van this.
Het script zegt in de volgende regels dat de knop een transparantie krijgt
en this.onRelaese geeft aan dat je iets gaat vertellen wat er moet
gebeuren als een knop door de muis wordt bedekt. In dit script moet de knop
minder geschaald worden: in plaats van 10% wordt dat nu 15%. Omdat de schaling
vanuit de linkerbovenhoek gaat, moet je de movieclip knop ook iets
naar links en naar boven verschuiven: Met this._x -= 15 en this._y
-= 10; trek je van de x- en y-coördinaat van de movieclip 15 respectievelijk
10 pixels af.
De _alpha waarde van this wordt bij de roll-over op 100
gezet.
Nadat de muis weer van de movieclip knop afgegaan is weer beschreven
wat er met de movieclip weer moet gebeuren.het omgekeerde verhaal dus voor
schalen, verplaatsen en transparantie.
Als je straks meerdere knoppen gebruikt, geldt dit script voor al die knoppen!!
Je kunt eventueel ook nog een rode rand om de knoppen plaatsen, door in de
movieclip knop een extra laag te maken, en daarin een rood kader
te tekenen. Laat die dan in de linkerbovenhoek beginnen, en teken hem op ware
grootte: 600 bij 450 pixels. (waarschijnlijk veel groter dan de movieclip
houder.) Geef de rand een forse dikte:8 of meer pixels door de schaling van
het script wordt hij immers flink kleiner. Je kunt via View >>
Rulers de linealen zichtbaar maken.
Keer terug naar Scene1 en test je movie. In Scene1 zie
wel dat de kaders van de knoppen elkaar overlappen. Ze worden immers pas door
het uitvoeren van het script op maat gezet.
de foto's laten overvloeien
De movie wordt nu pas leuker als je meerdere knoppen en foto's hebt.
Zorg ervoor dat je minimaal 5 foto's en 5 knoppen hebt. Doe dit vergelijkbaar
met de knoppen knop1 en knop2. Laat alles naar behoren
werken.
Nu wordt het de bedoeling, zoals je hiernaast ziet dat de foto's overvloeien.
Je kunt een dergelijk overvloei ook en wellicht eenvoudiger bereiken
door van de foto's eerst animaties in Flash te maken, die van transparantie
overgaan naar niet transparant. via een motiontween. Maar je kunt dan
nog niet zomaar door de opkomende foto, de foto daaronder bekijken.
het is nog geen echte overvloei. Daarvoor moet de nieuwe movie-clip
als het ware bovenop de vorige worden geladen. En dat alles onafhankelijk
van de volgorde van hoe de gebruiker klikt!. Je kunt dit dus niet eenvoudig
met lagen oplossen, omdat na het tonen van de bovenste laag de onderste
foto's nooit meer getoond kunnen worden. De oplossing is alleen met
script mogelijk. In het script wordt een nieuwe movieclip uit de bibliotheek
gehaald, bovenop gezet, en daarin wordt de nieuwe foto -of een flash-movie-
van buitenaf geladen....
We laten eerst zien hoe het laden vanuit de bibliotheek gaat. Dat gaat via
het script AttachMovie.
Gooi eerst de houder weg en verwijder uit het script de eerste regel: loadMovie("fotos/f1.jpg","houder");
Wijs het Symbol vlak in de bibliotheek aan. Klik in het venster
bibliotheek zit onderaan een balk.
Klik daarin op de witte i in het blauwe rondje. Er komt nu een venster zoals
hieronder, dat je ook hebt gezien toen je van het vlak een movieclip maakte.
Zet nu een vinkje in het vakje Linkage. Er komt vanzelf een
vinkje in Export in first frame en er komt een naam in het
vakje Identifier. De naam vlak kun je wel laten staan. We
zullen die in het script straks gebruiken.
Klik nu voor accoord.
Open het script in frame 1 van jouw document en plaats daarin (bovenaan)
attachmovie() betekent dat er een moviesymbol uit de bibliotheek gehaald wordt
en dat foto daat een variable van is geworden. De instance krijgt
vervolgens de naam houder.
Daarna wordt er in houder een foto geladen.
Vul deze regels aan met scrip om de foto te verplaatsen en hem een transparantie
van 10% te geven:
Bij het testen van de movie ziet de foto erg tranparant. Ook de andere foto's
komen transparant over. Ze worden immers in de transparante houder geladen.
We gaan nu het script veranderen voor als iemand op de knoppen klikt. Ook
daar moet er een attachMovie gebruikt gaan worden. Deze komt
dan boven de laag houder te liggen.
voeg eerst in het script een teller n toe: n=1;
Vervolgens haal je bij de atie van knop2 de regel loadMovie("fotos/f2.jpg",
"houder") weg en vervang dat door:
Als je nu de movie test, dan zal bij een klik op de tweede knop het script
een foto linksboven in de hoek zeten, zonder transparantie. foto = attachMovie("vlak", "houder"+n, n); betekent dat er en movieclip
op de stage komt en deze krijgt meteen de variabele-naam foto. Het
is het bibliotheek-symbol vlak en krijgt als instance-naam houder1,
omdat n nu de waarde 1 heeft in het script. Bovendien komt hij op
niveau 1 terecht boven de movie.
Wil je dan bovendien ervoor zorgen, dat deze ook transparant en op de goede
plaats terecht komt, dan moet er voor clip nog 2 of 3 regels script bijkomen:
Als je nu test, zie je dat de tweede foto transparant over de eerste heen
komt. Door het ophogen van de teller n met de regel n++;
wordt de waarde van n nu 2 en zal als je opnieuw op de tweede knop
klikt, er nog een laag met een foto eroverheen geplaatst worden.
Wijzig zo ook de script voor de actie bij knop1 en bij knop3.
Nu moet de _alpha van elke foto gaan oplopen. Diit doen we door
een aparte functie in het script op te nemen. Voeg onder aan het script de
volgende code toe:
function onEnterFrame():Void
{
foto._alpha += 2;
}
Hierdoor zal elke foto na het klikken een hogere _alpha krijgen.
Behalve de foto waarmee we starten.
Dit komt omdat deze geen variable geworden is met de naam foto. Dit
kan natuurlijk alsnog:
wijzig de regel attachMovie("vlak", "houder", 0); in: foto = attachMovie("vlak",
"houder", 0);
Maak nu nog meer knoppen aan, die naar de andere foto's gaan.
het kan nog mooier: ook de knoppen komen via het script op de stage.
Hoewel de functionaliteit van de movie nu al optimaal is, kan het script met
dat atachMovie() zelfs de knoppen op de stage plaatsen.!
Gooi de knoppen maar weg. De hele laag fotolaag kan dus weggegooid.
verwijder ook de volgende scripttregels: loadMovie("fotos/f1.jpg","knop1.knophouder");
loadMovie("fotos/f2.jpg","knop2.knophouder");
loadMovie("fotos/f3.jpg","knop3.knophouder");
Ga weer naar de bibliotheek en zorg ervoor dat de movieclip knop
een linkage krijgt.
Als je de movie nu test, zie je dat er door het klikken knoppen verdwijnen.
Dit komt omdat bij het laden van de knoppen,7 niveau's worden bezet. Die wordne
door het klikken vervolgens bezet door de foto's. Dit is te voorkomen door
de fotos's bij niveau 8 te laten beginnen: zet de regel n=1; dus
om in n=8;
Je hebt nu een movie, die volledig leeg begint, en vervolgens een prima
fotoalbum blijkt te zijn.
Het laatst toegevoegde script werkt met een lus: for. Dit wil zeggen
voor elke waarde van i= 1, 2, 3, 4, 5, 6, 7 wordt het script tussen de accolades
uitgevoerd. Je zou het script ook zonder lus kunnen uitschrijven, maar dan
staat er veel meer script. Het ziet er dan als volgt uit: