Fade Screen and Play Flash?

[Warptweet]

I was wondering, how would I go about doing this...

 

http://www.newgrounds.com/portal/view/310851

 

You'll notice that when you press "Watch this Movie!" the screen fades into a darker color slightly, and the Flash Movie appears in the middle. I was wondering, how is this acheivable? Can anyone direct me to any tutorial/multiple tutorials that together, can help me on doing this?

 

I'm not asking you to do this for me unless you already know how, I'd rather much learn how to do it myself anyways. Thanks for any help.

[RichardRotterdam]

yeah that thing is kinda cool I tried to get that js popup running on my localhost but without luck. Basicly its a div popup with some kinda transperancy.

 

I found out that it uses the function movie_viewer.Launch() to open a popup. The url for that file is

http://js.ngfiles.com/movieviewer.js

 

maybe someone can solve this how to use that script

[RichardRotterdam]

It came to my mind that i kinda need that effect for my own site so I started to have a go my self on it. Unfortunately some things i haven't been able to fix.

1) It doesn't work in IE

2) The dialogBox won't center

3) I want the dialog box to not have a opacity

the link to my code is

http://rsh1981.phpnet.us/test/

 

it uses mootools and the code needed is as follow

html:

<style>
.translucent
{
/*filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;*/
}
/*ExampleFx.start(0, 1);*/
#dialogBox{
position:absolute;
margin-left:auto;
margin-right:auto;
background-color:#000000;
color:#FFFFFF;
height:150px;
width:300px;
border-style:solid;
border-width:medium;
border-bottom-color:#999999;
}
</style>
<button onclick="openPopup();">fade bg</button>

<div id="blockUI" class="translucent"style="opacity:0;display: none; background-color: gray;
        width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 50000;"
        onclick="return false" onmousedown="return false" onmousemove="return false"
        onmouseup="return false" ondblclick="return false">
	<div id="dialogBox"><b>Dialog Box</b></div>
         </div>

javascript

function openPopup(){
var ExampleFx = new Fx.Style('blockUI', 'opacity', { //the fact i apply the effect on el
	wait: false, //and wait: false which make the effect not waiting (very useful on the mouseout or mouseleave function...
	duration: 1000,
	transition: Fx.Transitions.linear
});
$('blockUI').setStyle('display','inherit');
ExampleFx.start(0,0.7)
}

 

[Warptweet]

Thanks for trying to help

 

I'll try your code as soon as possible, as I have access to firefox, although I do mainly use IE.

 

On newgrounds.com though, it works, even though i'm using IE, so I'd appreciate you or anyone else to pitch in and solve this mystery for us 

[ki]

so what your basically saying is that it creates a dynamic div over the rest of the content and add the part you want displayed on the dynamic div?

[RichardRotterdam]

Well that's basically it but however fading the background without fading the div with the dynamic content is harder then it seems.

[Warptweet]

Meh, I guess so.

 

If thats too hard, would somebody mind suggesting how I would make it so that my website plays a flash clip, then after around 5 seconds, it plays a different flash file?

 

The first flash clip is for an intro, then after the intro it plays the real flash game. Thanks for any help.

[ki]

is it possible to set some sort of a time for the first flash then use action script to use javascript to change the source of that flash to the one you want to play?

[Warptweet]

That would involve actionscript, this is a java forum =/

 

Also, actionscript is extremely difficult.

[ki]

Well im not that good a flash programming but couldn't you just run a javascript command through the getURL() command in action script?

[RichardRotterdam]

is it possible to set some sort of a time for the first flash then use action script to use javascript to change the source of that flash to the one you want to play?

answer yes

 

just call a javascript function from flash like

getURL('javascript:fromFlash()')

and make the javascript function fromFlash() refresh some innerHTML with document.getElementById()

 

That would involve actionscript, this is a java forum =/

uhm java!=javascript

 

Also, actionscript is extremely difficult.

 

its easier then javascript really since it supports full OOP programming and in javascript 2.0 comming in 2008, javascript will look almost identical to actionscript. also Jscript ,javascript and actionscript are all ecma scripts

[ki]

it seems like javascript has been the same forever

[RichardRotterdam]

yeah pretty much and I am so looking forward to the new OOP syntax which will make making havier Javascript applications much easier. But back to topic how the hell do you make the content fade with a dialogbox unfaded

[Warptweet]

Yes, back on topic...

 

How would we accomplish either of these?  ???

[ki]

use a for() function?

[nogray]

use a lightbox (just google lightbox) that can support iframe or html content. There are tons of scripts already made.

[RichardRotterdam]

lightbox works great for images but for none images it's not so great