Share
Hoewel het maken van een website volledig gebaseerd op Flash om verschillende redenen niet zo'n goed idee is, betekent dit niet dat u Flash helemaal niet hoeft te gebruiken. Ik vind Flash graag als een kruid. Door hier en daar wat kruiden te zetten, kan de smaak van uw website worden verbeterd, wat het voor uw bezoekers aangenamer en interactiever maakt. Natuurlijk, zoals we allemaal weten, kan het brengen van te veel kruiden in onze schotel problemen veroorzaken. Dus Flash moet met mate worden gebruikt. Laten we kijken hoe dit kan worden gedaan.
Het doel van elke website is inhoud die mensen kunnen lezen en lezen en die ook wordt begrepen door zoekmachines en robots. Dus, sommige Flash is bijna altijd goed. Maar teveel Flash is minder nuttig voor zoekmachines, dan voor HTML. Flash-media kunnen overal in een WordPress-thema worden opgenomen: in de koptekst, in een bericht of op een pagina, in een zijbalk of in het voettekst. Het is helemaal aan jou en je persoonlijke voorkeuren en behoeften. Het belangrijkste is hier niet waar je het gaat gebruiken, maar niet hoe je het zult gebruiken. En dit is het doel van deze tutorial. Om u verschillende manieren te laten zien om Flash-media in te bedden in uw WordPress-websites en hoe u deze methoden op de juiste manier kunt uitvoeren. Laten we beginnen met de meest essentiële, die een basis is voor de anderen.
SWFObject is een JavaScript-bibliotheek die twee geoptimaliseerde methoden biedt voor het insluiten van SWF-bestanden in webpagina's: een op markup gebaseerde benadering en een methode die op JavaScript is gebaseerd. Het gebruikt onopvallend JavaScript om Flash Player te detecteren en te voorkomen dat SWF-inhoud wordt verbroken, en is ontworpen om het insluiten van SWF-bestanden zo eenvoudig mogelijk te maken. Het ondersteunt het gebruik van alternatieve inhoud om inhoud weer te geven aan mensen die zonder plug-ins op internet surfen, om zoekmachines te helpen uw inhoud te indexeren of om bezoekers naar de Flash Player-downloadpagina te verwijzen. Dit alles wordt mogelijk gemaakt door een klein JavaScript-bestand.
SWFObject is de meest populaire en efficiënte Flash-insluitmethode die vandaag beschikbaar is. Het wordt veel gebruikt door spraakmakende websites zoals YouTube, Microsoft Windows en Skype.
Omdat het berekenen van de op te maken markeringen en JavaScript-code een saaie klus kan zijn, biedt het SWFObject u een extra SWFObject-generator om dit werk voor u te doen. U kunt de nieuwste versies van SWFObject en SWFObject Generator vinden op Google Code. Download het SWFObject en de HTML-versie van de SWFObject-generator. Het grootste verschil tussen de HTML- en AIR-versie is dat de laatste kopie-naar-klembord-functionaliteit heeft en uw HTML-pagina op uw harde schijf kan opslaan.
Wanneer u de inhoud van extraheert swfobject_2_2.zip je krijgt een map genaamd SWFObject welke de volgende bestanden bevat:
Je kunt ook het SWF-bestand downloaden dat we tijdens de rest van de zelfstudie bij Free Flash Animations gaan gebruiken. Hernoem het naar nosmoke.swf in het kort.
OK. Alles is klaar. Laten we verder gaan.
Nu moet je alle benodigde bestanden op je server uploaden. Dit zijn swfobject.js, expressInstall.swf en nosmoke.swf. Plaats ze in uw actieve themamap. In dit geval is dit de twintig elf themamap. Als je er veel hebt .swf bestanden kunt u ze in een submap plaatsen.
Voer de volgende stappen uit om de benodigde code in WordPress te maken en in te voegen:
Accentsconagua
tag in het bodygedeelte van de code. Alles van naar wordt geselecteerd Kopieer het.
- Klik in de zijbalk van uw WordPress Dashboard op de pijl rechts van Uiterlijk. Klik vervolgens op Editor.
- Aan de rechterkant van het scherm staat nu een lijst met alle sjablonen die zich in de hoofdmap van de themamap bevinden. Klik op de titel van het gewenste .php bestand (in dit geval footer.php). Dit laadt het in de Thema-editor.
- Plak de code die u hebt gekopieerd van de codegenerator in het juiste sjabloonbestand. In dit voorbeeld direct boven de
- Selecteer en kopieer het volgende voor de head-content:
- Terug in WordPress, open header.php door op Uiterlijk> Editor> te klikken header.php. Plak de geselecteerde tekst in het kopgedeelte boven de
De codegenerator maakt de code voor u op basis van de keuzes die u maakt. Het genereert de code binnen de basisstructuur van een HTML-pagina. De gegenereerde code voldoet aan de webstandaarden en ondersteunt de integratie van alternatieve inhoud. De JavaScript-elementen in de tag is gemaakt die het object en de geneste objectinformatie / methode bevat die aangeeft welke .swf moet worden afgespeeld, de breedte en hoogte ervan en welke alternatieve inhoud moet worden weergegeven als de juiste Flash Player-versie niet wordt gevonden. Merk op dat speciale codering wordt gebruikt om rekening te houden met de behoeften van Internet Explorer, bijvoorbeeld: Nu nosmoke.swf animatie verschijnt op elke pagina onder de voettekst. Natuurlijk is dit een dummy voorbeeld, maar ik gebruik het alleen voor presentatiedoeleinden omdat het sneller en gemakkelijker kan. Uiteraard moet je een aantal stijlregels toevoegen om een betere uitstraling te krijgen. Je zult zien hoe snel.
Stap 4 SWFObject-configuratie uitgelegd
Statisch versus dynamisch publiceren
Statische publicatie gebruikt markup om zowel SWF-inhoud als alternatieve inhoud in te sluiten en maakt gebruik van onopvallend JavaScript om een reeks problemen op te lossen die niet met alleen opmaak kunnen worden opgelost. Het promoot het eigenlijke schrijven van normen-conforme markup en zal daarom vooral een beroep doen op ontwikkelaars van webstandaarden. Dit mechanisme voor het insluiten van Flash-inhoud is niet afhankelijk van een scripttaal, dus uw Flash-inhoud kan een aanzienlijk groter publiek bereiken. Als u de Flash-invoegtoepassing hebt geïnstalleerd, maar JavaScript hebt uitgeschakeld of een browser gebruikt die geen JavaScript ondersteunt, kunt u uw Flash-inhoud nog steeds zien.
Dynamische publicatie gebruikt markup om alleen alternatieve inhoud te definiëren en maakt gebruik van onopvallend JavaScript om dit te vervangen door de SWF als de minimale Flash Player-versie is geïnstalleerd en er voldoende JavaScript-ondersteuning beschikbaar is. Dynamisch publiceren is minder uitgebreid dan statische publicaties en kan heel goed worden geïntegreerd met scripttoepassingen. Als u de Flash-invoegtoepassing hebt geïnstalleerd, maar JavaScript hebt uitgeschakeld of een browser gebruikt die geen JavaScript ondersteunt, ziet u de alternatieve inhoud in plaats van uw ingesloten Flash-inhoud.
U moet beslissen wat de betere oplossing voor u is, afhankelijk van uw doelen en behoeften.
Adobe Express installeren gebruiken
Adobe Express Install is een mechanisme ingebouwd in Flash Player waarmee u de nieuwste versie van de Flash-invoegtoepassing direct kunt downloaden zonder naar de Adobe-website te hoeven bladeren. Snelle installatie is een optionele functie voor webauteurs en geeft een gestandaardiseerd downloaddialoogvenster weer wanneer een bezoeker Flash Player 6.0.65 of hoger al op Win- of Mac-platforms heeft geïnstalleerd, maar een latere plug-inversie is vereist. Express Install gebruikt een pop-up bevestigingsvenster en is daarom een optionele functie die kan worden geactiveerd door webauteurs. Als u op Ja klikt, opent Express Install een downloaddialoogvenster met het verzoek om alle browservensters te sluiten. Nadat u Flash Player hebt geïnstalleerd, wordt uw browservenster opnieuw geopend en wordt u doorgestuurd naar de pagina waarop Express Install is gestart. Als u op Nee klikt, keert SWFObject terug naar de alternatieve inhoud.
U kunt Express installeren activeren door het selectievakje Adobe Express installeren aan te vinken en het pad naar de expressInstall.swf bestand, indien nodig. Om te testen of deze functie werkt en deze in actie ziet, hoeft u alleen deze kleine truc uit te voeren: verander de vereiste Flash-versie naar iets dat groter is dan de nieuwste versie van Flash Player (bijvoorbeeld 14.0.0). En je krijgt dit resultaat:
Het bericht meldt dat de inhoud Adobe Flash Player 11.1 vereist, omdat dit feitelijk de nieuwste versie van de plug-in is (op dit moment) en versie 14.0 nog niet bestaat.
Stap 5 Uitleg over SWFObject-definitie
In SWFObject Generator vindt u een aantal extra attributen en parameters die voor u beschikbaar zijn. Ze zijn standaard verborgen. Dus, om toegang te krijgen tot deze klikt u gewoon op "meer" onderaan het SWF-definitiegedeelte. Hierna zou u het volgende moeten zien:
Afhankelijk van uw gemaakte keuzes, zal uw Flash-inhoud zich gedragen en er anders uitzien. Voor een beschrijving van wat een bepaald kenmerk of een bepaalde parameter doet, beweegt u de muisaanwijzer over de naam ervan.
Het naamkenmerk is handig wanneer u naar uw Flash-film moet verwijzen met behulp van scripttaal. Zoals ik al eerder zei, moet je misschien extra styling aan je Flash-content toevoegen. Voeg hiertoe een waarde toe voor het klasse-kenmerk, zoals "flashmovie". Deze klasse wordt toegevoegd aan het objecttagelement in uw gegenereerde code. Dus nu hoeft u alleen maar de volgende stijlregel toe te voegen aan uw themastijlblad:
object.flashmovie // uw css-code hier
Stap 6 Gebruik Embed SWF Online Generator
Er is nog een eenvoudige manier om de benodigde detectiecode te krijgen - door een online generator te gebruiken. Een goede is te vinden op embed-swf.org. Het is gebaseerd op SWFObject HTML en JavaScript Generator. Ga als volgt te werk om te verwerken:
- Open de configurator. De interface is verdeeld in vijf tabbladen.
- Typ de gewenste parameters op elk tabblad
- Klik op het tabblad Exporteren. Hier kunt u een exportsjabloon kiezen. Als u uw eigen HTML-sjabloon wilt gebruiken, kiest u Aangepast. Raadpleeg de documentatie voor meer informatie over het maken van een document.
- Klik nu op HTML-code tonen. Uw HTML-code verschijnt. Klik op Downloaden om het bestand op te slaan op uw harde schijf.
Als u dat wilt, kunt u de standaardinstellingen op elk gewenst moment herstellen door op de link in de linkerbovenhoek te klikken. U hebt ook de mogelijkheid om opgeslagen instellingen te exporteren / importeren om gemakkelijk opnieuw te kunnen gebruiken.
U hoeft zich geen zorgen te maken over de swfobject.js het dossier. Laat de standaardoptie voor het SWFO-object dat de swfobject.js bestand gehost door Google.
Stap 7 Kimili Flash Embed gebruiken
Volgens haar website Kimili Flash Embed is:
... een plug-in voor populaire open source-blogsystemen waarmee u eenvoudig Flash-films op uw site kunt plaatsen. Gebouwd op de SWFObject JavaScript-code, het voldoet aan de standaarden, is zoekmachine vriendelijk, zeer flexibel en volledig uitgerust, evenals gemakkelijk in gebruik.
Het installeren van de plug-in is eenvoudig:
- Vouw in je Dashboard het menu Plug-ins uit en klik op Nieuw toevoegen
- Typ in de zoekbalk "flash embed"
- Wanneer u Kimili Flash Embed ziet klikt u op Installeren
- Ga na de installatie naar Plug-ins en activeer deze of klik op Nu activeren
Om nu flash-inhoud in uw berichten of pagina's toe te voegen, doet u het volgende:
- Maak een nieuwe post / pagina of open een bestaande
- Schakel over naar HTML-weergave
- Om nu een Flash-animatie toe te voegen, gebruikt u de volgende shortcode, waarbij pad-, y- en x-parameters worden vervangen door het respectieve pad, de hoogte en de breedte van uw swf:
[kml_flashembed movie = "/ path / to / your / movie.swf" /]
- De filmparameter is de enige vereiste - hoogte en breedte zijn optioneel. Hoewel het het meest efficiënt is om uw maat te bepalen .swf tijdens het exporteren worden de grootte en breedte van de parameters a gewijzigd .swf het dossier. Als u dat doet, zorg er dan voor dat u de getallen in schaalverhouding houdt om vervorming te voorkomen.
Kimili Flash Embed Tag Generator is een aangepaste versie van de SWFObject 2 HTML- en JavaScript-generator en is nauw geïntegreerd in WordPress, waardoor het heel gemakkelijk is om KFE-tags te bouwen met de juiste opmaak.
Flash toevoegen via KFE Tag Generator:
- Als u de taggenerator wilt starten, een wizardachtige interface die u helpt bij het maken van de benodigde KFE-tag, klikt u op de knop met het Flash Player-pictogram. (je moet overschakelen naar Visual mode om het te zien)
- Er verschijnt een venster dat lijkt op SWFObject Generator
- Het enige dat u hoeft te doen, is de vereiste parameters invullen en vervolgens op Genereren klikken
U kunt standaardinstellingen instellen in het beheerdersmenu. Kies Instellingen> Kimili Flash Embed.
De opties hier zijn vrijwel hetzelfde, behalve deze voor JavaScript onderaan. U kunt de eerste optie wijzigen in "Nee", als u dat al hebt gedaan swfobject.js waarnaar elders in uw code wordt verwezen. Als u ervoor kiest om Kimili Flash Embed te gebruiken om een verwijzing naar te maken swfobject.js door "Ja" aan te vinken, hebt u twee opties waaruit u naar het bestand kunt verwijzen: Google Ajax-bibliotheek of Intern. Klik op "wat is dit?" om te zien wat de verschillen zijn. Wanneer u klaar bent, klikt u op Update-opties.
Stap 8 Alternatieve inhoud leveren
Tegenwoordig zijn de toonaangevende leveranciers van zoekmachines zoals Google en Yahoo! kan tekstuele inhoud en links in SWF-bestanden indexeren tijdens het bladeren door de toestanden van een applicatie, alsof het echte bezoekers waren. Dus waarom zou u dan nog steeds alternatieve inhoud moeten gebruiken om zoekmachines te helpen uw inhoud te indexeren? Dit is om een aantal redenen.
- Ten eerste zijn niet alle zoekmachines in staat om Flash-inhoud te indexeren.
- Ten tweede, omdat een SWF-bestand meestal vol met multimedia-inhoud is, zal er nog steeds veel inhoud zijn die onzichtbaar blijft voor zoekmachines. U moet nog steeds alternatieve inhoud gebruiken om beschrijvend materiaal weer te geven aan mensen met minder technische ondersteuning en om bezoekers te helpen de Flash Player-downloadpagina te vinden.
- En ten slotte zullen zoekmachines waarschijnlijk zowel Flash-inhoud als alternatieve inhoud indexeren. Hoewel, vanuit het oogpunt van een webauteur, dubbele inhoud wordt beschouwd als een beste methode, omdat u hiermee webinhoud kunt maken die toegankelijk is voor een zo breed mogelijke doelgroep, voor leveranciers van zoekmachines, biedt deze een paar lastige uitdagingen, zoals hoe om te beslissen welke resultaten moeten worden weergegeven in hun lijst met zoekmachines. Bij het maken van zoekmachine-vriendelijke inhoud, moet u deze dualiteit altijd in het achterhoofd houden. Zorg ervoor dat uw HTML-inhoud een goede weerspiegeling is van uw Flash-inhoud en laat een zoekmachine beslissen welke inhoud het beste kan worden weergegeven als een zoekresultaat.
U kunt bijvoorbeeld het volgende doen om betere alternatieve inhoud te maken:
- Gebruik exact dezelfde kopie en koppelingen als in uw Flash-inhoud
- Voeg afbeeldingen en tekstuele beschrijving toe aan de Flash-inhoud
- Voeg een kopie toe om uit te leggen waar Flash Player kan worden gedownload
- CSS toevoegen aan stijl en uw HTML positioneren om de visuele identiteit van de webpagina te behouden.
Standaard publiceert SWFObject 2 Generator de volgende alternatieve inhoud:
Dit resulteert in een knop "Get Adobe Flash Player" om bezoekers te laten zien waar ze de plug-in kunnen downloaden. Om dit te testen, moet je je Flash Player-plug-in uitschakelen. Ga in Firefox naar Add-ons> Plug-ins. Zoek Shockwave Flash en klik op de knop "Uitschakelen". Wanneer u de pagina opnieuw laadt, ziet u het volgende:
U kunt de standaardcode vervangen door deze:
Als bezoekers nu zonder Flash-plug-ins door de pagina bladeren, zien ze een afbeelding in plaats van een daadwerkelijke animatie:
Zoekmachines en bezoekers die op internet browsen in een tekstbrowser of afbeeldingen hebben uitgeschakeld, zien de inhoud zoals in deze schermafbeelding:
Als u een banner met verschillende statussen hebt, kunt u een afbeelding voor elk ervan vastleggen en deze afbeeldingen invoegen als alternatieve inhoud. Het ziet er misschien als volgt uit:
Voor een animatie of video-inhoud kunt u hetzelfde principe gebruiken. U kunt verschillende belangrijke afbeeldingen vastleggen en deze gebruiken om de inhoud van uw animatie / video te beschrijven. Dit is het basisschema:
Beschrijving van frame 1- Beschrijving van frame 2
- Beschrijving van frame 3
Mensen zonder de Flash-invoegtoepassing zien een afbeeldingsreeks met beschrijvingen en mensen die op het web browsen in een tekstbrowser of met afbeeldingen uitgeschakeld, krijgen een reeks beschrijvingen te zien.
Een andere manier om dit te doen, is een videominiatuurafbeelding plus tekstuele beschrijving van de film.
U kunt ook een paar regels kopie toevoegen aan uw alternatieve inhoud, waarin wordt uitgelegd dat de beoogde interactieve of audiovisuele gebruikerservaring de nieuwste versie van Flash Player vereist, met een koppeling naar de downloadpagina.
U kunt ook extra stijlregels maken om ervoor te zorgen dat de visuele identiteit of lay-out van een webpagina intact blijft. Denk aan alternatieve inhoud als een mogelijkheid om met uw doelgroep te communiceren, hoewel ze mogelijk niet de gerichte technologische ondersteuning hebben.
Conclusie
Dat is het. Nu weet u hoe u Flash-inhoud gemakkelijk en goed in uw WordPress-website kunt opnemen. De inhoud kan van alles zijn: animatie, applicatie, film, game en wat je maar wilt en nodig hebt. Met een beetje fantasie kun je je website aan de ene kant echt cool maken en nog steeds nuttig aan de andere kant.
Beschrijving van frame 1