Embed flash in html geeft meerdere enters

[knorde]

Ik heb een flash logo gemaakt (.swf) en nu wil ik deze graag in mijn site bouwen.
Echter als ik deze erin zet i.p.v. een vast plaatje (.png) krijg je extra enters.

Voorbeeld:
Flash logo: www.effebuurten.nl
Vast logo: www.effebuurten.nl/forum

Het verschil in code is:
Flash logo:

code:

        <div id='header'>           
            {SITENAME}
            <a href='".SITEURL."' title='".X_THEME_7."'><img src='".THEME."images/e_logo.png' width='500' height='80' alt='Effebuurten' id='logo'/></a>         
            {SEARCH}            
            <div class='nav'>           
                {SITELINKS}             
                {LINKSTYLE=secondary_links}             
                {SITELINKS=menu:2}              
            </div>          
        </div>

Vast logo:

code:

        <div id='header'>           
            {SITENAME}
<embed width='500' height='80' src='".THEME."images/e_logo.swf'>            
            {SEARCH}            
            <div class='nav'>           
                {SITELINKS}             
                {LINKSTYLE=secondary_links}             
                {SITELINKS=menu:2}              
            </div>          
        </div>

Weet iemand wat ik fout doe en hoe ik dit goed kan krijgen?
Ik heb al veel gezocht in google en op de forums maar ik krijg alleen voorbeelden hoe je het in html moet zetten en verder niet

[MoietyMe]

Mag ik allereerst vragen waarom je in hemelsnaam een _flash_ logo hebt ontworpen? Je weet dat mobiele apparaten geen Flash hebben?

Overigens zullen we zonder CSS niet heel ver komen.

[Verwijderd]

http://jsfiddle.net/ pump it up!
effe code erin zetten en url sturen aub

[knorde]

Good Fella schreef op vrijdag 16 januari 2015 @ 16:31:
Mag ik allereerst vragen waarom je in hemelsnaam een _flash_ logo hebt ontworpen? Je weet dat mobiele apparaten geen Flash hebben?

Overigens zullen we zonder CSS niet heel ver komen.

Het is voor het zicht wel leuk wat bewegend.
Volgens mij is flash de enige manier om dat voor elkaar te krijgen.
Nu heb je ook nog wel .gif alleen zie je dan steeds dat die opnieuw laad zeg maar, dat loopt dan niet synchroom.

[Verwijderd]

Dingen bewegen kan ook prima met css en js als je dat zou willen

[SinergyX]

knorde schreef op vrijdag 16 januari 2015 @ 16:38:
[...]

Het is voor het zicht wel leuk wat bewegend.
Volgens mij is flash de enige manier om dat voor elkaar te krijgen.
Nu heb je ook nog wel .gif alleen zie je dan steeds dat die opnieuw laad zeg maar, dat loopt dan niet synchroom.

Ik zie gewoon een 'swirl' draaien in dat logo, gewoon 1x een 360 doen en repeat?

[Verwijderd]

.

[ Voor 99% gewijzigd door Verwijderd op 23-01-2020 00:14 ]

[ocdaan]

Er word toch niet om een alternatief gevraagd? De vraag is hoe die een swf ge-embed krijgt in z'n webpagina. Ik gebruikte vroeger altijd google's swfobject, denk dat het nog altijd een prima oplossing is.

https://code.google.com/p/swfobject/wiki/documentation

[Verwijderd]

Kort door de bocht misschien wel, maar vergeet niet dat smartphones momenteel gewoon ontzettend veel gebruikt worden en zullen we eerlijk wezen, het is zonde om een website te ontwikkelen die de helft van de tijd maar half gaat functioneren

Ik merk aan mijn vriendin dat die nooit iets opzoekt via haar laptop, als ze iets wilt weten komt meteen de Note 3 tevoorschijn, en geloof me, ze is niet de enige.

[mcDavid]

Verwijderd schreef op vrijdag 16 januari 2015 @ 16:41:
[...]

Omdat mobiele apparaten geen flash hebben dan mogen we Flash nooit meer gebruiken? Zo kort door de bocht...

Sja 't zou natuurlijk wel een beetje jammer zijn als mobiele gebruikers je logo niet kunnen zien... Dat kun je natuurlijk afvangen met verschillende content voor mobiele browsers, maar dat is allemaal nogal overkill om overikill (flash) te kunnen gebruiken.

Op de vraag van TS: Hoe ver ben je zelf gekomen? Heb namelijk even met de dev tools een border op je <embed> gezet en dan zie je eigenlijk gelijk wat het probleem is... Even de opmaak tab checken kan ook.

[knorde]

Als flash niet ondersteund wordt dan wordt het .gif bestand gebruikt.

code:

<div align="center">

<div class="aleoflash-gif" style="display:none;"><a href="http://www.aleosoft.com" target="_blank" ><img src="testing.gif" border="0" /></a></div>
<div class="aleoflash-swf" style="display:block;"><embed src="testing.swf" quality="high" type="application/x-shockwave-flash" wmode="transparent" width="480" height="125" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always"></embed></div>
<div class="aleoflash"><a href="http://www.aleosoft.com/flash-intro-banner-maker/index.html">Created by Aleo Flash Banner Maker</a></div>
<script language="JavaScript">var hasFlash=false;if(window.ActiveXObject){ try { if (new ActiveXObject("ShockwaveFlash.ShockwaveFlash")) hasFlash=true;} catch(e){}} else { if(navigator.plugins["Shockwave Flash"]){hasFlash=true;}}var elems=document.getElementsByTagName("div"); for(var i in elems){if(!hasFlash && elems[i].className=="aleoflash-gif") elems[i].style.display="block"; else if ((!hasFlash && elems[i].className=="aleoflash-swf") || elems[i].className=="aleoflash") elems[i].style.display="none";}</script>

</div>

Het programma waar ik het logo in gemaakt heb maakt automatisch een .swf en een .gif (de .gif voor de apparaten die .swf niet ondersteunen).
Wat ik echter raar vind is waarom die code voor extra enters zorgt.
Nergens geef ik op dat hij extra enters moet zetten.

Maar het gaat mij om deze regel:

code:

<embed width='500' height='80' src='".THEME."images/e_logo.swf'>

Waarom dat voor extra enters zorgt.

[ Voor 5% gewijzigd door knorde op 16-01-2015 16:50 ]

[HamuNaptra]

Die extra 'enters' is gewoon whitespace in je swf, kijk dus je swf ff na

[mcDavid]

knorde schreef op vrijdag 16 januari 2015 @ 16:49:
Als flash niet ondersteund wordt dan wordt het .gif bestand gebruikt.

code:

<div align="center">

<div class="aleoflash-gif" style="display:none;"><a href="http://www.aleosoft.com" target="_blank" ><img src="testing.gif" border="0" /></a></div>
<div class="aleoflash-swf" style="display:block;"><embed src="testing.swf" quality="high" type="application/x-shockwave-flash" wmode="transparent" width="480" height="125" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always"></embed></div>
<div class="aleoflash"><a href="http://www.aleosoft.com/flash-intro-banner-maker/index.html">Created by Aleo Flash Banner Maker</a></div>
<script language="JavaScript">var hasFlash=false;if(window.ActiveXObject){ try { if (new ActiveXObject("ShockwaveFlash.ShockwaveFlash")) hasFlash=true;} catch(e){}} else { if(navigator.plugins["Shockwave Flash"]){hasFlash=true;}}var elems=document.getElementsByTagName("div"); for(var i in elems){if(!hasFlash && elems[i].className=="aleoflash-gif") elems[i].style.display="block"; else if ((!hasFlash && elems[i].className=="aleoflash-swf") || elems[i].className=="aleoflash") elems[i].style.display="none";}</script>

</div>

Het programma waar ik het logo in gemaakt heb maakt automatisch een .swf en een .gif (de .gif voor de apparaten die .swf niet ondersteunen).

Die code heb je niet op je site geimplementeerd.

Wat ik echter raar vind is waarom die code voor extra enters zorgt.
Nergens geef ik op dat hij extra enters moet zetten.

Maar het gaat mij om deze regel:

code:

<embed width='500' height='80' src='".THEME."images/e_logo.swf'>

Waarom dat voor extra enters zorgt.

Zie mijn voorgaande post.

[knorde]

mcDavid schreef op vrijdag 16 januari 2015 @ 16:56:
[...]
Die code heb je niet op je site geimplementeerd.
[...]

Zie mijn voorgaande post.

Klopt dat moet nog, wou eerst de .swf zelf goed hebben

Ik ben overigens wel redelijk bekend met dingen aanpassen etc. en red me wel aardig alleen gaat dit toch een beetje boven mijn pet, kun je me misschien iets verder op weg helpen?

[SinergyX]

HamuNaptra schreef op vrijdag 16 januari 2015 @ 16:54:
Die extra 'enters' is gewoon whitespace in je swf, kijk dus je swf ff na

http://www.effebuurten.nl...stastic/images/e_logo.swf

Dit lijkt inderdaad het geval.

Zit dus niet in je code, maar je swf.

[knorde]

HamuNaptra schreef op vrijdag 16 januari 2015 @ 16:54:
Die extra 'enters' is gewoon whitespace in je swf, kijk dus je swf ff na

Ik maak het via het programma Aleo Flash intro banner maker, ik kan zelf niets wijzigen aan het .swf bestand.

[knorde]

SinergyX schreef op vrijdag 16 januari 2015 @ 17:01:
[...]

http://www.effebuurten.nl...stastic/images/e_logo.swf

Dit lijkt inderdaad het geval.

Zit dus niet in je code, maar je swf.

Dat verklaard dan een hoop
Ik ga even uitzoeken of dat ergens in te stellen is, je kan namelijk de grootte opgeven van het logo en die klopt gewoon met het plaatje wat ik erachter gebruik.

Ik ga even verder zoeken

[mcDavid]

knorde schreef op vrijdag 16 januari 2015 @ 17:01:
[...]

Ik maak het via het programma Aleo Flash intro banner maker, ik kan zelf niets wijzigen aan het .swf bestand.

Dat wisten we al, want je logo linkt door naar de website van Aleo. Je moet het maar willen allemaal zeg

Maargoed, doe eens rechtermuis -> element inspecteren op je logo.
Vervolgens rechtsonderin het tabblad "berekend" of "vakkenmodel" (oid, afhankelijk van je browser) kiezen, wat staat daar voor hoogte? Juist.

Overigens kun je deze prima met CSS overriden.

[ Voor 6% gewijzigd door mcDavid op 16-01-2015 17:06 ]

[knorde]

Ik kan die link gewoon aanpassen (en dat moet ook nog) in het programma zelf.
Ik wou eerst dit goed hebben voordat ik de rest doe, maar je ziet helemaal niks terug van het programma straks.

Als ik rechtermuisknop op mijn logo klik zie ik alleen dingen over flash, maar niet wat jij zegt.

[mcDavid]

ohja dan eventjes ergens anders op de pagina (bijv in de header) en zelf naar je <embed> toe klikken.

[SinergyX]

Gok dat hij IE heeft, kan je zien via F12.


En daar zie je inderdaad, embed: 80, berekend: 192.

[ Voor 49% gewijzigd door SinergyX op 16-01-2015 17:16 ]

[knorde]

Ik heb zowel firefox als internet explorer.
Ik heb gevonden wat je zei, maar de maten kloppen toch gewoon (500x80)?

Of zie ik iets over het hoofd

[knorde]

SinergyX schreef op vrijdag 16 januari 2015 @ 17:15:
Gok dat hij IE heeft, kan je zien via F12.
[afbeelding]

En daar zie je inderdaad, embed: 80, berekend: 192.

Waarom berekend hij meer dan?
Sorry voor de vragen hoor maar ik probeer het te snappen

Wat overigens raar is dat hij bij mij zegt bij berekend 200 en in de screenshot hierboven 192.

[ Voor 11% gewijzigd door knorde op 16-01-2015 17:23 ]

[mcDavid]

knorde schreef op vrijdag 16 januari 2015 @ 17:18:
Ik heb zowel firefox als internet explorer.
Ik heb gevonden wat je zei, maar de maten kloppen toch gewoon (500x80)?

Of zie ik iets over het hoofd

Kijk in Firefox maar eens bij het tabje "berekend" of "vakkenmodel" wat de werkelijke grootte van het element is.

knorde schreef op vrijdag 16 januari 2015 @ 17:19:
[...]

Waarom berekend hij meer dan?
Sorry voor de vragen hoor maar ik probeer het te snappen

blijkbaar wordt die "80" die je in het height-attribuut opgegeven hebt, ergens anders door overruled. In dit geval door de fysieke hoogte van het flash element.

De webinspector is je hulpmiddel om ditsoort glitches te vinden en te kijken wat je er aan kunt doen.

[ Voor 6% gewijzigd door mcDavid op 16-01-2015 17:24 ]

[SinergyX]

knorde schreef op vrijdag 16 januari 2015 @ 17:19:
[...]

Waarom berekend hij meer dan?
Sorry voor de vragen hoor maar ik probeer het te snappen

Wat overigens raar is dat hij bij mij zegt bij berekend 200 en in de screenshot hierboven 192.

Kan misschien resolutie zijn, verschil tussen jou en mij maakt weinig uit.

Je hebt een flash object van X hoog, jij geeft de embed echter Y hoog.

X - fysieke hoogte van object, overruled nu jouw Y waarde, want dat flash object is gewoon groter.

Je kan dit enkel oplossen door dus een correcte swf te maken, zonder die hele whitespace eronder.

[knorde]

Ik heb het getest door een grotere logo te maken.
Dan heb je geen witte vlakken onder en boven.
Op de een of andere manier maakt het programma dus een minimale hoogte van 200.

Ik ga dit even uitzoeken maar het probleem lijkt daarbij gevonden.
Zoals ook hierboven gezegd wordt ligt het zo te zien aan het flash filmpje zelf.

[knorde]

Het blijkt toch niet aan het .swf filmpje te liggen maar aan wat anders.

Als ik hem via deze manier bekijk is die wel goed:
http://effebuurten.nl/voorbeeld.html

Ik heb ook een aantal andere filmpjes getest (voorbeeld .swf bestanden) maar daarbij is hetzelfde probleem.

Bij "berekend" laat hij nu niks zien (waar die wel goed wordt weergegeven) en zegt hij dat er geen CSS attributen zijn. Dit kan kloppen omdat het nu via een ander html bestand (om te testen) wordt aangeroepen.

Misschien heeft het dan toch met de CSS te maken, echter kan ik de fout niet vinden.

Mijn css code is (ik snap dat jullie niet mijn hele css bestand gaan uitpluizen maar misschien weten jullie waarop je moet zoeken). Begrijp me dus niet verkeerd dat ik hier de boel kom dumpen om het vervolgens door jullie te laten uitzoeken:

code:

[...]

P.S. Sorry van een nieuwe reply, dit had een edit moeten zijn op mijn vorige post

En dan toch al je CSS dumpen...

[ Voor 96% gewijzigd door BtM909 op 17-01-2015 01:05 ]

[BtM909]

knorde schreef op zaterdag 17 januari 2015 @ 01:01:
Het blijkt toch niet aan het .swf filmpje te liggen maar aan wat anders.

En wat dacht je van beide situaties eens vergelijken

Je laat behoorlijk weinig zelfinzet zien en roepen dat je geen "los het voor mij op" topic wilt, doe je dat stiekem toch uitlokken.

Als je webdeveloper poogt te zijn, dan moet je je in de materie verdiepen of het overlaten aan professionals. Daarnaast is een versimpelde testcase toch het minste wat je kan doen, ipv je hele website en alle CSS hier dumpen.

Met les 1 van elke tutorial leer je wat de developer-tools in Chrome of Firefox voor je kunnen betekenen en had je zelf ook kunnen uitvinden dat je hier wat geks doet:

Cascading Stylesheet:

img, object, embed, video {
    max-width:100%;
    height:auto;
    _width:100%;
}

Haal die height: auto eens weg en voila je probleem lijkt al (een stukje ) opgelost.

[knorde]

Sorry als ik het "lui" doe overkomen, dit was zeer zeker niet mijn bedoeling.
Je hebt me wel zeer goed op weg geholpen, ik heb het alleen nog even iets anders gedaan (zodat de eigenschappen van img, object, video intact blijven).
Ik heb de css nu zo gemaakt:

code:

img, object, video {
    max-width:100%;
    height:auto;
    _width:100%;
}

embed {
    max-width:100%;
    margin-top: 10px;
    _width:100%;
}

Het werkt op deze manier prima, is er een reden om dit niet zo te doen?

[ Voor 6% gewijzigd door knorde op 17-01-2015 01:40 ]

[R4gnax]

knorde schreef op zaterdag 17 januari 2015 @ 01:39:
Het werkt op deze manier prima, is er een reden om dit niet zo te doen?

Ja; je maakt nu een 10px top marge op alle <embed> elementen. Dat is over-generiek en kan, als je op andere plekken ooit <embed> elementen nodig gaat hebben, weer opnieuw voor problemen gaan zorgen.

Beter is om jouw ene logo embed een class te geven en mbv een CSS rule op basis van die class de height:auto te overriden en meteen correct in te stellen. (Hoef je ook niet meer te zeveren met een height attribute in je HTML.)

Nog beter zou zijn om gewoon het eerder gegeven advies ter harte te nemen en niet Flash te gebruiken.

Verwijderd schreef op vrijdag 16 januari 2015 @ 16:41:
[...]

Omdat mobiele apparaten geen flash hebben dan mogen we Flash nooit meer gebruiken? Zo kort door de bocht...

Omdat browsers het gebruik van plugins rap eruit aan het werken zijn en het absoluut niet future-proof is.

Omdat alle versies van Flash die niet 100% actueel zijn in Firefox automatisch op een zwarte lijst staan waardoor gebruikers niet eens fallback content te zien krijgen, maar een groot grijs 'plugin disabled' vlak met een dikke vette waarschuwing.

Omdat veel gebruikers sowieso Flash vanwege de vele security risks in een click-to-activate context draaien en jouw content nooit zullen zien. Omdat, afhankelijk van hoe die click-to-activate geimplementeerd is in de browser, de look & feel van een website totaal een neusduik neemt.

Zo kort door de bocht om te denken dat enkel het gebrek aan Flash op mobile het probleem is...

[ Voor 49% gewijzigd door R4gnax op 17-01-2015 15:46 ]

[knorde]

Het is niet dat ik het perse via flash wil hebben maar ik kan geen alternatieven vinden.
Ik heb echt al veel gezocht, begrijp me niet verkeerd, maar ik kom steeds op flash uit of op .gif.
Misschien zoek ik niet goed genoeg maar ik wil ook wel graag inzet tonen.

Ik zou alleen echt geen alternatieven weten om zoiets te realiseren wat ik nu ook heb.

[mcDavid]

animated GIF zou al een gigantische verbetering zijn. Het moderne alternatief is CSS transforms of de rotate() functie gebruiken in een canvas. Maar als je nog moeite hebt met het instellen van de hoogte van een CSS element zou ik het lekker bij een animated gif houden.

[TerraGuy]

Dit zie ik met de Web Developer-toolbar:



Lijkt zo breed te zijn dat hij de rest naar onderen drukt.

[knorde]

Ik heb er nu .gif van gemaakt.
Echter heb je daarmee het probleem dat het iedere (ongeveer) 20 sec. knippert omdat hij hem dan (volgens mij) opnieuw laadt zeg maar.

[SinergyX]

knorde schreef op maandag 19 januari 2015 @ 16:48:
Ik heb er nu .gif van gemaakt.
Echter heb je daarmee het probleem dat het iedere (ongeveer) 20 sec. knippert omdat hij hem dan (volgens mij) opnieuw laadt zeg maar.

Afhankelijk van omvang van de gif, dit soort animatie lijkt me niet bijzonder 'zwaar' en kan je relatief klein houden. Zelfs met een 300-400kb is het seconde-kwestie voordat hij gewoon looped.

[knorde]

Hij is nu 5,5 MB (zo maakt dat programma hem).
Heeft het met deze grootte te maken dan?

EDIT

Ben er al achter.
Er zit 1 wit frame in de .gif
Deze ga ik er even uithalen, dat is zeer waarschijnlijk het probleem, ik laat het nog even weten

[ Voor 47% gewijzigd door knorde op 19-01-2015 17:25 ]

[mcDavid]

5,5MB? De tering hoe krijg je dat voor elkaar? En hoe kan het dat je animatie 20 seconden duurt? Hij herhaalt zichzelf binnen nog geen 2 seconden...

[knorde]

LOL wat is het leven soms toch simpel, hij deed idd heel vaak gewoon dezelfde plaatjes weer.
Ik heb hem nu terug kunnen brengen naar 498 KB

Alles lijkt nu goed te werken!