Split screen!

[neo_philiac]

So, I have a new problem!

I have this flash movie that does certain stuff.
http://www.mntp.pitt.edu/Personal%20Pages/personal.html

Problem:

The problem is that I want to show the shape and all in a different screen (monitor) and the control and all on the other.

My thoughts:

We can split the monitor in two. We simply stretch the movie and leave the control on the left and the container for the shape (the rectangular box) on the right screen. Although I don't know how to move or put all my controls in a container and move it around freely. Also I need the coordinates respective to the right screen. I guess I need to stretch the container for the shape and then calculate my position of the shape from that 'container for the shape'.

Your Thoughts:

???


Please help! :o

Thank you

p.s. I told you Medyman I will be back!

[Medyman]

Hey Neo...

Welcome back :)

I'm not 100% sure on this one. If it behaves the say way as it does on one screen and all you're doing is splitting the display between two, then it should be no problem.

First, let me point you to this tutorial (http://gotoandlearn.com/player.php?id=31) by Lee Brimelow. It's on Full Browser Flash. While it's not directly related to your question, it goes over dynamic measurements based on the height/width of the browser.

As far as the Flash is concerned, your problem should be fairly simple to solve. The real work here is with done some math, so pull out those calculators :)

Your general plan is correct, though. You would have to stretch the stage. Then encapsulate your controls in one movieclip (or even another .swf if you want) and your animating/changing shape in another movieclip. The dynamically position them based on the height/width of the display.

You'll want to be familiar with relative paths in flash. Here (http://livedocs.adobe.com/flash/9.0/UsingFlash/help.html?content=WSd60f23110762d6b883b18f10cb1fe1af6-7ebb.html)is a little walkthrough from the CS3 docs (the same applies for earlier versions).

[neo_philiac]

Great Help ! Great resources! Here is what i have done so far.

http://www.mntp.pitt.edu/Personal%20Pages/personal.html (The new one!)


The way I have it working is that i split the screen and the I set the Appearance of my windows desktop to black. Now I can stretch the browser to the 2nd screen and just move the shape to that screen and let it do its thing. There is one problem though! the left and right of the screen is OK (since I can stretch it) but the top and bottom I loose about 1/2 inch (because of the browser menu, bar and all that !) Is there any other way I can make it all full screen on the 2nd monitor? Any thought will be appreciated. Also I am not clear on the container for the controls. Swf inside of an swf ? How does it pass the params? Is there an example?

Thank you!
:)

[Medyman]

Hey Neo...

One thing at a time:

1) Fullscreen Flash
It can't be done in the way you describe. Since it's the same .swf that you're stretching out, you can't have only the second monitor show it full screen. You can easily make the entire thing full screen though.

There are two relatively easy ways to do it: fscommand and the allowFullScreen parameter

Some links:
http://www.moock.org/webdesign/flash/fscommand/
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14280
http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html

2) .swf inside of .swf (inside of a .swf) is how must complicated Flash projects are made. With a larger trend towards Object Oriented Programming, you're getting this more and more so. Let's say we're creating a website (one menu, five basic pages). Now there will be elements that remain constant (navigation, for example) and other parts that change. So what you could (should?) do is create a "main" .swf that houses the navigation and has an empty container into which the "pages" could load. Next, you could create one .swf for each page. Lastly, import the "pages" .swfs into that empty container in your "main" .swf.

When you import an .swf into another one, it basically merges, so you're communicated with it as if it's one .swf (because it technically is).

For example, say you create a movieclip of a star (call it star_mc). Next, you encapsulate star_mc in another movieclip (lets call it sky_mc). Now, you could perform actions on star_mc with the following path
sky_mc.star_mc.ACTION. Alternately, you could import a .swf with star_mc on the stage and call it the SAME exact way.

Again, I'll point you towards Lee Brimelow and gotoandlearn(). This tutorial is on preloading External .swfs (http://gotoandlearn.com/player.php?id=27). He goes over the basic concepts that I described above. It might be easier to comprehend when you see it.

The main technique for importing .swf is via the MovieClipLoader class. Here are some resources for you to read up on it, if you wish:

http://livedocs.adobe.com/flash/8/main/00002538.html
http://flash-creations.com/notes/dynamic_loadjpg.php
* http://www.flashperfection.com/tutorials/Movie-Clip-Loader-87484.html


Hope that helps

*I don't recommend some of the techniques from LearnFlash.com video tutorials.

[neo_philiac]

Thank you again. It was very helpful. Now I have a new problem.

I have the flash the way it is:
http://www.mntp.pitt.edu/Personal%20Pages/personal.html

I am following the stretching method because it is the most convenient for me (for now at least!). Now I have the monitor located somewhere else. I want to have another instance of the same movieclip that will do exactly the same thing that tmp_mc does. But I could not do that I seems like i cannot make two movieclip in the same flash movie. So the purpose is to move the small screen replica of the tmp_mc that will move the real tmp_mc. Am I making it clear enough?

Here is a picture to make it more understandable.

(I know its making no sense from regular flash perspective but I need to do it!)

Help Please

[Medyman]

Don't worry, I know exactly what you mean. I imagine that you're doing some kind of presentation and display the right side via a project or something and also want a local view on your computer.

Right?

I had a client who did something similar once. This is something that I have from that project (just a demo, has nothing to do with the project. i wouldn't be able to show you if it did)So, this (http://img252.imageshack.us/my.php?image=coffeecuppv0.swf) is a preview. The cup is the same movieclip inside of a container. I just named the container two different things (live & preview). Then added those two movieclips to an array. Lastly, looped through the array within each onRelease function.

Here is the pertinent actionscript:

#include "mc_tween2.as"

frames = new Array(preview, live);

itsyBitsy.onRelease = function() {
for (i=0;i<frames.length;i++) {
trace("itsyBitsy");
frames[i].coffeeCup.scaleTo(20, .5, "easeOutQuad");
}
}

normalSized.onRelease = function() {
for (i=0;i<frames.length;i++) {
trace("normal sized");
frames[i].coffeeCup.scaleTo(70, .5, "easeOutQuad");
}
}

gynormous.onRelease = function() {
for (i=0;i<frames.length;i++) {
trace("gynormous");
frames[i].coffeeCup.scaleTo(100, .5, "easeOutQuad");
}
}

If you want to see the source to see how I set everything up, let me know. I'll clean it up and post it.

[neo_philiac]

Excellent example. This is exactly what I want but I am not sure how to split the same movieclip into two. I think its better if you can show me the source.

S I am assuming 'coffeeCup' is the movieclip. In my case its tmp_mc.

frames = new Array(preview, live); (what is frames ? - its the container but is it the flash frame?)


createBtn.onRelease = function() {

for (i=0;i<frames.length;i++) {
//trace("itsyBitsy");
frames[i].tmp_mc.scaleTo(20, .5, "easeOutQuad");
}
}

Am I doing the right thing?

Thank you !

[Medyman]

Excellent example. This is exactly what I want but I am not sure how to split the same movieclip into two. I think its better if you can show me the source.

S I am assuming 'coffeeCup' is the movieclip. In my case its tmp_mc.

frames = new Array(preview, live); (what is frames ? - its the container but is it the flash frame?)


createBtn.onRelease = function() {

for (i=0;i<frames.length;i++) {
//trace("itsyBitsy");
frames[i].tmp_mc.scaleTo(20, .5, "easeOutQuad");
}
}

Am I doing the right thing?

Thank you !

Sure. Here (http://www.mediafire.com/?b5fyd1hoikc) is the source. It'll probably ask you to replace some fonts or something, but the rest should work.

Frames...eh, maybe I should have chosen a more generic name. Its just the name I chose for the variable. You could call it bananas for all it matters.

frames, in my case, is an array that holds the instance names of my containers. My containers are live and preview.

[neo_philiac]

OK I am back again ! I have a math problem!

I have everything figured out the way I want it.

Take a look at the picture. So the Screen on the left is exactly 4 times smaller than the other monitor (1280/4 ; 1024/4).

All I need to do is to coordinate the movement. Both are initialized in the middle when created. So if I move the small line in the box the big line will move in the bing box on the right. So on drag what is the equation for the position of the big line? Please keep in mind that the whole thing is a big stage!

Please help!!!!

[Medyman]

For this you would have to use an onEnterFrame event.

So something like this:

var xPos:Number = new Number()
small.onPress = function() {
this.onEnterFrame = moveBig;
xPos = this._x;
}

function moveBig() {
big._x = (small._x - xPos)*4
}

small.onRelease = function() {
delete this.onEnterFrame;
}

It should be fairly self explanatory. Let me know if you have any specific questions.

[neo_philiac]

This is what I did, but whats happening ?




var xPos:Number = 0;
/* onPress function - activates when you click on the rectangle */

tmp_mc2.onPress = function() {
this.startDrag();
this.onEnterFrame = moveBig;
xPos = this._x;


}

/* onRelease function - activates when you release the mouse */

tmp_mc2.onRelease = function() {
this.stopDrag();

//delete this.onEnterFrame;


//Coordinates

text_mc.text ="X = " + int(tmp_mc._x - Stage.width + 1280) + " ; Y = " + tmp_mc._y;

}


function moveBig() {
tmp_mc._x = (tmp_mc2._x - xPos)*4
}



Here is the swf


http://www.mntp.pitt.edu/Personal%20Pages/personal.html

Thanks

[Medyman]

Hmm...I was close. My math was just a little bit off.

Try this (I assumed you needed to the same behavior in the y direction, so I added it):


var xPosSmall:Number = new Number()
var xPosLarge:Number = new Number()
var yPosSmall:Number = new Number()
var yPosLarge:Number = new Number()

tmp_mc2.onPress = function() {
this.onEnterFrame = moveBig;
xPosSmall = this._x;
xPosLarge = tmp_mc._x;
yPosSmall = this._y;
yPosLarge = tmp_mc._y;
this.startDrag();
}

function moveBig() {
tmp_mc._x = xPosLarge + (tmp_mc2._x - xPosSmall)
tmp_mc._y = yPosLarge + (tmp_mc2._y - yPosSmall)
}

tmp_mc2.onRelease = function() {
delete this.onEnterFrame;
this.stopDrag();
}

Let me know if you have any questions.

[neo_philiac]

Excellent! It works! Thank you!

I wanted to rotate the shape or line, I am currently using


rot_Button.onRelease = function() {

var i = 0;
while (i<=5000){
tmp_big.rotateTo(i,3,"linear");
tmp_small.rotateTo(i,3,"linear");
i +=1;
}

}


The problem with this is that it hangs if i put 5000 iteration. If wanted to do a forever rotation , what method should i use?

I tried


rot_Button.onRelease = function() {
mover();
}

function mover() {
if (count<1) {

tmp_small.rotateTO(1,3,"Linear", mover);

count++;
}
else {
count = 0;
}
}

But it doesnt work!

Thanks again!

[Medyman]

The way to do it would definitely be the way you posted in your second example. But I think you're logic is off.

First, are you declaring count somewhere else (i.e. does it have a value before coming into this function)?

What you're saying here is if count is less than 1 (meaning 0, presumably), run the rotation and increase the count by 1. Otherwise, count equals 0. So, at most, the mover function will run once.

You don't even need to add a counter variable for this. If you want to create perpetual rotation, just declare the mover function with a call back on itself.

Also, your rotateTo syntax is off.

The correct styax is:

MovieClip.rotateTo(degree rotation, time, animation type, delay, callback);

So you want something like this:


tmp_small.rotateTo(360, 1, "linear", 0, mover);
This would complete one 360 deg. rotation in 1 second (and repeat).