bewired tutorial feed

basis website

Flash wordt tegenwoordig niet alleen gebruikt om simpele animaties te maken, maar vooral ook voor complexe websites die een animatierijke en grote vrijheid in navigatie vereisen. Op FWA vindt je veel voorbeelden en inspiratie van de mooiste huidige Flash websites.

In deze tutorial zal worden uitgelegd hoe je een basis website in Flash maakt. Het is belangrijk dat de basis goed is, zodat je daarna zelf kan experimenteren met animaties en speelse navigatie. In deze tutorial gaan we uit van een website met twee pagina's en twee menuknoppen die naar beide pagina's linken.

Stap1
Open Flash en maak een nieuw document aan en noem deze 'basis'. Zorg dat dit document een stage grootte heeft van ongeveer 700 bij 500 pixels door op de Document Size knop onderaan het scherm te drukken. Deze is ook te bereiken via Modify > Document...

Dat is een site grootte die mooi uitkomt voor de meeste schermresoluties. Je kunt in dit menu ook de framerate aanpassen. Laat deze staan op 12fps.

Stap2
Vervolgens maken we een nieuwe layer aan door op de knop ;#8216;inster new layer;#8217; te drukken:

Je kunt ook een nieuwe layer toevoegen via Insert > Timeline > Layer. Vervolgens we de layers beiden een naam. Noem layer 1 'achtergrond', door op de layer te dubbelklikken. Noem layer 2 'knoppen'. In deze layer komen de twee knoppen te staan en in layer 'achtergrond' komt uiteraard de achtergrond van de website.

Stap3
Selecteer de layer achtergrond. Teken met de square tool de volgende site indeling:

Stap4
Je kunt een layer op slot doen als je deze niet meer gaat gebruiken en niet wilt dat deze onbedoeld wordt verschoven of aangepast. Omdat de achtergrond nu vaststaat gaan we deze layer 'locken' door op het slotje te klikken:

Stap5
Selecteer vervolgens layer 'knoppen'. Maak twee knoppen zoals is beschreven in de tutorial over knoppen. Sleep de beide knoppen vanuit de library (te openen via de shortcut F11 of via Window > Library) naar de stage (met de layer 'knoppen' nog steeds geselecteerd.

Geef de knoppen een gepaste naam door de text tool te gebruiken.

Stap6
Selecteer de 'Home' knop en open vervolgens het actionscript panel via Window > Actions of de schortcut F9. We gaan in de home knop een script zetten dat er voor zorgt dat straks een pagina wordt geladen over deze basis pagina heen. Deze pagina noemen we 'home' en zullen we in stap 8 gaan maken.

Maar eerst zetten we het volgende script in de actionspanel (zorg dat Script Assist uit staat, door op de Script Assist knop te drukken):


on (release) {

	loadMovieNum("home.swf", 1); 

}

Dit script laad de Flash film 'home.swf' in de huidge basis Flash site. De '1' staat voor de level. De basis film staat op level 0. De Flash film home.swf wordt dus 1 laag hoger ingeladen zodat deze over de basisfilm heen valt.

Stap7
Herhaal stap 6 voor de pagina1 knop. Voer de volgende action in het actionscript panel:


on (release) {

	loadMovieNum("pagina1.swf", 1); 

}

Zoals je ziet moeten we een home.swf en een pagina1.swf gaan maken waarnaar wordt verwezen in de vorige scripts. Dit wordt besproken in de volgende stap.

Stap8
Maak een nieuw Flash document aan, noem deze home en bewaar deze in de zelfde map als de basis site. Zorg dat de stage grootte gelijk is aan die van de basis Flash site (700 bij 500 px). Type vervolgens wat tekst in de rechter onderhoek zoals hieronder is gedaan:

Druk vervolgens op "ctrl + enter" of ga naar Control > Test Movie om de flash film te testen en te publiceren. Er wordt dan automatisch een swf file gemaakt, in dit geval 'home.swf'...

Stap9
Maak wederom een nieuw Flash document aan en noem deze 'pagina1'. Zorg dat bij deze Flash film de stage grootte ook weer gelijk is aan die van de basis Flash site. Type vervolgens weer wat tekst in de rechter onderhoek (het liefst iets anders dan in de home pagina zo dat je straks het verschil ziet). Druk vervolgens op "ctrl + enter" om de flash film te testen en te publiceren.

Beide pagina's (home.swf en pagina1.swf) zijn nu gepubliceerd en je zult ze ook zien staan in de map waar je de bronbestanden (home.fla en pagina1.fla) hebt gesaved. Deze bronbestranden kun je altijd aanpassen met Flash, de swf files niet.

Stap10
Als je nu de basis site weer opent (basis.fla) dan kun je testen of de pagina;#8217;s worden geopend die je zojuist hebt gemaakt. Druk op "ctrl + enter" om de film te testen en druk op beide knoppen om te zien dat de pagina's verschijnen en veranderen:

Stap11
Het is uiteraard mooier als de home pagina direc wordt getoont als de basispagina wordt gestart. Dat doen we als volgt:
Maak een nieuwe layer aan die we 'actions' noemen:

Selecteer vervolgens deze layer en open het actions panel (via F9). Zet in dit panel de volegnde ActionScript:


loadMovieNum("home.swf", 1);

Door deze actie in de actions layer te zetten, wordt de pagina 'home.swf' geopend direct nadat de basis pagina is geladen. De basis website is nu af.

Je kunt de stappen 8 of 9 eindeloos herhalen om extra pagina's te maken. Door knoppen te maken en het script uit stap 6 toe te voegen aan de knoppen kun je naar deze extra pagina's linken. Hieronder is een 'rar' bestand te downloaden met daarin alle bronbestanden van deze tutorial. Kijk deze eens rustig na als je ergens niet uitkomt. Veel succes en laat ons weten hoe mooi je Flash site geworden is...

stijl componenten

Deze pagina geeft een collectie van stijlen die je kunt gebruiken voor je Flash applicatie. Omdat het "skinnen" van je applicatie veel tijd kost of omdat je er misschien niet zo goed in bent, hebben we een drie bronbestanden beschikbaar gesteld met daarin de drie populaire stijlen van dit moment: Microsoft Vista Media Player 11 theme, Apple iTunes 7 theme en de Obsidian theme dat in bijna alle nieuwe software programma;#8217;s van onder andere Adobe wordt ge;iuml;mplementeerd.

Obsidian theme

Apple iTunes 7 theme

Microsoft Vista Media Player 11 theme

Je kunt de stijl componenten openen in Flash en ze rechtreeks kopi�ren naar je applicatie, zonder deze aan je extension manager toe te voegen. Alle credits voor het vervaardigen van deze stijlen gaan uit naar: ScaleNine.

XML en Flash

In deze tutorial leren we hoe je een xml file in Flash kan laden en deze kan verwerken naar verschillende Flash objecten zoals een List, ScrollPane en TextArea. Het voordeel van het werken met xml is dat de content gestructureerd wordt aangeleverd en snel kan worden verwerkt. Flash zorgt vervolgens voor de opmaak van de gegevens. Daarnaast kan een xml file gegeneerd worden door bijvoorbeeld php of asp waardoor een koppeling met een database mogelijk is.

Xml file
De xml file voor deze tutorial is als volgt gestructureerd:

De file bestaat uit verschillende lagen, beginnende met de basislaag (de root of de ;#8216;firtschild;#8217;). Daaronder vallen de punten (worden childnodes genoemd);#8217;albums;#8217;. Als we per album gaan kijken valt daar het albumjaar, artiest en afbeelding van de album onder. De xml is een gestructureerde weergave van de albumgegevens die we in Flash gaan weergeven.

Voordat we Flash openen, moet je deze xml file opslaan als "view_album.xml" in de map waar je de Flash file ook opslaat.

Flash en xml
Open een nieuw Flash bestand en sla deze op. Sleep vervolgens de volgende Flash componenten op de stage zoals hieronder is weergegeven. De Flash componenten zijn te vinden via Window > Components (Ctrl+F7).

De List component wordt gebruikt om de Albumnamen vanuit de xml file weer te geven.

List
Geef de List component de instancenaam ;#8220;my_albumlist;#8221;. Hieronder staat de actions die nodig zijn om de albumnamen vanuit de xml file weer te geven in de List component.:

//open de list class
var my_list:mx.controls.List;
//
//open xml voor de albums
albums_xml = new XML();
albums_xml.ignoreWhite = true;
albums_xml.onLoad = function(success) {
if (success) {
for (i=0; i;lt;this.firstChild.childNodes.length; i++) {
my_albumlist.addItem({label:this.firstChild.childNodes[i].childNodes[1].childNodes[0], data:i});
}

}
};

albums_xml.load("view_album.xml");

Voordat je de List component kan gebruiken moet je de class impoteren via:
var my_list:mx.controls.List;

Vervolgens wordt een xml object gedefinieerd door deze een naam te geven via:
albums_xml = new XML();

Spaties worden niet mee geparsed door albums_xml.ignoreWhite op true te zetten.

Vervolgens wordt de xml ingeladen (de url naar de xml wordt onderaan dit script gedefinieerd). Bij succesvol inladen wordt de List component gevuld.

Eerst wordt gekeken naar de hoeveelheid albums via:

this.firstChild.childNodes.length

In het voorbeeld is de lengte 3, en wordt de loop drie maal uitgevoerd waarin via:

my_albumlist.addItem

waarin de List component wordt gelabeled met childnodes.

Volledige ActionScript
Geef de ScrollPane de instancenaam ;#8216;albumimage;#8217;. Geef de drie TextArea;#8217;s de volgende drie instancenamen: albumnaam, albumartiest en albumjaar.

Het volledige scrip om via de Listcomponent de albumhoes in de ScrollPane en de albumdetails in de TextArea te laden is als volgt:

//open de list class
var my_albumlist:mx.controls.List;
//
//open xml voor de albums
albums_xml = new XML();
albums_xml.ignoreWhite = true;
albums_xml.onLoad = function(success) {
if (success) {
for (i=0; i;lt;this.firstChild.childNodes.length; i++) {
my_albumlist.addItem({label:this.firstChild.childNodes[i].childNodes[1].childNodes[0], data:i});
}

//Create listener object.
// Select first item by default.
my_albumlist.selectedIndex = 0;
var listListener:Object = new Object();
listListener.change = function(evt_obj:Object) {
albumnaam.text = albums_xml.firstChild.childNodes[evt_obj.target.selectedIndex].childNodes[1].childNodes[0];
albumjaar.text = albums_xml.firstChild.childNodes[evt_obj.target.selectedIndex].childNodes[2].childNodes[0];
albumartiest.text = albums_xml.firstChild.childNodes[evt_obj.target.selectedIndex].childNodes[3].childNodes[0];
albumafb = albums_xml.firstChild.childNodes[evt_obj.target.selectedIndex].childNodes[4].childNodes[0];
albumimage.contentPath = _root.baseDir+"images/"+albumafb; };
my_albumlist.addEventListener("change", listListener);

}
};

albums_xml.load("view_album.xml");

Door middel van een Listener Object wordt gekeken welk album wordt geselecteerd in de List component. Door de my_albumlist.selectedIndex op ;#8216;0;#8217; te zetten staat er default niets geselecteerd.

TextArea
De albumnaam wordt weergeven in een TextArea (evenals de arties en het albumjaar). Dit wordt als volgt gedaan:

albumnaam.text = albums_xml.firstChild.childNodes[evt_obj.target.selectedIndex].childNodes[1].childNodes[0];

Het tekstvlak moet uiteraard alleen de albumnaam geven van het geselecteerde album. Dat gaat door bij de betreffende childnode de evt_obj.target.selectedIndex (het geselecteerde object) als nummer op te nemen.

De volgende childnode (childnode[1]) bepaald dat het alleen de albumnaam uit de xml moet worden gehaald. Als childnode[2] wordt gegeven dan wordt het albumjaar genomen en als childnode[3] wordt gegeven dan wordt de artiest genomen uit het betreffende album.

ScrollPane
De albumhoes wordt weergeven in de ScrollPane component. Deze wordt als volgt aangeroepen:

Eerst wordt een variable aangemaakt waarin het pad naar de afbeelding wordt opgeslagen:

albumafb = albums_xml.firstChild.childNodes[evt_obj.target.selectedIndex].childNodes[4].childNodes[0];

Vervolgens wordt deze variabele in de ScrollPane contentpath gezet, waardoor de ScrollPane wordt gevuld met de afbeelding:

;#8220;albumimage.contentPath = _root.baseDir+"images/"+albumafb;

Elke keer dat de listener wordt aangesproken worden de gevens uit het xml gehaald en opnieuw in alle componenten gezet. Je ziet dat je met nog geen 30 regels code al een uitgebreide applicatie kunt maken door middel van een enkele xml file en Flash. Als je helemaal bekend bent met Flash en xml dan is het hoogstwaarschijnlijk een uitdaging om je eens te verdiepen in Flex. Meer hierover op Flex.org.

matrix effect

Het welbekende 'Matrix-effect' is al vele malen in Flash geimiteerd. Toch is deze versie tot nu toe de beste die online te vinden. Met Flash 8 is het immers mogelijk het effect te verrijken met een glow en bur effect.

Dit matrix effect is een volledig actionscript effect. De Japanse tekens worden uit de library gehaald en vervolgens random in een array gezet. De array wordt vervolgens uitlgelezen, waarbij de tekens onder elkaar worden gezet. Op deze rijd wordt een blur en glow filter toegepast. Een interval zorgt ervoor dat om de 10 seconden een nieuwe kleur wordt gestart...

karikatuur

Het is goed mogelijk om in Photoshop een karikatuur te maken van je favoriete Hollywood of (Hillywood) ster. Neem hiervoor een mooie portretfoto en open deze in Photoshop. Voor deze tutorial is een foto van bewired babe Lindsay Lohan genomen.

Stap1
Dupliceer de foto, zodat ene nieuwe layer ontstaat. Hiermee bewaar je de layer met de originele foto zodat je deze later kunt vergelijken.

Stap2
Pas de ;#8216;dust and scratches;#8217; filter toe via Filter > Noise >Drust;Scratches. Kies voor de radius: 2 px en voor de thresholdt: 4 levels (afhankelijk van de grootte van je afbeelding moet er een ;#8216;semi-getekend;#8217; resultaat ontstaan). Hieronder staat het resultaat,:

Stap3
Open vervolgens de liquify tool via Filter > Liquify;#8230; en vervorm, vergroot en accentueer de gedeeltes van de karikatuur die bepalend zijn voor het uiterlijk. Dit zijn meestal de lippen, de neus, de ogen en de kaaklijn. Ook de groeven en rimpels kun je iets aan zetten. Verlies echter niet uit het oog dat het karakter herkenbaar moet blijven:

Stap4
Kies de smudge tool om alle stippels, vlekken en oneffenheden te vervagen zodat een gladde en egale oppervlakte overblijft:

Stap5
Kies vervolgens de ;#8216;burn tool;#8217; uit de toolbar om alle donkere accenten nog net iets donkerder te maken. Gebruik de burn tool om de lippen van donkere groefjes te voorzien, de rimpels te accentueren en de ogen en wenkbrauwen beter uit te laten komen.

Stap6
Gebruik de ;#8216;dodge tool;#8217; om lichte accenten aan te brengen in het gezicht. Zo kan je glans op de lippen en in de ogen accentueren. Tevens kun je rimpels iets beter uit laten komen om langs de donkere rand een lichte rand aan te brengen, zodat de diepte wordt benadrukt. Gebruik vervolgens de blur tool om de dodge en burn effecten mooi in elkaar over te laten lopen. Zie hieronder het resultaat;#8230;

text effects

In deze After Effects tutorial wordt beschreven hoe je een tekst effect toevoegt van uit het tekst effect presets panel. Via de help van After Effects kun je de Gallery of Text Animation Presets aanvragen. In dit venster worden alle tekst effecten als voorbeeld weergegeven. De effecten staan gecategoriseerd op toepassing.

Vervolgens ga je naar Window en vink je de Effects en Presets aan. Hierop verschijnt er een panel met alle effecten presets die After Effects bezit. Via het mapje � *animation presets� wordt het mapje �Text� geopend waarin alle categorie�n van de aanwezige tekst effecten vermeld staan. Een effect pas je toe door het icoontje van het betreffende effect naar de tekstbalk in de composition te slepen.

Hieronder is het resultaat van de tutorial te bekijken. Je hebt hiervoor wel Flash Player 8 nodig. Deze is hier te downloaden.