(category) LIST of posts

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

Flash konditori

Bits and pieces
flashmymind: snowfall-effect

Tutorials Publish

fra gotoandlearn – med swfobject 2

Fullscreen toggle button

HTML CSS Loader

Html filer og cssfiler skal begge loades med URLLoader

//A
	import flash.net.URLRequest;
	import flash.net.URLLoader;
	import flash.text.StyleSheet;
//B
	var htmlLoader:URLLoader = new URLLoader();
	var cssLoader:URLLoader = new URLLoader();
	var sheet:StyleSheet = new StyleSheet();
//C/D - i relevant sammenhæng
	cssLoader.load(new URLRequest("myCSS.css"));
	cssLoader.addEventListener(Event.COMPLETE, onLoadCSS);
	htmlLoader.load(new URLRequest("myHTML.html"));
	htmlLoader.addEventListener(Event.COMPLETE, onLoadHTML);
//D
	function onLoadCSS(e:Event) {
		sheet.parseCSS(e.target.data);
		ttt.styleSheet=sheet;//styling af tekstfelt
	}
	function onLoadHTML(e:Event) {
		ttt.htmlText=e.target.data;//html i tekstfelt
	}

css har det med at skulle loades FØR html.
Bemærk der er ikke så mange html-tags, som fortolkes af flash – og ditto for css-properties.
Se fx. her eller læs eksemplet i LAS3 bogen for at få en liste over brugbare elementer.

Text loader

Forudsætter et dynamisk tekstfelt kaldet:”ttt” og et tekstdokument: “myText.txt”, som kan være lokal eller online.

//A
    import flash.net.URLRequest;
    import flash.net.URLLoader;
//B
    var textLoader:URLLoader = new URLLoader();
//C/D - pLacer i relevant sammenhæng
    textLoader.load(new URLRequest("myText.txt"));
    textLoader.addEventListener(Event.COMPLETE, onLoadText);
//D
    function onLoadText(e:Event) {
        // Hvad der skal ske med den loadede tekst
        trace(e.target.data);
        // Eller // ttt.text=e.target.data;
    }

En tekstfil kan være rå tekst, html, css, xml, eller php mm.
Tekstfelter kan fortolke tekst råt eller html-formateret. (Kun få tags er fortolket i flash. Marker htmlTekst i koden og F1 for at se Adobe’s oversigt over fortolkede tags.)

Tutorials Textfield

dynamisk scrollbar
custom scrollbar