curlingthebrackets / flash / flash-type / overblik /

• Mix
• tech
• web
• flash
• M1
• M2
• M4a
• M4b
• 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 fra den genererede kode – derfor omskrivelsen nedenfor):

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");
}

Se Det konkrete eksempel på Mini site

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;
}