Einzelnen Beitrag anzeigen
Alt 06-03-2008, 13:42   #1 (permalink)
*dakini*
********
 
Benutzerbild von *dakini*
 
Registriert seit: Sep 2004
Ort: nrw deutschland
Beiträge: 43
Tutorial: swfobject + swfadress mit as2

diese zusammenstellung erklärt den einsatz von swfobject + swfadress.

http://blog.deconcept.com/swfobject/
http://www.powerflasher.de/sites/blog/swfobject/
swfobject erkennt ob und welchen player der user hat und bietet anschließend den aktuellen flashplayer an. das skript ist außerdem suchmaschinenoptimiert – es ermöglicht die google indexierung.

http://asual.com/swfaddress/
swfadress arbeitet mit deep linking. es simuliert urls und ermöglicht somit die navigation im browser über die „vor“ und „zurück“ pfeile.

1. ihr müsst den folgenden code in eure index.html oder default.html datei einfügen:

HTML-Code:
<script type="text/javascript" src="swfobject.js"></script>
                
<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>
<script type="text/javascript">
var so = new SWFObject("film.swf", "film", "550", "400", "8", "#FFFFFF");
           so.useExpressInstall('expressinstall.swf');
           so.write("flashcontent");
</script>
- film.swf ist eure datei. wenn die swf in einem anderen ordner liegen sollte, muss zum beispiel an dieser stelle /ordnername/film.swf eingetragen werden.
- film ist die ID des objects
- 550 ist die pixelbreite des films
- 400 ist die höhe
- 8 ist die benötigte player-version
- #FFFFFF ist die hintergrundfarbe des films

wenn ihr swfobject heruntergeladen habt, könnt ihr die beispiel html dateien in eurem html programm öffnen und einändern. einfach den namen eurer datei einfügen, höhe + breite und farbe einändern.
WICHTIG: ihr müsst daran denken die datei swfobject.js und expressinstall.swf in eurem html programm in den gleichen ordner zu legen wie eure swf + die dateien uploaden! Ansonsten könnt ihr mit der pfadangabe arbeiten. (/ordnername/swfobject.js - oder - /ordnername/expressinstall.swf)

2. nun geht es an swfadress. dazu müsst ihr die dateien auf asual.com herunterladen, um swfaddress in euren code zu integrieren. hierzu fügt ihr eine weitere codezeile ein.
unter die bereits bestehende zeile:
<script type="text/javascript" src="swfobject.js"></script>
schreibt ihr:
<script type="text/javascript" src="swfaddress.js"></script>

WICHTIG: hier müsst ihr daran denken die dateien swfaddress.js und AC_RunActiveContent.js in eurem html programm in den gleichen ordner zu legen wie eure swf + die dateien uploaden! Ansonsten könnt ihr wieder mit der pfadangabe arbeiten. (/ordnername/swfadress.js etc.)

alles zusammen kann dann so aussehen:

HTML-Code:
<!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" xml:lang="de" dir="ltr">

<head>

<meta name="verify-v1" content="oaQvZLzAA7+YQ36+078wPGluEOCKYQX+cSUeYuBJPO8=" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="bla, bla">
<meta name="keywords" content="bla, bla">

<meta name="revisit-after" content="1 month">
<meta name="author" content="blub">
<meta name="page-topic" content="blub">
<meta http-equiv="expires" content="0">
<meta http-equiv="language" content="de">
<meta name="robots" content="index, follow">

<title>eurer titel</title>
        
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript" src="swfaddress.js"></script>
				
        <style type="text/css">
            /* hide from ie on mac \*/
            html {
                height: 100%;
                overflow: hidden;
            }
            <!-- hier kommt die zentrierung-->
            #flashcontent {
              position: absolute;
                    left: 50%;
                    top: 50%;
                    width: 550px;
                    height: 400px;
                    margin-left: -500px;
                    margin-top: -328px;
            }
            /* end hide */
            body {
                height: 100%;
                margin: 0;
                padding: 0;
                background-color: #FFFFFF;
                font: 76% Arial, sans-serif;
            }
        </style>
				
</head>
<body>

<div id="flashcontent">
<strong>You need to upgrade your Flash Player</strong>
This is replaced by the Flash content. 
Place your alternate content here and users without the Flash plugin or with 
Javascript turned off will see this. Content here allows you to leave out <code>noscript</code> 
tags. Include a link to <a href="fullpage.html?detectflash=false">bypass the detection</a> if you wish.
</div>

        <script type="text/javascript">
        // <![CDATA[
            var so = new SWFObject('film.swf', 'film', '550', '400', '8', '#FFFFFF');
            so.useExpressInstall('expressinstall.swf');
            so.addParam('menu', 'false');            
            so.write('flashcontent');
        // ]]>
        </script>
</body>
</html>
3. nun zu eurer swf. in eurem heruntergeladenen ordner ...\swfaddress-2.0\samples\adobe
findet ihr beispiele mit as2. wenn ihr eine eigene swf baut, müsst ihr daran denken die „as“ dateien in den ordner mir eurer swf zu legen.
in die hauptzeitleiste kommt folgendes script:

HTML-Code:
// Custom utilities
function replace(str, find, replace) {
	return str.split(find).join(replace);
}
function toTitleCase(str) {
	return str.substr(0,1).toUpperCase() + str.substr(1);
}
function formatTitle(title) {
	return 'euer titel' + (title != '' ? ' / ' + toTitleCase(replace(title.substr(1, title.length - 2), '/', ' / ')) : '');
}

// SWFAddress handling
SWFAddress.setStrict(false);
SWFAddress.onChange = function() {
	var value = SWFAddress.getValue();
	if (_currentframe == 2 && value == '') {
		play();
	} else {
		gotoAndStop('$' + value);
	}
	SWFAddress.setTitle(formatTitle(value));
}
die bildmarkierungen werden folgend benannt:
$/home/
$/kontakt/
etc.

anschließend erstellt ihr für eure buttons movieclips, in welche das folgende script kommt:

HTML-Code:
this.onRelease = function() {
	SWFAddress.setValue('/home/');
}
this.onRollOver = function() {
	SWFAddress.setStatus('/home/');
}
this.onRollOut = function() {
	SWFAddress.resetStatus();
}
jetzt müsst ihr nur noch abspeichern, film testen, film.swf und eure index.html oder default.html uploaden. fertig!***
*dakini* ist offline   Mit Zitat antworten