Updated 02.09.03

Download the Open Source Here

Updated 02.09.03Odd Shape (or Transparent) Window Development Using a MIAW
Provided by Troy Hipolito

1. Description
2. Graphical Elements
3. Movies
4. Creating Button Behaviors

Description
This tutorial will go over developing odd shaped windows. The out line of the avatar and other elements will like "cutout shapes". These "cutout shapes" will change depending on the elements needed at the time.

Graphical Elements
The graphical elements will be created in 2 sets. These will be the normal graphics (gifs or jpgs) and the outline graphics (1 bit, bit map).

The normal graphics will consist of 3 on and 3 off buttons, an avatar and 3 different shapes. For simplicity reasons we are just going to use the entire avatar and not build it with individual parts. Saving them out to graphics is really self-explanatory.

The outline graphics are what we are going to create a mask out of (there are only 3 total and not split up into different parts). This will produce different odd shape windows.

Instructions to create a 1 bit, bit map from Photoshop7:
1) In Photoshop7, after creating you graphics, flatten your image (save a back up copy first)
2) Go to Select, Load Selection.
3) Fill it with black.
4) Go to Image, Mode Grey Scale
5) Go to Image, Mode Bit Map
6) File save as BMP (make sure that 1 bit is selected)

Movies
1) Before we start on any code we will need to under stand the relationships of the different movies we are going to use.

There will be only 2 different movies for this exercise. The main movie could hold the information needed for things like preferences (As developed in Part 1), the outline graphics and other items. The main movie will launch the transparent MIAW (Movie In A Window). From there you will be able to change the odd shapes of same MIAW.

I will have to give most of the credit Director-online (I was inspired by there articles concerning this matter). Much of the general information can also be found there. So, I will only briefly go over MIAW's. The Director-Online tutorials should help fill in any gaps.
Director-Online tutorials that pertain to what we are doing can be found at:

"Non-Rectangular MIAWs" http://www.director-online.com/buildArticle.cfm?id=332
"Dragging A MIAW" http://www.director-online.com/accessArticle.cfm?ID=275

Basically, we are expanding on the "Non-Rectangular MIAWs" article from Director-Online.

The "main.dir" movie is only 1 pixel tall and wide and uses a grey background. Why do you ask? Well the stage will be set to visible = FALSE. This means that it will be turned invisible. However there will be a second where you will see the stage before this happens. So it is best to make it as small as possible (1 pixel) and a neutral color like grey. That way it is not noticed at all.

OK - The "main.dir" contains 4 cast members, "Movie scripts", "halt", "open MIAW" and "shape1"

"Shape1" will be used for the first window shape. All the shapes (including "shape1") are included in the MIAW ("miaw.dir")

global gMyMiaw

on openMiaw

set the visible of the stage = FALSE -- make the stage invisible
gMyMiaw = window("miaw") -- choose file for MIAW contents
gMyMiaw.windowtype = member("shape1") -- set windowtype to bitmap member
open gMyMiaw -- open MIAW

end openMiaw

This is probably self-explanatory - but I will go through it any way.

When the "openMiaw" is accessed through a mouse click (like in the "open MIAW" cast member) it makes the stage invisible, selects the *MIAW, window type, then opens it. "Shape1" is the 1 bit bitmap.

* The name does not care if the file name ends with a .dir, ,drc or .dxr. It will just look for the name before the extension.

When the move "main.dir" is played it automatically opens up the MIAW.

2) The MIAW will contain the file, yes you guest it, "miaw.dir".

This movie contains 16 cast members, "shape1", "shape2", "shape3", "changeShapesAndButtons", "dragMiawBehavior", "halt", "dragShape", and "button1" through "button3" as well as the "Over" states.

"Shape1", "shape2", and "shape3" are the 1 bit bitmaps we are going to use as transparent windows. The "Movie scripts" is where the magic happens.

The "dragShape" is only a shape area used so the individual can drag the MIAW around. The behavior attached to it however allows its functionality. We will go through this a little later.

What we are going to do now is try to change the shape of the MIAW. In other words use the different outlines in the main movie to create different kinds of transparent window with out leaving the current MIAW.

Creating the "changeShapesAndButtons" Behaviors
The "changeShapesAndButtons" behavior has several purposes.
We need to create 1 behavior that can be attached to 3 different buttons or graphics.

The first part of the script sets up the button role over states. I have names the buttons, "button1", "button1Over", "button2", "button2Over", "button3" and "button3Over". In the script below the pMemberNormal will refer to button1, button2 or button3. The pMemberRollover adds the name button1, button2 or button3 then adds the text "Over". The result is pMemberRollover = button1Over, button2Over or button3Over. The specific graphic it represents will depend on which sprite the mouse has entered. Of course on mouseLeave it returns to the original member.

The second part is doing 2 things. Changing the shape of the MIAW and telling it to go the marker. If you notice that there are several "tell the stage" properties wrapped in the script.

global gMyMiaw

property pMemberNormal, pMemberRollover

on beginSprite me
pMemberNormal = sprite(me.spriteNum).member
pMemberRollover = member(pMemberNormal.name & "Over")
end

on mouseEnter me
sprite(me.spriteNum).member = pMemberRollover
end

on mouseLeave me
sprite(me.spriteNum).member = pMemberNormal
end

on mouseUp me

if sprite(me.spriteNum) = sprite(4) then
gMyMiaw.windowtype = member "shape1"
go to "shape1"
else if sprite(me.spriteNum) = sprite(5) then
gMyMiaw.windowtype = member "shape2"
go to "shape2"
else if sprite(me.spriteNum) = sprite(6) then
gMyMiaw.windowtype = member "shape3"
go to "shape3"
end if

end mouseUp

Dragging the MIAW
The dragging of the MIAW was provided by JRDR he can be contacted at jrdr@hotpop.com.
I have found a number of sets of different code that can do the same thing, however I have found out that many did not work in Director 8.5 or just to much text. I like simple. Make it EZ and make it work well.
Thanks JRDR for putting this code up as open source.

-- Coded : JRDR
-- 01|10|02
-- jrdr@hotpop.com
-- Free to use, but e-mail me so I can see your work. Thanks
-- ********************************************************************************
-- Just drop this into any sprite an then use the sprite to drag the current window
--
-- Good: relocate the window as fast as possible
--
-- Bad : pause all handlers and sounds BUT NOT THE TIMER. So, if you use it with a
-- time based game, may you'll dead when release the click :)
-- Create window trails, because the OS have no time to redraw the screen
-- ********************************************************************************
--
-- NOTES: I was testing the UPDATESTAGE at the end of the repeat loop but I didn't so
-- any difference. If you think it is useful uncomment the line.

on mouseDown me
repeat while the mouseDown
A = the activeWindow.rect
N = the mouseLoc - the clickLoc
(the activeWindow).rect = rect(A[1]+N[1], A[2]+N[2], A[3]+N[1], A[4]+N[2])
-- updateStage
-- tell the stage to updateStage
end repeat
end

Just attach this to any sprite with in the MIAW and Pow,Bang Biz, Puf!

Well you may ask your self what you would use this for. If I need to help you then you have a serious lack of imagination. Just kidding :) - let me lay out a few ideas.

Having the ability to change shapes will allow for unique interface development, pop up menu systems (tools, LDMs), borderless MIAWs, user enabled customization and stuff like that.

Have fun.