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

Contine reading

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