-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdocumentation.php
executable file
·236 lines (229 loc) · 8.86 KB
/
documentation.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Links & Ressources</title>
<meta name="description" content="">
<meta name="author" content="">
<?php
include "php/js-includes.php";
?>
<script src="jslibs/swfobject.js"></script>
<script src="js/PluginDetect.js"></script>
</head>
<body>
<!-- ::::::::::::::: TOP ::::::::::::::::::::: -->
<?php
include "php/topnavi.php";
?>
<!-- ::::::::::::::: CONTAINER ::::::::::::::::::::: -->
<div class="container-fluid">
<br />
<br />
<br />
<!-- ::: SIDEBAR ::: -->
<div class="sidebar">
<div class="well">
..
</div>
</div>
<!-- ::: CONTENT ::: -->
<div class="content">
<div class="span12 columns">
<h2>Release Notes</h2>
<p>
Version 0.5 Beta. First public release (October 9, 2011).
</p>
<ul>
<li>
<span class="label success">New</span> Configurator for embedding SWF files using SWFObject
<ul>
<li>
All options and settings for embedding SWF files.
</li>
<li>
Your current settings are stored if you leave the web page (HTML5 / LocalStorage)
</li>
<li>
Powerful template engine for rendering in custom HTML templates.
</li>
<li>
Export and import your settings using a JSON object.
</li>
</ul>
</li>
<li>
<span class="label success">New</span> Flash Player detection and latest runtime version.
</li>
<li>
<span class="label success">New</span> Links & Ressources for Adobe Flash Player
</li>
<li>
<span class="label success">New</span> Basic version of the documentation.
</li>
</ul>
<p>
At the moment, this site is only tested in the latest version of Safari, Chrome and Firefox. You can file bugs and requests at <a href="https://github.com/florianplag/Embed-SWF/issues">Github</a>.
</p>
<h2>About</h2>
<p>
The main goal of this site is to provide an easy way for embedding a flash file (.swf) in an HTML page. A lot of people don't know exactly how this works and what options you have. By using <em>SWFObject</em>, an Open Source JavaScript Library, you benefit from all the features of this popular library (standards-friendly, HTML fallback, Flash Player detection, etc.) which is well-known as the best solution for embedding SWF files.
</p>
<h2>Instructions</h2>
Let's start with an easy example: Download this <a href="flash-demos/sample1/sample1.zip">ZIP-File</a> containing a flash demo file and we'll create an HTML template for it.
<ol>
<li>
Open the <a href="embed-swf.php">Configurator</a> (Restore the default settings using the button on the left side in case you already played with the configurator). The most important fields are "Flash file" and "Dimensions" on the first tab. Put the name of your flash file ("sample1.swf") and choose the size (300x300).
</li>
<li>
Jump to the last tab (Export) and click the "Show HTML Code" Button. Copy the source code from the window and save it as "index.html" in the same folder as the downloaded demo assets.
</li>
<li>
Open the index.html in your browser and you should see the <a href="flash-demos/sample1/index.html">flash content.</a>
</li>
</ol>
<p>
That's it!
</p>
<h2>Troubleshooting</h2>
<p>
If your Flash content isn't displayed properly, check these points:
</p>
<p>
<ul>
<li>
<strong>Flash area is empty</strong>
<ul>
<li>
Right click on the Flash area. If the context menu displays „Movie not loaded…” it's likely that the path to your Flash file is not correct. So the Flash Player is initialized but your movie couldn't be loaded which results in an empty Flash area. In order to find out what's exactly the problem have a look at the HTTP Requests for this page („Web Developer > Web Console” in Firefox; „Window > Activity” in Safari). You can see exactly the (wrong) path from where the browser tries to load the SWF file (404 error).
</li>
</ul>
</li>
<li>
<strong>The alternative content is always displayed / Flash Player Detection is wrong</strong>
<ul>
<li>
This problem can occur when the swfobject.js is not included properly. If this file is missing, you always see the alternative content. That's because SWFObject isn't loaded and doesn't overwrite the alternative content with the Flash content. And if the alternative content says something like "Get Adobe Flash Player", this message is confusing and leads you to the wrong assumption that Flash Player isn't installed (but in reality SWFObject is missing).
</li>
</ul>
</li>
</ul>
You can also check the <a href="http://code.google.com/p/swfobject/wiki/faq">SWFObject FAQ</a> for more specific problems.
</p>
<h2>Custom Settings</h2>
<p>
You can import and export your settings. Technically, this is a JSON object. Here's an example.
</p>
<pre>
{
"alternativeContent" : "",
"attributeAlign": "",
"attributeClass": "",
"attributeName": "",
"contentID" : "",
"flashFile" : "",
"fpVersionMajor" : 11,
"fpVersionMinor" : 0,
"fpVersionRelease" : 0,
"dimensionWidth" : 640,
"dimensionHeight" : 480,
"dimensionUnit" : "",
"expressInstallSwfPath_enabled" : false,
"expressInstallSwfPath" : "expressInstall.swf",
"flashVars": {
"demo": "demo123"
},
"params" : {
"allownetworking": "internal",
"allowscriptaccess": "always",
"allowfullscreen": "",
"base": "",
"bgcolor": "#FFFFFF",
"devicefont": "",
"fullscreenonselection": "",
"menu": "",
"loop": "",
"play": "",
"quality": "",
"scale": "",
"salign": "",
"seamlesstabbing": "",
"swfliveconnect": ""
},
"swfObjectPath": "swfobject.js",
"swfObjectPath_useGoogle" : false
}
</pre>
<h2>Custom Templates</h2>
<p>
If you want to use your own custom HTML file, you can create a template. The template engine supports inserting variables as well as running JavaScript code inside (for loops, if-statements, etc.).
<ul>
<li>
Variables are inserted using the syntax
<code>
<%= variableName %>
</code>
.
</li>
<li>
You can write an if-statement using
<code>
<%= variable1 == true ? 'hardcoded value' : variable2 %>
</code>
</li>
<li>
You can loop through the flashvars and parameters:
<code>
<% _.each(flashVars, function(name, key) {
%>flashvars.<%= key %>="<%= name %>";
<% });%>
</code>
</li>
</ul>
</p>
<p>
[to do: List of all variable names.]
</p>
<pre>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="<%= swfObjectPath_useGoogle == true ? 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js' : swfObjectPath %>"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
var attributes = {};
<% _.each(flashVars, function(name, key) {
%>flashvars.<%= key %>="<%= name %>";
<% });%>
<% _.each(params, function(name, key) {
%>params.<%= key %>="<%= name %>";
<% }); %>
swfobject.embedSWF("<%= flashFile %>", "<%= contentID %>", "<%= dimensionWidth %><%= dimensionUnit %>", "<%= dimensionHeight %><%= dimensionUnit %>", "<%= fpVersionMajor %>.<%= fpVersionMinor %>.<%= fpVersionRelease %>", <%= expressInstallSwfPath_enabled == true ? '"' + expressInstallSwfPath + '"' : 'false' %>, flashvars, params, attributes);
</script>
</head>
<body>
<div id="<%= contentID %>">
<%= alternativeContent %>
</div>
</body>
</html>
</pre>
<p>
By the way, the template engine used in this project is from <a href="http://documentcloud.github.com/underscore/#template">Underscore.js</a>
</p>
<h2>Thanks</h2>
<p>Thanks to creators of SWFObject for this great open source project!</p>
<h2>Trademarks</h2>
<p>Adobe and Flash Player are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.</p>
</div>
</div>
<!-- /CONTENT -->
<?php
include "php/footer.php";
?>
</div>
<!-- /container -->
</body>
</html>