Posted via Pixelpipe.
Sunday, November 9, 2008
Sunday, March 30, 2008
Embedding Flash Background Info - Start Here!
In this section, we will show you how to embed flash media into an html web page. Later posts describe Flash video and Flash audio specifically, but the basics are presented here.
First, let's look at the simplest way to embed a Flash file on your web page.
<html>
<body>
<object width="400" height="300">
<param name="movie" value="myflashfile.swf">
<embed src="myflashfile.swf" width="400" height="300">
</embed>
</object>
</body>
</html>
Just replace "myflashfile.swf" with the name of your .swf file. The width and height indicate the dimensions of the Flash content that will be displayed in the browser. If you use dimensions that are larger or smaller than the actual size, it will be scaled to your settings.
The above html assumes that the .swf file is in the same directory as your html file (e.g. your PRISM account). However, we want to our file to be hosted on a streaming server. To do this, simply upload your .swf file to Typhoon. Now, return to your html file. Change myflashfile.swf to the URL of your file on Typhoon. It will look like this:
src="http://newstream.gatech.edu/public/vol1/relay/Spring2008/Your_Name_Here/Your_File_Here.swf"
The above method is a good starting point, but it will not be sufficient for supporting a wide range of Internet browsers. To improve your html, a few attributes should be added to the object and embed tags. Our recommendation is to let Flash do this for you. Open your Flash file and choose File > Publish. Flash will automatically generate an html file with your content embedded. You will still need to edit the value and src attributes as we did in the first example.
The embedding Flash tutorial continues here: Introduction to embedding flash into html
First, let's look at the simplest way to embed a Flash file on your web page.
<html>
<body>
<object width="400" height="300">
<param name="movie" value="myflashfile.swf">
<embed src="myflashfile.swf" width="400" height="300">
</embed>
</object>
</body>
</html>
Just replace "myflashfile.swf" with the name of your .swf file. The width and height indicate the dimensions of the Flash content that will be displayed in the browser. If you use dimensions that are larger or smaller than the actual size, it will be scaled to your settings.
The above html assumes that the .swf file is in the same directory as your html file (e.g. your PRISM account). However, we want to our file to be hosted on a streaming server. To do this, simply upload your .swf file to Typhoon. Now, return to your html file. Change myflashfile.swf to the URL of your file on Typhoon. It will look like this:
src="http://newstream.gatech.edu/public/vol1/relay/Spring2008/Your_Name_Here/Your_File_Here.swf"
The above method is a good starting point, but it will not be sufficient for supporting a wide range of Internet browsers. To improve your html, a few attributes should be added to the object and embed tags. Our recommendation is to let Flash do this for you. Open your Flash file and choose File > Publish. Flash will automatically generate an html file with your content embedded. You will still need to edit the value and src attributes as we did in the first example.
The embedding Flash tutorial continues here: Introduction to embedding flash into html
Introduction to embedding flash into html
We will show you how to embed flash into html webpages. Basically when you have completed your flash file (whether its video, audio, or a full flash webpage), you select 'publish' (file--> publish). When you select publish, Flash takes your .fla file and converts it to a .swf and then makes a .html page which automatically embeds the .swf file. The .swf file then needs to be uploaded to the Typhoon server. The html code for the published .fla file is below.
You can use this html code as your page (it will consist of only the flash file). You can also embed the .swf file into your existing webpage by copying the param, object, and embed tags of the html code, highlighted below.
Here is the code itself:
Some viewers may require that you close the embed tags, so adding a </embed> in the line before the object may be helpful.
The height and width of the video can be altered by changing the parameters in BOTH the object and the embed tags.
You can use this html code as your page (it will consist of only the flash file). You can also embed the .swf file into your existing webpage by copying the param, object, and embed tags of the html code, highlighted below.
Here is the code itself:
Some viewers may require that you close the embed tags, so adding a </embed> in the line before the object may be helpful.
The height and width of the video can be altered by changing the parameters in BOTH the object and the embed tags.
Embedding Video
Here, we have embedded our flash video by using the code between the object tags.
Below is the html code required to display/embed this video on a website.
Note: we had to change the dimensions of the video since the default width (550) was too wide for the Blogger template (410).
Here is how the video would have looked if we used default dimensions:
Below is the html code required to display/embed this video on a website.
Note: we had to change the dimensions of the video since the default width (550) was too wide for the Blogger template (410).
Here is how the video would have looked if we used default dimensions:
Embedding audio
To embed audio into your website, you have two options.
First, you can publish your flash audio object and build your webpage based on this code.
An example of this technique is here. As you can see, a simple website was based off of the code acquired from publishing the file via flash. The .fla file is compiled into both .swf and an .html file that embeds the .swf into the page. You can the edit the html page to build the page around the embedded flash file.
The second option, which is preferred if you already have a complex website and are looking to just embed a flash element is to take the entire code from above, and just cut the object, param, and embed sections.
CODE VIEW:
This example shows how the flash file looks when no dimension values are given.
CODE VIEW:
Moral of the story? USE DIMENSION TAGS!!
Here is the same flash file, but scaled at 10 % (w=55, h=40). Notice that the change is to scale.
CODE VIEW:
Here is example using the code that Flash gives you when you select 'publish'. All of the previous codes were simplified.
CODE VIEW:
What they put in their code is a process to check if the viewer has flash installed. If the viewer does not, a query for download is initiated.
First, you can publish your flash audio object and build your webpage based on this code.
An example of this technique is here. As you can see, a simple website was based off of the code acquired from publishing the file via flash. The .fla file is compiled into both .swf and an .html file that embeds the .swf into the page. You can the edit the html page to build the page around the embedded flash file.
The second option, which is preferred if you already have a complex website and are looking to just embed a flash element is to take the entire code from above, and just cut the object, param, and embed sections.
CODE VIEW:
This example shows how the flash file looks when no dimension values are given.
CODE VIEW:
Moral of the story? USE DIMENSION TAGS!!Here is the same flash file, but scaled at 10 % (w=55, h=40). Notice that the change is to scale.
CODE VIEW:
Here is example using the code that Flash gives you when you select 'publish'. All of the previous codes were simplified.
CODE VIEW:
What they put in their code is a process to check if the viewer has flash installed. If the viewer does not, a query for download is initiated.
Friday, March 28, 2008
Uploading flash files to server.
In order for the process to work, you must have a .swf file uploaded to your flash compatible server. In our case we used the Typhoon server. When you have uploaded your file, use the directory path to the .swf file as the source to embed your flash media.
Subscribe to:
Comments (Atom)