Flash movie “site” centreren en tevens beeld vullend

Flash movie “site” centreren en tevens beeld vullend


In dit artikel gaan wij een flash movie “site” centreren, en met een achtergrond die tevens beeld “browser window” vullend is.
Je ziet steeds vaker als men de rechtermuis knop klikt dat de hele website flash is.
Dit doet men met de instellingen width=”100%” en height=”100%”,
maar met alleen deze instellingen zou je flash movie, images en teksten gerekt “scale” worden, en is het niet meer om aan te zien.

De manier wat we nu gaan beschrijven, zorgt er voor dat de achtergrond wordt gerekt maar de inhoud zoals images en teksten op ware grote blijven.

We beginnen met de flash movie en later beschrijven we de html code.

Flash Movie:

  1. Maak een flash movie van width: 500-pixels en height: 400-pixels.
  2. Op Layer-1 tekenen we nu een vlak van bijvoorbeeld 100×100 pixels, dit doen we met de Rectangle Tool onder Tools, of druk de [R] toets,

    ****Image1****

    We gebruiken als kleur geel, u kunt natuurlijk ook een andere kleur gebruiken.
    Klik nu met uw rechter muis knop op dit vlak en selecteer Convert to Symbol. Hier selecteren we Movie. Geef hem bijvoorbeeld de naam achtergrond.

    U kunt hem ook converteren naar een graphic, maar ik zou er een movie van maken zodat u
    later een effect in deze movie “achtergrond” kunt creëren.
    Selecteer nu deze movie door twee maal met de linker muis knop op de movie “geel vlak” te klikken.

    Nu gaan we de grote van deze movie “achtergrond” veranderen, zodat hij dadelijk beeld vullend wordt.

    Klik een maal op het gele vlak, onder properties staat er nu: W: 100 / H: 100 en de X: en Y: maken momenteel nog niet veel uit.
    Verander de W: 100 naar W: 1800 en de H: 100 naar H: 1600, de X: veranderen we naar X: -400 en de Y: veranderen we naar Y: -300
    (Voor deze instellingen kunt u eventueel ook een ander formaat gebruiken, maar gebruik nu de beschreven instellingen zodat u
    later ook begrijpt waarom de StyleSheet en html code worden ingesteld op deze instellingen.)
    Ga nu terug naar de root (begin). Als u het goed heeft gedaan staan onder properties voor de movie “achtergrond” nu de volgende instellingen:

    W: 1800 / H: 1600 / X: -400 / Y: -300,
    ***Image 2***
    Is dit niet het geval, herhaal de beschreven stappen opnieuw.
  3. Klik nu boven op insert, dan naar TimeLine en selecteer Layer, dit wordt Layer-2.
    Op deze Layer-2 tekenen we nu een vlak (ook weer met de Rectangle Tool) van width: 500-pixels en height: 400-pixels.
    De X: en Y: worden allebij 0, dit is de originele afmeting van onze flash movie, we geven in dit voorbeeld het vlak de kleur rood.
    Klik nu met uw rechter muisknop op dit vlak en selecteer Convert to Symbol. Hier selecteren we Movie.
    U kunt hem eventueel een naam geven, bijvoorbeeld main.
    In deze movie plaatsen wij straks onze site zoals images en teksten.
  4. Nu gaan we de aktie toevoegen, zodat de movie met de kleur rood niet doet rekken “scalen” aan de achtergrond movie, of graphic wel doet
    rekken “scalen” zodat hij dadelijk in de website beeld “browser window” vullend wordt.
    Klik met de linkermuis knop op Layer-1, en selecteer boven Window en dan Actions of druk de F toets “F9” nu komt er een window actions –
    frame. We geven hier de volgende actie: Stage.scaleMode = “noScale”;
    ***Image 3***

  5. Save deze movie, en klik boven file en dan publish settings of gebruik de toets combinatie “Ctrl+Shift+F12”.
    Selecteer in het venster nu HTML. Bij Dimension selecteert u Percent en bij width en height: 100×100 Percent,
    u kunt bij Scale eventueel No Scale aangeven, maar dit hebben we al via de acties op Layer-1 aangegeven.
  6. Uw flash movie is nu beeld “browser window” vullend en de teksten cq. images in de movie “main” de movie met het rode vlak worden niet meer gerekt.

    De flash movie “main” met het rode vlak zal nu altijd in het midden van de website komen te staan,
    u kunt ook kiezen voor een andere plaats van deze movie, terwijl de achtergrond toch beeld “browser window” vullend wordt.
    Dit doen we met de actie stageAlign.
    Zet dan bijvoorbeeld de volgende acties ook op Layer-1 waar de scaleMode staat vermeld.

    Stage.align = “T”; (de T staat voor Vertikaal = Top / Horizontaal = Center)
    Stage.align = “B”; (de B staat voor Vertikaal = Bottom / Horizontaal = Center)
    Stage.align = “L”; (de L staat voor Vertikaal = Center / Horizontaal = Left)
    Stage.align = “R”; (de R staat voor Vertikaal = Center / Horizontaal = Right)
    Stage.align = “TL”; (de TL staat voor Vertikaal = Top / Horizontaal = Left)
    Stage.align = “TR”; (de TR staat voor Vertikaal = Top / Horizontaal = Right)
    Stage.align = “BL”; (de BL staat voor Vertikaal = Bottom / Horizontaal = Left)
    Stage.align = “BR”; (de BR staat voor Vertikaal = Bottom / Horizontaal = Right)

    Nu gaan we de html site configureren, zodat er ook scrollbars komen als het browser window kleiner is als 500 x 400 pixels,
    dit zijn namelijk de instellingen die we hebben gebruikt in de flash movie.
    In dit stukje html code maken we gebruik van tables en een vullende image die dadelijk de zelfde afmetingen krijgt als de flash movie,
    in dit voorbeeld noemen wij de image spacer.gif.
    De images is een GIF en is transparant en heeft een originele afmeting van 1×1 pixel.
    spacer.gif

              Leuk als je dit artikel deelt:
    Share

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *