(index) LIST of posts

Tutorials spil

Eksempler, variationer og supplerende tutorials til de gennemgåede spil-øvelser – i form af links.
Se også i kommentarerne.

Interaktive øvelser

edutechwiki: interactive_objects_tutorial

Puslespil

riacodes.com: drag-the-pieces-of-the-puzzle
monkeyflash.com flash-drag-and-drop
pixel2life.com: create_a_drag_and_drop_puzzle_in_actionscript_3_0 (classes)

Brickbreaker

En variation/udviddelse af squash-spillet
mrsunstudios.com: create-a-brick-breaker-game-in-as3

Andet


active.tutsplus.com: build-a-mini-golf-game-with-actionscript-3-0

Avanceret

Her er spillet ofte bygget op med classes
mrsunstudios.com/tutorials/
gamedev.michaeljameswilliams.com: avoider-game-tutorial

mcStatus function (as2)

mc er movieclippet med den sektionerede timeline og relevante labels. De har her samme navne som mcStatus værdierne!
mcStatus er en variabel der her får værdi af trin som indgår i en logisk rækkefølge. Hvert trin betinger det næste (erstat navne med dem du arbejder med).

Start med at få overblik over de forskellige mcStatus værdier

/*mcStatus værdier: sleep, awake, dressup */

Og definer så en startværdi for mcStatus

mcStatus = "sleep";

Kombinationer

Andre objekter ændrer mcStatus:

alarm_mc.onRelease = function () {
	if (mcStatus == "sleep") {
		mcStatus = "awake";
	}
};
dress_mc.onRelease = function () {
	if (mcStatus == "awake") {
		mcStatus = "dressup";
	}
};

mc aktiveres ved direkte klik:

mc.onRelease = function () {
	gotoAndPlay (mcStatus);
};

Andre objekter ændrer mcStatus og aktiverer mc:

dress_mc.onRelease = function () {
	if (mcStatus == "awake") {
		mcStatus = "dressup";
		mc.gotoAndPlay (mcStatus);
	}
};

Flash brugerflade start

flashinterface.gif

Flash basic moves

Højreklik på en frame, og du vil se en menu med relevante muligheder

Marker 1 eller flere frames

- Timeline: klik på første frame – shift-klik på den sidste.
- Timeline: hold musen nede og træk gennem alle de frames der skal markeres – og slip.
- På en motion-tween: Ctrl+Click

Copy/Paste frames sekvens

- Timeline: Marker relevante frame(s) – høreklik > copy frames
Stil dig på den rigtige frame på den rigtige timeline, højreklik > paste frames
- Hvis der skal duplikeres frames på samme timline:
Brug ovennævnte copy frames / paste frames metode, eller genvejen til metoden:
Marker frames – Alt+drag – slip musen et nyt sted..

Frames genveje

Frames redigeres hurtigst med højrekliksmenuen eller:
- F5 = frame
- F6 = keyframe
- F7 = blank keyframe
- Shift+F5 = remove frame
- Shift+F6 = clear keyframe

Opret symbol

- Library panelet: Klik i ikonmenuen nederst i panelet.
- Stage: Marker et eksisterende objekt og ‘konverter’ gennem hovedmenuen eller med højreklik.

Test movie

Ctrl+Enter / (Apple+Enter) = test swf
F12 = test html+swf

Instance-navn

Marker objektet på scenen (ikke i timeline) og udfyld < instance name > i property-panelet. Unikke navne efter gældende navngivnings-konventioner. OBS Hvis objektet er animeret og optræder på flere keyframes, skal hver instance af det navngives med samme instance-navn.

Frame label

Marker den pågældende tomme keyframe på timeline i et labels-lag og udfyld Label Name i Property-panelet. Unikke navne efter gældende navngivnings-konventioner, og kun et navn pr. frame.

Break apart, CTRL+B

- På et symbol: Objektet springer et led frem i stien, dvs. ud af den timeline det var indlejret i.
- På en tekstboks: Hvert bogstav i teksten får sin egen tekstboks. CTRL+B igen, og tekst-bogstavet konverteres til en shape.
- På et Bitmapbillede: Bitmap-symbolet konverteres til en shape med ‘bitmap-fyld’, som kan redigeres.

Animation teknikker

Nedenstående tekniker kan også kombineres på samme timeline.

Classic Motion tween

motion.gifanvendes på et symbols ‘instance’.

position = bevægelse
skalering = zoom effekt
rotation
vridning
Color effekt (tint, alpha) = fx. fade effekt
Filters (fx. drop shadow, blur)
Easing (brems, accelerer..) sættes generelt på hele tweenen, også hvis effekterne er kombinerede.

.

“New” Motion tween

newmotionanvendes på et symbols ‘instance’.

Kun siden CS4 -
Laver præcis samme forandringer i en movieclips properties som den klassiske motion tween, men laver selv nye keyframes.
Dels ved intuitiv “manuel ændring” på scenen –
- eller/og ved at indstille i Motion editor. Der kan man blandt meget andet indstille easing for hver enkelt property.

.

Shape tween

shape.gifanvendes på en shape.

.

Frame by Frame

fr-by-fr.gif
frame_by_frame
onion_skin

.

background-image tricks

Pseudo selectors og baggrundsbilleder (preload problematik)

Egen test med listemenu og you-are-here | og et andet eksempel her

Tekniken forklaret:
background-image på tomme links – display:block + padding – varierende background-position på a, a:hover, a:active
preload image – 1

Den aller simpleste preload teknik for background-image på links (hover-versionen ligger klar nedenunder) Maratz.com

En super enkel og snedig alle-i-en løsning til links med forskellig id navigation-matrix-reloaded Se den i aktion her

.

Css-alternativ til image-map

Tutorial fra alistapart.com imagemap med hover og css Læs hele artiklen først og se inspirationen her.

fra shepherdweb.com Absolut-positionerede link-id’er, på et bagrundsbillede med en variation der positioneres på :hover fra shepherdweb og her er deres demo

Den flotte tutorial fra alistapart.com – Flere øvelser i samme forklarende artikel – læs den hele!
De færdige eksempler derfra: link1 | link2 | link3

Enkel forklaring fra alsacreations.com Se en variation over det færdige resultat lige her og også ved at klikke her

lidt metode historik