Floating flash movie with transparent background

[eversys]

Thanks kenmcd - I really appreciate your efforts

Just on the side... I am also in the middle of re-filming some green screen video. The lighting is causing us a few headaches. Before I invest in lighting I need to know exactly what lighting to use. I've checked lots of the [youtube].com videos but the experience lacks. I was thinking about 2x striplight softboxes (30cm x 120cm) with front diffuser, so that the length of the person be correctly lit. For the green screen 2x Florescent lights. The question is size, wattage & amount of bulbs etc. Also, are just normal 40x40 / 60x60 softboxes OK, as opposed to a striplight?

Have you any experience or tips with regard to lighting a green screen (3m x 6m) for filming a whole person (walking on/off a screen)?

[kenmcd]

.
The color and the temperature of the lighting are important.

There are some training videos and a book which are very helpful, and easy to find.

Google search for: Lynda.com - Blue + Green Screen Production Principles
20 minutes of training videos ~180MB.
Covers both basic and advanced issues.
Great overview of the common issues encountered.
Expect this will expose and solve your lighting issues/questions.

Google search for: The Green Screen Handbook: Real-World Production Techniques
Everything you ever wanted to know about green screen in a 32 MB PDF.


.

[kenmcd]

.
Made some progress today.
This is an example of placing the {flvtransparent} tag in an article.




There are a few other things to test.
In the module, in-line CSS and JS, play-once, video click link, etc.
And I started documenting in a HowTo.
More to do . . . need sleeeeeep . . .


p.s. Where are you going to run your video?
Home page, in an article, more than one video? ?

.

[eversys]

Thanks for the video links...

I would like to have a combination of all the above. On the home page, a spokesperson walking on the page, saying a few words and then walking off. Also, within certain articles e.g. introducing a product.

Where can I download the code to test out?

[kenmcd]

.
Current testing versions attached.
- avr_fixed_div.css
- avr_fixed_div.js

AVR_Fixed_DIV_2010-08-23.zip

Do not think they are of much use without the HowTo.


.

[eversys]

Looking good. However, I think you're right... the HowTo docu would help tie up loose ends

[eversys]

Hi kenmcd - have you had any time for the HowTo docu? I have now got my green screen equipment and shot a few videos which I would like to try out on the website. I have experimented a little with your code but don't understand it 100%. Many thanks.

[eversys]

Hi kenmcd. I've been away for a while and not been able to work on this project. I'm back again - any chance of the Howto documentation so that experiment with publishing the videos.

many thanks

[kenmcd]

Hi kenmcd. I've been away for a while and not been able to work on this project. I'm back again - any chance of the Howto documentation so that experiment with publishing the videos.

many thanks

Yes, I have been doing other things too.
The HowTo is partially done.
Will take a look at this later today.
Probably have to sleep first.

.

[kenmcd]

.
Transparent Player HowTo
AllVideos-Reloaded-Transparent-Player-HowTo.chm.zip (221 KB ZIP)
http://code.google.com/p/allvideos-relo ... loads/list

Short and simple, but it should get you started.

Note: You can also use the Custom Head Tag plug-in to insert the files.
It enables you to select specific articles, menu items, etc.

Additional note: the Home link in the CHM does not work.
This is part of a much larger doc and it cannot be fixed quickly.
Just click on the top level in the left menu bar.

.

[eversys]

Many thanks kenmcd - nice doc, short but sweet

I managed to get it working using a moyea player which I renamed "jwplayer-4.3.132.swf".... Check out http://www.eversys.de/index.php?option= ... le&id=1295.

The only problem I seem to have is the positioning. I assume the positioning is defined within "avr_fixed_div.css", however, any changes I make here seems to have no impact. I have used your original code you posted on Aug 18.

Any ideas?

[kenmcd]

.
I could not figure out why the CSS was not being applied to the DIV . . .
It would probably work better if I had uploaded the correct CSS file.
(apparently I uploaded the file which was working in my plain HTML page test, not in AVR/Joomla. DUH!)

This should be the contents of the CSS file:

Code: Select all

/* AllVideos Reloaded 2 - CSS for Transparent Player fixed DIV */

/* fixed div - default is from bottom right */
#p_avr_fixed_div {
	position:absolute;
	width:593px;
	height:356px;
	bottom:0px;
/*	left:10px; */
	right:10px;
/*	top:0px; */
	padding:0px;
	background:none;
	border:none;
/*	border:1px solid #d5d5d5; */
	z-index:100;
}

The other stuff looks OK so I would expect it to work properly with this fix.

.

[eversys]

Great work - thanks a million. Positioning according to page/monitor size works great now. However, not quite sure what you mean with:

Note: You can also use the Custom Head Tag plug-in to insert the files.
It enables you to select specific articles, menu items, etc.

I would like to position according to article. With my example (http://www.eversys.de/index.php?option= ... le&id=1295) I would like the video to appear in the bottom right-hand side of the article (within the grey box). How is this possible? Also, it is possible to have the video centered horizontally and/or vertically?

Another thought... is it possible to have the video 'unload' or 'disappear' after playing or after a certain time period? I will be creating videos with persons walking on/off the screen - would be nice if afterwards when one went over the area where the video played the mouse pointer remained a pointer and not a finger - at the moment, one could theorectically play the video again and again etc. Also, the video remains overlaid over the webpage, hence, preventing the surfer from accessing the content/navigation behind it.

Thanks for your comments.

[kenmcd]

.
Custom Head Tag Plugin
When I first tested the transparent player in AVR I used this plug-in to add the JS and CSS files.
It is easier to include on multiple pages as you can select menu item ids, article ids, etc.
But it is an all or none deal.
All the CSS files and JS files you configure are on all pages specified.
So for example embedding the transparent player only on the home page, this is a very easy method.

But you want to include the transparent player on different pages, with different JS, and different CSS.
So Sourcerer is better in this case as it gives you more control, at the cost of some more complexity.

Note that you can also add the needed CSS to your template CSS file.

position according to article
The player DIV can be positioned within an article like an image or other DIV.
For example look at the images which float left or float right.
Create the CSS for the DIV in a CSS file or include it in the article.
Then add the div name to the AVR tag like we did in the above example.
Add CSS style for example #p_avr_lower_right and then put avr_lower_right in the tag.

video 'unload' or 'disappear' after playing or after a certain time period
Only way to do this is via JavaScript control of the player DIV.
SWObject.js is used to replace a specified DIV with the player (and it's DIV).
So this DIV can then be removed from the page again using JavaScript which has a timer.
Or a play-once cookie is used to keep the player from being inserted at all (on a 2nd, or 3rd visit, ...).
I have seen (and saved) some of these examples in the JW Player JavaScript forum.


Probably not able to look at any of this or test anything today.

.

[eversys]

In the theory what you mention sounds great. Unfortunately, in the practise I lack the joomla and programming experience - I am a newbie to all of this! I've experimented with the positioning according to article, but failed miserably! Not sure what you mean with:

add the div name to the AVR tag ... avr_lower_right in the tag

As for the video 'unload', I am searching through the longtailvideo site.

[daywalker0028]

The DIV code itself is probably the part of this method that is easiest to understand.

However, i'm wondering where to put the DIV code when you want to make it relative to the screen/stage?
i.e. My question is where do you put the code?

Should you insert it into the index.php or index2.php or within article's source code?
Above all, this part needs clarification.

How do you access it from a module?
I thought about using the plugin, 'All videos' (by joomlaworks), which has the toggle switch setting: Player transparency for Flash based media
This plugin enables you to insert a code (e.g. {swf}flashfilename{/swf}) which you can put into an article to play a SWF, FLV or most other video formats.

I thought about trying this approach in order to animate promotional messages to any part of the screen - without restriction on module position.
1. create a Flash file (FLA/SWF) the size of my website stage
2. create an article with the 'All Videos' Flash code in it (e.g. {swf}flashfilename{/swf})
3. create a module and place it in one of my template's top module positions.
The problem: I don't know how to access an article through a module. I know how to make a menu item link to an article, but not a module.
Therefor, I have not been able to test this method to see if it works.


How about if you insert it into the source of an article...will that make the Div relative to the article as opposed to the screen/stage?

The trickiest part of this method is how to implement or where to place the code to fit each person's particular need for how to control the position of the DIV. This is where there are the most variables.
Some may want it relative to an article, while others (like myself) want it relative to the stage.

Please clarify where should I insert the code?

[eversys]

kenmcd - have you managed to find any time to complete your documentation? I also need more clarification of how I get the movie according to an article or stage/screen. For example, I would like to have a graphic of a monitor within an article, and have my online spokesperson (i.e. the movie) walk out of the monitor and later walk back into it). Thanks again

[kenmcd]

. . . For example, I would like to have a graphic of a monitor within an article, and have my online spokesperson (i.e. the movie) walk out of the monitor and later walk back into it).

Interesting idea.
I am assuming the monitor image would be smaller than the dimensions of the video.
So if you want it to look like he/she came out of the monitor, and got larger in the process, that zoom would have to be done in the video itself, and then overlay that video partially over the monitor image with the remainder of the overlay over the article text.
Or what were you thinking?

Note that when you see a spokesperson walk-in from the side of the screen, that transparent video is already embedded there on your screen, and then the spokesperson is actually walking into frame in the video itself.

Another thought . . . I have seen a method where clicking on an image is what initiates embedding the player, and then the player is set for autoplay so the media starts automatically. This method was used for pages where there are for example 50 MP3 files listed for play - to overcome the problem with embedding 50 Flash MP3 players on page load.
So it is possible to embed the player and play the video by clicking on an image link.

I have also seen this done with an image roll-over.
That would be cool, but may not be good usability.
Hmmm . . . pretty sure I saved this example somewhere.
If I remember correctly it was on a website for an Adobe Premiere plug-in.
Roll-over the image and the video player pops-up and demos the effect.
Struck me as interesting which is why I saved it and/or saved the link.
Have to find it.

Homework
Please create an article page with your monitor image placed where you want it so I can see exactly where you want to start from, and perhaps embed the video (if you have it) at the bottom of the article so I can see it and test with it.

I have some other things to finish today, but we can play with this tomorrow or the next day.


Note: We have been talking long enough to be on a first-name basis. I'm Ken.

.

[eversys]

Thanks Ken - I'm Oliver

Yes, I would do the clever stuff using video software (btw, I have decided to use After Effects - nice price but does an amazing job!) to get the person to increase in size. A very basic and rough demo can be found at http://www.eversys.de/downloads/videos/demo1.flv. Here, the monitor is a part of the movie. Don't know if it is better to have the monitor as an image in the article or part of the movie? As an example, would be nice if I could get the spokesperson coming out of the monitor at http://www.eversys.de/index.php?option= ... Itemid=201 (this image is publisched as a module) or if this image was within the article - also cool.

It is just a question on how to position this movie within an article. I would like it to auto play on page load - the user would then have the choice of stopping (or replaying) via player controls.

The roll-over idea is also not bad - would also be nice to know how this works in order to encorporate into other pages. In fact, would be nice to know how to get this to work according to screen, article, module, roll-over, regardless...

Thanks again.

[kenmcd]

.
Hi Oliver,

Actually I have not been doing what I should be doing and have been playing with this for the last 3 1/2 hours.


Looked at the test video.
As a "marketing person" who has done a lot of public speaking over the years a couple suggestions . . .
Wear a more friendly suit. Not so dark.
Save the dark power suit for more appropriate situations. (nice suit, just not here)
Medium gray or blue "I am a friendly guy and happy to meet you" suit.
And never clasp your hands in front of you, in front of your crotch, viewers will look there.
If you do not know what to do with your hands just drop them at your sides.
It will look more natural.

There is no call to action.
Don't just say hello.
Tell them what you want them to do.
Remember my original InnovateAds demo: View transparent video overlaid on Joomla.org
They have changed the spokesperson, but the content is the same.
Except now she walks off the screen.
Before the spokesperson just stopped and stayed there.
Liked the old technique better. Requires user action.
Anyway, she says here is what we do, click on me to go to a landing page with more info.


With this kind of marketing video it would be appropriate to have it open on page load and then stay there until the user does something - clicks through, plays it again, or closes the player.
That is what they were doing.
Good marketing practices.
Notice that they have a transparent-controls player which overlays the transparent video.
I have saved a few of these transparent-controls players to try them out.

The walk-into-frame technique also seems to have another more practical purpose.
I have noticed all the players sort of flash when starting a transparent video.
Starting with an empty screen works around this issue.


I did a test previously placing a transparent player in an article.
Replicated this in Joomla: http://www.granite4less.co.uk/
That minimalist player has a fixed size which works in that context.

I am not sure that zooming out of a module is practical or even desirable.
With this type of video the point is to interrupt the user's flow and make a suggestion.


So I am going to test with:
- transparent-controls player
- with click-me video click-through link to a landing page
- embed in an article
- embed in a module

Regards,

Ken
.

[daywalker0028]

Hi kenmcd,

You seem very knowledgeable about the AVR plug-in, so I thought I'd ask you about this issue.

I followed your tutorial for creating a transparent Div and in doing so, i installed AVR. Previously, I had been using All Videos(by joomlaworks) and it worked fine for displaying SWF files.

However, once i installed AVR, the All Videos plug-in no longer works.
Nor can I get AVR to play .SWF files.

I tried the following tags in an article:

{flash width="650" height="750"}hns_map{/flash}
Does not display any SWF content; only the text itself.

{swf}home_promo_01{/swf}
Displays the JW Player controls, but this is not a video so i don't want the video controls.

My flash files are uploaded to images/stories/videos/ as per the AVR instructions.

I tried uninstalling the All Videos plugin and reinstalling it, but that didn't resolve the problem.

I hope you can offer some help.

[kenmcd]

.
The title of this thread is: Floating flash movie with transparent background
That is what this discussion is about.

Perhaps this would be informative: http://www.google.com/search?q=forum+etiquette
I would recommend particular attention to the parts about hijacking threads.

.

[eversys]

Ken, thanks for your constructive criticism - really appreciate your feedback... regarding suit & hands... I'll give it another go . BTW, the demo video I posted is only a small part of the whole movie. For our frontpage, I want a walking on/off video which basically says "Hi" and what we are about. Movie relavant to screen/page is fine, with a transparent or auto-hide player. Would be great if the movie then 'unloaded' - otherwise that part of the screen is always taken up by the transparent flash. The transparent video example you posted Joomla.org is just what I am after - walk on, auto-hide player, walk off & unload - I think it's great for simply introducing a site.

Nevertheless, I would like to create videos for other pages of the site. Here it would be nice to include some of the tips you mention - click to start, links etc. and embed the movie within an article or module - ie. interacting with the graphcis therein.

I'm playing with the possibilities - I think it's really exciting and appreciate your efforts too. Thanks

[kenmcd]

.
Hi Oliver,

Hmmm . . . regarding removing the player, the JW Player does send a JavaScript event when the video ends. That could be used to trigger removing the player. Not sure exactly how to do that or if I have saved any examples. Have to see if there is anything in the JW Player JavaScript forum.
To do this right will require having the option to have the player either stay there or be removed.

I did find my examples of click-on-image and roll-over to start the player, and remove it.
These are all actual JW Player examples from a guy who posts in their forum all the time.
Those examples may show me the way.

Also found that website with the roll-over example. [RedGiantSoftware]
It uses the same tooltip JavaScript that was used in Joomla 1.0.
And uses JW Player 4.4.
It may be possible to use the J1.5 built-in tooltip behavior to do the same thing.

But I think the first thing is to replicate the InnovateAds example.


Another suggestion regarding your introductory video . . .
I would suggest you introduce yourself at the beginning.
"Hi, I'm Oliver Lastname, CEO of Eversys . . . "
You have an advantage with not just being a paid spokesperson.
Potential clients get to meet the actual person they will be hiring.
Big plus.

Do not make it too long.
Just introduce yourself, the firm, list a few benefits of hiring you, call to action - click on me . . .
The well crafted landing page is the step 2 in the sales funnel.
Again, look at the InnovateAds example.
A longer more detailed video is on their landing page.
Then below that video are more examples and links to more detailed information, and more details videos.
Step 3 in the sales funnel.

They track each step in the sales funnel using Google Analytics and Quantserve.
You can see the tracking code.
And you can bet they track the conversions from start to customer.

.

[eversys]

Hi Ken,

thanks for the marketing feedback. Yes, getting the video more personalized is much better - thanks for the tip. Also the whole sales funnel workflow makes sense. My intro video is approx 75 seconds - is that OK or too long?

I agree - woud be great to get something to work like the InnovateAds example. Also the position according to screen, article or module would be nice.

I have also been playing around with the moyea player - I like it as it can be fully customised. Also an alternative to the JW Player?

[kenmcd]

.
75 seconds is probably too long for the intro video.
You should concentrate on the script first before filming again.
Post it if you would like some input.

Got a smaller player with transparent controls working.
Works with code in an article, or in the AVR module.

This example uses the AVR module.




Click on the video and it goes to a designated link - your website in this example.
I also have the bottom float working from code in an article.
Also have a video floating over an image in an article.

It has become clear that the best way to do this with all the required features would be a completely new module. But that is another project.


Regarding the Moyea player, don't know anything about it.
May be possible to use it if it has the right features.
You would have to tell me.


.

[eversys]

Great news Ken! Any chance of a how-to or the code - I would like to try and give it a go? Also, the player looks nice - which one are you now using... and is it also fully customizable (e.g. autohide, logo etc.)? I agree, get the code working first, then do a retake of the video. Thanks again.

[kenmcd]

.
Hi Oliver,

Yes, I will package it up with some HowTo instructions.
Have some more things to tweak and test first.

These are now done:

.
So I am going to test with:
- transparent-controls player
- with click-me video click-through link to a landing page
- embed in an article
- embed in a module
.

The transparent player controls auto-hide.
The link-from-display is configurable - URL and target.
There is a configuration option to display the last frame, or nothing at the end of the video.
A play button is displayed at the end of the video, not sure yet if I can configure that or not.
Can also set the transparency level and colors (not sure how colors work yet).
These are some of the items needing more tweaking and testing.

No logo configuration available, which seems appropriate to me with this floating ad application.
You can use the other player to display a logo when appropriate.

No progress on removing the entire player at the end of play.
More important to me is to have a play-once feature.
This is something which would be appropriate for a more specific module.
But as I said before, that is a another project.


Off to the tweaking and testing . . .


.

[eversys]

Sounds great Ken! I like the idea of removing the player/video at the end of play - just like they do at the InnovateAds demo - so that the player does not interfer with the rest of the page behind it. In some instances however, the play-once feature (according to web session or user / cookie???) or play-again button, could also be very useful. Would be nice to know how each option works and adapt where appropriate.

Good luck with your tweaking and testing and I look forward to your package - it's exciting stuff! Hopefully until tomorrow then.

[eversys]

Hi Ken, any chance of something for the weekend - even if it's just a little sample code / the things you have already done (transparent-controls player, click-me video link to a landing page, embed in an article, embed in a module)? I have a little spare time over the weekend and can 'play' a little. Thanks again.