?
Solved

How to resize and flash stage and selected movie clips or symbols with browser?

Posted on 2010-01-11
10
Medium Priority
?
1,018 Views
Last Modified: 2013-11-11
I am attaching an FLA that has a bit of actionscript regarding resizing. What I am trying to achieve is:

1. Proportionally resize the stage and symbol or movie clip (parea) as well as the symbol (border) according to the browser.

2. Have minimum/maximum resize variable? (May not be 100% necessary.)

3. The two buttons on the bottom, to stay the same (not resize) but keep position in relation to the stage resize?

I have looked at liquid flash but I don't need the stage to be set at 100%.

Any assistance would be greatly appreciated. Thank you!
test.fla
0
Comment
Question by:Apari
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
  • +1
10 Comments
 
LVL 12

Expert Comment

by:sajayj2009
ID: 26290347
fscommand("allowscale", true);
0
 
LVL 19

Accepted Solution

by:
moagrius earned 1000 total points
ID: 26290958
the fla errors out:  full_ssp is not defined, and i'm not sure what you'd want that to be referencing.

but, you've got the basic idea.

since full_screen, for example is at 940 and the default stage width is 960, it's obviously 20px from less than the stage size, so you'd just say in your resize handler:

full_screen.x = sw - 20;

and if parea is 940 pixels wide, and the default stage width is 960, again it's 20px less wide than the new stage width, so:

parea.width = sw - 20;

if you want to put a minimum/maximum, you can do just that:

  var sw:Number = stage.stageWidth;
  var sh:Number = stage.stageHeight;
  sw = Math.min(sw, 1000); // 1000 being the largest you'd want it to go
  sw = Math.max(sw, 500); // 500 being the smallest you'd want it to go

as you can see, it's not really a coding issue - you have the code pretty much in place.  just think of the logic for each item and apply that using the above examples.
0
 

Author Comment

by:Apari
ID: 26291019
Hi moagrius,

Thank you so much for your response. I do have a question, I was thinking about it before and I don't know whether I got myself confused but:

All the examples I've seen of resizing or liquid flash seem to be based on the setting that the stage is 100% (height and width).

If the default stage is 960px x 660 for example if I was looking at it in a smaller resolution, would the stage resize to smaller than 960px x 660px. I think I'm just a little confused on the logic since most of the examples of resizing, resize an instance on a 100% stage.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:Apari
ID: 26291040
Oh, I think I've confused myself. I was expecting that if an swf was embedded into a page say eg. at 960 x 660 if the browser was resized or viewed in a lower resolution it could resize, but if it's embedded at that size, it couldn't resize on an html page without being 100% w/h?
0
 
LVL 12

Expert Comment

by:sajayj2009
ID: 26291087
i hope this is for 100% x 100%
0
 
LVL 19

Assisted Solution

by:moagrius
moagrius earned 1000 total points
ID: 26294520
if you're talking about monitor resolution, then no - that won't trigger a resize, and even if it did, a pixel is still a pixel, so nothing would happen.

it doesn't technically have to be 100% by 100% - but it does need to be a percent (say 50% by 75%) - otherwise the flash object itself would never resize within the html document container.
0
 
LVL 14

Assisted Solution

by:Designbyonyx
Designbyonyx earned 1000 total points
ID: 26294945
If you embed a flash movie using percentages... lets just say 100% x 100% for demonstration... then the STAGE will expand according to the dimensions of the browser window.

HOWEVER! This does not mean that the objects (text, graphics) inside your flash movie will scale.  If you set scalemode = true, then the objects WILL SCALE proportionally.  If you don't set salign, then the movie will be centered.  If you set salign to tl (top left), then the movie will be scale from the top left corner.  Look at this demo site I did years ago with scalemode = true:

http://digigraph-design.com/midget/homepage2.php

An important thing to notice is the stage is something like 960 x 500 (can't remember, don't have original FLA anymore).  That background graphic is LARGER than the stage, hanging off each side by about 250px or more.  The entire stage remains visible no matter what size the browser is.  All dead space is filled in by an overhanging graphics (like my example) or the background color of the stage.

Now here's an example with scalemode = false, and salign = tl:

http://hermosainc.com/

This is another site I did years ago... and this is a complete opposite scenario from the one above.  Here, you notice that the graphics never scale... and site is centered?!  Even though I specified scalemode = tl (top left), I am using actionscript to keep the movie centered.  You will also notice that when the browser gets too small, the browser scrollbars appear.  This is done using javascript.  When you use percentages, the flash movie is ALWAYS smaller than the browser.  In this scenario,  I am dynamically setting the width and height of the SWF between percentages and fixed pixel width based on the size of the browser.  When the browser gets too small, I set the movie to a fixed pixel width... allowing the movie to become LARGER than the window... thus triggering the browser scrollbars.

I must apologize for the code in these two examples.  I was not much of a programmer back then and am not too proud to show those... but they serve as good examples.

~Ryan Wheale
0
 
LVL 14

Assisted Solution

by:Designbyonyx
Designbyonyx earned 1000 total points
ID: 26295360
OK, now to answer your question.

First off, you will want to embed your movie using percentages, set scalemode to false, and set salign to tl (top left).

1) I advise you put all your graphics and everything INSIDE parea.  Then you will need to modify your code a little bit:

parea.width = sw - parea.x * 2;
parea.height = sh - parea.y * 2;

For the border, you can use a similar syntax, except subtract an additional 50 px or so
border.width = sw - border.x * 2;
border.height = sw - border.y * 2 - 50;

Then for the buttons, you will want to do something like:
(see code below)

2) If you want to have min and max values, you will need to do that in actionscript or javascript.  A simple if/else is all you need.  I recommend javascript because you can trigger the browser scrollbars.  See my example from above to see an amateur way of doing this:

http://hermosainc.com/
(view source)

3) See code below on how to do this.  The code is modified from the file you attached.

import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resizeHandler);

var sbOffsetX:Number = stage.stageWidth - skip_but.x;
var sbOffsetY:Number = stage.stageHeight - skip_but.y;

var fsOffsetX:Number = stage.stageWidth - full_screen.x;
var fsOffsetY:Number = stage.stageHeight - full_screen.y;

// initialize sizing
resizeHandler (null);

function resizeHandler (event:Event):void {
  var sw:Number = stage.stageWidth;
  var sh:Number = stage.stageHeight;
  parea.width = sw - parea.x * 2;
  parea.height = sh - parea.y * 2 - 50;
  
  skip_but.x = sw - sbOffsetX;
  skip_but.y = sh - sbOffsetY;
  
  full_screen.x = sw - fsOffsetX;
  full_screen.y = sh - fsOffsetY;
}

Open in new window

0
 

Author Comment

by:Apari
ID: 26299431
Okay, I think I understand now.

If the swf is embedded using fixed dimensions, it won't resize.

I wasn't thinking of triggering a resolution change. I was just thinking of different browser resolutions and say for example if I have a browser window open but it is not maximised that the document stage could resize, as in become smaller (up to a certain point), and then if the window was maximised, the document stage would resize, as in become larger.

I think that's where I was getting confused, I was assuming that the stage could resize regardless of what dimension it was set at.

I do know that the depending on where objects are that a resize would affect them.

Thank you so much for all your help, it's easy to get confused if you recognise certain rules/logic.
0
 

Author Closing Comment

by:Apari
ID: 31675915
Excellent, I feel that my question was little bit ignorant, but the Experts who assisted still took time to explain and help me understand in a professional manner.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Here are some practices and techniques that can be adopted into your Flash/Flex application development process. Note: Not all "performance tips" provide an immediately-recognizable benefit.   This article does not include timing validation data,…
The last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question