I am so close!. please help me out.

Printable View

01-05-2010, 02:25 AM
howzz1854

I am so close!. please help me out.

I've spent the last couple days trying to get this working, and i've overcome so many hurdles, but this last resizing thing just have me at a bind, still can't figure it out.

basically in a nutshell, i am trying to create a HTML webpage with flash movie (SWF) as background, and as the browser width increase, the background flash will increase as accordingly. exactly like you would see here: http://www.samsung.com/us/ all while maintaining the aspect ratio.

so far i've successfully gotten the HTML to show "over" the flash background. but now the problem remains that the background flash resizes according to flash embedding's default setting which are "showall", "noorder", and "exact" fit, as some of you might know, those factory settings don't provide the best solution. "exactfit" will distort the aspect ratio, while "showall" and "noorder' scales the swf, but you get a large gap at either right side or the bottom, which makes it look very ugly and unprofessional.

i've searched through this forum and many others, it appears that the solution lies within flash's internal action script so called "stage event" scale code. but i just don't know exactly what to put in the action script, and can't get it to work right.

here is the HTML i have now: (if you view it in IE, you might get a white gap on the left, i've come to realize that the CSS margin set to auto for horizontal automatically adds that white space to the left, while FF nicely pushes the background flash to the left, but that's another problem i need to figure out tomorrow)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aquaflex</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="scripts/swfobject.js"></script>
<script type="text/javascript" src="scripts/swffit.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.play = "true";
params.scale = "showall";
params.salign = "tl";
params.wmode = "opaque";

params.allowfullscreen = "true";
params.allowscriptaccess = "always";
var attributes = {};
attributes.id = "flashContent";
attributes.align = "left";
swfobject.embedSWF("flash/slide_show_bg.swf", "flashContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
params.wmode = "opaque";

swffit.fit("flashContent",640,400);

</script>

<div id="flashContent">
<h1>Please Install Flash</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>

</head>

<body>
<div id="content">
This is a sample text
</div>
</body>
</html>

and here is the CSS:
++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++
@charset "utf-8";
/* CSS Document */

html, body {
background:#fff;
width:100%;
height:100%;
margin:0 auto;
align:left;

}

#flashcontent {
width:100%;
height:100%;
z-index:0;
margin:0 auto;

}

#content {
width: 873px;
float: center;
margin:0 auto;
z-index:2;
position:relative;

}

/*==================txt, links, lines, titles====================*/
a {color:#6ccdff;}
a:hover{text-decoration:none;}

h1 {}
h2 { font-size:2em; line-height:1.1em; font-weight:normal; color:#fff; background:url(images/icon1.jpg) no-repeat left top; padding:0 0 0 61px; margin-bottom:20px;}
h2.rss { background:url(images/rss.jpg) no-repeat left top;}
h2.icon2 {background:url(images/icon2.jpg) no-repeat left top;}
h2.icon3 {background:url(images/icon3.jpg) no-repeat left top;}
h2.icon4 {background:url(images/icon4.jpg) no-repeat left top;}
h2.icon5 {background:url(images/icon5.jpg) no-repeat left top;}
h2.icon6 {background:url(images/icon6.jpg) no-repeat left top;}
h2.icon7 {background:url(images/icon7.jpg) no-repeat left top;}
h2.icon8 {background:url(images/icon8.jpg) no-repeat left top;}
h2.icon9 {background:url(images/icon9.jpg) no-repeat left top;}
h2.icon10 {background:url(images/icon10.jpg) no-repeat left top;}
h2.icon11 {background:url(images/icon11.jpg) no-repeat left top; padding:10px 0 30px 71px; margin-bottom:0;}
h2.icon12 {background:url(images/icon12.jpg) no-repeat left top;}
h2.icon13 {background:url(images/icon13.jpg) no-repeat left top; padding:6px 0 24px 61px; margin-bottom:0;}
h3 { font-size:1.25em; margin-bottom:18px;}
h4 { font-size:1.25em; color:#adc75e; margin-bottom:6px;}
h4 a {color:#adc75e; text-decoration:none;}
h4 a:hover { color:#fff;}

.txt1 { font-size:.91em;}

.link1 { color:#fff;}
.link2 { background:url(images/marker1.gif) no-repeat right 2px; padding:0 21px 0 0;}

.sub { color:#6ccdff; border:0px; width:60px; height:22px; background:#000; }

.line-hor { background:url(images/line-hor.gif) left top repeat-x; height:1px; overflow:hidden; font-size:0; line-height:0; margin:20px 0 20px 0;}
.line-hor1 { background:#242930; height:1px; overflow:hidden; font-size:0; line-height:0; margin:25px 0 30px 0;}
.line-ver { background-image:url(images/line-ver.gif); background-repeat:repeat-y; width:100%;}
++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++
And here is the FLA source (yes, i am real desperate) http://www.digitalinvent.com/aqua/so...de_show_bg.fla
01-05-2010, 02:35 PM
howzz1854

btw, here's what i have so far, http://www.digitalinvent.com/aqua
01-05-2010, 04:20 PM
howzz1854

Is this the code i need?
================================================== =======
Stage.align = "TL";
Stage.scaleMode = "noScale";
image_mc._x = 0;
image_mc._y = 0;

_root.createEmptyMovieClip("image_mc", _root.getNextHighestDepth());

var myListener:Object = new Object();
myListener.onResize = function(){
image_mc.onEnterFrame = function(){
if(Stage.width > 800 && Stage.height > 480) {
image_mc._width = image_mc._width + (Stage.width - image_mc._width) * 0.3;
image_mc._height = image_mc._height + (Stage.height - image_mc._height) * 0.3;
}else{
delete(onEnterFrame);
}
}
}

Stage.addListener(myListener);

stop ();
================================================== =======

do i need to substitute "image_mc" with something in my scene? because right now it's not working. i have more than one movie clips in my flash, and it's a series of masking transition shots, so it's not like it's just one movie clip. this is where i can't figure out. what do i replace the "image_mc" with.
01-05-2010, 04:32 PM
howzz1854

can someone please help?

i wouldn't post if i hadn't already search the forum for answers. it's because i couldn't figure it out. if this was something like copy and paste, it wouldn't be so difficult, unfortunately, it involves some code changing to fit the project. if this was HTML, or CSS i could figure that out very easily.
01-05-2010, 09:43 PM
howzz1854

update,

with a friend's help, so far we've gotten the slide show to scale correctly all the way up until the slide show hits slide #2, then it looses the scaling and the gap on right appears.

so right now it's working, but half way.
if anyone can take a crack at this and fix the glitch maybe those in the future who want to implement slide shows, and not just a single video into the movie clip will know what to do.

here's the new updated FLA file. http://www.digitalinvent.com/files/slide_show_bg.zip

appreciate it.
01-05-2010, 11:47 PM
gparis

Quote:

Originally Posted by howzz1854

Is this the code i need?
================================================== =======
Stage.align = "TL";
Stage.scaleMode = "noScale";
image_mc._x = 0;
image_mc._y = 0;

_root.createEmptyMovieClip("image_mc", _root.getNextHighestDepth());

var myListener:Object = new Object();
myListener.onResize = function(){
image_mc.onEnterFrame = function(){
if(Stage.width > 800 && Stage.height > 480) {
image_mc._width = image_mc._width + (Stage.width - image_mc._width) * 0.3;
image_mc._height = image_mc._height + (Stage.height - image_mc._height) * 0.3;
}else{
delete(onEnterFrame);
}
}
}

Stage.addListener(myListener);

stop ();
================================================== =======

do i need to substitute "image_mc" with something in my scene? because right now it's not working. i have more than one movie clips in my flash, and it's a series of masking transition shots, so it's not like it's just one movie clip. this is where i can't figure out. what do i replace the "image_mc" with.

Yes that's 'kind of' the type of coding you need. The enterframe there is only needed for the 'smoothing' of the movement, which could be also be done via a tween class, being Adobe's Tween or Tweener.

As you have multiple mcs, you'll need to code their location in the onResize, one by one. If you have a lot, i suggest you use a function that you'll then call in the onResize.

Here's an example of multiple movies beign dynamically moved onResize:

PHP Code:

function placeNav() { this.main_menu._x = Math.round((Stage.width)/4); this.hires_fullscreen._x = Math.round((Stage.width)/1.45); nav_pics._x = Stage.width - 156; top_white._width = Stage.width; }

Then:

PHP Code:

myListener.onResize = function() { placeBorders(); //another function placeNav(); // the one i posted earlier };

etc.. place all items in percentages with Stage.width and Stage.height as references.

gparis
01-06-2010, 12:05 AM
howzz1854

Quote:

Originally Posted by gparis

Yes that's 'kind of' the type of coding you need. The enterframe there is only needed for the 'smoothing' of the movement, which could be also be done via a tween class, being Adobe's Tween or Tweener.

As you have multiple mcs, you'll need to code their location in the onResize, one by one. If you have a lot, i suggest you use a function that you'll then call in the onResize.

Here's an example of multiple movies beign dynamically moved onResize:

PHP Code:

function placeNav() { this.main_menu._x = Math.round((Stage.width)/4); this.hires_fullscreen._x = Math.round((Stage.width)/1.45); nav_pics._x = Stage.width - 156; top_white._width = Stage.width; }

Then:

PHP Code:

myListener.onResize = function() { placeBorders(); //another function placeNav(); // the one i posted earlier };

etc.. place all items in percentages with Stage.width and Stage.height as references.

gparis

i gotta be honest with you, i probably understood 30% of what you were saying.

is there anyway we could work with what we have so far. Thus far my friend have implemented the following code that seem to work, but until the second slide enters.

================================================== ===

Stage.align = "TL"; // Position the movie at top, center
Stage.scaleMode = "noScale"; // Prevent scaling (required!)

// Create the listener object
resizeListener = new Object();
resizeListener.onResize = function ()
{

var sH = Stage.height; // get reference to stage width
var sW = Stage.width; // get reference to stage height

//---------------- Adjust MovieClip with images height / width ---------------- \\
mc_effect._width = sW;
mc_effect._yscale = mc_effect._xscale;

//---------------- Adjust Masker height / width ---------------- \\
masker._width = sW;
masker._yscale = masker._xscale;

};

Stage.addListener(resizeListener);

stop ();

================================================== =======

this code seems just simple enough that i kind of get what it's doing. if you look at the updated FLA file i posted, it's actually one scene with multiple MC objects, but all the masks have been combined into a master "Masker", while the rest "MC_effect". i just feel like we're missing something there in the coding. it's like a glitch that i we can't figure it out.

i would more than happy to try your method, except i would only know just about enough to replace the "image_mc" with my "mc_effect", and i wouldn't know what to do to implement "Masker" into the rest of the code.

as far as PHP, do i just put the following code into a new file named something.php

myListener.onResize = function() {
placeBorders(); //another function
placeNav(); // the one i posted earlier
};

but where do i implement the reference for the php file.

this all seems way more complex then the simple codes that we have now, if we can get it working from where we are, i'd rather do that than using a complex PHP.

thanks.
01-06-2010, 12:48 AM
gparis

There is no php. It's just php tags to get coloring in the code samples (check this forum's guidelines)

And your friend's code look ok.

The method i proposed is just easier to read when you have a lot of re-positionning to do, that's all.

You probably have a problem with another mc because:
a) its instance name is wrong or misspelled
b) you call the mc but it's not present on that timeline's keyframe when called. For example, if you call the mc on keyframe1 and that mc is on keyframe2 it won't work.

gparis
01-06-2010, 01:20 AM
howzz1854

Quote:

Originally Posted by gparis

There is no php. It's just php tags to get coloring in the code samples (check this forum's guidelines)

And your friend's code look ok.

The method i proposed is just easier to read when you have a lot of re-positionning to do, that's all.

You probably have a problem with another mc because:
a) its instance name is wrong or misspelled
b) you call the mc but it's not present on that timeline's keyframe when called. For example, if you call the mc on keyframe1 and that mc is on keyframe2 it won't work.

gparis

so does that mean even if i use the method you suggested earlier, it still wont work if there is an error with a mc?

i went back in the FLA and checked and rechecked every file's instance, and still couldn't find any spelling error or mis-linking.

can you look at my "mc_effect" movie clip animation, maybe something there is doing something, because it's all good untill the time line moves and hits the layer 2 and layer 2 mask.

if you can do that, i'll find some way to buy you a beer. :)
01-07-2010, 07:24 PM
BMX-BG

Try this one:
http://blog.fryewiles.com/design/07-...-browser-flash

There is download link before comments.