This Scrippy places a graphic inside the "message area" so that the text will wrap around the graphic, but it also adds positioned containers behind and in front of the graphic so that scrolling backgrounds can be added for the rain and clouds.
You can of course use a transparent gif to force the text wrapping, and there are times when that may be the best way to go. You'd have to create one that would be the exact size of your largest container and insert it in the message area. However, for a stationery like this one, it's really just as EASY to use the actual graphic! :O) This same procedure can be used for any message area, but this one happens to be for an automatically expanding message area. For instructions on how to create an automatically expanding message area, click HERE.
The first thing I did was create the 4 containers for the multiple frames. For instructions on how to create multiple frames, click HERE.
Next, I inserted a Message Area. I want to define the margins for the Message Area so that they are located 20 pixels inside the inner most container. To do that I looked at the edge settings for that inner most container, which is the 4th one on the control panel in this example, and I see that they are set at 40 pixels from the edges on all sides. To set my Message Area margin 20 pixels inside that container, I add 40 + 20 which equals 60 and that's the number I enter for the Message Area margins .. left, top, right and bottom.
The next thing I did was insert the transparent graphic "inside" the message area. (Click Here for complete instructions on inserting graphics in message areas). I set the top and the left margins for the graphic at "zero" so that the graphic is tucked up at the top, left hand corner of my Message Area. Then I set the right and bottom margins around the picture at 15 pixels so that the text moves away from the graphic a bit. Finally I selected to have the text flow to the right of the picture.
Next, I want to create a container for the scrolling clouds and rain behind the framed girls. I want that container to be INSIDE the inner most container, so I highlight that inner most container, which is the 4th container down on the control panel, and insert another positioned container making it the exact same size as the framed girls graphic in the message area, 328 pixels x 359 pixels. Since my message area margins are set at 20 pixels from the edge of the inner most container, I want this new positioned container to be in exactly the same location .. 20 pixels from the edge of the inner most container. To do that, I set the horizontal position for the container at 20 pixels from the left and the vertical position at 20 pixels from the top. Now the new container is exactly behind the graphic of the framed girls. Next I added the scrolling backgrounds for the rain and clouds.
Finally, I want some rain falling over the top of the girls, but only inside the pretty frame surrounding them, not over the frame itself. To do this, I inserted a container below the Message Area on the control panel and made it the same size as the inside of the pretty frame, which happens to be 281 x 312 pixels. Next I need to position it over the graphic and with a little trial and error, I finally got it located exactly inside the pretty frame, setting the horizontal and vertical layout positions at 82 pixels from the left and 82 pixels from the top.
The reason this will stay positioned right where you want it, regardless of the width of the viewer's preview pane is because you've set the location from a known point .. that being X number of pixels from the top and bottom, which is the same thing you did for all the containers.
NOTE: Remember that Scrippy displays objects in the order they are listed on your control panel. In this example you'd want the clouds and rain container first, then the Message Area with the graphic, and finally the container for the rain falling on top the graphic.
