Voorbeeld menu met fade-in, fade-uit

Posted 10 aug 2010 — by admin
Category actionscript 3.0
Hier is een eenvoudig voorbeeld hoe je in Flash een aantal knoppen kunt laten werken. Alles is met de hand gemaakt en op de stage gezet. Het kan natuurlijk ook dynamisch. Toch houdt het script rekening met uitbreiding: als je een extra knop erbij zet, werkt alles ook. Vandaar de eerste variable: aantalKnoppen. De movieclips die in- en uitfaden staan los op de stage. Die hadden ook in een container kunnen staan, zoals de knoppen. Het is dus nog te verbeteren. Er zijn geen tweenclasses gebruikt maar een eigen script om de fade te verzorgen. De laatste for-loop is voor het geval de gebruiker te snel op een andere knop klikt. De var vorigItem werkt dan niet goed meer.

?View Code ACTIONSCRIPT
package
{
	// variables maken
var aantalKnoppen:int = knoppen_mc.numChildren;
var welkItemNr:int = 1; // eerste item is standaard gekozen
var vorigItem:int = 2; // we doen alsof we hiervoor knop2 hebben geklikt
// run now:
lijntjes_mc.stop();
lijntjes_mc.mouseEnabled = false; // de movieclip lijntjes_mc moet niet op de muisklik reageren
hokje1_mc.gotoAndStop(2); // het hokje vd de bovenste knop is zwart
knoppen_mc.k1_btn.visible = false; // de bovenste knop is onzichtbaar
// alle items
for (var i:int=1; i <=aantalKnoppen; i++)
{
	this["item" + i + "_mc"].alpha = 0; // alle movieclips (item1_mc t/m item7_mc) zijn transparant
	this["item" + i + "_mc"].mouseEnabled = false; // de movieclips moeten niet op de cursor reageren
}
item1_mc.alpha = 1;
 
// eventListeners:
knoppen_mc.addEventListener(MouseEvent.MOUSE_OVER, handler_over);// de "container" knoppen_mc krijgt een EventListener: alle knoppen in deze container werken
knoppen_mc.addEventListener(MouseEvent.MOUSE_UP, handler_up);
knoppen_mc.addEventListener(MouseEvent.MOUSE_OUT, handler_out); // bij een "roll_out" van een knop, moet  lijntjes_mc naar het eerste frame
 
// functions:
function handler_over(evt:MouseEvent)
{
	var welkFrame:int = (knoppen_mc.getChildIndex(evt.target as DisplayObject)) + 2; // welke knop kom je overheen met de cursor?
	lijntjes_mc.gotoAndStop(welkFrame); // de knop waar je overheen komt, krijgt een lijntje onder de tekst
}
function handler_up(evt:MouseEvent)
{
	// deze function werkt bij muisklik (MOUSE_UP) bij alle knoppen
	for (var i:int=1; i <= aantalKnoppen; i++)
	{
		this["hokje" + i + "_mc"].gotoAndStop(1); // alle hokjes worden open (zie ook regel 38 !)
		knoppen_mc["k" + i + "_btn"].visible = true; // alle knoppen worden zichtbaar (zie ook regel 39 !)
	}
	var welkeKnop:int = (knoppen_mc.getChildIndex(evt.target as DisplayObject)) + 1; //welke knop heb je geklikt?
	this["hokje" + welkeKnop + "_mc"].gotoAndStop(2); // het hokje voor de knop wordt zwart
	knoppen_mc["k" + welkeKnop + "_btn"].visible = false;// de knop waar je op klikte wordt onzichtbaar
	lijntjes_mc.gotoAndStop(1); // alle lijntje verdwijnen
	vorigItem = welkItemNr;// het vorige item (de var vorigItem) wordt gelijk aan het knop-nummmer waar je hiervóór op klikte
	welkItemNr = welkeKnop; // het huidige item (de var welkItemNr) wordt gelijk aan de knop waar je net op klikte
	addEventListener(Event.ENTER_FRAME, fade_in); // de items moeten in- en uitfaden
}
function handler_out(evt:MouseEvent)
{
	lijntjes_mc.gotoAndStop(1); // alle lijntje verdwijnen
}
function fade_in(evt:Event)
{
	if (this["item" + welkItemNr + "_mc"].alpha < 1)
	{
		this["item" + welkItemNr + "_mc"].alpha += .05;// het item met het nummer van de huidige knop fade in
		this["item" + vorigItem + "_mc"].alpha -= .05;// het item met het nummer van de vorige knop fade in
	}
	else
	{
		for (var i:int=1; i <=aantalKnoppen; i++)
		{
			this["item" + i + "_mc"].alpha = 0;// voor de zekerheid worden alle items transparant behalve ... zie regel 63
		}
		this["item" + welkItemNr + "_mc"].alpha = 1; // het item met het nummer van de huidige knop moet wel alpha 1 hebben
		removeEventListener(Event.ENTER_FRAME, fade_in); // de EventListener is niet meer nodig
	}
}
}

Klik hier om de flash-bestanden te downloaden. Je krijgt de verschillende versies (van a t/m i).

Rond draaiende sterrenhemel

Posted 02 jun 2010 — by admin
Category Flash, actionscript 3.0

Met een kort script kun je een complete sterrenhemel maken. Er zijn drie classes: Main (documentclass), Sterren en de class Ster. De variable _schaal zorgt voor diepte (alpha en scaleX + scaleY). In de bibliotheek van de fla is een eenvoudige wit rondje gelinkt aan de class Ster. In Sterren.as wordt een aantal objecten van Ster gemaakt. Verrassend wat je met redelijk klein script kunt doen. Je ziet hier het resultaat, daaronder staat het script van Ster.as. De positie van elke ster is gekoppeld aan de positie van de cursor.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
7
8
9
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
55
56
57
58
package 
{
	import flash.display.MovieClip;
	import flash.events.Event;
 
	public class Ster extends MovieClip
	{
		private var _schaal:Number;
		private var _minimum:Number;
		private var _maxSnelheid:Number;
		private var _br:int;
		private var _hg:int;
		private var _dx:Number;
		private var _dy:Number;
 
		public function Ster()
		{
			_schaal = Math.random();
			_minimum = .3
			_maxSnelheid = 2;
			addEventListener(Event.ADDED_TO_STAGE, added_handler)
		}
		private function added_handler(evt:Event):void
		{
			_br = stage.stageWidth;
			_hg = stage.stageHeight
			x = Math.random() * _br;
			y = Math.random() * _hg;
			alpha = _schaal;
			scaleX = scaleY = _schaal + _minimum;
			addEventListener(Event.ENTER_FRAME, enterframe, false, 0, true);
		}
		private function enterframe (evt:Event):void
		{
			_dx = (_br/2 - stage.mouseX)/60;
			_dy = (_hg/2 - stage.mouseY)/60;
			x += _dx/_schaal; // hoe kleine de schaal, hoe groter de x verandering
			y += _dy/_schaal;
			//y += _maxSnelheid * _schaal; // oude versie toen de sterren naar  omlaag vielen 
			if ( y > _hg)
			{
				y = 0
			}
			if ( y < 0)
			{
				y = _hg
			}
			if ( x > _br)
			{
				x = 0
			}
			if ( x < 0)
			{
				x = _br
			}
		}
	}
}

Klik hier om de bestanden te downloaden.

Maak een swf in Flash Catalyst, nieuw bij CS5

Posted 11 mei 2010 — by admin
Category Flash, Flash Catalyst, interface design

Eindelijk een interactief bestand maken met animatie, rollovers zonder een regel code te typen. Dat kan met het nieuwe programma Flash Catalyst. Vooral ideaal voor vormgevers die vanuit Photoshop of Illustrator een ontwerp willen omzetten naar een werkende interface. Hier is een voorbeeld waar 5 knoppen staan + een knopje FC om naar de home-pagina te gaan.

Flash heet nu voortaan: Flash Professional. Voor alle animatiemogelijkheden en, waar we aan gewend raakten, voor het werken met ActionScript. Liefst in classes. Het nieuwe programma Flash Catalyst is voor het eenvoudige werk. Helemaal op design gericht, alles importeren vanuit Illustrator of Photoshop om daarna interactiviteit en animatie toe te voegen. Niet 1 timeline maar pages. Per overgang (van pagina naar pagina) kun je heel makkelijk de soort en duur van de animatie bepalen. Stukken sneller dan in Flash Professional. Wel lastig als je -zoals hier- 6 pagina’s hebt, want dan zijn er 6 x 5 = 30 verschillende overgangen te verzorgen. Zonder één regel script kun elastic of bounce als effect toevoegen. Ieder onderdeel op de pagina is afzonderlijk te animeren.

Pluspunt van een button in Catalyst is het stand: disabled. Dat ontbrak altijd aan de button in Flash.
Alles van Catalyst is te importeren in Flash Builder (het voormalige Flex) waarna een ontwikkelaar ermee verder kan werken. Flash Catalyst lijkt een schot in de roos te zijn. Bekijk ook de video op de site van Adobe om o.a. snel een scrollbar te maken.

Flash CS5 code hints

Posted 07 mei 2010 — by admin
Category Flash, actionscript 3.0

Gelukkig is de actionscript editor van Flash CS5 enorm verbeterd. Download Flash CS5 en kijk maar. Niet alleen je eigen classes worden getoond in code hints maar ook public functions van die class met de arguments (zie afbeelding). Een externe editor zoals Flash Develop is dus niet meer nodig, dat scheelt weer switchen naar Parallels op de Mac.

locaal variabelen opslaan

Posted 05 mei 2010 — by admin
Category Flash, actionscript 3.0

In ActionScript is het heel makkelijk om op de HD van de gebruiker variabelen op te slaan. Je maakt hiervoor een object van het type SharedObject. De naam van data die je wilt bewaren kun je ook koppelen aan bijv. een nummer. Met flush worden de data bewaard. In dit scriptvoorbeeld is url een andere variabele zodat je verschillende SharedObjects hebt.

?View Code ACTIONSCRIPT
1
2
3
4
5
6
// het opslaan van de data:
var tekstNotitie:String = "tekst" + nummer;
var mijnData:SharedObject = SharedObject.getLocal(url);
mijnData.data[tekstNotitie] = input_txt.text;
mijnData.flush ( );
mijnData.close ( );

Het ophalen van deze data is het omgekeerde:

?View Code ACTIONSCRIPT
1
2
3
4
// het binnenhalen van de data:
var tekstNotitie:String = "tekst" + nummer;
var mijnData:SharedObject = SharedObject.getLocal(url);
input_txt.text; = mijnData.data[tekstNotitie];

Mocht de limit van 100 KB overschreden worden, dan komt er een warning in beeld. Als de gebruiker op “allow” klikt, is de limit 1 MB. Een voorbeeld waarbij je verschillende notities kunt toevoegen, wijzigen en verwijderen zie je hier. De notities zijn ook te verplaatsen en in/uit te klappen. De notities zijn dus alleen op je eigen computer te zien. SharedObjects kun je net zo goed gebruiken voor stand-alone applicaties.

cache-probleem bij laden van .txt of .php

Posted 23 apr 2010 — by admin
Category Flash, actionscript 3.0

Je hebt -afhankelijk van je OS en browser- soms last van een cache bij het ophalen van data. Achter de string met het txt- of php-bestand kun je een variable meesturen. Deze variable is een toevallig (random) getal. Hierdoor wordt het bestand niet uit de cache gehaald:

?View Code ACTIONSCRIPT
1
mijnURLLoader.load (new URLRequest("load.php?reload="+ Math.round(Math.random() * 100000)));

dynamische tekst in perspectief

Posted 21 apr 2010 — by admin
Category Flash, actionscript 3.0

Een dynamisch tekstveld converteer je in Flash naar een movieclip. Deze instance kun je met 3D-transformatie ‘plat’ leggen. Het perspectief kun je zo instellen dat het verdwijnpunt klopt volgens de geplaatste foto. Een kort script laat zien dat het dynamische tekst is, beweeg de cursor over de foto. De tekst is klaar voor input uit database bijv.

Een caption en cross-reference in Word

Posted 21 apr 2010 — by admin
Category Word

In Word weet je vast wel dat je automatisch hoofdstukken kunt nummeren. Bij Bullets and Numbering kun je de stijlen heading1, heading2 enz. op Outline Numbered zetten. Hoe nummer je automatisch onderschriften bij afbeeldingen? Hiervoor gebruik je: Caption. Bij Insert -> Caption kies je New Label:

Je noemt het bijv. figuur. Bij Numbering kies desgewenst voor Include chapter number. Een punt (period) zou je tussen het hoofdstuknummer en afbeeldingsnummer kunnen zetten:

Je kunt nu onder iedere geplaatste afbeelding een onderschrift beginnen met : Insert -> Caption. Je kiest jouw net gemaakte label figuur. Het onderschrift begint dan met “figuur” gevolgd door het correcte nummer, bijv 14.1. Een aparte stijl kun toegekend worden aan deze alinea.

Ergens anders in de tekst kun je een verwijzing maken naar dit onderschrift. Ook daar kan automatisch het figuur-nummer getoond worden. Je kiest terwijl je ergens anders in de tekst staat: Insert -> Cross-reference. Onder Reference type: kies je figuur. Alle aanwezige onderschriften verschijnen. In deze lijst maak je een keuze. Onder Insert reference to: Only label and number. Eventueel kun je deze verwijzing als hyperlink laten verschijnen, wat handig is voor een pdf.

Je bent klaar. Zowel de caption als de cross-reference staan hier in het Word-document (zie afbeelding hieronder). Heel handig als je afbeeldingen toevoegt, verwijdert of een heel hoofdstuk op een andere plek zet: de grijze tekst wordt aangepast! Tip: na aanpassingen selecteer je alle tekst (cmd-A) en gebruik toets: F9 om alle cross-references te laten aanpassen!

tekst uit een tekstbestand

Posted 20 apr 2010 — by admin
Category Flash, actionscript 3.0

De content voor een swf-bestand kun je heel eenvoudig uit een tekstbestand halen. De variabelen zet je met een & (ampersand) achter elkaar. Het tekstbestand ziet er zo uit:

tekst=handig aan te passen&info=deze infotekst en de tekst op het hek staan in een tekstbestand. Zo is de content eenvoudig buiten de .swf te zetten.

In het flashfilmpje staan de dynamische tekstvelden in een movieclip dat met het transformeergereedschap schuin is gezet. Het lettertype is ingesloten, het voordeel van Flash:

Het actionscript is niet ingewikkeld. Voor een stand-alone applicatie kun je het pad ook absoluut maken (http://site.com/map/tekstbestand.txt).

?View Code ACTIONSCRIPT
var mijnURLLoader:URLLoader = new URLLoader();
mijnURLLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
mijnURLLoader.load (new URLRequest("hekTekst.txt"));
mijnURLLoader.addEventListener (Event.COMPLETE, onDataLoad);
function onDataLoad (evt:Event)
{
	hek_mc.input_mc.input_txt.text = evt.target.data.tekst;
	tekst_bordje_mc.info_txt.text = evt.target.data.info;
}

klik hier om het bestand te downloaden

viewmaster

Posted 20 apr 2010 — by admin
Category Flash, actionscript 2.0, actionscript 3.0

Zo’n ouderwetse viewmaster waar de schijfjes nog rond waren, wie kent ze nog? Beweeg de zwarte knop naar beneden en vier movieclips draaien mee: de draaiknop zelf, het schijfje met de tekst en twee mc’s die ieder in een masker getoond worden.

Hier vind je een gedeelte van het actionscript. Dit moet tijdens het draaien met een Enterframe worden uitgevoerd. Het script is in AS3 bijna hetzelfde.

?View Code ACTIONSCRIPT
dx = _xmouse - 440; // horizontale afstand van muis tot midden stage
dy = _ymouse - 280;// verticale afstand van muis tot midden stage
radians = Math.atan2 (dy, dx); //in radialen wordt de hoek vd muis berekend
draaiknop_mc._rotation = radians * 180 / Math.PI; // draaiknop draait rond registratiepunt