curlingthebrackets / home

• Mix
• tech
• web
• flash
• M2
• M5
• WP
• M10a
• About

Drag and Drop fluekrukke

Lille eksempel på samle-op-spil, som kan udbygges med flere baner.

Continue reading Drag and Drop fluekrukke…

knap og script (as2)

Gennemsigtig knap?
- Man undlader at give knappen indhold på de 3 første frames, som handler om dens udseende
- man lægger kun en shape på HIT-framen i en keyframe, så knappen blir ‘musefølsom’ men ellers er usynlig.

Skjulte knapper over et baggrundsbillede, det som svarer til ‘hotspots’ eller ‘image-map’ i HTML.

Anvendelser:
Knap-symbolers udseende omfatter umiddelbart kun UP, OVER, DOWN.
Har man brug for mere underholdning – på fx. rollout, release…, kan man bruge følgende teknik:
Læg en movieclip – der har lært flere tricks – under en gennemsigtig knap, som så kodes til at styre denne knap-underholdnings-movieclip, samtidig med at den styrer funktionaliteten iøvrigt:

on (press) {
under_mc.gotoAndPlay(“bask”);
noget andet;
}
on (release) {
under_mc.gotoAndPlay(“flyv”);
noget andet;
}
on (rollover) {
under_mc.gotoAndPlay(“loefthovedet”);
noget andet;
}
on (rollout) {
under_mc.gotoAndPlay(“pip”);
noget andet;
}

Man kan også kode movieclips direkte som om de var knapsymboler:

on (release) {
this.gotoAndPlay(“flyv”);
et.andet.objekt.gørnoget();
}

Og så er der den omskrevne knapkomando – direkte fra en frame-action – event function:

mc.onRelease=function() {
this.gotoAndPlay(“flyv”);
et.andet.objekt.gørnoget();
}

Sektioneret movieclip kontrol (as2, as3)

Objektet / Animationen

_ Tegn fx. en frame by frame animation i en movie_clip (opret og navngiv Symbolet i library)
_ Grib et objekt i nærheden af dig og hold det i den ene hånd mens du tegner. Bevæg det lidt efterhånden som du animerer det..
_ (F5,F6,F7 – højreklik for frame-menu) – f7 er en tom keyframe
_ OnionSkin slået til, for at se forrige tegning
_ Brug flere lag for flere elementer der indgår i hver tegning (eks. : gaffel-lag, mad-lag)
_ Træk en ‘instace’ af symbolet ud på scenen og ret det til (flyt, skaler..)
_ gem fla-filen og ‘test movie’ (ctrl+enter)

frame_by_frame
onion_skin

Play Stop knapperne:

_ Opret button-symboler i Library til en stop og en play-knap. Knappernes tidslinie skal bare bruges til deres umiddelbare udseende – og hit-framen til at bestemme hvor stort et område musen skal reagere på.
_ Træk instances af dem ind på scenen.
_ Navngiv alle movieclips på scenen, som skal kontrolleres af actionscript. (properties > instance-name).

AS2
Marker knap på scenen, åbn script-vinduet og tast henholdsvis

on (release) {
	sti.til.objektnavn.stop();
}
on (release) {
	sti.til.objektnavn.play();
}

AS3
Her skal knappen ikke markeres, medn derimod den frame scriptet skal stå på.

//framescript
playknap.addEventListener(MouseEvent.CLICK, mcPLAY);
function mcPLAY(e:MouseEvent) {
	sti.til.movieclipinstancenavn.play();
}
stopknap.addEventListener(MouseEvent.CLICK, mcSTOP);
function mcSTOP(e:MouseEvent) {
	sti.til.movieclipinstancenavn.stop();
}

Brug gerne sigtekornet til at pege på target i actionpanelet. Chek også for fejl før du forlader actions-vinduet.

Objektets Timeline-tabel

_ ‘hjemme hos’ movieclippet (på dens egen tidslinie) skal der laves nogle animerede variationer af den første – nogle forløb, som knapperne senere skal få den til at udspille. Efter den første spiller rækkefølgen ikke den store rolle. Marker flere frames af gangen gennem alle lagene, og træk for at flytte en hel sektion – ALT+flyt laver kopier.
Tidslinien inddeles således i mindre sektioner.
_ På et Labels-lag indsættes en navngivet keyframe (properties > frame name – ingen fancy tegn) for hver gang et forløb starter.
_ På et actions-lag indsættes en keyframe med en afviklings kommando på hver forløbs sidste frame – det vil typisk være stop(); men kunne også være gotoAndPlay("labelname"); hvis den skal loope.

Der kan også være enkelte stillestående frames, man har brug for at navngive – fx. “gul”, “blaa”, eller en tom keyframe: “forsvind”..
Hovedsagen er at hver sektion skal give mening med dens navn – og at tidslinien skal være overskuelig og nem at redigere.

Goto Knapperne:

_ Flere knap-symboler i Library, eller genbrug.
_ Denne gang skal de referere en frame-label

AS2

// buttonscript
on (release) {
	sti.til.objektnavn.gotoAndPlay("framelabel");
}

AS3

// framescript
knap.addEventListener(MouseEvent.CLICK, mcGO);
function mcGO(e:MouseEvent) {
	sti.til.movieclipinstancenavn.gotoAndPlay("frameLabelNavn");
	// Prøv også med gotoAndStop("frameLabelNavn");
}

Website fra starten

Afdæk formål og virkemidler

Fokuser på hvad du gerne vil

• Hvad vil du formidle?
• hvem skal det formidles til?
• Selvom du skal bruge et personligt site til at profilere dig med, er det ok, at være under udvikling og ændre mening undervejs. Start ENKELT, start OVERSKUELIGT.

Research i eksisterende genre

• for at definere hvilken kontekst eller genre produktet kommer til at være del af
• for nærmere at afgrænse hvad du selv vil/ikke vil
• for at få indblik i hvad andre har formået/ikke formået

Layout Skitse

• skitseret tegning
• title
• filnavn.html
• pile til links
• fil/mappestruktur

Filsystem udfra det skitserede overblik

• Rodmappe i stifinder
• Opret nye tomme navngivede html-filer
• Giv dem en titel hver
• Opret en tom css-fil
• Organiser undermapper

Struktur skitse på baggrund af layout skitsen:

• Inddel layoutet i grove overordnede blokke
• Forsyn dem med Elementer – tags
• Noter lidt Formodet css

Produktionen

Med udgangspunkt i skitserne – hvis de er gode og der er lagt indlevelse og omtanke i – er der chancer for at resten af arbejdet næsten laver sig selv..

Afhængigt af hvem du er og en masse andre faktorer, er der flere mulige rækkefølger til det videre arbejde

• Lænk hele sitet sammen i en fungerende demo med links.
• Tast indholdet ind i siderne, råt – Det kan senere styles og siderne lænkes.
• Layout og styling på sidens div-beholdere – Der kan senere komme indhold i.
• Tegn, mal og fotografer dig frem til det visuelle indhold.

Ul – li – links

<ul>
<li><a href="#">punkt1</a></li>
<li><a href="#">punkt2</a></li>
<li><a href="#">punkt3</a></li>
<li><a href="#">punkt4</a></li>
</ul>

 ul {
background-color: #000000;
padding: 0 8px 0 8px;
display: inline;
background-image: url(slette_02.gif);
}
 
li {
display: inline;
margin: 0 4px 0 4px;
}
 
li a:link, li a:visited {
background-color: #CCCCCC;
color: #666666;
padding: 0 5px 0 5px;
text-decoration: none;
font-weight: bold;
}
 
li a:hover, li a:active {
background-color: #eee;
color: #000000;
}

html, så kan du lære det

Produktionen aktiveres med lidt humor, af hver sin slags:

Med alle forbehold for, at tabeller ikke skal bruges til at layoute med… Tabeller bruges til skemaer, og layout klares med css.

.

.