Avatar billede juicesworld Nybegynder
13. august 2007 - 00:06 Der er 39 kommentarer og
1 løsning

Flash i en Div boks?

Hej jeg er gået igang med at prøve at lære lidt html/css, og jeg undrer mig over hva jeg skal gøre for at putte en .swf (flash animation) ind i en div boks? hvilket selvfølgelig er lavet i samme størrelse.

Undrer mig også om der er andre sider som fx html.dk hvor man ka få nogle hurtige tuts, omkring de mest basiske ting man skal vide?
Avatar billede larsholmgaard_dk Nybegynder
13. august 2007 - 00:18 #1
Prøv at kigge her:
http://blog.deconcept.com/swfobject/

W3C valideret kode for indsættelse af flash i et div-tag.
Avatar billede gurly Praktikant
13. august 2007 - 00:20 #2
for at din flash ikke skal blive "blokeret" i nogle udgaver af internet explorer
så kan du bruge enten "swfobjekt"  eller ufo.js"  til at loade din flash

swfobjekt
http://flashforum.dk/forum/viewtopic.php?t=834

ufo.js
http://www.bobbyvandersluis.com/ufo/

kan du bare en smule engelsk, så vælg "ufo.js"  vejledningen begynder næsten halvejs nede af deres side, hvor de trin for trin beskriver hvordan du sætter en flash ind i en <div>

selve filen "ufo.js" som du skal bruge ligger her
http://www.bobbyvandersluis.com/ufo/ufo.zip
Avatar billede thesurfer Nybegynder
13. august 2007 - 01:13 #3
larsholmgaard_dk> "W3C valideret kode"? Så vidt jeg ved, er "SWFObject" overhovedet ikke valid, fordi den bruger "innerHTML", hvilket ikke er valid i nogen som helst doctype..

Har du noget der siger det modsatte..? :-)
Avatar billede thesurfer Nybegynder
13. august 2007 - 01:16 #4
gurly> "Unobtrusive Flash Objects" (UFO) bruger også "innerHTML"..

Der findes vist ikke nogen valid måde at indsætte Flash på, ved runtime, så den automatisk begynder at afspille..

Der er kun de normale object metoder, med parametere, som ikke starter automatisk..
Avatar billede juicesworld Nybegynder
13. august 2007 - 01:48 #5
Mange tak for hurtig feedback, har valgt at bruge Gurly''s metode da den var mest effektiv. Måske ikke valideret men det funker, og jeg har jo ik andet en en simpel flash animation af sidens navn i min swf fil.
Avatar billede larsholmgaard_dk Nybegynder
13. august 2007 - 06:30 #6
Ifølge W3C validatoren, så er swfobject, som jeg linker til, ganske valid:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.larsholmgaard.dk%2Fmisc%2Fmontyhall%2F
Avatar billede larsholmgaard_dk Nybegynder
13. august 2007 - 07:43 #7
Desuden står dette i allerførste paragraf på siden jeg linkede til:

"SWFObject is a small Javascript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents*, and is forward compatible, so it should work for years to come.

* Pages sent as text/html, not application/xhtml+xml."
Avatar billede juicesworld Nybegynder
13. august 2007 - 12:16 #8
problemet er jeg fulgte informationen med SWFObject, og det virkede ikke. Da jeg prøvede ufo virkede det med det samme. Er ufo ikke valid eller hvad? Og hvilket konsekvenser har det?

Og til et andet spørgsmål jeg er nysgerring omkring, jeg fandt ud af at UFO ik virkede så godt da jeg skulle sætte en nr 2 flash animation ind. Den viser kun den ene, jeg er sikker på det fordi man skal ændre koden en smule problemet er bare jeg ik har den fjerneste ide hvordan? Hvis nogen har tid ville et mere uddybende svar være en stor hjælp.
Avatar billede larsholmgaard_dk Nybegynder
13. august 2007 - 12:46 #9
Prøv at læse vejledningen på swfObject - det virker perfekt. Der står præcist, hvad du skal gøre også ved indsættelse af flere flashelementer på samme side:


Q. Can I use SWFObject to embed more than one SWF on an HTML page?
A. Yes. Just give each SWF and each div or HTML element that will hold a SWF a unique Id.
Avatar billede thesurfer Nybegynder
13. august 2007 - 13:57 #10
Så vidt jeg ved:

- kan W3C ikke validere JavaScript.

- kan W3C kun validere HyperText Markup Language og Cascading Style Sheets

- er innerHTML under ingen omstændiger valid ifølgende nuværende standarder

Brugeren olebole har lagt mere erfaring på området, end jeg har, og kan sikkert komme med råd omkring emnet.

Så vidt jeg kan se, er UFO-scriptet mere validt, idet det faktisk prøver på at gøre det på den rigtige måde.. hvis det mislykkes, vil den bruge innerHTML..

Jeg har dog kun lige skimmet koden, og kan ikke fortælle jer, om det faktisk passer..
Avatar billede thesurfer Nybegynder
13. august 2007 - 14:00 #11
Rettelse (omformulering af W3C-validerings-sætningen):


Så vidt jeg ved:

- kan W3C ikke validere JavaScript.

- kan W3C kun validere (variationer af) HTML samt CSS og muligvis XML

- er innerHTML under ingen omstændiger valid ifølgende nuværende standarder

Brugeren olebole har lagt mere erfaring på området, end jeg har, og kan sikkert komme med råd omkring emnet.

Så vidt jeg kan se, er UFO-scriptet mere validt, idet det faktisk prøver på at gøre det på den rigtige måde.. hvis det mislykkes, vil den bruge innerHTML..

Jeg har dog kun lige skimmet koden, og kan ikke fortælle jer, om det faktisk passer..
Avatar billede juicesworld Nybegynder
13. august 2007 - 14:14 #12
Ok hvad betyder det når den er valid? at den er accepteret af en eller anden overordnet standard, som det i virkeligheden er bedøvende ligemeget med eller hvad? Jeg er ude på at lære at indsætte flash i hjemmesider, ikke at tilfredsstille en eller anden form for ligegyldig kodeks.
Avatar billede w13 Novice
13. august 2007 - 17:16 #13
"Invalide" standarder er ofte invalide, fordi de gør tingene skidt, og i hvert fald bør man ikke satse på, de vil være særlig fremtidssikre. innerHTML gør da tricket på en nem måde, derfor er det også så udbredt, men det er lidt at springe over, hvor gærdet er lavest, og hvis du generelt i din kodning bekymrer dig om fejlsikre koder og ydeevne, så bør du nok forsøge at undgå det. Men skal det bare virke (eller umiddelbart virke), så kan du godt bruge innerHTML. Det er jo op til den enkelte programmør. Det er dog en bastardkode, som fungerer meget uhensigtsmæssigt, hvis man dykker ned i tekniske detaljer.
Avatar billede w13 Novice
13. august 2007 - 17:20 #14
Begrebet "bastardkode" er i øvrigt noget, jeg lige har opfundet, så en søgning på google vil ikke gi' resultat. (Jeg har forsøgt!) =)
Resten skulle der dog nok kunne findes dokumentation på i forskellige artikler rundt omkring på nettet.
Avatar billede juicesworld Nybegynder
13. august 2007 - 17:26 #15
ok dvs. ingen af løsningerne her er valide? Og jeg har kigget på koden fx Dreamweaver bruger når jeg indsætter en flash via det program og jeg sir bare ???. Jeg vil med glæde holde min hjemmeside valid men jeg vil også gerne forstå koden jeg sætter ind, som jeg nogenlunde gør med fx UFO og slet ik gør med nævnte "standard" metode i fx dreamweaver.
Avatar billede w13 Novice
13. august 2007 - 18:28 #16
Jeg har ikke set koderne igennem, men UFO er vist umiddelbart mest validt, ja.

Det korrekte alternativ til innerHTML er ved brug af DocumentObject Model (DOM). Der opretter du tags'ene et for et. Eks. på oprettelse af et billede:
--------------------------------------
newElement=document.createElement("img");
newElement.setAttribute("src","/images/billede.gif");
newElement.setAttribute("border","0");
newElement.setAttribute("width","200");
newElement.setAttribute("height","100");
newElement.setAttribute("alt","Dette er et billede");
document.getElementById("element-som-billedet-skal-oprettes-id").appendChild(newElement);
--------------------------------------
I ovenstående kode bliver elementet først bare oprettet i "newElement" og senere "appended" (tilføjet) til indholdet af document.getElementById("element-som-billedet-skal-oprettes-id"). Det vil altså blive indsat som det nederste element.

På samme måde kan du også slette elementer ("noder"): document.getElementById("beholder").removeNode(document.getElementById("id"))

Indsætte før et andet element: document.getElementById("beholder").insertBefore(newElement,document.getElementById("id"))

Finde parent-elementet: document.getElementById("beholder").parentElement

Osv. Du har jo nok forstået det nu.

Du kan læse meget mere om det her: http://www.w3.org/TR/DOM-Level-2-Core/core.html
Avatar billede olebole Juniormester
13. august 2007 - 21:39 #17
<ole>

Lige sålænge kodere ikke gider sætte sig ind i de standarder, som er gældende for webkodning - og derfor ikke koder i overensstemmelse med disse - ligeså længe skal grænsen for, hvornår vi får browsere i rimelig størrelse i stedet for de kæmpe klodser, vi slæber rundt på.
Da det samtidig koster gigantiske millionbeløb i dollars at udvikle en ny version, når browserne skal være så utrolig tilgivende overfor dårlig kode, tager det idag alt for lang tid mellem deres fremkomst og udviklingen halter til stadighed uhælpeligt bagud.

Er man ligeglad med, om ens kode overholder de gældende standarder, kan man ikke tillade sig at brokke sig over browsernes kvalitet. Man er selv en meget væsentlig grund og fortjener ikke bedre.

Både af hensyn til andre og os selv, burde vi alle tage dette ansvar på os. Ikke at man behøver være fejlfri eller ekspert ... men det mindste, man kan gøre, er at anstrenge sig.

- just my two cents  ;o)

/mvh
</bole>
Avatar billede olebole Juniormester
13. august 2007 - 22:18 #18
- og hvad angår det med validering:

W3C's (X)HTML-validator validerer _kun_ markup-koden. Dén del af det at skrive XHTML kan man sætte chimpanser til ... at bruge XHTML er væsentlig meget mere end at lukke tags og escape attribut-værdier!

Om dokumentets markup-kode validerer er rystende ligegyldigt, hvis dokumentet bliver served forkert - eller hvis der ikke scriptes op mod en XML-DOM.
HTML-scripting har _intet_ at gøre i et X(HT)ML-dokument - og innerHTML giver _absolut_ ingen mening i en XML-sammenhæng ... alene navnet taler vel for sig selv  ;o)

innerHTML har aldrig været del af nogen officiel standard, men blev inført i IE4 og senere i en af de første Netscape 4 underversioner. På det tidspunkt var HTML ganske få år gammelt og innerHTML (sammen med outerHTML og innerText i IE) et tidligt bud på en måde, man kunne ændre dokumentets elementtræ.
Et andet bud var NS4's to metoder til at loade hele HTML-dokumenter ind i et div - men ligesom ved iframe og NS' ilayer, så havde NS' 'loadede layers' altid sit eget dokument med eget elementtræ.

Da W3C i efteråret 98 kom med deres DOM Level 1, fik vi en helt ny måde at opfatte et HTML og dets elementer på. Den blev indført i IE 5.0, men først da NS 6.0 udkom, begyndte kodere så ganske småt at opdage DOM'en.

Efter W3C's DOM giver behandling af elementer som strenge i et (X)HTML-dokument ingen mening. Det gør elementets direkte JavaScript-properties - med ganske få undtagelser - heller ikke. Style-objektet er således en af de ganske få 'gamle' properties, der er tilladt. Du kan ikke sige:
    ELEMENT.id = "noget";

Der kom med DOM'en nogle andre, standardiserede objekter og metoder. Du kan sige:
    ELEMENT.setAttribute("id", "noget");

- eller:
    ELEMENT.attributes.getNamedItem("id").nodeValue = "noget";

- hvis attributten i forvejen eksisterer. Ellers skal den oprettes, men inden det bliver en længere artikel, så ... læs selv:
    http://www.w3.org/TR/DOM-Level-3-Core/ecma-script-binding.html  ;o)
Avatar billede larsholmgaard_dk Nybegynder
13. august 2007 - 22:25 #19
I er mere end velkomne til at skrive en perfekt validerende måde at implementere flash på en html-side. Det er jeg sikker på at resten af verden ville sætte pris på eftersom der, så vidt jeg ved, ikke findes bedre alternativer end swfObject og nu ufodimsen.
Avatar billede olebole Juniormester
13. august 2007 - 22:32 #20
- du lokker, gør du ...!  ;D

Her er et af de rigtig mange eksempler, der viser, hvorfor innerHTML også er noget skidt:

<script type="text/JavaScript">
function foo() {
    alert("Knappens tekst: " + oButton.firstChild.nodeValue) // 'oButton.firstChild' er tekstnoden i knappens indre
    document.body.innerHTML += "<br>Prøv lige knappen igen ...";
}

var oButton = null;
window.onload = function() {
    oButton = document.getElementById("myBtn");
}
</script>

<button id="myBtn" onclick="foo()">TEST</button>

Alle referencer til og fra det dokument-fragment, hvis innerHTML sættes, mistes. Fragmentet overskrives, hvorfor knappen 'oButton' ikke længere eksisterer.

Man binder således let en tung klods om benet på sig selv ved at bruge innerHTML i sine koder. Det kan hurtigt blive ret uoverskueligt, hvad der kan lade sig gøre ved senere udvikling på dokumentet.
Avatar billede larsholmgaard_dk Nybegynder
13. august 2007 - 22:36 #21
Ja, det var faktisk ikke ment sarkastisk. Jeg kan ikke selv gøre det.
Avatar billede olebole Juniormester
13. august 2007 - 22:37 #22
Jeg ved det godt, jeg jokede bare selv ... for gu' er jeg fristet!  ;o)
Avatar billede thesurfer Nybegynder
13. august 2007 - 22:45 #23
Problemet er vel, at man har brug for at bruge både EMBED og OBJECT.

Men EMBED, som er Netscape's måde at indsætte plugins, er ikke valid i XHTML, og OBJECT normalt bruges af IE-ligende browsere..

Man er derfor lidt på spanden, kan man vel sige.. :-)

Men jeg mener at den "korrekte" måde i HTML er, at bruge EMBED og OBJECT..

Ret mig endeligt med bedre info.. :-)
Avatar billede thesurfer Nybegynder
13. august 2007 - 22:48 #24
..og hvis man endeligt vil overholde standarden, og bruge udelukkende (X)HTML, kan man ikke længere få filen afspillet automatisk, pga en et patent som et universitet har..

Derfor understøtter browserne ikke længere "auto-afspilning"..

Hvis det ikke havde været for patentet, havde man nok ikke haft de problemer, som man har nu, med JavaScript og innerHTML til indsættelse af media..
Avatar billede olebole Juniormester
13. august 2007 - 23:03 #25
Mozilla browserne behøver ikke embed-elementet. Dette kan sagtens få Flash til at virke i FF:

<object data="minFilm.swf"
    type="application/x-shockwave-flash"
    width="300" height="175">
        <param name="movie" value="minFilm.swf">
</object>

Idag skal det - af de allerede nævnte årsager - naturligvis indsættes dynamisk, men selve element-strukturen holder.

Foreløbig vil jeg kikke lidt mere 'baglæns' på UFO og SWFObject ... så vil jeg overveje, om jeg begynder. Skal et nyt objekt tage hensyn til alle special-tilfælde, har jeg på fornemmelsen, der bliver lidt af et test-helvede  :oP
Avatar billede gurly Praktikant
13. august 2007 - 23:10 #26
var der nogen af jer der fik hjulpet spørgeren med det han spurgte om her >
Kommentar: juicesworld 13/08-2007 12:16:11,

juicesworld > hvis du skal indsætte to flash på en side, så ville jeg gøre sådan her
vi antager at dine to flash hedder "flash 1.swf" og "flash 2.swf"


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Test</title>

    <script type="text/javascript" src="ufo.js"></script>


    <script type="text/javascript">
    var FO = { movie:"flash 1.swf", width:"300", height:"120",
      majorversion:"8", build:"0" };
    UFO.create(FO, "flash 1");
    </script>


    <script type="text/javascript">
    var FO = { movie:"flash 1.swf", width:"300", height:"120",
      majorversion:"8", build:"0" };
    UFO.create(FO, "flash 2");
    </script>

  </head>
  <body>

    <div id="flash 1">
    <p>Du behøver flash minst version 8 for at se denne side
    <a href="http://www.macromedia.com/go/getflashplayer">Download Flash</a></p>
    </div>

    <div id="flash 2">
    <p>Du behøver flash minst version 8 for at se denne side
    <a href="http://www.macromedia.com/go/getflashplayer">Download Flash</a></p>
    </div>

  </body>
</html>

altså i sidens head plaseres linien der loader ufo.js
i sidens head indsætter du så to script, husk at give de to script hver sin ID i linien "UFO.create"
og nede i sidens body indsætter du så bare de to <div id
Avatar billede thesurfer Nybegynder
13. august 2007 - 23:10 #27
Hvis man kunne styre object via JavaScript, kunne man f.eks. implementere en "play"-funktion i onLoad i body eller i window.onload..

Så kunne man nøjes med den valide fremgangsmåde, og alligevel få swf filen til at starte automatisk..

Kan man det..? :-)
Avatar billede gurly Praktikant
13. august 2007 - 23:25 #28
larsholmgaard_dk > det vil sige at fordi noget står på internettet, så er det ensbetydende med at det er sandt ! ! !  c",)
Avatar billede gurly Praktikant
13. august 2007 - 23:35 #29
så skriver de om swfobject > "and is forward compatible"
hvordan kan noget være det når man ikke ved 100 % hvad der sker i fremtiden
lev dog i nutiden, brug en af de 2 hacks der virker som tingene ser ud nu, og så spar bekømringerne til fremtiden. og lad være med at forvirre spørgere mere end højst nødvendigt c",)
Avatar billede thesurfer Nybegynder
13. august 2007 - 23:36 #30
gurly> Jeg kan ikke helt se hvad du henviser til?

Jeg er sikker på, at spørgeren ønsker en valid hjemmeside..
Avatar billede gurly Praktikant
13. august 2007 - 23:45 #31
larsholmgaard_dk > men du har ret her > 13/08-2007 22:25:14
Avatar billede gurly Praktikant
13. august 2007 - 23:47 #32
thesurfer > Kommentar: juicesworld 13/08-2007 14:14:46
Avatar billede olebole Juniormester
14. august 2007 - 01:35 #33
- men det er jo ikke forbudt at håbe, ens medmennesker er påvirkelig af saglig argumentation og kan ændre mening i løbet af en tråd. Derfor ser jeg ikke noget sært i thesurfers antagelse om validiteten 32 indlæg nede i tråden  :)
Avatar billede gurly Praktikant
14. august 2007 - 02:36 #34
ja ok, men i fik ikke svaret spørger på følgende >

jeg er nysgerring omkring, jeg fandt ud af at UFO ik virkede så godt da jeg skulle sætte en nr 2 flash animation ind. Den viser kun den ene, jeg er sikker på det fordi man skal ændre koden en smule problemet er bare jeg ik har den fjerneste ide hvordan? Hvis nogen har tid ville et mere uddybende svar være en stor hjælp.
Avatar billede juicesworld Nybegynder
14. august 2007 - 14:11 #35
Det virker med UFO nu og da Gurly kom med den oprindelige info får han pointene, må dog indrømme jeg er lidt overrasket over mit simple spørgsmål ku starte en sådan diskussion. Så igen tak for al feedback, hellere alt for meget end for lidt ^^
Avatar billede gurly Praktikant
14. august 2007 - 18:04 #36
Takker
eksempelvis den webside her på eksperten, loader en js fil ved navn "coolmenus4.js"  og den indeholder da "innerHTML"  flere steder  c",)
Avatar billede gurly Praktikant
14. august 2007 - 18:24 #37
Avatar billede olebole Juniormester
14. august 2007 - 18:25 #38
Eksperten har en snart 10 år lang historie for at fungere mellem dårligt og elendigt - ikke mindst på grund af elendig kodning. Den begyndte som et lille hyggeprojekt for et par hobbykodere og eksploderede efterfølgende mellem hænderne på dem - og det er blevet til en ørkenvandring i lapninger.
Brug Eksperten som standard for, hvordan man ikke bør kode ... såvel på fronten som på bagenden  ;o)
Avatar billede w13 Novice
14. august 2007 - 20:11 #39
Hehe.. Såsom for eksempel at indlede en <pre> efter </html> .. :D
Avatar billede olebole Juniormester
15. august 2007 - 02:16 #40
- artikel-interfacet har set sådan ud i årevis:
    http://www.eksperten.dk/artedit.phtml
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester