ENSE
Kontakt

FlashObject: JavaScript för att detektera och infoga Flash

OBS! SWFObject 2.0 har nu lanserats och jag hänvisar till SWFObject 2.0 och dess dokumentation för den senaste versionen och tillämpningen av skriptet.

Du läser den svenska översättningen av FlashObject: Javascript Flash detection and embed script.

FlashObject är ett litet JavaScript som används för att infoga Flash-innehåll. Detta skript kan detektera insticksprogrammet Flash på alla större webbläsare (på Mac och PC) och är utformat för att göra infogningen av Flash-innehåll så enkelt som möjligt.

Skriptet funkar också bra ihop med sökmotorer, äldre webbläsare och kan användas i giltig HTML och XHTML 1.0*. Det är också framåt-kompatibelt och bör alltså fungera i åratal framöver.

* Sidor som skickas som text/html, ej application/xhtml+xml.

Innehåll

Den senaste versionen

Den senaste versionen av FlashObject hittar du alltid hos deconcept.

Så här funkar det

[Tekniknördar kan kolla in det råa skriptet direkt]

Att använda FlashObject är enkelt. Inkludera flashobject.js och använd sedan en liten andel JavaScript på sidan för att infoga Flash-filmen. Här är ett exempel på den minsta möjliga koden du behöver för att infoga en Flash-film:

<script type="text/javascript" src="flashobject.js"></script>
		
<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>

<script type="text/javascript">
   var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   fo.write("flashcontent");
</script>

Här beskrivs steg-för-steg vad koden gör:

<div id="flashcontent">[...]</div>

Förbered ett HTML-block som innehåller Flash-filmen. Innehåll som placeras i blocket kommer att ersättas av Flash-filmen, så att användare som har Flash installerat kommer aldrig se innehållet i detta block. Denna egenskap gör det också möjligt för sökmotorer att indexera det alternativa innehållet(!)

var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7", "#336699");

Skapa ett nytt FlashObject och skicka med de nödvändiga parametrarna:

  • swf – Sökvägen och namnet på din swf-fil.
  • id – ID-namnet på din object eller embed-tag. Embed-taggen kommer också ha värdet som sitt name-attribut för filer som använder swliveconnect.
  • width – Bredden på din Flash-film.
  • height – Höjden på din Flash-film.
  • version – Den version av Flash player som krävs för ditt Flash-innehåll. Detta kan vara en sträng enligt formatet ‘majorVersion.minorVersion.revision’. Ett exempel är: "6.0.65". Eller så kan du bara kräva en huvudversion, som "6".
  • background color – Hex-värdet för Flash-filmens bakgrundsfärg.

Valfria parametrar är:

  • useExpressInstall – Om du vill uppgradera användare med hjälp av egenskapen ExpressInstall, sätt detta värde till ‘true’.
  • quality – Kvaliteten som du vill att din Flash-film ska spela på. Om inget anges är “high” förvalt.
  • xiRedirectUrl – Om du vill omdirigera användare som fullföljer ExpressInstall till en alternativ adress, så kan du ange en alternativ URL här.
  • redirectUrl – Om du vill omdirigera användare som inte har den korrekta versionen av Flash player, använd den här parametern.
  • detectKey – Det här är variabelnamnet i länken som FlashObject tittar efter om du vill kringgå detekteringen av Flash. Exempel: För att kringgå Flash-detekteringen och helt enkelt skriva Flash-filmen till sidan så kan du lägga till ?detectflash=false på adressen för sidan som innehåller Flash-filmen.
fo.write("flashcontent");

Tala om för FlashObject att skriva ut Flash-innehållet till sidan (om den korrekta versionen av insticksprogrammet är installerat på användarens system) genom att ersätta innehållet i det angivna HTML-blocket.

Detaljerna

FlashObject arbetar stillsamt i bakgrunden av ditt HTML-dokument. När du utvecklar webbsidor som använder FlashObject bör du skapa ditt alternativa (icke-Flash) innehåll först.

Få dina sidor att fungera utan Flash-innehåll och lägg in dem efteråt med små JavaScript-snuttar som ersätter ditt alternativa innehåll med Flash-filmerna. Detta säkerställer att det alternativa innehåll kommer att indexeras av sökmotorer, och att användare utan Flash fortfarande kommer se en fungerande HTML-sida.

Om du erbjuder instruktioner för att uppgradera eller inte är helt upp till dig själv. Om ditt alternativa innehåll räcker, kanske det inte alls finns anledning att tala om för användarna att de missar Flash-innehåll.

FlashObject fungerar i alla aktuella webbläsare inklusive, på PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla och Opera; På Mac: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla och Opera 7.5+. Skriptet bör också fungera långt in i framtiden.

FlashObject detekterar Flash-versioner i dessa webbläsare från version 3 upp till den senaste versionen (och kommande versioner!) om webbläsaren använder Netscapes arkitektur för insticksprogram (detta inkluderar Firefox, Safari, Opera, Netscape, Mozilla, etc.) och version 4 till nuvarande version (teoretiskt upp till version 20) på Internet Explorer (insticksprogram baserade på ActiveX).

FlashObject kan även detektera mindre versioner och revisionsversioner, genom att ange värdet för den version du vill. Ett exempel som kräver Flash Player v.6.0 r65 (eller 6,0,65,0) skulle se ut så här:

var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "6.0.65", "#336699");

FlashObjects inbyggda detektering av insticksprogram kan kringgås. Om en ny webbläsare lanseras eller av någon anledning detekteringen misslyckas på en användares system, så kan du inkludera en länk som kringgår detekteringen av insticksprogrammet, och Flash-innehållet skrivs alltid till sidan (förutsatt att användaren har JavaScript aktiverat).

För att kringgå detekteringen, länka helt enkelt till sidan och lägg till en variabel i länkadressen med namnet ‘detectflash’ och sätt värdet till ‘false’. Här är ett exempel på hur det kan se ut:

<a href="mypage.html?detectflash=false">Kringgå kontrollen av Flash</a>

FlashObject exempel

[axbom: Jag har ett fungerande exempel på hur du kan infoga Flash och bibehålla hög tillgänglighet.]

Koden ovan är vad du behöver för att FlashObject ska göra sitt jobb, men hur använda du några av de andra parametrar som FlashObject erbjuder? FlashObject gör det enkelt att lägga till de parametrar du behöver. Nedan återges exempel för några metoder du kanske vill använda för att infoga ditt Flash-innehåll.

Ett enkelt exempel med några extra parametrar

<script type="text/javascript">
   var fo = new FlashObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
   fo.addParam("quality", "low");
   fo.addParam("wmode", "transparent");
   fo.addParam("salign", "t");
   fo.write("flashcontent");
</script>

Här är en komplett lista över de aktuella parametrarna och deras möjliga värden på macromedia.com.

Skicka med variabler i filmerna med “Flashvars”-parametern:

Flashvars är det enklaste sättet att få data från HTML direkt in i Flash-filmen, men du kan bara skicka med datat när filmen först laddas. Normalt lägger du till en parameter som heter “flashvars” och sedan skickar du med namn/värde-par så här variable1=value1&variable2=value2&variable3=value3 och så vidare. FlashObject gör detta lättare genom att låta dig lägga till så många variabler du vill på samma sätt som du lägger till övriga parametrar. Här är ett exempel hur man skickar med variabler med hjälp av Flashvars:

<script type="text/javascript">
   var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   fo.addVariable("variable1", "value1");
   fo.addVariable("variable2", "value2");
   fo.addVariable("variable3", "value3");
   fo.write("flashcontent");
</script>

När dett är gjort finns alla variabler du angivit åtkomliga i Flash-filmen. Du anropar dem som alla andra variabler på tidslinjen _root.

FlashObject har också en ytterligare egenskap som låter dig fånga variabler från en länkadress. Säg att du har en länk som ser ut så här: http://www.example.com/page.html?variable1=value1&variable2=value2. Med funktionen getQueryParamValue() kan du fånga dessa variabler från länken och skicka in dem i Flash-filmen. Här är ett exempel baserat på att länken ser ut som ovan:

<script type="text/javascript">
   var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   fo.addVariable("variable1", getQueryParamValue("variable1"));
   fo.addVariable("variable2", getQueryParamValue("variable2"));
   fo.write("flashcontent");
</script>

Funktionen getQueryParamValue() har också stöd för att läsa variabler från location.hash, som ibland använd vid djuplänkning in i Flash-applikationer. För ett exempel av djuplänkning i Flash-filmer kan du titta på den här demon av Slideshow Pro, som använder FlashObject.

Använda Express Install med FlashObject

FlashObject har fullt stöd för Macromedia Flash Player Express Install. I FlashObject-skriptet finns en Actionscript-fil som tillsammans med FlashObject påbörjar uppgraderingsprocessen i Flash-filmerna. Användarna behöver inte lämna sajten för att uppgradera sin spelare, och när uppgraderingen är klar, länkas de tillbaka till sidan där uppgraderingen startade.

För att använda ExpressInstall måste du först infoga expressinstall.as-filen i din fla och i början av filmen göra en check för att se om användaren måste uppgradera:

#include "expressinstall.as"

// initialize the ExpressInstall object
var ExpressInstall = new ExpressInstall();

// if the user needs to upgrade, show the 'start upgrade' button
if (ExpressInstall.needsUpdate) {

	// this is optional, you could also automatically start the 
	// upgrade by calling ExpressInstall.init() here instead of the following lines

	// attach the custom upgrade message and center it
	var upgradeMsg = attachMovie("upgradeMsg_src", "upgradeMsg", 1);
	upgradeMsg._x = Stage.width / 2;
	upgradeMsg._y = Stage.height / 2;

	// attach the button actions that will start the ExpresInstall updater
	upgradeMsg.upgradeBtn.onRelease = function() {
		// the ExpressInstall.init() method is what kicks off the actual update
		ExpressInstall.init();
	}
	// if expressinstall is invoked, stop the timeline.
	stop();
}

Det är viktigt att inte placera innehåll i den första rutan (eller där du vill ExpressInstall ska äga rum) som kräver Flash 7 eller senare.

För ett exempel av den här koden, öppna source/fo_tester.fla som följer med FlashObjects Zip-fil. Eller om du vill se ExpressInstall “in action” kan du installera Flash Player 7 (eller 6.0.65) och besöka den här sidan.

Om din Flash-film ligger i ett popup-fönster, eller om du vill omdirigera användaren till en annan plats efter att de fullföljt uppgraderingen, kan du använda parametern xiRedirectUrl för att dirigera användaren till valfri sida i stället för sidan med Flash-filmen.

<script type="text/javascript">
   var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "8", "#336699", true);
   fo.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html'); // must be the absolute URL to your site
   fo.write("flashcontent");
</script>

Ladda ner

FlashObject ges under MIT License. Det betyder (ungefär) att du kan använda det till vad du vill utan restriktioner.

Ladda hem FlashObject 1.3 – Zip-fil, innehåller flashobject.js och exemplena nedan:.

Eller om du vill klämma och känna på det direkt kan du titta på Geoff Stearns exempelsidor:

* Sidor skickas som text/html, inte application/xhtml+xml.

När du ändå håller på kanske du vill gå med i FlashObject diskussionslistan.

Listan är en diskussionslista för att ställa frågor om FlashObject eller efterfråga och diskutera nya egenskaper.

Varför det är bättre än allt annat

Genom åren har det förekommit många metoder för att detektera Flash-versioner och infoga Flash-filmer i HTML-dokument. Det här avsnittet tar en titt på de populäraste metoderna och pekar ut bristerna.

1) Macromedias förvalda embed-metod

Alla känner till “standard”-varianten.
Det handlar om en Object-tag med en Embed-tag inuti som en livlina. Det här är den populäraste tekniken för att infoga Flash och är den förvalda metoden när du publicerar Flash-filmen från Macromedia Flash IDE. Det är det mest kompatibla sättet att infoga Flash-filmen och fungerar i flest antal webbläsare. Här är ett exempel:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
   codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
   width="550" height="400" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mymovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550" 
   height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain" 
   type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Trots att det är den vanligaste metoden har den ett par brister:

  • Ingen detektering av insticksprogram – Utan detektering av Flash kan användare se trasigt eller inget innehåll, och om användaren inte alls har Flash kommer de antingen se “ActiveX install”-rutan (på IE) eller den mystiska pussel-rutan i Mozilla-baserade webbläsare. Ingen av dessa är särskilt användarvänlig och förklarar inte sig själva avseende vad man ombeds installera.
  • Det är inte giltig HTML eller XHTML – Det finns inget som heter <embed> i någon version av HTML eller XHTML. Dock, eftersom webbläsare hanterar Object-taggen olika (eller inte alls) behövdes <embed>-taggen som en livlina.

2) Endast Object-tag / Flash satay

Den här metoden blev populär efter en artikel i A List Apart år 2002.

Här är två exempel:

‘Object tag only’

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
   width="300" height="120">
 <param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"> 
 <param name="quality" value="high">

 <param name="bgcolor" value="#FFFFFF">
 <!--[if !IE]> <-->
 <object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"
		 width="300" height="120" type="application/x-shockwave-flash">
  <param name="quality" value="high">
  <param name="bgcolor" value="#FFFFFF">

  <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
  FAIL (the browser should render some flash content, not this).
 </object>
 <!--> <![endif]-->
</object>

Flash satay

<object type="application/x-shockwave-flash
data="c.swf?path=movie.swf" 
width="400" height="300">
<param name="movie" 
value="c.swf?path=movie.swf" />
<img src="noflash.gif" 
width="200" height="100" alt="" />
</object>
  • Brister i tillgänglighet – Med Flash Satay, kommer en del skärmläsare (som JAWS) ignorera ditt Flash-innehåll.
  • Ingen kontroll av Flash.
    – Som ovan – Utan detektering av Flash kommer vissa användare se trasigt eller inget innehåll. När Flash-spelaren stöter på en Flash-film kommer den att försöka speka den, oavsett version. Så om du har version 6 och stöter på en version 7-film, kommer din spelare försöka spela den, och eventuellt orsaka konstigt beteende.
  • Några Flash satay-metoder streamar inte filmen till spelaren
    – Denna metod kräver ibland en film som agerar ramverk som din film laddas i. Detta gör det krångligt att skicka med variabler och gör det besvärligt att underhålla Flash-innehåll eftersom antalet Flash-filmer dubbleras.
  • Äldre Safari-versioner ignorerar param taggar – Upp till version 2.0 (på Tiger) eller 1.3 (på Panther) och möjligen 1.2.8 (före Panther) ignorerade Safari helt param-taggen. Det betydde att om du försökte göra andra val med den taggen, som Flashvars eller Align, Salign, etcetas. så ser inte Safari dessa värden.

3)Detektering av Flash: Den ‘lilla Flash-filmen på index-sidan’ metoden

Den här metoden handlar om att placera en enkel Flash-film på index-sidan på din webbplats och denna Flash-film stämmer av $version-variabeln i Flash-spelaren och omdirigerar användaren antingen till Flash-innehållet eller till en sida för uppgradering.

Problem med metoden:

  • Ingen detektering på interna sidor. – Om en användare kommer till sajten via en länk till en annan sida i sajten så kringgår den användaren detekteringen på förstasidan..
  • Ej giltig HTML eller XHTML – Återigen, embed-taggen som krävs för att infoga filmerna kommer inte att valideras som giltig.
  • Skadar din plats i sökmotorerna – Du använder din startsida som en tom sida för att kontrollera Flash, vilket innebär att människor som söker efter dig i bland annat Google kommer se beskrivningen “Detecting Flash Player” eller ingen beskrivning alls. Detta är ett otroligt slöseri med utrymme som bör användas för att marknadsföra företaget eller tjänster. Ofta inkluderar inte utvecklarna länkar till annat innehåll på sajten (eftersom Flash-filmen innehåller länken) så resten av sajten indexeras inte heller(!)

4) Macromedia Flash Player Detection Kit

Macromedia har gjort ett jättebra jobb med nya Flash 8 Detection Kit – men inte tillräckligt bra. Det innehåller två sätta att detektera insticksprogrammet:

  1. Klassiska “liten Flash-film på index-sidan” – (se ovan)
  2. JavaScript
    – Japp, det är korrekt, Flash inkluderar nu JavaScript för att detektera Flash. Tyvärr är det inte användarvänligt alls: det blandar JavaScript, VBSscript och all HTML på en sida. Det har kvar massor av de nackdelar som tidigare metoder och gör inte ditt liv som Flash/HTML-utvecklare särskilt mycket enklare. Och det validerar inte som giltig XHTML och HTML (Om du bryr dig om den sortens saker).

Du kan läsa en djupare analys av Macromedia Detection Kit hos deconcept.

5) Använd rå JavaScript för att detektera och infoga filmer

Det är svårt att bedöma den här metoden eftersom den varierar från sajt till sajt. Men de kontroller av Flash med hjälp av JavaScript som jag stött på har ofta likartade brister:

  • Otillförlitlig detektering av insticksprogrammet
    – Ofta funkar bara detekteringen med aktuella versioner av Flash-spelaren och behöver manuellt uppdateras när nya versioner av spelaren släpps.
  • Lägger till mer kod på sidan
    – Gör det svårare att uppdatera eller ändra innehåll på sidan. Metoden gör det också svårare för designers och andra som arbetar med sidorna att ändra eller lägga till Flash-filmer.
  • Överarbetade, komplicerade lösningar
    – Många skript växer till enorma filstorlekar eller blir onödigt krångliga. FlashObject är medvetet skapat för att vara enkelt och litet.

FAQ

Fråga. Varför flimrar mitt alternativa innehåll innan Flash-innehållet laddas? (händer bara i IE på Windows)
Svar. Detta verkar vara relaterat till FOUC-buggen. Det kan åtgärdas genom att lägga till en link-tag i huvudet (head) på dokumentet i valfri stilmall.
Fråga. Hur kan jag få FlashObject att funka i Netscape 4.x?
Svar. Den här kommentaren har exempel på kod som hjälper dig.
Fråga. Kan jag använda FlashObject i min blogg?
Svar. Ja, det finns några insticksprogram för WordPress och Textpattern här.
Fråga. Kan jag använda FlashObject med Dreamweaver eller Golive?
Svar. Det finns ett tillägg till Dreamweaver åtkomligt på CommunityMX.
Det finns inget tillägg till Golive som jag känner till. Du bör kunna använda FlashObject utan tillägg men det blir förstås enklare med ett programspecifikt tillägg.
Fråga. Finns den här sidan på andra språk?
Svar. Här är en fransk översättning av delar av den här sidan, en italiensk översättning och en finsk översättning. Du läser just nu den svenska översättningen. Originalet på engelska hittar du här.
Fråga. Vem använder FlashObject?
Svar. Webbplatser som windows.com, snapple.com, det inkluderas med Adobe Photoshop (i Flash web photo galleries) och tusentals andra. Colin Moock föreslår det som alternativ till Macromedia Detection Kit.

Har du fortfarande problem? Försök med att läsa tidigare inlägg om FlashObject [1, 2, 3] på deconcept (speciellt kommentarerna), eftersom många frågor hanteras där.

Tack

Geoff Stearns tackar Toby Boudreaux som gav tonvis med råd och hjälpte honom göra koden för FlashObject mycket renare.

  • http://www.fomme.se Fomme

    Bra översättning!

  • http://www.joakimgreen.com/ Skandia Tour

    Kanske du bör lägga till att man behöver ha [CDATA] med om man ska ha en helt täckande Flash-fil:

    // < ![CDATA[
    var so = new FlashObject("movie.swf", "mymovie", "100%", "100%", "9");
    so.write('flashcontent');
    // ]] >

  • http://www.widecircle.se Niklas

    Hallå där!
    Jag använder mig av SWFObject version 1.5 & fick rapporter att min sida blev helt blank när man gick in på den i Safari på MACs. Inte ens det alternativa innehållet visades. Nu har jag fixat det så att det åtminstone fungerar på MAC-en här på kontoret men – en person rapporterar att han endast hör bakgrundsmusiken när han klickar på en länk till min sida som finns med i ett e-mejl. Men om han skriver adressen till min sida direkt i browsern (safari) så fungerar det. Allt detta på MAC. Que?
    Mycket skumt!! Har någon stött på ngt liknande problem..?
    Min sida: http://www.widecircle.se

    Niklas

    P.S – Bra översättning!!

  • http://www.agarcia.se/3000GT/ Tony

    Hej

    Jag har hållit på i en vecka nu för att få iordning med full screen mode i flash på min hemsida, men har fortfarande inte lyckats.
    Det ända jag har kyckats med är att få bort handen för att aktivera Flash.

    http://www.agarcia.se/3000GT/

    Jag har läst och läst, men jag måste vara korkad.
    Det pratas om “flashobject.js”, när det inte finns i den zip fil jag laddade hem, utan bara en “swfobject.js”.

    Det står i översättningen att man måste infoga expressinstall.as filen i fla. Men var i fla, det är ju bara code ?

    Jag vore tacksam om nån kunde hjälpa mig. Kan säga åxå att jag är en novice med Flash och code språket. Så ett enkelt föklarad exempel vorre suverän. :-)

    Tony

  • http://www.widecircle.se Niklas

    Efter vad jag förstått ang. fullscreen mode så måste du ha en knapp för att det ska gå över i den moden.
    Det går inte att starta sidan direkt i det läget.
    Kolla in:
    http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html
    Sen har jag också läst att vissa knappar etc. inte fungerar i det läget ännu…

    Nicke

  • Tony

    Hej Niklas

    Jag förstår inte vad du menar med en “knapp”
    Det finns ju massor av flash sidor på nättet som har fullskärm när man öppnar dom. Inte finns det en knapp för det.
    I den SWFObject 1.5 – Zip fil, finns åxå en fullpage.html som blir full screen direkt när man öppnar det.

    Ursäkta, men det ska gå och är mycket taksam om nån kan hjälpa mig med det.

  • Tony

    Hej igen Niklas.

    Nu blir jag fundersam. Jag har antagligen förklarat fel.
    För jag ser på din sida att du har flash med fullskärm med en inaktiv rullningslist på högra sidan.

    Så vill jag ha, men utan den rullningslist på högra sidan.

    mvh / Tony

  • http://www.widecircle.se Niklas

    OK – då har vi missförstått varandra. “Full screen mode” är nämligen ett nytt läge i flashplayer 9 vilket betyder att flash tar bort browserns meny upptill med knappar & allt & tar upp hela skärmen.
    Vad du vill uppnå är “fullscreen window” – jag vet de är lika…men två olika lösningar:-).
    OK då har vi löst det så här kommer vad du behöver göra – jag tittade på din sidas source code & hittade felet.
    Nu har du detta:
    var so = new SWFObject(“3000.swf”, “3000GT”, “1100”, “900”, “8”, “#000000″);
    Men du behöver ändra till:
    var so = new SWFObject(“3000.swf”, “3000GT”, “100%”, “100%”, “8”, “#000000″);
    Detta betyder att du ska ta bort:
    so.addParam(“allowFullScreen”,”true”);
    Denna kod behövs bara för flashplayer 9’s “fullscreen mode”.
    Jag skulle dock vilja ta det hela ett steg längre – men det betyder att du får leva med en inaktiv skroll-list till höger i vissa browsers som tex.IE.
    Du har idag dimensionerna 1100×900 på din flashfilm & om man låter flash ta upp hela fönstret med att köra 100% på dimensionerna så betyder det det inte automatiskt kommer att dyka upp några skrollister ifall användaren har en skärm med mindre dimensioner än så & med en höjd på 1100 px så är det ett måste.
    För att lösa detta anv. du dig av ett skript som heter FitFlash som du hittar här:
    http://fitflash.millermedeiros.com/
    Då behåller du:
    var so = new SWFObject(“3000.swf”, “3000GT”, “1100”, “900”, “8”, “#000000″); istället för att sätta 100% för fitflash sköter om detta automatiskt.
    Du lägger helt enkelt till:
    FitFlash (“3000GT”, 1100, 900);
    Glöm inte att hämta in js-filen för fitflash precis som du gör med SWFObject.
    Titta på min sidas källkod så ser du vad jag menar.
    Om du använder IE7 så gå till menyn sida & “visa källa” i rullgardin.
    Hoppas detta hjälper dig!!
    Niklas

  • Tony

    Tusen tack för ditt svar Niklas.

    Du kan kolla på http://www.agarcia.se/test/

    Jag har provat att sätta 100% istället för 1100 och 900.
    Jag får fullscreen window (som det heter kanske), men det blir inte centrerad.

    so.addParam(“allowFullScreen”,”true”); Måste jag ha kvar, eftersom jag kör med SlideShowPro för att kunna se bilderna i “Full screen mode”

    Det är ok, jag kan leva med en inaktiv skroll-list till höger.
    Har redan set din kodkälla på din hemsida och såg att du hade FitFlash. Jag ska prova med det åxå nu.

    Men problemet nu verkar det vara att det inte blir centrerad.
    Kan du hjälpa mig med det…då är du ängel !!!

    Tack / Tony

  • Tony

    Hej igen Niklas

    Har prova nu med fitflash, men det vills inte.

    Som det ser ut nu är det ok, det bara centrering som är fel nu.

    http://www.agarcia.se/test/

    mvh / Tony

  • http://www.widecircle.se Niklas

    Hej Tony!
    Vad är det som inte fungerar med FlashFit?
    För att centrera sajten måste du anv. lite actionscriptkod. I första framen i din master fil eller vad du nu kallar den skriver du:
    Stage.align = “TC”; (detta är action script 2) Vilket betyder “top center”. Med master menar jag den swf-fil som du laddar in allting i – som externa swf´s, bilder etc. Ladda upp på testsidan med flashfit så kan jag kanske ta reda på vad som är fel. Ifall du använder dig av flashfit så ska detta tas bort:
    /* hide from ie on mac \*/
    html {
    height: 100%;
    overflow: hidden;
    }

    #flashcontent {
    height: 100%;
    }
    /* end hide */

    body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #333333;
    }

    Nicke

  • Tony

    Hej igen Niklas

    Först vill jag tacka dig att du tar tid med mig.

    Nu har jag gjort som du sa med FlashFit, och tagit bort dom koderna som du sa. Det verkar fungera nu, fast jag ser inte vad det gör.

    Förut var det helt svart med bara flashcontent.

    Sen har jag lagt den koden Stage.align = “TC”; som du sa i den första frame (har bara en layer med action script), men det verkar inte hjälpa, det ligger fortfarande till vänster och inte i mitten.

    Tack / Tony

  • Tony

    Ja Niklas

    Nu blir det centrerad.
    Men det blev ett till problem.
    Om du tittar på sidan och välj en album och titta på en bild, och sen ta fullscreen på den, så hamna den till höger nu.

    Här är koden som finns på varje “SSP” SlideShowPro

    Stage.align = “TC”;
    Stage.scaleMode = “noScale”;
    listenerObject = new Object();
    listenerObject.onFullScreenChange = function(eventObject):Void {
    if (eventObject.data == “fullScreen”) {
    my_ssp.contentScale = “None”;
    } else if (eventObject.data == “normal”) {
    my_ssp.contentScale = “Proportional”;
    }
    };

    Så jag tror att det får vara, och att jag går till det som var förut.

    Tack för all hjälp.

    mvh
    Tony

  • http://www.skimspots.com/ Skim Spots

    Ett utmärkt sätt att ha ett alternativt innehåll till Flash. Kommer jag att använda!

  • http://www.skimspots.com/add/ Add Skim Spot

    Sökte vidare lite i ämnet och hittade något som skulle vara FlashObject 2.0. Är du insatt i det? Vad är skillnaden?

  • http://axbom.se axbom

    Vad jag förstått så är SWFObject 2.0 inte färdigställd men det ska ersätta den här versionen i framtiden.

    Flashobject och SWFObject är samma sak – det var Adobe som hade synpunkter på namnet Flashobject, men jag har inte bytt namnet här; Det är på att-göra-listan ;)

  • http://www.skimboard.se Skimboard

    Du som är insatt i det hela och säkert stött på en del kommentarer i ämnet, vad skulle du säga om vad som bör förbättras till 2.0?

  • http://www.seoserver.se/labb/flash/swfobject/ Swfobject 2.0

    Vad jag förstår är Swfobject 2.0 färdigt nu.

  • http://www.joakimgreen.com Joakim Green

    Precis som jag skrev i ovanstående inlägg. (Att tillåta alla “.swf”-filer på hemsidan)

    Det har fått en lösning, men hur vet jag inte! (En kompis la in det och vips så fungerade det)

    Vore ändå roligt att veta vad man ska göra för att lyckas?

  • http://wilhelml.blogspot.com wilhelm

    Bra skrivet – eller fint översatt. Eller snarare; skitbra med en svensk guide till detta!

  • Viktor

    Det är svårt att bedöma den här metoden eftersom den varierar från sajt till sajt. Men de kontroller av Flash med hjälp av JavaScript som jag stött på har ofta likartade brister

  • Tommy

    jag är kanske dum, men jag får inte det till att fungera. Jag förstår inte hur man ska göra… När jag laddar ner och packar upp zip-filen så finns där ju inget att installera. bara html, flash-filer, mm, och saker jag inte förstår vad det är. Jag har provat att klicka på allt men kan inte förstå hur man installerar det.

    Snälla svara, jag skulle hemskt gärna veta hur man gör. Och snälla svara superenkelt så att jag fattar…

    Tack.

  • http://axbom.se axbom

    Det enda du behöver i zip-filen är flashobject.js som är det skript du behöver anropa när du ska infoga Flash. Det andra är exempelfiler. Jag infogar alla Flash-filmer på axbom.se med flashobject.js, se till exempelvis källkoden till sidan för mina presentationer.

    JavaScriptet ska du lägga på din webbserver tillsammans med dina andra sidor. Sedan anropar du JavaScriptet, som det beskrivs ovan, när du ska infoga din Flash-film. Vilken sorts Flash-film är det du ska infoga?

  • Anonym

    Det gick tillslut. Min fil ja skulle börja lägga in heter: Animaster_Logo_700x100 och då gjrde ja så här:

    < script type="text/javascript" src="flashobject.js" > < /script >
    < div id="flashcontent" > Animaster < /div >
    < script type="text/javascript" >
    var fo = new FlashObject(“Animaster_Logo_700x100.swf”, “Animaster”, “700”, “100”, “#000000″);
    fo.write(“flashcontent”);
    < /script >

    (Inte mellanrum mellan varje tagg, bara här i forumet…)Detta gick, men en sak är skumm… ja kan bara lägga in ett flashobjekt me javascript på en sida, inte mer… Om ja lägger in samma kod men me utbytta namn mm så visas det inte. Det ser bra ut i dreamwaver, båda är lika dana, men vid publisering så visas bara det nyaste objectet av dom…

    Skulla vara mycket tacksam för hjälp, Tack.

  • http://axbom.se axbom

    Som du ser på min sida med presentationer så ligger det flera Flash-filmer där.

    Det viktiga är att byta ut id-namnet på “div”-en och ha samma namn i fo.write-deklarationen. Alltså:


    <div id="unikt-namn">Animaster</div>

    och


    fo.write("unikt-namn");

  • Tommy

    Hej igen. Tack så mycket, de gick. Ja använder aldrig divar så ja visste inte. ja kör på tabeller, har vi fått lära oss är bättre i skolan. Jag ville få bort den rutan “vill du använda den här kontrollen” varje gång man drog musen över flashobjekten, mycket irriterande. Men allt fungerar nu! sorry att ja tar tid o svara ^^haha.

    Tack.

  • http://axbom.se axbom

    Om ni lär er att tabeller är bättre i skolan så blir jag mörkrädd! Tabeller ska endast användas för strukturerad data som ska presenteras i tabeller, inte för design av webbsidor. Att någon på allvar lär er att använda tabeller, något som övergetts sedan många år tillbaka av professionella webbutvecklare, är minst sagt oroväckande.

  • http://www.animaster.se Tommy

    Hej

    Jag har nu laggt upp min hemsida på nätet under: animaster.se. Men som man kan se så visas varken min logo eller menyn som ska finnas högst upp på sidan. När jag öppnar sidan genom datorn så fungerar det, men inte via nätet. Vad är det som är fel?

    Ta gärna en titt på sidan: http://www.animaster.se

  • http://axbom.se axbom

    Det ser ut som om sökvägen till loggan är http://www.animaster.se/logo.swf men där ligger ingenting?

  • http://www.animaster.se Tommy

    Jag har nu laggt in flashobjektet med denna koden istället:

    Men den fungerar fortfarande inte via nätet. Flashobjektet heter Logo med stor bokstav, men går heller inte att byta till liten bokstav. Finns det något fel?

  • http://www.animaster.se Tommy

    Jag har nu laggt in flashobjektet med denna koden istället:

    _script type=”text/javascript” src=”flashobject.js”__/script_
    _div id=”Logo”__/div _
    _script type=”text/javascript”_
    var fo = new FlashObject(“http://www.animaster.se/Logo.swf”, “Animaster”, “700”, “100”, “#000000″);
    fo.write(“Logo”);
    _/script_

    ( _ = tagg, går inte att skriva taggar på denna sidan)

  • http://axbom.se axbom

    Var ligger flashobject.js? Inte på denna adress: http://www.animaster.se/flashobject.js

  • http://www.joakimgreen.com/ Joakim Green

    Hej!

    Det här sättet från deconcept är utmärkt men jag får det inte att funka då jag laddar in några “.swf”-filer extern in till “.swf”-filen som bäddas in.

    När jag gör som vanligt tillåts bara det som bäddas in, alltså inte dom andra.

    – Hur gör jag för att tillåta andra “.swf”-filer utan att bädda in dom?

  • http://axbom.se axbom

    Joakim: Jag är inte riktigt med på hur du menar. Det här skriptet bäddar in en swf. Om denna swf i sin tur efterfrågar andra swf:er så funkar det precis som vanligt och bör inte ha något med skriptet att göra. Mitt enda antagande då det inte fungerade är att sökvägen till filerna som bäddades in inte stämde. Men som sagt: det här skriptet bör inte påverka en sådan lösning – vilket också stämmer med att det nu fungerar. Hör gärna av dig om det inte funkar igen och ge länken till sidan.

  • Ola

    Kan man från SWFObject (jag kör swfobject.js) få en bekräftelse om att flash-koden ”slår igenom”?

    I mitt fall vill jag visa en text och en länk på sidan under flash-objektet om flashen visas. Annars ska inte denna text och länk visas.

    Jag tänkte att man kunde lägga en JavaScript-kod med en if-stats efter att so.write(“flashcontent”); har körts.
    Men som sagt… hur vet jag i det läge om flash-koden körs eller inte?

  • http://www.joakimgreen.com A6 GK

    Okej, det var konstigt..

    Bra att det funkar nu i alla fall. Kommer att utgå ifrån det som fungerar i fortsättningen.

    Tack för svaret ändå!

  • http://www.joakimgreen.com A6 GK

    Lade märke till en grej som avvek..

    – Kan det märkliga felet vara detta? (Att “CDATA-grejen” inte fanns med)

    // < ![CDATA[
    var so = new SWFObject(...........);
    so.write('.......');
    // ]] >

  • http://axbom.se axbom

    Förmodligen :)

  • Pingback: Infoga Flash, bibehåll hög tillgänglighet | axbom

  • Pingback: Adding Flash content to a page in an accessible manner « uxplanner

  • Hans Stråhle

    Jag blir lite förvirrad av alla möjliga sätt att publicera ett Flash-object på en websida. Den här metoden verkar bäst. En fråga bara: En bit ner i originaldokumentet står det: […] och en förklaring. Jag förstår nog inte riktigt vad som krävs här. Kan du ge ett exempel.

  • Hans Stråhle

    Det försvann text i mitt förra inlägg. I originaldokumentet står det
    “[…]”.
    Vad skall det stå i st f punkterna?

  • Pingback: Visa flash

  • Pingback: Mukut Saha

  • Pingback: Adding Flash content to a page in an accessible manner - axbom

dela vidare

0 tecken

Länk som delas: http://axbom.se/flashobject

skicka till Twitter

dela på LinkedIn


dela länk på Facebook

CC BY 4.0