Web Tutorials

Bescherm je e-mail adres tegen SPAM robots

Cicco — Tue, 24 Mar 2009 14:14:54 +0000

Ook al voorgehad dat je het nieuwe e-mail adres van je bedrijf, organisatie of klant op de website plaatst en dat je binnen de week gescand bent door internet’s meest irritante spamrobots? Zonder dat je het beseft steekt je mailbox vol met mailtjes over viagra, allerhande verleningen en zogezegde internet bedrijfjes.

Maar het moet toch mogelijk blijven om je e-mail te tonen op je website zonder al deze spam te ontvangen, niet?

Nu ben ik overlaatst een handig anti-spam jQquery script tegen gekomen dat mij tot nu toe al goed geholpen heeft.

Het is een script waarmee je het e-mail adres op deze manier in je code zet :

yourname|yourcompany:net

En het op deze manier toont als je de pagina oproept :

yourname@yourcompany.net

Een kleine tutorial hoe je dit in je website implementeert :

Stap 1 :

Download de jQuery plugin.
Na het unzippen heb je 1 javascript bestand genaam : jquery.spemail.1.0.js

Stap 2 :

Maak in de head van je pagina een verwijzing naar het javascript bestand dat je gedownload hebt. Zoals hieronder :

Stap 3 :

Maak opnieuw in de head van je pagina een verwijzing, nu naar de laatste versie van het jQuery framework. We gebruiken hiervoor de code die Google voorziet. Voor degene die het nog niet weten, Google heeft een verzameling van de laatste javascript frameworks online staan welke je mag gebruiken in je website. We doen dit zoals hieronder :

Stap 4 :

In deze stap moeten we nog een laatste stukje javascript plaatsen in de head van de pagina welke ervoor zorgt dat het e-mail adres wordt omgevormd. En dat is de volgende code :

Stap 5 :

Het enige wat we nu nog moeten doen is het e-mail adres in de body van de pagina zetten en dat doen we op deze manier :

yourname|yourcompany:net

Zoals je kan zien komt de id #email overeen met degene in het scriptje.

Overzicht van de pagina :

Als je alles gedaan hebt zoals hierboven omschreven zou je pagina er op deze manier moeten uitzien :

[

Bescherm je e-mail adres tegen SPAM

E-mail: yourname|yourcompany:net

Als je de pagina van het script Fighting spam from inline email addresses using JQuery Plugin 1 gaat bekijken, zie je dat er 3 verschillende manieren zijn om je e-mail te schrijven in je code.

Hierboven werd 1 methode gebruikt om de tutorial te tonen. De andere 2 kan je bekijken in de code van de voorbeeld pagina.

Alle drie hebben ze hetzelfde effect, aan jou de keuze welke je wil gebruiken.

Op korte termijn bekeken helpt het script, laten we hopen dat het op lange termijn niet achterhaald wordt en dat de spam grotendeels achterwege mag blijven.

Laat gerust in de comments weten indien je het ook gebruikt hebt. Ook indien je een nog betere oplossing weet.

Nog vragen? Bezoek het forum...

30 Tooltip scripts

Cicco — Mon, 09 Mar 2009 15:37:18 +0000

Een lijstje met 30 scripts voor het gebruik van “Tooltips”. Tooltips kunnen heel handig zijn om je bezoeker informatie te geven voor hij op een link klikt.
Het kan de gebruiksvriendelijkheid van je website verhogen en er zijn scripts bij die zeer mooi zijn.

Weet je ook een Tooltip script welke nog niet in het lijstje staat? Laat het gerust weten via de comments.

Coda Bubble

Cooltips

BetterTip

Prototip

Prototip 2

TipsX3

Websnappr

Ballons

Ajax Tooltip

simple Tooltips

clueTip

Easy Tooltip

http://mckay.cshl.edu/balloons3.html

CSS Tooltip

jQuery Easy Tooltip

BeautyTips

imgPreview

simpletip

BubbleTooltips

Tooltip Mootools

jQuery CSS Tooltip

Simple Tooltips met CSS en jQuery

Unitip

SuperNote

CSS Tooltips

Javascript Tooltip

MB Tooltip

Simple Tooltip jQuery Plugin

Orbital Tooltip

jQuery Tooltip Plugin

www.karelgeenen.nl : Alles over internet marketing

Cicco — Thu, 26 Feb 2009 12:02:25 +0000

Ook altijd alles willen weten over internet marketing?

Karel Geenen is een op internet bekende marketeer en deelt al zijn kennis in verband met internet marketing, Google adwords, zoekmachine optimalisatie, Web analytics en nog veel meer op zijn alom bekende blog www.karelgeenen.nl

www.karelgeenen.nl is een blog welke zeer regelmatig wordt geüpdate en niet alleen door Karel Geenen zelf maar ook door andere pionieren in de marketing wereld.

Het is zonder twijfel een website om in de gaten te houden indien je beslist om je onine te profileren met je website. Zeker voor houders van een webwinkel is deze blog een enorme boost van kennis dat je kan toepassen in je online strategiëen.

Zelf heb ik mij geabonneerd op zijn RSS Feed zodat ik alle artikels dadelijk na het publiceren in mijn RSS Reader kan lezen.

Onderwerpen die aan bod komen :

Zoals je kan zien stuk voor stuk zeer interessante onderwerpen. Alle artikels zijn ook zeer goed uitgeschreven en enorm leerzaam.

Zeker bijhouden deze blog! Wat is jullie idee over de blog van Karel Geenen?

De 10 beste software statistieken voor je website

Cicco — Thu, 19 Feb 2009 12:24:23 +0000

Niks zo belangrijk en verslavend als website eigenaar om zoveel mogelijk details te zien van je bezoekers en hun gedrag op je website. Hoe meer info je hebt over je bezoekers des te meer kan je inspelen op hun noden. Een goed en uitgebreid statistieken systeem is dus zeker noodzakelijk op je website.

Hieronder een overzicht van software voor je website statistieken welke zeker aan te raden vallen en waarmee je onnoemelijk veel info mee kan bekomen.

Denk maar aan : live tracking, heat map technology, gedetailleerde rapporten per e-mail, stats delen, download trackers,… Laat gerust een comment achter met jou favoriete statistieken software

Reinvigorate

Website : http://www.reinvigorate.net

PHP Web stats

Website : http://www.php-web-statistik.de/index-english.html

Logdy

Website : http://www.logdy.com

Clicky

Website : http://getclicky.com

W3Counter

Website : http://www.w3counter.com

Piwik

Website : http://piwik.org

Woopra

Website : http://www.woopra.com

Slimstat

Website : http://wettone.com/code/slimstat

Google Analytics

Website : http://www.google.com/analytics

Grape

Website : http://www.quate.net/grape

Zelfstudie.be – Koen Timmers

Cicco — Fri, 06 Feb 2009 14:25:53 +0000

Wie is Koen Timmers en wat is zelfstudie.be?

Koen Timmers is leraar informatica voor diverse avondopleidingen en heeft ook enkele websites opgericht waaronder www.zelfstudie.be en www.indeklas.com.

Zelfstudie.be is een website geworden waar je zowel gratis als betalende cursussen kan volgen, voor de betalende curssusen is er een bijkomende optie voorzien om begeleiding te krijgen. Kortweg zoals de slogan het zegt : “E-learning voor jong en oud”

Welke cursussen zijn er beschikbaar?

Er zijn 13 cursussen beschikbaar welke onderverdeeld zijn in 489 onderwerpen en er zijn nog enkele zeer interessante curssusen in de maak. Een overzicht van de curssusen :

Zelf heb ik enkele cursussen gelezen en het is zeker de moeite waard om je voor een cursus in te schrijven. Zeer goed uitgelegd, aangetoond met images, enorm leerrijk en zeker niet duur. Een inschrijving voor een cursus is een jaar geldig en kan in dat jaar altijd geraadpleegd worden op de website.

U kan zich op 2 manieren registreren :

Premium

Als premium lid heeft u onbeperkte toegang tot cursussen en krijgt u bovendien ondersteuning! Dit alles tegen een ongelofelijk scherpe prijs!

U ontvangt lidmaatschap voor een cursus naar keuze.
De cursussen zijn geschreven door Koen Timmers, auteur van diverse boeken, uitgegeven door Wolters Plantyn.
U betaalt 5 tot 12 euro per jaar, afhankelijk welke cursus u kiest. U ontvangt hierbij een officiële factuur.
U krijgt één jaar ondersteuning via internet: u kan vragen stellen via e-mail!

Prijzen kan u hier raadplegen

Gratis lid

U ontvangt gratis lidmaatschap voor de cursus internet.
U mag enkele hoofdstukken van de cursussen Dreamweaver, Flash en Fireworks inzien.
U krijgt toegang tot tutorials.
U betaalt niets!

Ik zou zeggen… Ga zeker eens een kijkje nemen want het is zeker de moeite waard! Kwaliteit van de cursussen, prijzen, support,… Het is allemaal voorhanden.

Voor degene die zich inschrijven voor een cursus, laat zeker weten wat je ervan vindt in de comments hieronder. Ben benieuwd naar jullie mening!

Koen Timmers… Nog veel succes met je prachtige website!

Ronde hoeken met jQuery Corners

Cicco — Fri, 12 Dec 2008 14:23:36 +0000

Ronde hoeken maken… Het blijft een doorn in het oog voor velen. Hoe maak je het? Hoe voeg je het in je website? Moet je images gebruiken? Of enkel CSS?

Zelf heb ik al meerdere oplossingen uitgeprobeerd en met allerlei scripts liggen knoeien. In deze tutorial leg ik uit hoe je heel makkelijk en zonder gebruik van images ronde hoeken kan maken. Dit script heeft mij tot nu toe het meest kunnen bekoren.

Het script, jQuery Corners, is gebaseerd op jQuery en gebruikt, zoals ik eerder aanhaalde, geen images. Ook fijn om te weten is dat je voor zowel divs, tabellen, buttons en dergelijke kan gebruiken.

Downloaden van het script

Om het script werkend te krijgen dien je 2 downloads te doen :

Installeren

Na het unzippen van beide files heb je 3 Javascript files :

jquery-1.2.6.min.js
jquery.corners.js
jquery.corners.min.js

Kopieer deze files en plaats ze in je webproject. Zelf maak in mijn webprojecten altijd een mapje ‘js’ aan om Javascripts in te zetten, dit is uiteraard niet verplicht.

Plaats nu een verwijzing in de head van elke pagina waar je dit script wil toepassen. Voorbeeld :

Script toepassen

Op de site van jQuery Corners staan heel duidelijke voorbeelden maar ik leg hier nog even uit hoe je dit toepast.

Het eerste wat je moet doen is je div een class meegeven. Dit doe je door aan je div class=”rounded” toe te voegen.

Een div genaamd ‘header’ ziet er dan zo uit :

Header

Het is belangrijk dat bij het toepassen van dit script de div genoeg ruimte heeft, zonder hoogte kan er namelijk geen ronde hoek aangemaakt worden. Voor dit voorbeeld voeg ik een padding toe van 10px, Je kan gerust de CSS in een externe stylesheet zetten.

De div header ziet er nu uit :

Header

Plaats nu onder de div de volgende Javascript regel of plaats deze regel in de head van je pagina:

De div ziet er nu als volgt uit :

Header

Met deze code krijg je het resultaat welke je ziet op de website
van jQuery Corners :

Wil je nu de hoeken een waarde meegeven van 10px dan voeg je de waarde {10px} aan je class. De code van een div met ronde hoeken van 10 px ziet er alsvolgt uit :

Header

Met deze code krijg je het resultaat welke je ziet op de website
van jQuery Corners :

In deze tutorial plaats ik de Javascript regel onder de div omdat dit op toepassing is op 1 div. Indien je dit script op meerdere divs wil toepassen dan kan je gerust deze javascript regel in de head van je pagina zetten. Het gaat over deze regel :

Even een korte samenvatting :

2 scripts downloaden.
Javascripts in je webproject plaatsen.
Javascript verwijzingen plaatsen.
Class toevoegen.
Waarde van de ronde hoeken meegeven

Op de site van site van jQuery Corners staan nog meer voorbeelden van divs, buttons, opties, enz. Zeker eens kijken zou ik zeggen.

Zelf vind ik dit een zeer makkelijk script om toe te passen zonder dat er met Photoshop moet gewerkt worden en een minimaal aan CSS.

Gebruik alle fonts je zelf wil in je website met Flir

Cicco — Wed, 10 Dec 2008 14:04:44 +0000

Flir, Facelift Image Replacement, is een script om welke font dan ook in je website te gebruiken zonder dat je gebruik moet maken van een image gemaakt in Photoshop of Fireworks.

Je kan door middel van enkel lijnen code je tekst omzetten naar een font naar wens, elk font die je wil.

Heel handig als je denkt in termen van zoekmachine optimalisatie. Nu kan de zoekmachine de tekst inlezen en komt hij geen onleesbare image meer tegen.

Een tutorial hoe je dit implementeert in je website.

Wat heb je nodig?

Een server met PHP ondersteuning : PHP 5 is aanbevolen.
Een server met GD.
ImageMagick op de server is nodig voor bepaalde fonts.

Downloaden en plaatsen van bestanden

Download facelift, deze bestanden heb je nodig.

Eens je deze download binnen hebt pak je het bestand uit met het programma Winrar en plaats je de map in de root van je directory. Dit is waar je index pagina staat, in normale omstandigheden.

Fonts installeren

Download de fonts welke je wil gebruiken en voeg deze bij in de map ‘fonts’.

Config-flir.php instellen

Nu je bestanden uitgepakt zijn op de juiste plaats staan open je de file config-flir.php en zie je enkele voorwaarden staan die je naar eigen smaak kan aanpassen. Indien je de ‘define’ voorwaarden wil aanpassen, is niet verplicht, kan je best de documentatie van Flir zelf doornemen. Voor alles is er een uitgebreide uitleg voorzien.

Belangrijkste in dit document is dat je moet aangeven welke fonts je gaat gebruiken. Dat doe je met de volgende regels

// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts['illuminating'] 	= 'ArtOfIlluminating.ttf';
$fonts['okolaks'] 		= 'okolaksBold.ttf';
$fonts['wanta'] 			= 'wanta_091.ttf';

Dit is een array van fonts. Wil je bijvoorbeeld de font webtutorials.ttf(is enkel een voorbeeld, deze font bestaat niet) gebruiken in je website voeg dan volgende regel toe :

$fonts['webtutorials'] 	= 'webtutorials.ttf';

De naam tussen de aanhalingstekens in de $fonts array gaan we later nog gebruiken in de CSS om de font op te roepen.

Iets lager zien we de volgende code staan :

// The font will default to the following (put your most common font here).
$fonts['default'] 		= $fonts['okolaks'];

In deze regel kan je aangeven welke font standaard wordt gebruikt als er geen font wordt aangeroepen.

Meer moet je niet aanpassen in deze file. De belangrijkste zaken zijn dus

- Het toevoegen van fonts welke je wenst te gebruiken.
- Een default font aangeven als er geen wordt aangeroepen.

Flir.js instellen

In de file flir.js moet je het pad ingeven naar de facelift map welke je in de root van je directory hebt geplaatst.

path: 'pad/naar je facelift map'

Flir.js oproepen

Om Flir te doen werken moet je in de head van elke pagina een Javascript regel plaatsen om flir.js aan te roepen. Plaats deze regel in de head van de pagina :

Vergeet bij bovenstaande code niet het pad aan te passen.

Javascript toevoegen

Heel belangrike stap. Voeg volgende code toe juist boven de afsluiting van je body, , zonder de juiste plaatsing van deze code zal het niet werken. :

Tekst opmaken

Flir zal standaard alle teksten welke tussen headings(alleen headings) staan automatisch aanpassen, van H1 tem H5. Wil je dit aanpassen dan kan je dit aanpassen in de bovenstaande Javascript welke we juist hebben toegevoegd boven de afsluiting van de body. Met deze regel :

    FLIR.auto();

Indien je wil dat de opmaak enkel op de ‘h2′ heading wordt toegepast dan ziet deze code er zo uit :

    FLIR.auto('h2');

Enkel op ‘h1′, ‘p’ en ‘em’ dan ziet de code er zo uit :

    FLIR.auto('h1', 'p', 'em');

Je kan ook een element toevoegen gecombineerd met een div. Op deze manier wordt dit element enkel omgevormd in een bepaalde div. Bv :

    FLIR.auto('p#header');

CSS aanpassen

Nu alle instellingen zijn ingegeven moet de font nog aangeroepen worden via CSS.

h1 { font-family: illuminating, Arial, sans-serif; }
p { font-family: okolaks, Arial, sans-serif; }
em { font-family: webtutorials, Arial, sans-serif; }

De eerste font aangegeven in de font-family is de font welke je hebt geïnstalleerd en geconfigureerd in je config-flir.php file. Herinner je je de naam die je ingegeven hebt in de array nog? Wel, dit is nu degene die aangeroepen wordt.

Alles is nu ingesteld en aangepast. Het lijkt een hele boterham maar dat is het helemaal niet, in principe moet je enkel volgende dingen doen :

Gewenste fonts downloaden en uploaden in de map fonts.
Config-flir.php aanpassen.
Flir.js aanpassen.
2x javascript invoegen en eventueel aanpassen.
CSS aanpassen.

Ben benieuwd of er iemand mee gaat experimenteren en hoop hier enkele mooie resultaten te zien verschijnen. Plaats gerust een link naar je Flir toepassing.

DEWPLAYER : mp3 flash player

Cicco — Wed, 10 Sep 2008 12:00:29 +0000

Dewplayer is een mooie en gratis Flash MP3 speler.

Bij het aanklikken van de PLAY button wordt de MP3 gedownload en wordt deze vervolgens afgespeeld. Het script is zeer licht en makkelijk toe te passen.

Er worden drie mogelijkheden voorzien:

Mini (160×20)
Classic (200×20)
Multi (240×20)

De installatie is simpel en vergt enkel 3 stappen :

Stap 1 :
Download de gewenste player versie.

Stap 2 :
Zet de volgende code in je pagina, in veronderstelling dat je de Classic versie hebt gedownload :

Stap 3 :
Vervang in bovenstaande code 2x test.mp3 naar jou MP3.

Website en download : http://www.alsacreations.fr/dewplayer-en

Minishowcase : php/javascript photo gallery

Cicco — Fri, 29 Aug 2008 11:57:51 +0000

Minishowcase is een klein en simpel PHP/Javasctipt foto gallerij, gedreven door AJAX waardoor je je foto’s makkelijk online kan laten zien.

Zonder ingewikkelde databases en coderingen heb je deze foto gallerij in enkele minuten online staan.

Website : Minishowcase

IE6 – PNG Hack

Cicco — Wed, 27 Aug 2008 08:23:06 +0000

Tegenwoordig wordt er bij de opmaak van een website veel gebruik gemaakt van transparante PNG’s welke in Photoshop zijn aangemaakt. Nu, met nog altijd menig wat IE6 gebruikers, is dat een probleem mits deze verouderde browser geen transparante PNG’s ondersteund.

Ofwel kan je tegen je bezoekers zeggen dat ze hun browser moeten upgraden naar een recente en fatsoenlijke browser ofwel ga je een PNG hack toepassen zodat dit probleem in IE6 van de baan is.

Met optie 1 ga je je uiteraard niet mee bezighouden dus opteren we voor optie 2. Hoe implementeer je zoiets? Welke hack gebruik je hiervoor?

Een kleine tutorial hierover.

Eén van de beste PNG hacks op internet is het script supersleight van 24 ways.

Stap 1 :

Download het script, na het uitpakken heb je volgende mappenstructuur :

supersleight-min.js
supersleight.js
x.gif

Stap 2 :

Kopieer deze 3 items in de root van je directory.

Stap 3 :

Kopieer onderstaande code in de head van je pagina waar je transparante PNG’s gebruikt.

Dit wil zeggen dat het script “supersleight-min.js” dient toegepast te worden indien de browser lager of gelijk is aan IE6.

Zo… Meer is het niet. Nu kan je met een gerust hart werken met transparante PNG’s, welke van veel betere kwaliteit zijn dan GIF’s.

54 bijzonder mooie business cards

Cicco — Thu, 21 Aug 2008 18:59:10 +0000

Binnenkort ben ik van plan om een naamkaartje of business card te laten maken om bij bepaalde contacten te kunnen afgeven. Nu ben ik al een tijdje op zoek naar hoogwaardige naamkaartjes en telkens ik ééntje zag dat mij beviel heb ik het bijgehouden.

Nu dacht ik… Misschien zijn er wel bezoekers van Web Tutorials die hier ook iets mee kunnen doen. Bij deze de hele collectie!

Kan jij dergelijk hoogstaande naamkaartjes maken? Je mag het me altijd iets laten weten…

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

35.

36.

37.

38.

39.

40.

41.

42.

43.

44.

45.

46.

47.

48.

49.

50.

51.

52.

53.

54.

Welke vind jij de mooiste?

Mask layer in Flash CS3

Cocovijve — Tue, 19 Aug 2008 19:15:16 +0000

Een Mask layer is een laag waarin één of meer objecten een geanimeerd doorkijkvenster vormen voor de onderliggende lagen. Met een Mask layer creëer je als het ware Spotlight-effecten.

Bekijk hier een voorbeeld van een Mask layer.

Open Flash CS3.

Open een nieuw werkdocument.

De Stage heeft volgende kenmerken : 650 x 120 pixels, 12 frames per seconde en een witte kleur.

Selecteer het Text-tool en kies lettertype Verdana, 50 pixels, vet en cursief.

Typ de tekst www.webtutorials.be en plaats deze in het midden van de Stage.

Wijzig de layernaam in tekst.

Voeg een nieuwe layer toe met als naam Mask.

Selecteer frame 1 van deze nieuwe layer en teken een cirkel met willekeurige vulkleur links van de tekst net BUITEN de Stage.

Zorg dat de cirkel voldoende groot is zodat alle letters straks in de cirkel passen als deze over de letters beweegt.

In de layer mask voeg je in frame 40 een keyframe in (F6)

Sleep de geselecteerde cirkel naar rechts tot net buiten de Stage.

Druk eerst op de shift toets vooraleer je begint te slepen, zo verplaats je de cirkel op een rechte lijn.

Selecteer frame 1 van layer mask en maak een Shape Tween.

Selecteer de layer tekst en voeg in frame 40 een keyframe in zodat de tekst opnieuw verschijnt.

Klik met de rechtermuisknop op de layer mask en kies de optie Mask in het snelmenu.

Fash zal beide layers vergrendelen en de layers zelf krijgen specifieke pictogrammen.

Bewaar de animatie en bekijk het effect.

Tutorial gemaakt door Cocovijve

Een contactformulier valideren met Dreamweaver

Cicco — Fri, 15 Aug 2008 18:30:29 +0000

Voor niet-programmeurs en degenen die geen kennis hebben van Javascript voorziet Dreamweaver een zeer simpele manier om je contactformulier te valideren.

Dit wil zeggen dat je bepaalde velden in je formulier verplicht kan maken. Als de bezoeker deze niet invult zal hij een melding krijgen dat de verplichte velden niet zijn ingevuld en bijgevolg het formulier ook niet verzenden. Het is zelfs mogelijk om enkel een e-mail adres te laten invullen of een nummer van – tot.

Je kan hier een voorbeeld bekijk van deze tutorial. Probeer het formulier te verzenden zonder iets in te vullen..

Hoe maak je nu zoiets? Open Dreamweaver, maak een nieuwe pagina aan en maak je contactformulier aan. Vergeet zeker niet om je formuliervelden een benaming te geven.

Ga vervolgens naar : Tag Inspector -> + -> Behaviors -> Validate form. Zie volgende afbeelding :

Klik op ‘Validate Form’ en de volgende afbeelding verschijnt :

Deze wizard gaan we invullen om de gewenste velden verplicht te maken.

Fields : In dit vak komen alle velden te staan welke je formulier bevat. Je klikt degene aan welke je wil verplicht maken en vult vervolgens de opties eronder in.

Value : Vink aan indien het verplicht dient te zijn

Accept : Hier kan je aangeven welke voorwaarde het verpichte veld dient te hebben. Als je bijvoorbeeld ‘Email adress’ aanvinkt zal het formulier enkel verstuurd worden indien er een e-mail adres in staat.

Ga alle velden af welke je verplicht wil maken en vink de nodige opties aan. Klik op OK en save je pagina.

Meer is het niet. Als je nu het formulier wil verzenden zonder de verplichte velden in te vullen krijg je volgende melding :

Voor de CS3 gebruikers is er nog de Spry Validate optie, deze komt een volgende keer aan beurt.

Handige opties voor de leken op Javascript gebied, niet?

Een Flash button maken

Cocovijve — Wed, 13 Aug 2008 20:00:53 +0000

Flash buttons zijn symbolen die je kunt beschouwen als schakelaars.
Een button heeft een aparte Timeline maar er zijn slechts 4 toestanden of keyframes mogelijk.

De vier verschillende toestanden zijn :

Up : de rustfaze van de button.
Over : de toestand (of vorm) van de button wanneer de muis erover beweegt.
Down : de toestand tijdens het indrukken van de muistoets.
Hit : het aanklikbare gebied va de button.

In elk van deze vier toestanden kan de button een ander uiterlijk aannemen. Buttons kunnen meerdere layers bevatten met verschillende achtergronden

Bekijk hier het voorbeeld van een Flash button

Open Flash CS3.

Open een nieuw werkdocument.

Voeg een nieuw symbool in. (Ctrl + F8)

Geef een naam voor de button : btnEersteKnop (begin steeds met het voorvoegsel btn), kies button als type en klik op OK.

Er wordt een subscene geopend met in de Timeline 4 aparte frames : Up, Over, Down en Hit. Het frame Up is reeds een keyframe.

Teken op de Substage een cirkel met een lichtgrijze vulkleur zonder rand.

Plaats deze cirkel in het midden van de Stage.

Selecteer het frame Over en voeg een keyframe in. (F6)

De cirkel van het frame Up wordt automatisch gekopieerd.

Verander de kleur van de cirkel in blauw.

Voeg in het frame Down een keyframe in en wis de cirkel op de Substage.

Teken een vierkant op de Substage en voorzie een breedte die dezelfde is als de diameter van de cirkel. Kleur groen.

Centreer het vierkant ten opzichte van de substage.

In het frame Hit plaats je een keyframe en laat je het vierkant staan.

Ga terug naar Scene 1 en sleep vanuit de Library het symbool btnEersteKnop naar de Stage.

Controleer de animatie. (Enter) Als er niets gebeurd, ga dan naar het menu Control en zorg dat er een vinkje staat naast “Enable Simple Buttons”.

Momenteel zal de knop werken maar er worden geen acties gekoppeld aan de button.

Acties worden geprogrammeerd via ActionScript, een ingebouwde programmeertaal in Flash.

ACTIONSCRIPT toevoegen.

Selecteerde grijze cirkel (schakel desnoods “Enable Simple Buttons” terug uit)

en wijzig de Instance name in de Property Inspector in “eersteknop”.

Selecteer frame 1 en klik op F9, voeg onderstaande code toe :

function eersteknop_clicked(o:Object){

navigateToURL(new URLRequest("http://www.webtutorials.be"));

}

eersteknop.addEventListener(MouseEvent.CLICK, eersteknop_clicked);

Bij het klikken op de knop kom je terecht op de webtutorials home-page…

Bewaar de animatie.

Tutorial gemaakt door Cocovijve

Kennismaking met Flash CS3

Cocovijve — Tue, 12 Aug 2008 18:00:14 +0000

Deze tutorial is bedoeld om de omgeving en mogelijkheden van Flash CS3 in een beknopte vorm voor te stellen aan beginnende Flash CS3 gebruikers.

Bekijk hier een voorbeeld van deze Flash tutorial.

Open Flash CS3

Open een nieuw document : Klik op Flash File (ActionScript 3.0)

Wijzig de breedte van de Stage naar 350 pixels en de hoogte naar 200 pixels. Klik daarvoor in het Properties Panel op de knop Size.

Geef de achtergrond van de Stage een lichtblauwe achtergrond.

Background color : #0099CC

Bevestig de wijziging door te klikken op OK.

Breng de Stage volledig in beeld (Kies voor Fit in Window onder de Timeline)

Toon de gridlines op het scherm via het menu View/Grid/Show Grid.

Selecteer het Oval Tool. Klik daarvoor op het Rectangle Tool tot er een submenu tevoorschijn komt.

Wijzig de instellingen van het Oval Tool als volgt :

Stroke : zwart; 1 pixel; dikte : Solid
Fill : #00CCCC

Stel ook Snap to Objects in : Snapping wordt gebruikt om objecten onderling te positioneren tijdens het tekenen of het verplaatsen door slepen.

Object snapping : om bijvoorbeeld een lijn te verplaatsen naar een hoek van een vierkant. Wanneer je het beginpunt van een lijn verplaatst, zal bij naderen van een hoek van een ander object, een snapring verschijnen.

Teken nu een cirkel op de Stage. Houd de shift toets ingedrukt tijdens het slepen om een perfecte cirkel te krijgen.

Selecteer het Selection Tool.

Selecteer alles m.b.v. Ctrl + A.

Zowel de blauwe cirkel als de zwarte rand zijn nu voorzien van witte puntjes.Converteer de cirkel naar een symbool door F8 in te drukken.

Geef als naam grCirkel, selecteer Graphic en plaats het focuspunt in het midden (Registration middelste kleine vierkantje). Bevestig met OK.

Centreer de cirkel in het midden t.o.v. de Stage. Klik eerst op Window en selecteer daarna Align om het Align Panel zichtbaar te maken. (Het Align Panel staat nu rechts op uw scherm)

Het symbool bij To stage moet actief staan. Klik op de 2 andere aangeduide symbolen om de cirkel zowel horizontaal als vertikaal te centreren ten opzichte van de stage.

Selecteer in de timeline frame 30 en maak er een keyframe van door op de functietoets F6 te klikken.

Maak de cirkel groter tot buiten de Stage. Gebruik hiervoor het Free Transform Tool en de shifttoets om het hoekpunt te slepen met behoud van de verhouding.

Selecteer frame 1 :

Maak een Motion Tween via de Property Inspector.

Selecteer de cirkel in frame 30 en stel in de Property Inspector keuzemenu Color de Alphawaarde in op 20.

Wijzig de layernaam in cirkel. Dubbelklik hiervoor op de naam Layer 1 en wijzig de naam in cirkel. Voeg een nieuwe layer toe, klik op het meest linkse symbool, en geef deze layer de naam ‘tekst’.

Selecteer frame 1 van de layer tekst.

Plaats in dit frame een statische tekst, Arial, 20 pixels groot en Bold. Selecteer daarvoor eerst het Text Tool.

In de Property Inspector wijzig je volgende waarden :

Klik ergens in de Stage en plaats volgende tekst : KENNISMAKING MET FLASH CS3

Let op : Om de invoer van tekst te beëindigen klik je niet op Enter maar wel ergens buiten de tekst.

Selecteer de tekst en converteer deze naar een grafisch symbool (Ctrl F8).
Positioneer de tekst in het midden van de Stage.
Maak van frame 30 in de layer tekst een keyframe (F6) .
Selecteer frame 1 in de layer tekst en vergroot de tekst tot buiten de Stage.

Maak een Motion Tween van de tekst. Deze moet 1 maal roteren in wijzerzin tussen frame 1 en 30.

Bekijk nu even uw gemaakte flash animatie door te klikken op Ctrl + Enter.

Je ziet dat de animatie telkens opnieuw begint. Dit kunnen we voorkomen door een ActionScript toe te voegen.

Selecteer in de layer cirkel het laatste frame en klik vervolgens op F9 om het Acion Panel te openen.

Vul volgende “actie“ in stop (); (vergeet de punt-komma niet !!)

Controleer opnieuw de animatie (Ctrl + Enter), nu stopt de animatie nadat deze 1 maal is uitgevoerd.

Bewaar het werkbestand via File >> Save as…

Publiceer eventueel in swf-formaat of html formaat om te gebruiken op uw website.

Tutorial gemaakt door Cocovijve