Computer: Adobe Flash Player – Shockwave – in Mozilla Firefox

The Situation

My older websites do use vector graphics in Shockwave format – originally produced by Feehand and converted from .fla to .swf

In the long run I am planning to convert .swf to a more open and modern format ( like .svg or html5 or ….)

At the moment I want to keep my older websites “alive”, so I need to know how to embed SWF-files in HTML and how to render them in the important Web Browsers (Mozilla Firefox,…)

My traditional website, that I want to keep “alive” is:  http://www.kr8.de (original) resp. http://web.kr8.de (converted to bootstap).

Adobe Flashplayer

As I understood, I need Adobe Flashplayer as a plugin into my web browser in order to render my SWF graphics properly.

My favorite web browser is Mozilla Firefox. With Firefox version 43.04 I was unable to install the Adobes Flashplayer plugin.
With Mozilla Firefox 28.0 the installation of the Adobe Flash Plugin went well. To be exact: I installed Shockwave Flash 22.0.0.209 as a plugin to Mozilla Firefox 28.0.

Rendering SWF in HTML

My SWF files showed up perfectly on my HTML-Pages in Mozilla Firefox.
Example: http://web.kr8.de/ldap.html

This is the code I used for embedding the SWL into the HTML:

<object align=”left” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0″ width=”294″ height=”126″>
<param name=”movie” value=”img/ldap.swf” />
<param name=”wmode” value=”transparent” />
<param name=”quality” value=”high” />
<embed quality=”high” pluginspage=”http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” src=”img/ldap.swf” width=”294″ height=”126″  wmode=”transparent” />
</embed>
</object>

Potential Problems

  • Use the right file path in the SRC parameter e.g. src=”img/ldap.swf”
  • Use wmode=”transparent”
  • Other Firefox-Plugins may interfere with the Shockwave Flash plugin, e.g. Shockwave Director or others…

 

 

 

Computer: Graphics in MediaWiki

Graphiken in MediaWikiZeichnungen (Drawings)

Auch in MediaWiki möchte man ja ab und zu auch schöne Vektorgrafiken einbauen – nicht nur Pixel-Bilder.

Je nach Format (SVG, SWF, ODG, VSD, PPT,…) sind da unterschiedliche Lösungen möglich, wo bei schon das Upload solcher Grafiken ein Problemchen sein kann.

 Upload von Grafiken auf Mediawiki (SVG, SWF, PDF,…)

Damit man Vektorgrafiken auf Mediawiki hochladen kann, müssen einige Einstellungen vorgengenommen werden.

 php.ini

file_uploads = On 
post_max_size = 20M
upload_max_filesize = 20M

 LocalSettings.php

$wgEnableUploads = true    -->  (dann erscheint links die Klick-Zeile "Upload")
$wgFileExtensions = array('png','gif','jpg','jpeg','pdf','svg','swf','mp3','ogg');

Manchmal gibt es Probleme mit der Erkennung des richtigen MIME-Types. Dann kann man folgendes versuchen:

$wgVerfiyMimeType = false;
$wgMimeDetectorCommand = 'file -bi';
in httpd.conf bzw. .htaccess:  AddType image/svg+xml svg

 SVG bei MediaWiki

 Rendering von SVG bei Mediawiki

Welche Vektorgrafik-Formate kann Mediawiki problemlos darstellen d.h. “rendern”?

  • SVG: das geht bei mediaWiki bestens (s.u. Beispiele)

In LocalSettings.php:

$wgSVGConverter = 'inkscape';
/** If not in the executable PATH, specify */
$wgSVGConverterPath = 'D:/bin/Inkscape';
/** Don't scale a SVG larger than this */
$wgSVGMaxSize = 1024;

File:Iso spice.svg

SVG in eine MediaWiki-Seite einbinden

[[Image:Rss-family.svg|600px]]

Dies Beispiel stammt von der Seite: RSS.

 

SWF bei MediaWiki

  • SWF: das ging bis MediaWiki 1.19 mit einer Extension, die ich aber unter MediaWiki 1.22 noch nicht zum Laufen bekommen habe.

Angeblich soll es so gehen:

  1. Die Extension “swf.php” in den Ordner “extensions” stellen
  2. Die Extension in LocalSettings.php am Ende laden….
  3. Die Datei-Endung “swf” zulassen: $wgFileExtensions = array(‘png’,’gif’,’jpg’,’jpeg’,’pdf’,’svg’,’swf’,’mp3′,’ogg’);
  4. Auf einer Wiki-Seite die SWF-Grafik einfügen per: bbbbb

<swf width=”321″ height=”379″>http://www.kreativeinsatz.de/images/auge.swf</swf>

Schluss

<swf width=”321″ height=”379″>http://localhost/ITIL.swf</swf>

————–

Flash in eine MediaWiki-Seite einbinden

Dazu muss eine MediaWiki-Extension installiert werden. Der Quellencode sieht dann beispielsweise so aus:

<flash>file=Slowfox.swf|width=500|height=400|quality=best|align=none</flash>
<br />
<flash>file=SCC-Provider.swf|width=500|height=400|quality=best|align=none</flash>

Das Beispiel stammt von den Seiten: Tanzen und VersionControl.

<flash>file=SCC-Provider.swf|width=500|height=400|quality=best|align=none</flash>
<flash>file=Slowfox.swf|width=500|height=400|quality=best|align=none</flash>
<flash>file=ssh_configuration.swf|width=650|height=380|quality=best|align=none</flash>

—————–

 PDF bei Mediawiki

  • PDF: das könnte evtl. auch funktionieren…

 Erstellen und Bearbeiten von Vektorgrafik

 Erstellen und Bearbeiten SVG

Vektorgrafiken im SVG-Format kann ich mit der OpenSource Inkscape hervorragend erstellen.

Auch der Adobe Illustrator (CS2) unterstützt das Abspeichern eine Vektorgrafik als SVG.

 Erstellen und Bearbeiten SWF

Das kann man mit SWiSH machen….. Bei einigen (neueren) SWF-Zeichnungen stürt SWiSH ab, wenn ich sie öffnen will…

Die alten SWF-Files (aus dem Lexikon) kann ich mit SWiSH gut bearbeiten (z.B. die Schrift von Futura auf Arial umstellen).

Allerdings kann ich mit SWiSH so eine Zeichnung nur wieder im SWF oder SWI-Format abspeichen, was mir nicht wirklich weiter hilft….

Das Produkt Flash Exploit von M-Gate Labs sieht ganz vielversprechend aus. http://swf2svg.3D22Toy.com

Java has experienced an error, most likely due to running out of ram.
Please close this program and run it with a higher ram setting.
java.lang.ArrayIndexOutOfBoundsException: -1

 Konvertieren in SVG

 Alte Vektorgrafiken in PowerPoint (PPT)

Diese können per Cut-and-Paste in den Adobe Illustrator übetragen werden und dann mit “Datei speicheren als….” ins SVG-Format übertragen werden.

Ich kann ganz wunderbat Grafiken aus PowerPoint per “Cut & Paste” in meinen Adobe Illustrator C2 übertragen. Wenn ich das im Adobe Illustrator dann mir “Speichen als…. SVG” abspeichere, mach Adobe da am Anfang der SVG-Datei etwas kompliziertes mit den Namespaces:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ENTITY ns_svg "http://www.w3.org/2000/svg">
	<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg  version="1.1" id="Ebene_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="764.121" height="575.469"
	 viewBox="0 0 764.121 575.469" overflow="visible" enable-background="new 0 0 764.121 575.469" xml:space="preserve">

Wenn ich eine solche SVG-Datei mit Inkscape weiterbearbeiten will erhalte ich eine Fehlermeldung…

 Failed to load the requested file Z:\Drawings\Schema 05.svg

Wenn ich eine solche SVG-Datei in MediaWiki mit “Upload file” hochladen will, gibt es ebenfalls eine Fehlermeldung…

** (inkscape.exe:10080): WARNING **: Specified document C:\Program Files\Windows Server\Bin\WebApps\Site\wikikracht/images/3/35/Server_DB_Baukasten_Schema_05.svg cannot be opened (does not exist or not a  valid SVG file)
RegistryTool: Could not create the registry key 'SOFTWARE\Microsoft\Windows\CurrentVersion\App Paths\inkscape.exe'
C:\Program Files\Windows Server\Bin\WebApps\Site\wikikracht/images/3/35/Server_DB_Baukasten_Schema_05.svg:7: namespace warning : xmlns: URI &ns_svg; is not absolute
<svg version="1.1" id="Ebene_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width
^
C:\Program Files\Windows Server\Bin\WebApps\Site\wikikracht/images/3/35/Server_DB_Baukasten_Schema_05.svg:7: namespace warning : xmlns: URI &ns_svg; is not absolute
<svg version="1.1" id="Ebene_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width
^

Manuell korrigiere ich die Nmespace-Einträge dann wie folgt:

<?xml version="1.0" encoding="utf-8"?>
<svg  version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="764.121" height="575.469"
	 viewBox="0 0 764.121 575.469" overflow="visible" enable-background="new 0 0 764.121 575.469" xml:space="preserve">

Dann funktioniert es mit dem “Upload file” und auch mit Inkscape.

 Alte Vektorgrafiken in Visio (VSD)

Da müsste sich zunöchst ein Visio besorgen, oder…?

 Alte Vektorgrafiken in SWF

Da habe ich ganz viele….. aber was mache ich mit denen?

 Examples: Rendering SVG

BalancedScorecard-4.svg

Pathwitharcs.svg

08:08, 1 January 2014 (CET)

Computer: SVG Vektorgrafiken (aus Wiki)

SVG Scalable Vector Graphics

  • SVG ist ein auf XML beruhender W3C-Standard für VektorGrafik.
    • SVG 1.0: 2001
    • SVG 1.1: 2003
    • SVG 1.2: 2005
  • SVG wurde sehr stark von der Firma Adobe unterstützt. Zum 1.1.2008 hat Adobe “End of Life” verkündet.
  • SVG hat als offenes; d.h.nicht-proprietäres Format große Unterstützung durch OpenSourceSoftware
  • SVG wird von MediaWiki unterstützt
  • WebBrowser unterstützen SVG auch…?
  • Konkurrierend zu SVG ist: Flash von Macromedia (aufgekauft von Adobe)

SVG Grafiken Einbetten in…

 Bekannte Problememit SVG

  • Darstellung von Pfeilspitzen an Linien
  • Welche Schrifttypen werden unterstützt?
  • Darstellung von Fließtext (ab SVG 1.2 möglich)

 Weblinks zu SVG

 SVG die ersten Schritte

  • Koordinatensystem
    • X-Achse waagerecht vom linken Bildrand nach rechts
    • Y-Achse senkrecht vom oberen Bildrand nach unten
  • Elemente
    • Rechteck
    • Text, auch Fließtexte
    • Bezierkurven
    • Kreis, Ellipse, Bogen
    • Pfad
    • Pfeilspitzen ????????

Beispiel für einen Pfad

Pfad aus “M” (=move to) und “L” (= line to):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" 
     width="200" height="300">
  <path stroke="black" stroke-width="1px" fill="none"
     d="M 50,250 L 50,150 L 100,77.5 L 150,150 L 55,150 L 150,250 L 54.5,250 L 150,154 L 150,246"/>
</svg>

Dies als Grafik:
DasHausvomNikolaus.svg

Beispiel für Bogenstücke

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300">
<g stroke="black" stroke-width="1" fill="none">
<path d="M150 50 A100 100 0 0 0 50 150" />
<path d="M0 150 L150 150" stroke="red"/>
<path d="M150 0 L150 150" stroke="blue" />
<path d="M50 200 A50 50 0 0 1 100 250" />
<path d="M50 160 L50 300 M0 250 L150 250" stroke="gray"/>
</g>
</svg>

Dies als Grafik:
Pathwitharcs.svg

Beispiel für zwei einzelne Textzeilen

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"  width="265" height="65" 
     xml:space="preserve" color-interpolation-filters="sRGB" fill="none">
	<title>Balanced Scorecard</title>
	<desc>Aus:  pres_030806.ppt TTC</desc>
	<style type="text/css">
		.st2 {fill:rgb(0,103,171);font-family:Verdana;font-size:20pt;font-style:italic;font-weight:bold}
	</style>
	<g>	
                <rect x="1" y="1" fill="none" stroke="black" width="264" height="64"/>
		<text x="18" y="29" class="st2">Basic Balanced</text>	
		<text x="50" y="55" class="st2">Scorecard</text>		
	</g>
</svg>

Dies als Grafik:
BalancedScorecard-3.svg

Beispiel für Fließtext

Fließtext wurde in SVG 1.2 neu eingeführt. Nicht alle SVG-Tools unterstützen dies.
SVG-Quellcode:

<?xml version="1.0" standalone="no"?>
<svg version="1.2" xmlns="http://www.w3.org/2000/svg"
    id="body" width="350" height="350">
  <title>SVG flowPara Example.</title>
  <g>
    <rect stroke="blue" fill="gold" x="10" y="10" width="200" height="300"/>
    <flowRoot>
      <flowRegion>
        <rect stroke="blue" fill="gold" x="10" y="10" width="200" height="300"/>
      </flowRegion>
      <flowDiv text-align="start">
        <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
                  P1 The quick brown fox jumped over the lazy dog.</flowPara>
        <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
                  P2 Gallia est omnis divisa in partes tres quarum unam incolunt Belgae.</flowPara>
        <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
                  P3 a b c d e f g h i j k l m n o p q r s t u v w x y z</flowPara>
      </flowDiv>
    </flowRoot>
  </g>
</svg> 

Dies als Grafik:

Beispiel für Fließtext mit SVG 1.2

 

SVG Tools

SVG Tools 1

 SVG Tools2

SVG Beispiele

 SVG Beispiel 1: Hello World

So sieht der SVG Quelltext aus:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="260" height="60">
	<rect x="10" y="10" fill="blue" width="240" height="40"/>
	<text x="40" y="40" style="fill:gold; font-size:20pt">
		Hello World!
	</text>
</svg>

Diese SVG-Datei wurde als “normale” Grafik auf die WordPress Media Libray hochgeladen.

Das Einfügen dieser SVG-Grafik erfolgt dann in WordPress  “normal” über den “Add Media” Buttom im Editor (der dann ein HTML.IMG daraus macht):

Und so sieht die SVG-Grafik dan hier  aus:

Helloworld

 

SVG Beispiel 2: Tageslänge

Tageslaenge3

SVG Beispiel 3: RSS Family

Dies Beispiel stammt von der Seite: RSS.

Rss-family

 

SVG Beispiel 4: SWISH Flash Animation

Dies SVG-Beispiel stammt von der Seite: SWiSH

Swish_Flash_Animation