Show flash while buffering? - html

i'm developing a web where i want to show a flash on the index page. The flash got 3Mb size. But while it is downloading, i just see a white space where it should be.
I have tried putting an image in the background, but i just see white until the flash is fully downloaded...
Any tip? I would like to see the first image of the flash, or an static image while it is loading?
im just putting it in the direct way
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="899" height="138">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="899" height="138">
<param name="movie" value="FELIPE.swf" />
<param name="quality" value="high" />
<embed src="FELIPE.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="899" height="138"></embed>
</object>

Depending on your environment, flex, flex builder, flash, etc, the method will be different. But what you are looking for is a 'preloader'. You move all your resources out of the first frame and move it to the second frame, the movie will load the first frame fast, display your 'loading message', then stop, and actionscript runs checking for the load progress of the swf, when it is complete, it advances to the second frame and plays your movie.

Related

Embedding audio files in html with album artwork

So I am embedding the music like so (testing in firefox),
<object width="300" height="20">
<param name="src" value="music/Furrow.mp3">
<param name="autoplay" value="false">
<param name="controller" value="true">
<param name="bgcolor" value="#FFFFFF">
<embed src="music/Furrow.mp3" autostart="false" loop="false" width="300" height="42" controller="true" bgcolor="#FFFFFF">
When I load my html pages, there is a little VLC type player, which is perfect. However I have an issue, the player looks like this when i take my mouse off the player,
http://imgur.com/3aCGfx0
How can I change the orange cone + black background to have lets say, album artwork or a picture?
Thanks
PS this might not be the best way to add music, but I am just trying to work out the album artwork for now
The way your doing it is using a default plugin provided by your browser. In your case, this is VLC, but this depends on the client media plugin.
What you have to do is using a custom media player (you know have choice between flash, html5, or so ...), and manage the artwork by your own.
Look at existing solution such as subsonic, ampache ...
Example screenshot form subsonic : there is a little embed flash player, and playlist + artwork is handled with javascript.
To begin with, should know your source code, perhaps a picture to absolute position for the cone icon in CSS.
ps : JW player offers solutions with playlist and album art, always with flash player.
http://www.longtailvideo.com/jw-player/download/

Display a transparent mov file on a webpage

I bought this flying birds MOV file from istockphotos and now I'm stuck trying to implement it into my webpage, I want it to run like a flash file, every few seconds but I can't seem to be able to import it into Adobe Flash, I tried using the code below but it does not allow me to do much and is not transparent:
<OBJECT classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' width="320"
height="255" codebase='http://www.apple.com/qtactivex/qtplugin.cab'>
<param name='src' value="ad.mov">
<param name='autoplay' value="true">
<param name='controller' value="false">
<param name='loop' value="false">
<EMBED src="iStock_000011342270Small We.mov" width="320" height="255" autoplay="true"
controller="false" loop="false" pluginspage='http://www.apple.com/quicktime/download/'>
</EMBED>
</OBJECT>
The person who created the stock wrote this on his site:
Alpha Mattes and Luma Mattes
Some of the clips contain alpha or luma mattes. If you don't know how
to use these, search online and discover their uses as masks. I've
heard from people who have converted my footage to use in Flash and
have successfully used the luma mattes there too. The black and white
clips of the birds can used as luma mattes, so the birds can be placed
on any background of your choice. As mentioned above, if you're using
After Effects, any of the clips can be used with the free Knoll
"UnMult" plugin which removes the black from the clips by creating an
alpha channel - it works really well with the rain and smoke clips.
I don't understand what a luma matte is, maybe someone can point me in the right direction?
There didn't seem to be a way to fix this issue, I ended up making the video transparent myself using Adobe After Effects and a great tutorial using Keying, it wasn't the best but it did the trick

embeding a video on a website without controls

I am trying to embed a video on a website which will be used as an intro. Im interested in a way of embeding that video without a control bar (play,pause...). I can convert it to any format as I have the project file so compability isnt an issue. I have tried inserting it with tag in HTML5 and that works seamlessly but because of a bug in Chrome white color in the video becomes gray and that doesnt work for me because video background has to be white so it can be camouflaged with the rest of the website.
Interesting. I haven't seen the Chrome/white issue, but from the sounds of it... it's just in dev versions of Chrome? I'm basing this off the last comment from this post.
Looks like there was a patch, and it's waiting to be merged.
Not sure if these help in terms of using HTML5's video tag. If you don't care about the tag, you could always go with a Flash-based version using an .mp4 file. That way, whenever you're comfortable with Chrome's rendering... you could set it back up with the video tag.
Again, if you're ok with using Flash... you could pull it off like so (using Flowplayer):
<object width="600" height="338" type="application/x-shockwave-flash" data="http://whywouldyouclickthat.com/flowplayer/flowplayer-3.2.7.swf">
<param name="movie" value="http://whywouldyouclickthat.com/flowplayer/flowplayer-3.2.7.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "/yourDirectory/yourMovie.mp4", "autoPlay":true, "autoBuffering":true},"plugins": {"controls": null}}' />
</object>
Again, not sure if Flash is a deal-breaker here.

How do you dynamically load different streaming F4V files into one SWF player?

I need to figure out how to utilize one SWF player/file to load different streaming F4V files dynamically.
As it stands now, I have:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="500" height="314" id="something" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="movie" value="/images/flash/' . $video . '" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="/images/flash/' . $video . '" quality="high" bgcolor="#ffffff" width="500" height="314" name="something" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
Currently I am publishing a separate SWF player/file for each F4V, but this is unacceptable. I need to use one SWF file to load different F4V files. I'm not that knowledgeable in the ways of Flash, but I believe that the "src" attribute of the embed tag and the "name='movie'" attribute of the object's param tag needs to point to the SWF player/file. So does anybody know how I can manipulate the object and embed tags to make them load a different F4V file into the SWF player?
Well since nobody responded it was up to me to continue my search for the answer to this one. I modified a solution taken from: http://www.webdeveloper.com/forum/showthread.php?t=185784 by infinityspiral.
It requires you to add the following line of code to the SWF player/file.
FLVPlayerInstanceName.play(this.loaderInfo.parameters.file);
After doing this and uploading it to your web server, you can access FlashVars. The one I needed to access was "file" and I simply had to feed it an rtmp call (such as "rtmp://yourserver.vod/mp4:Whatever.f4v") once in a param tag inside the object tag and once as an attribute inside the embed tag and it worked.
There does appear to be a bug with the version of Flash Media Server I'm using though... You need to be careful what directory you're putting your F4V files in on your streaming server until Adobe corrects the issue (so I had to fiddle with my rtmp call above by removing a directory level inside the call to get it to work).

Meaning of attributes and parameters in HTML Flash tag?

In the below code, what are all the parameters and attributes used, why are all these used and what's their meaning here?
What parameters and attributes are recommended and what are not to use with a Flash tag in a HTML page?
<object id="vf_flash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="630" height="400">
<param name="movie" value="/videos/swf/3fun.swf" />
<param name="FlashVars" value="id=72" />
<param name="allowScriptAccess" value="always" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="wmode" value="window" />
<embed name="vf_flash" src="/videos/swf/3fun.swf" FlashVars="id=72" width="630" height="400" allowScriptAccess="always" loop="false" menu="false" quality="high" wmode="window" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
The Adobe website has clear and concise explanations of all of these tags, including which are optional and which are required.
http://kb2.adobe.com/cps/127/tn_12701.html
Out of order, and based on memory. Verify these all before use, but it should help you wrap your head around the concepts:
In the fight for monopoly over the web, Microsoft has committed to differ from the W3C whenever possible. Therefore, the actual tag used to embed Flash in Internet Explorer is 'object', in all real browsers it's 'embed'.
It must be noted that using '1' and '0' will give you better overall consistency than 'true' and 'false', due to this fight.
loop - tells whether or not the Flash player should attempt to restart the movie when it finishes playing it.
FlashVars - parameters can be passed into Flash, and are referred to through the flashvars unit. For example, if you create a media player that plays song1 you may pass in Flashvars="song1=song1"
movie - the URL of the Flash file. Keep it in the same folder as the HTML file calling it, or use an absolute URL or you will hit a cross-browser issue.
quality - the higher the quality the more resources Flash requires to run. While the default is good, if you are worried that the player will be used on older computers, sometimes sacrifice image quality for the sake of a less jumpy experience
wmode - the background opacity of the movie. Sometimes you want the movie to blend in with the background, and it gets set to "transparent", sometimes it should clearly be its own little box, "opaque". Note here that there are some easter eggs with this value, if you need it, there are some undocumented options for this value.
allowScriptAccess - I actually thought this was deprecated. It changed a lot in different versions. Leave this on default.
Libraries like Mootools have classes designed for working with Flash and JavaScript together.
Take a look here and here for the articles on A List Apart (ALA) on the embed vs object tags, there is a lot to be learned from it.
The one's that I can answer off the top of my head:
"movie" - the name of the flash file to load/view
"loop" - whether the animation plays once (false) or repeats (true)
"menu" - whether to show the full context menu (true) or not (false). Setting this to false shows the context menu, but it only has the "settings" and "about" options.
See Kane Wallmann's link for the full documentation.