Flash Website ActionScript handleiding Linda Pieke
Basis
ActionScript
Tutorial
Inhoudsopgave
Basis ActionScript Tutorial....................................................................................... 2 Werkwijzer volgorde: ............................................................................................................... 2
Actionscript tutorial .................................................................................................. 3 De Buttons............................................................................................................................... 3 De Webpagina’s ...................................................................................................................... 5 De Tijdslijn ............................................................................................................................... 5 Frame Labels ........................................................................................................................... 6 Tijdslijn Actions........................................................................................................................ 7 Button Actions......................................................................................................................... 8 Externe Link Actions.............................................................................................................. 12 Publishing properties............................................................................................................. 14 Stand Alone Presentaties ...................................................................................................... 16 Flash importeren in Dreamweaver......................................................................................... 17
Werkwijzer
volgorde:
Layers aanmaken Button symbols aanmaken Pagina’s met inhoud aanmaken Frame Labels aanmaken Stop (tijdslijn) acties toevoegen Button actions aanmaken Interne verwijzing naar pagina’s Mail acties aanmaken URL verwijzingen aan maken Publishing properties Importeren in Dreamweaver Mappen organisatie Content organisatie Aanmaak HTML document Tabel invoegen Tabel centreren, kleur aangeven Inhoud toevoegen Testen
2
Actionscript
tutorial
In deze tutorial leer je een interactief menu maken en een mail / externe link button, zodat je een interactieve presentatie (website) kan maken. Verder leer je ook hoe je de movie kan bekijken als Stand Alone presentatie (bijv. Voor CD’-ROM’s en DVD’s) en hoe je de movie in Dreamweaver importeert en kan bekijken als website. Omdat er gebruik gemaakt wordt van de laptops moet je bij elke functietoets (F-toetsen) ook Fn indrukken. We beginnen met het aanmaken van een nieuw Flash document. Kies een Flash documenty met het Actionscript 2.0. Maak nu de aantal layers aan zoals in het plaatje hieronder:
De
Buttons
We gaan 3 buttons maken en 3 pagina’s waarnaar de buttons verwijzen. De eerste button is de HOME button.
Teken een vierkant zoals hiernaast: alleen niet te moeilijk!
, maar je mag ook je eigen vorm kiezen. Maak het
Ga naar Modify > Convert to Symbol (Wijzigen > Omzetten in Symbool) of druk op (fn)F8.
Maak een Button (Knop) aan met de naam “home bt”. Klik op Enter.
3
In het submenu van de Button (Knop) geef je de button met het tekst gereedschap een naam, in dit geval “Home” en maak je verschillende keyframes (Hoofdframes) aan (Fn- F6) om het verschillende verloop van de Button weer te geven, OVER, DOWN en HIT. OVER betekent dat je er als het ware overheen gaat met je muis, maar je klikt nog niet. Bij DOWN klik je op de Button en de HIT is je link naar de pagina waar de Button naar toe verwijst. Verander de kleur van je Button in de OVER en DOWN.
Doe hetzelfde voor de Buttons “Me” en “Mail” (zoals boven aangegeven in de layers “bt me” en ”bt mail”. Als het goed is heb je nu het volgende menu:
4
De
Webpagina’s
Nu gaan we de pagina’s aanmaken waarnaar de buttons moeten verwijzen. Maak een groot zwart vierkant aan rechts van je menu. Gebruik hiervoor de layer “home pix”. Kopieer het zwarte vierkant naar de layer “ me pix” en “mail pix” door middel van Shift > Command (=appeltje) > V. Je hebt de vierkanten nu overal op dezelfde plek neergezet. Dit zijn je pagina’s waar straks je Button naar toe gaat verwijzen. Zet in elke Layer (Laag) met de zwarte vierkanten, Home, Me en Mail een stukje tekst zodat je kan zien dat de pagina’s verschillend zijn. Je hebt nu 3 pagina’s gemaakt.
De
Tijdslijn
Nu volgt een stukje tijdslijn begrip van Flash. Omdat we straks de tijdslijn gaan gebruiken om van de ene pagina naar de andere te gaan, moeten we de 3 pagina’s die we net hebben aangemaakt op verschillende frames plaatsen op de tijdslijn. Dus de “bt home” layer staat samen met “home pix” layer op frame 1. De “bt me” layer staat samen met de “me pix” layer op frame 2 en de “bt mail” layer staat samen met de “ mail pix” layer op frame 3.(Zie hieronder) Zet na de keyframes (F6) van de “pix” pagina’s een blanco keyframe (F7). Dit doe je, omdat je straks niet wil dat de pagina’s elkaar gaan overlappen als we de buttons naar de verschillende pagina’s gaan verwijzen. De “bt” pagina’s hoeven geen blanco keyframe, want die mogen we blijven zien gedurende de hele movie, dus de frames van deze layers moeten allemaal even lang zijn.
5
Frame
Labels
Als je een button wilt verwijzen naar een andere pagina, kan je dit doen door een framenummer in te typen bij het maken van je actionscript voor je button ( zie §Button Actions). Want elke frame wordt geregistreerd in Flash. Dus alle frames kunnen verwezen worden. Alleen als je misschien vind dat je animatie wat langer of wat korter moet zijn dan klopt er niets meer van je verwijzing naar je framenummer na je wijziging in je animatie. Daarom maken we gebruik van Frame Labels. Deze zijn makkelijk aan te maken. Klik op je keyframe van “home pix”. Ga naar je properties panel (Eigenschappen) toe. In het vakje waarin met grijs
wordt aangeduid kan je een naam invullen die je wilt gebruiken voor je pagina. In dit geval “home”.
Doe hetzelfde met de pagina’s van “me pix” waarin je bij de
“me” invult en bij “mail pix” in het hokje
“mail” invult. Als het goed is er op de layers met de frame labels een rood vlaggetje verschenen.
6
Tijdslijn
Actions
Laten we nu de movie eens gaan testen. Save de movie en druk daarna op Command (appeltje) + enter. Als het goed is flitsen je pagina’s heen en weer. Dat mag niet gebeuren, want we willen namelijk dat de webpagina’s pas verschijnen wanneer we op de buttons klikken. Om dat voor elkaar te krijgen gaan we een “stop” actie toevoegen aan de webpagina’s; dus de “home pix”, “me pix” en “mail pix” pagina’s, waar we willen dat de movie stopt. Klik op het keyframe van de “home pix” pagina. Open het actionscript panel door op het schuine pijltje rechts te klikken in je properties panel of alt > F9. Zorg ervoor dat je Scriptassistentie aan staat. ( dus niet zoals in dit voorbeeld, waar de Expert Mode aan staat) Dit wordt verderop in de lesstof besproken.
Open “Global Functions” > “Timeline control” in je Actionscript panel en dubbelklik op “stop”.
In het Actionscript venster komt nu in blauw het woordje “stop” te staan en in je timeline op je geselecteerde keyframe een a. Als we de movie nu testen dan stopt deze bij de eerste webpagina “home”, waar we net de “stop” actie hebben ingevoegd. Doe hetzelfde nu met de keyframes van de 2 andere pagina’s: “me pix” en “mail pix”. Je kunt je misschien voorstellen dat je met deze Tijdslijn (Timeline) Actions ook andere mogelijkheden hebt om het spelen en/of stoppen van je tijdslijn te organiseren, bijvoorbeeld “play” voor het afspelen van een movie op je tijdslijn of “stopAllSounds”als je wilt dat alle geluiden in je movie stoppen. Het verschil met Button Actions is dat bij een Timeline Action je de controle neemt over de hele Flash movie die zich op dat moment afspeelt in de gemaakte scene.
7
Button
Actions
Bij een Button Action moet je eerst actie ondernemen voor er iets in je movie gebeurt. Dit houdt dus in dat je eerst op de button moet drukken. Zo ook bij het maken van de Actionscript voor de button. Net zoals je eerst op het object moet klikken voor je de properties krijgt van het object, moet je bij het maken van het actionscript van de button eerst erop klikken.
Klik op “Script Assist” zodat je venster er zo uit ziet!
Klik op je button om de eigenschappen ervan te zien in je properties panel.
Ook zul je het “Script Assist” scherm aan moeten hebben staan. In Flash heb je namelijk ook de mogelijkheid om in “Expert Mode” te werken. Bij deze laatste zul je handmatig de code in moeten typen. In de “Script Assist Mode” krijg je voorgeprogrammeerde keuzemenu’s. Dit is dus eigenlijk een soort wizard functie. Als je op de button hebt geklikt open je het tabje Movie Clip Control in je actionscript panel. Vervolgens dubbelklik je op “on”.
In de “Script Assist” Mode zie je dat er een keuzemenu bijgekomen is.
8
Standaard staat altijd de “Release” functie aangeklikt. Dit wil zeggen dat de actie pas zal beginnen nadat de button losgelaten is na het klikken erop. Het is tevens de meest gebruikte optie.
Vervolgens ga je naar “Global Functions” > “Timeline Control” > “goto” . Dit zijn de meest gebruikte acties en zols je weet kunnen die ook gebruikt worden voor de Timeline Actions ( Zie §Tijdslijn Actions). In het rechtervak kun je nu kiezen tussen GoToAndPlay en GoToAndStop. Omdat we willen dat de button naar een Frame verwijst waarin we een pagina hebben opgemaakt en niet willen dat de hele film met alle frames afgespeeld wordt moeten we kiezen voor de STOP functie. Klik deze dus aan.
9
Omdat we hebben gekozen voor Frame Labels ( zie §Frame Labels) in plaats van Frame Numbers moeten we dit aanklikken in de drop down menu “Type”.
In het drop down menu “Frame” klikken we rechts op het blauwe vakje en we zien nu de verschillende Frame Labels die we hebben aangemaakt. Kies voor de Home Button “Home”, voor de Me Button “Me” enz..
10
Als het goed is ziet je script er net zo uit als onderstaand screenshot. Zoniet, loop dan alle stappen nog een keer door en kijk of je niets gemist hebt. Dat kan namelijk een groot verschil maken bij het testen!
Test je button door op Command > Enter te drukken. Herhaal bovenstaande actie voor de overige buttons.
11
Externe
Link
Actions
Je hebt geleerd om een Button Action te verrichtten binnen de movie. Maar de code voor het maken van een link naar je mail programma of een externe website is anders dan de verwijzing binnen je movie/website. Hiervoor gebruiken we de tekst die in de webpagina staat van je Mail webpagina. Klik op de tekst en maak hier een Button Symbol (Knop Symbool) van.
Verander vervolgens de OVER & DOWN frames binnen je Button Symbol en trek een rechthoekig vlak over je HIT Keyframe.
Dit laatste doe je, omdat dit het keyframe is waar je op klikt en waar de button naar toe verwijst. Als je geen rechthoekig vlak tekent, dan zou de gebruiker precies op de letters moeten klikken om een actie op te kunnen roepen. Als je het niet snapt wat ik hier vertel, dan stel ik voor dat je een button aanmaakt ZONDER vlak en 1 keer MET vlak. Zo weet je wat ik bedoel als je de button gaat testen. Test je button (Command > Enter) Je gaat terug naar je Main Movie (Scene1 Werkruimte), dus met andere woorden; je sluit je Button symbol. Je klikt op het tekstvlak van je Mail webpagina (waar je net een button van hebt gemaakt) en Je opent je Actionscript panel. In je Actionscript panel dubbelklik je op “Browser Network” > “getURL”.
12
Er verschijnt nu weer, net als voorheen met de Button Actions in je rechtervenster van je Actionscript panel verschillende invulvakjes. Vul bij URL in: mailto:
[email protected]. Onthoud dat je ALTIJD de functie mailto: moet gebruiken om een e-mail link te kunnen maken. OOK in HTML websites!
De rest kun je voor de mailto functie laten gaan. Test je movie (Command > Enter) Voor een externe link naar een andere website volg je hetzelfde principe, alleen nu vul je in plaats van de mailto: functie, het website adres in, inclusief de http://. (Zie hieronder)
Je kunt hier verder voor kiezen hoe je wilt dat de externe pagina opent. De meest gebruikte is _blank. Hiermee opent er zich een nieuw venster in je browser met je link, die makkelijk weer te sluiten is.
13
Publishing
properties
Het is al eerder aan de orde geweest, maar het kan niet vaak genoeg gezegd worden dat het belangrijk is dat je weet hoe je de movie weg moet schrijven. Vaak is het namelijk zo dat je de movie in Dreamweaver wil importeren. Bij Publish Settings die je kan vinden onder > File (zie hieronder), kan je een aantal voorkeuren weergeven.
Onder andere de HTML versie die belangrijk is als je de Flash movie wilt versturen. Soms kunnen mensen de movie namelijk helemaal niet openen. Dan moet je er duidelijke instructies bij geven dat ze hem moeten slepen in een browser of de HTML versie openen (die je erbij gestuurd hebt).
14
In de Flash Publish Settings moet je letten op de versie van Flash waarin je de movie gaat publishen. De kwaliteit van je plaatjes in je movie (voor internet & kleine plaatjes hoeft de kwaliteit niet echt hoog te zijn) en de kwaliteit van je Sound Settings.
Ten eerste moet je weten dat je pas vanaf 20 KBPS (KiloBytes Per Seconde) een stereo effect aan kan maken en dat 64 KBPS een redelijk goed geluid geeft, maar je movie ook erg zwaar kan maken.
Als je de movie published vind je deze terug bij je *Fla (werk) document.
15
Stand
Alone
Presentaties
Mocht je de movie niet willen importeren in Dreamweaver, maar alleen laten afspelen dan kun je door middel van de actie “FSCommand” wat meer controle krijgen over hoe je movie eruit komt te zien. Maak eerst een nieuwe layer (Laag) aan. Noem deze Publish Actions.
Ga vervolgens weer naar je Actionscript panel en klik op “Browser/ Network” > FsCommand.
Je krijgt verschillende dropdown (keuze) menu’s te zien. Deze zijn allemaal afzonderlijk en voor elk van deze moet je opnieuw FsCommand selecteren! • • • •
Je kunt bijv. kiezen uit een schermvullende movie of niet (Fullscreen; true or false). Je kunt aangeven of de movie mag schalen als je de Browser window volledig opent of niet (Allowscale; true or false). Flash laat als je op je rechtermuisknop drukt altijd en menu zien die je controle geeft over de movie. (Showmenu). Deze kun je uitzetten als je wilt. Er is ook nog de Quit functie. Je kunt deze functie gebruiken over een button heen, dus als actie voor een Button. Als je hierop drukt, gaat de movie uit.
Dit is extra informatie die je kunt gebruiken als je een Stand Alone presentatie wilt laten zien die dynamisch is. Als je de website echt op internet gaat zetten gaan we een stapje verder en gebruiken we Dreamweaver.
16
Flash
importeren
in
Dreamweaver
Je kunt je Flash movies importeren in Dreamweaver. Je website kan uit 1 Flash movie, maar ook uit meerdere op verschillende pagina’s bestaan. Ook kun je in 1 pagina meerdere movies tegelijk laten afspelen. Voor dat we in Dreamweaver gaan werken moeten we eerst onze files in mappen opslaan. We moeten namelijk al onze externe bestanden naar onze Dreamweaver website linken. Dus die moet Dreamweaver wel kunnen vinden. Als je een vaste plaats voor deze files hebt in dezelfde map als waar je ook je website heb gemaakt dan zal Dreamweaver ze altijd kunnen laten zien. Denk maar aan de koppelingen die Illustrator moet gebruiken als je plaatjes gebruikt. Zou je de plaats van de koppelingen veranderen dan kan Illustrator het plaatje niet meer vinden. Je maakt een mapje aan met de naam van de website bijv. Je naam. In deze map sla je de HTML pagina’s op van Dreamweaver. In deze map maak je nog 2 mappen aan. 1 heet “plaatjes” en een andere “swf”. Om Dreamweaver te kunnen gebruiken, moeten we eerst een nieuw bestand aanmaken. Klik op Nieuw > HTML als je 1 pagina wilt aanmaken. Je kunt altijd meer pagina;s aanmaken door op Bestand > Nieuw te klikken. Klik op Nieuw > Dreamwaver Site als je een hele website wilt aanmaken. Belangrijk is bij deze optie dat je eerst een flow chart hebt gemaakt van je site, zodat je weet hoeveel pagina’s er zijn. Deze manier van website maken volgt in een latere opdracht. Insert Panel
properties paneel Je Dreamweaver omgeving ziet er zo uit als je de Ontwerp tab hebt aanstaan. Je kunt namelijk kiezen uit Code (HTML), Ontwerp (uiterlijk) en Gedeeld(splitsing van beiden). De Properties (Eigenschappen) paneel lijkt op die van Flash.
17
Je kunt de achtergrond en tekst veranderen net zoals je een Flash document kan wijzigen. Andere objecten komen eventueel later aan de orde.
De werkblak Invoegen > Algemeen heeft verschillende mogelijkheden en is belangrijk voor het gebruik van toevoegen van inhoud aan je pagina. We gaan er een aantal uitleggen.
Hyperlink. Dit is als je een tekst of plaatje wilt verwijzen naar een andere pagina.
Email link. Hiermee kan je een mailadres toewijzen.
Anchor (Anker). Hiermee kan je een link laten verwijzen naar een bestemming op dezelfde pagina.
Tabellen. Hiermee kan je tabellen aanmaken en zo je inhoud alvast van te voren vastleggen in je pagina. Hierin gaan we een Flash movie invoegen.
Plaatjes. Hiermee kan je diverse soorten plaatjes invoegen. Je kunt een menu maken van diverse plaatjes en ook handmatig apart mouse-over plaatjes toevoegen. Ook kan je “Hotspots” toevoegen aan plaatjes, een selectie op een plaatje dat een link kan bevatten.
Media. Deze functie moeten we gebruiken om onder andere Flash files in te voegen. Ook Java kan hiermee worden toegevoegd. Het eerste wat we gaan toevoegen is een Tabel. Klik op je Tabel icoon in je Werbalk > Invoegen > Algemeen.
18
Vul bij “Rows” (Rij) 2 in. 1 regel voor je Flash movie en 1 regel voor wat eventuele instructies voor een link naar de plugin van Flash om de movie te kunnen zien om er voor te zorgen dat iedereen de site kan bezichtigen. Of je kunt ook juist de bovenste regel gebruiken voor bijvoorbeeld een logo of titel van je website. Vul bij “Columns” (Kolommen)1 in. Hier kun je een 2 invullen als je gebruik zou willen maken van een navigatie balk aan de rechter of linkerkant, of misschien voor extra foto’s e.d.. Vul bij “Tabel Width” (Tabelbreedte) de breedte van de Flash movie in, in dit geval 550 px. Optioneel, want als de movie groter is dan de tabel dan past de tabelgrootte zich aan de inhoud aan. Vul bij “Border Thickness” (Randdikte) 0 in. Eigenlijk standaard omdat je geen randen om de tabellen wilt zien. Je kunt de tabellen namelijk ook afzonderlijk kleuren, Dit komt later aan de orde. Klik op OK. Je tabel is nu standaard bovenin uitgelijnd naar rechts van het document. Om de tabel te centreren en eventueel van een kleur te voorzien moeten we in het Properties paneel kijken. Vul bij “Align” (Uitlijnen) Midden in. Vul bij “BG Color” (Achtergrondkleur) #828282 (de kleur van de Flash movie). Let hierbij ook op de achtergrondkleur van je HTML document. Verander deze, zo nodig, ook.
19
Nu is de tabel klaar om het Flash Bestand te importeren. Klik op het Media icoon in je Werkbalk > Invoegen > Algemeen. Selecteer “Flash”. Importeer je .swf file, NIET je.fla!
Als je je .swf file nog niet op de juiste plek hebt neergezet, moet je dat alsnog doen! Je krijgt namelijk een melding dat Dreamweaver dit pad blijft gebruiken voor het Flash Document. Ga je dit bestand verplaatsen dan kan Dreamweaer de file niet meer vinden. Sleep de .swf file in je aangemaakte tabel in 1 van de regels, als deze er nog niet in staat. Vul bij de andere regel in wat je wilt. Laten we de movie gaan testen. Klik op F12 of Bestand > Voorvertoning in Browser > Safari.
20
Je website is klaar als deze gewoon afspeelt.
Linda Pieke Multimedia docent College De Brink Laren Grafimedia Examen 2007 Herziene Versie februari 2010
21
