| Dear
Friend, Hello
& welcome back to Firewire, your friendly
guide to the exciting world of web-design & web-solutions! This
newsletter covers publishing ‘Resizable content Window’ on click of
a menu button. Some web site content varies in size horizontally as well as vertically
& keeping full size content windows displays empty space if content size is
less. Using Flash it is possible to adjust the size of the content window based
on the text size. For e.g. About Us will have long lines of text, where in Client
Names will have short lines of text. This tutorial will help you to create a ‘Resizable
content Window’, where in on click of a button text window will animate &
resize itself based on dimensions you have entered. Here
we are going to use the jumping 3D box menu effect which we have covered in our
previous newsletter. Click
here to download the source (.fla) file. |
1.
Create a new movie with Dimensions of
418px. X 350px. and fps =
24 with white color as Background Color.
2. Save the flash
file as resizable_window.fla
1. Open the menu_effect.fla
2. Select the whole content on the stage and choose Edit
> Copy
3. Go back into resizable_window.fla and
choose Edit > Paste in Place
4.
Remove the stage outlines given in the menu_effect.fla
5. Shift the whole menu slightly upwards so that we get enough place
to animate the resizable window
6. Rename the layer as 'Menu
Effect'
7. Once again go into menu_effect.fla
8.
Select frame 1 on Actions layer.
9. Choose Edit
> Copy Frames
10. Go back into resizable_window.fla
and choose Insert > Layer
11.
Select frame 1 on newly added layer and choose Edit
> Paste Frames
1. Select Menu Effect
layer and choose Insert > Layer
2. Rename the newly added layer as 'Window'
3. With the
help of 'Rectangle' tool create a vertical
shape of dimensions Width 1px. X Height 100px.
4. Select the shape and
choose Insert > Convert to Symbol
5. Convert it into a Movie Clip with top
left registration point selected and name it as 'winLeft'
6.
Select the winLeft movie clip on the stage and choose Window
> Properties to open the Properties
panel
7. In the Properties
panel type the Instance Name as
'winLeft' 8.
With the help of 'Rectangle' tool create a
horizontal shape of Width 100px. X Height 1px.
9. Select
the shape and choose Insert > Convert to Symbol
10. Convert it into a Movie Clip with
top left registration point selected and name it as 'winTop'
11. In the Properties panel type the Instance
Name as 'winTop'
12. Similarly create 1 more horizontal
shape of same dimensions and convert it into Movie
Clip named as 'winBottom' and give Instance
Name as 'winBottom'
13. Like winLeft movie clip,
create one more vertical movie clip named as 'winRight' and give
Instance Name as 'winRight'
14. Select all 4 movie clips on the stage and choose Insert
> Convert to Symbol
15. Convert it into a Movie
Clip with top left registration point
selected and name it as 'window'
 |
16. In the Properties
panel type the Instance Name as
'window'
17. Double click the window movie clip to
go inside it.
18. Select the winLeft movie clip on the stage and
choose Window > Align
19. To match
the registration point of winLeft movie
clip with the window movie clip, click the align tabs as shown
in the image.
1.
Come back into Scene 1
2. Insert a new layer above Window
layer and name it as 'Functions'
3. Select frame 1
on Functions layer and choose Window > Actions
4. In the Actions panel type the following
actions
| function
setPos() { | | | ltPos
= window.winLeft._y; | | | window.winTop._y
= ltPos; | | | window.winRight._y
= ltPos; | | | |
| | ltWidth
= window.winLeft._width; | | | window.winTop._x
= ltWidth; | | | window.winBottom._x
= ltWidth; | | | |
| | ltHeight
= window.winLeft._height; | | | window.winRight._height
= ltHeight; | | | |
| | tpWidth
= window.winTop._width; | | | window.winBottom._width
= tpWidth; | | | |
| | window.winRight._x
= tpWidth; | | | window.winBottom._y
= ltHeight-window.winBottom._height; |
| } | |
| | | function
resizeWin(speed, widthNew, heightNew) { | | | width
= window.winTop._width; | | | wDist
= widthNew-width; | | | window.winTop._width
= width+wDist/speed; | | | |
| | height
= window.winLeft._height; | | | hDist
= heightNew-height; | | | window.winLeft._height
= height+hDist/speed; | | } | |
| | | function
setWinPos(speed, xposNew, yposNew) { | | | xpos
= window._x; | | | xDist
= xposNew-xpos; | | | window._x
= xpos+xDist/speed; | | | |
| | ypos
= window._y; | | | yDist
= yposNew-ypos; | | | window._y
= ypos+yDist/speed; | | } | |
// function
setPos()
This function is created to set X and Y positions
as well as height and width of window outlines
// ltPos
= window.winLeft._y;
The ltPos variable stores the value of Y position of the
left outline (winLeft) of window
// window.winTop._y
= ltPos;
The value
of ltPos is assigned to the Y position of top outline (winTop) of window
// window.winRight._y
= ltPos;
The value
of ltPos is assigned to the Y position of right outline (winRight) of window
// ltWidth = window.winLeft._width;
The ltWidth
variable stores the value of Width of the left outline (winLeft) of window
// window.winTop._x
= ltWidth;
The value
of ltWidth is assigned
to the X position of top outline (winTop) of window
// window.winBottom._x
= ltWidth;
The value
of ltWidth is assigned
to the X position of bottom outline (winBottom) of window
// ltHeight = window.winLeft._height;
The ltHeight
variable stores the value of Height of the left outline (winLeft) of window
// window.winRight._height
= ltHeight;
The value
of ltHeight is assigned
to the Height of right outline (winRight) of window
// tpWidth = window.winTop._width;
The tpWidth
variable stores the value of Width of the top outline (winTop) of window
// window.winBottom._width
= tpWidth;
The value
of tpWidth is assigned
to the Width of bottom outline (winBottom) of window
// window.winRight._x
= tpWidth;
The value
of tpWidth is assigned
to the X position of right outline (winRight) of window
// window.winBottom._y
= ltHeight-window.winBottom._height;
The value of equation 'ltHeight-window.winBottom._height'
is assigned to the Y position of bottom outline (winBottom) of window
// function
resizeWin(speed, widthNew, heightNew)
This
function is created to resize the window according to the values passed in the
parameters. i.e.speed,
widthNew, heightNew
// width
= window.winTop._width;
The width variable stores the value of Width of the top outline
(winTop) of window
// wDist = widthNew-width;
This action determines the difference between the new width
and old width and stores it into variable named as 'wDist'
// window.winTop._width = width+wDist/speed;
This action determines the new width of the top outline of
window and generates speed in the motion of resizing window animation
// The above shown 3 steps are very similar for determining
the height of left outline (winLeft) of window
//
function setWinPos(speed, xposNew, yposNew)
This
function is created to set X and Y position of the window according to the values
passed in the parameters. i.e.speed, xposNew, yposNew
// xpos
= window._x;
The
xpos variable stores the X position of window
// xDist
= xposNew-xpos;
This action determines the difference
between the new X position and old X position and stores it into variable named
as 'wDist'
//
window._x = xpos+xDist/speed;
This action determines the new X position of window and generates
speed in the motion of resizing window animation
// The
above shown 3 steps are very similar for determining the Y position of window
5. Select the
window movie clip on the stage and choose Window
> Actions
6. In the Actions panel
type the following actions
| onClipEvent
(load) { | | | this._alpha
= 0; | | | speed
= 2; | | | widthNew
= 380; | | | heightNew
= 150; | | | xposNew
= 18; | | | yposNew
= 130; | | } | |
| | | onClipEvent
(enterFrame) { | | | _root.resizeWin(speed,
widthNew, heightNew); | | | _root.setWinPos(speed,
xposNew, yposNew); | | | _root.setPos(); |
| } | |
// When window movie clip
loads, the initial alpha value of the movie clip is set to '0' as well as the
value of the variable 'speed' is set to '0' .Similarly other variables are also
initialized here.
// On
'enterFrame' action, the functions we have initialized earlier are getting called.
|
