curlingthebrackets / flash / flash-type / overblik /

• Mix
• tech
• web
• flash
• M1
• M2
• M4
• M5
• WP
• About

I hvilken forbindelse skal hvem gøre hvad

Skriftlig kontrol over funktionaliteten
Sammenligning med timeline og den manuelle kontrol

I HVILKEN FORBINDELSE – skal – HVEM – GØRE HVAD
Stil spørgsmålet rigtigt, bryd det op
“Jeg vil have man skal klikke på den og så skal den zoome op”

I HVILKEN FORBINDELSE -
På et bestemt tidspunkt (frame)
Kontinuerligt, i intervaller (Event, Timer)
Ved at musen — (Mouse-Event)
Ved en hændelse (Event-typer)
Hvis — (betingelse)

Sørg for at omstændigheder og forbindelser er tilgængelige, registreret, kan måles
trace noget – under den pågældende omstændighed

- HVEM
Objekt (MovieClip, Loader,..)

Sørg for at ojektet findes, er registreret, instancieret
Trace objektets navn, type , egenskaber..

- GØRE HVAD
Method (gotoAndPlay(parameter))
Kalde en funktion ()
Ændre værdi (Property value)
Ændre omstændighederne
Agere med begrænsning, itterativt (betingelser – loops…)
Producere et output (:type return)

Sørg for at funktionen / methoden findes, er registreret – at det den gør kan lade sig gøre, at påkrævede parametre er tilgængelige.
Trace output, type, ..

Flash i html

Problematikker

Den genererede swf-fil skal lejres i en xhtml-fil for at komme på nettet. Der findes standarder, hvad flash i html angår, men udviklingen tager flere retninger. Der skal bl. andet tages hensyn til browser specifik adfærd, søgevenlighed, plugin og versioner, dynamisk indhold, foruden web-standarder.
(et teknisk overblik fra AListApart, Buy Buy Embed og endeligt flashembedcagematch)

Problem:validering Flash-koden som den fremtræder publiceret gennem flash selv, validerer ikke. Det skyldes embed-tag’en, der er ude af standard – at tage den væk vil få koden til at validere, men er ikke nok for at få flash til at virke i flere browsere.

En simplificeret løsning: Til det validerende object-tag, tilføjes et data-atribut (så Firefox kan vise flash), og et movie-parameter (til IE). Dette er den absolut nemmeste løsning d.d.

Valid kode

Den minimale valide kode:

18
19
20
21
22

<div class="FlashMovie">
       <object data="path_to_file/file.swf" type="application/x-shockwave-flash" width="550" height="400">
              <param name="movie" value="path_to_file/file.swf" />               
        </object>
</div>

Søg efter en liste med yderligere (MEGET ANVENDELIGE) parametre – eller se en (ældre) tech-note fra adobe.
Denne kode er sat ind i en div, som så styles til det ønskede position og udseende.

Embed Youtube

Samme grundkode kan bruges i forbindelse med Youtube-videoer indsat i html (som faktisk heller ikke validerer hvis man indsætter direkte):

18
19
20
21

<object data="sti-fra-embed-koden-indsættes-her" type="application/x-shockwave-flash" width="400" height="326">
       <param name="movie" value="sti-fra-embed-koden-indsættes-her" />
       <param name="FlashVars" value="playerMode=embedded" />
</object>

SwfObject

En anden løsning involverer javascript. Der tages alle andre problematikker i betragtning, beskrevet øverst i indledningen – foruden validering.
Mange udvikler på varianter af snedige javascript løsninger, men swfObject synes at være den ledende opsummering af bestræbelserne.
For Øvede – gotoandlearn

Actionscript sproget

friendsofed: sample fra “The Essential Guide to Flash CS4 with ActionScript”

Lynda.com Se kapitel 2 og 3 på listen med gratis videoer

Variables, Data types, Classes, Properties, Methods fra RC
loops fra republicofcode
if-conditions fra RC
branching fra tutsplus

arrays i 3 dele fra flashmagazine – 1 – 2 – 3

as3-101-variables
as3-101-arrays
as3-101-functions

Class A B C

Dette er en skabelon til en class. Actioncript-filen hedder: ABC.as.

Bemærk fil-navnet, class-navnet og constructor-navnet – som altid skal være ens.

A- B- C- D- er betegnelsen for niveauer, jeg vil referere til for at tydeliggøre strukturen i actionscript og for at gøre det nemt at implementere funktionalitet – (fx. fra andre poster i snippet-kategorien).

package {
    // ::: A ::: // flAAsh clAAsses importeres
    import flash.display.MovieClip;
 
    public class ABC extends MovieClip {       
        // ::: B ::: // variaBBler og oBBjekter BBliver BBrugbare i kommende funktioner
 
        public function ABC() {
        // ::: C ::: // CConstruCCtor - Indledende handlinger
 
        }
        // ::: D ::: // DDiverse funktioner DDu laver DDem
 
    }
}

Emner:
Linke til flash fil, movieclip, instanciering
Samme struktur på en framescript – forskelle – fordele / ulemper
OOP. Genbrug, uden copy-paste. Inheritance, Encapsulation & Polymorphism
Public, Private, Protected, Internal: Access Modifiers

Timeline til navigation

Scenen (eller et movieclip) er vandret delt op i kapitler / sektioner / scenarier – som udgør stationerne i en navigation.
En sektion er en sekvens af en eller flere frames – der med fordel kan indledes med en label – og kan afsluttes med en play-back action (fx. stop(); eller gotoAndPlay(en_eller_anden_frame);).
Den første sektion er som regel den, filmen starter med.
Tidslinien er lodret delt op i lag efter keyframes funktionalitet og varighed (fx. actionscript, labels, og forskellige slags indhold).

Præsentation / site

Dette er en traditionel timeline-baseret strukturering af en præsentation.

Indholdet på scenens keyframes er samlet i overordnede movieclips.
Selve knapperne til brug for navigationen kunne ligge direkte på scenens frames eller være organiseret i overordnede movieclips som menuer.
På scenens Labels-lag: keyframes med labels, som indleder de forskellige sektioner.
På scenens Actions-lag: keyframes med actions (som regel stop(); ), som afslutter de forskellige sektioner.
På scenens første action-lag: knapfunktioner, fx.

stop();
home_but.buttonMode=true;
home_mc.addEventListener(MouseEvent.CLICK, gohome);
function gohome(e:MouseEvent) {
	gotoAndStop("home");
}

Varieret indhold

Nedenstående eksempler er sektionerede tidslinier på movieclips.
Navigationen er ikke nødvendigvis tydelig for brugeren, men bliver en metode til at gøre objekter komplekse, på en overskuelig måde. Play-back kommandoer som gotoAndPlay() giver udvikleren mulighed for at kunne variere movieclippets udseende eller ‘adfærd’.

hund_mc.gotoAndPlay("sit");

Denne kodelinie kan optræde i forbindelse med forskellige events eller if-betingelser.
Metoden er praktisk og ligetil – og også god at falde tilbage på, hvis det er uoverskueligt at scripte sig til forskellige tilvalg, eller variationer.

Følgende tidslinier er ikke opdelte i sektioner, der navigeres på deres frames med udregnede tal og ikke labels.

Denne tidslinie ville kunne bruges til et slideshow eller galleri, med et nyt billede på hver frame.
Kommandoen gotoAndSop(currenFrame+1); i en eventlistener kan bruges på en next-knap eller iværksættes af en timer.

Dette eksempel er bare en movieclip med en animeret tidslinie. Med kommandoen gotoAndStop(tal); hvor tallet er en udregning på baggrund af et imput, kan det visualisere en udvikling eller en gradvis forandring i en proces. Fx. i en preloader.

Loader, load!

der kan loades eksterne swf, jpg, gif, png mm.

Grundkode

var loader:Loader = new Loader();
var request:URLRequest = new  URLRequest ("en.swf");
loader.load(request);
addChild(loader);

Supplerende funktionalitet:

load en ny fil ind og erstat den forrige loadede fil

loader.load(new  URLRequest ("enAnden.swf"));
addChild(loader);

load indholdet ind i en movieclip

box_mc.addChild(loader);

unload loaderen

loader.unload();

Med PROGRESS preloader og COMPLETE:
Setup: pct_txt (dynamisk tekstfelt), frames100_mc (animeret movieClip på 100 frames).

// Husk at trykke CTRL+ENTER 2 gange for at teste preloader.
ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, pHANDLER);
function pHANDLER(e:ProgressEvent):void {
	var pctLoaded:int = Math.round(e.bytesLoaded/e.bytesTotal * 100);
	pct_txt.text=pctLoaded.toString()+" %"; 
	frames100_mc.gotoAndStop(pctLoaded); 
}
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, cHANDLER);
function cHANDLER(e:Event):void {
	e.target.content.scaleX = e.target.content.scaleY =.2;
}