Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Advanced full flash site - Part 2

21.6.2007, 18:11    Total views: 110142

Part 2 - Flash site loading

You will see how to load flash site after preloader animation. You will also learn how to load home page and how to aniamte it. 

Step 1

Create a new layer above the preloader animation layer and name it area for content.





Step 2


Click on frame 10 of layer area for content and press F6 key.

Step 3

After that, take the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #BAF088 and draw a "rectangle" over the part of preloader that we have decreased in step 24 in Part 1.





Step 4

Click on frame 18 of layer area for content and press F6 key. Then, take The Free Transform Tool (Q),click on the rectangle, press ana hold down Alt + Shift key and enlarge the rectangle to be the same dimension as the width of background (W=450px). See the picture below.



Step 5

Take the Selection Tool (V) and click once on the rectangle that you just enlarged and go to the Info Panel (Shortcut key: Ctrl+I). Then, if you don't hit the width dimension to be 450px, set it now to be 450px. See the picture below.



Step 6

After that, while the rectangle that you just enlarged is still selected, go to the Align Panel (Ctrl+K) and choose the following options:

1.Make sure that the Align/Distribute to Stage button is turned on,
2.Click on the Align horizontal center button and
3.Click the Align vertical center button.



Now, you have aligned the rectangle with the background.

Step 7

Click on frame 10 and go to the Properties Panel (Ctrl+F3) below the stage. Then, for Tween choose Shape. See the picture below.





Step 8

Click on frame 26 and press F6 key.

Step 9

While you're still on frame 26, take again the Free Transform Tool (Q), press and hold down again Alt+Shift key and do the following:



After that, press and hold down just Alt key and do the following:



Step 10

Click on frame 18 and go again to the Properties Panel (Ctrl+F3) below the stage. Then, for Tween choose Shape. See the picture below.





Step 11

It's time for Header. First of all donwload my image that I will use for this site.



Step 12

Create a new layer above the area for content layer and name it header.

Step 13

Click on frame 20 of layer header and press F6 key. Then, choose File > Import > Import to Stage (Ctrl+R) and Import my image.

Step 14

After that, place that image  on the top of background. See the picture below.



Step 15

While the image is still selected, press F8 key (Convert to Symbol) to convert this image into a Movie Clip Symbol. See the picture below.



Step 16

Click on frame 26 and press F6 key.

Step 17

Go back on fram 20, take the Selection Tool (V) and click once on the image (header) to select it. After that, go again to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Advanced in it, click on Settings button and make the adjustments as follows:



Step 18

Right-click anywhere on the gray area between the frame 20 and frame 26 on the timeline and choose Create Motion Tween from the menu that appears.




Click on frame 200 of layer header and press F5 key

Step 19

It's time for content on the first page (home page).Create a new layer above the header and name it content.

Step 20

First of all, we will prepare the content and after that, we will animate it. So, click on frame 40 of layer content and press F6 key.After that, type any text, place any image below the header (in place for content) - make the concept of content. See the picture below.



Step 21

Create a new layer above the content layer and name it content animation. After that, click on frame 26 of layer content animation and press F6 key. Then, take the Rectangle Tool (R).In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #509313 and draw a "rectangle" about 8x15 px and place it on the top left corner of content area. See the picture below.



Step 22

Click on frame 30 and press F6 key. Then, take the Free Transform Tool (Q), press and hold down Shift key and do the following:



Then, click on frame 40 and press F6 key. After that, take again the Free Transform Tool (Q), press and hold down Shift key and do the following:



Step 23

Click on frame 45 and press again F6 key.Then, do the following:



Step 24

Click on frame 55 and press F6 key. Then, do this:



Step 25

Click on frame 56 and press F7 key (Blank keyframe).

Step 26

Go back on frame 26 and go to the Properties Panel (Ctrl+F3) below the stage. Then, for Tween choose Shape. Do that also for frame 30,40,45 and 50. See the picture below.



Step 27

Click on frame 100 of layer header and press F5 key. After that, click on frame 65 of layer content and press also F5 key.

It's time for Menu and menu animation. Click here to go on part 3.

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 310977

2. High-tech city animation
Total views: 274205

3. Water effect
Total views: 237451

4. Photo slide show
Total views: 221126

5. Special Picture Effect
Total views: 190885



Related links

dans le cadre de leur collection automne / hiver 2008 de la ngc, marque japonaise a ainsi une fois de plus a porter.ADIDAS TUBULAR WOMENils ont travaillé sur l'ensemble des trois pieces et # 8211; un sac fourre - tout, une valise et un porte - clés / carte de voyage.ils présentent une gamme de produits classiques.le fait qu'elles offrent a la plupart d'entre eux en orange est un bon contraste.  via honeyee.ADIDAS ORIGINALS NMDon peut s'attendre a une libération de ce produit dans les semaines a venir.ADIDAS TUBULAR SCHUHEla broderie artiste kimberly scola est parmi ceux qui participent a ce los angeles & # 8216; & # 8220; cette fete et # 8221; exposition,ADIDAS YEEZY BOOST 550 inaugurée vendredi dernier.ADIDAS EQUIPMENT 10a l'occasion de l'ouverture, en cas de scola a collaboré avec une tapisserie de 100 faux sacs fourre - tout.Adidas Adizero F50 FGces agréables rappels d'un événement,ADIDAS X PLR malheureusement, seulement deux jours de liaison.ADIDAS MESSI 16.3 ICles points saillants de & # 8220;StartAdidas Ultra Boost Uncaged cette fete et # 8221; et une liste de cas suivent l'artiste.ADIDAS ACE 16.3 TF