web design template web design template web design template

Page : 1 2 3

1. Choose Insert > New Symbol and create a Movie Clip named as 'box jump'

2. Choose Window > Library > box movie clip

3. Drag the box movie clip on the stage and place it in such a way that the Registration point of the box movie clip matches with the center of the box jump movie clip. For more precise placement choose Window > Align and press the below shown tabs in the Align panel.


4. Rename Layer 1 as 'Box'

5. Select box movie clip on the stage and choose Window > Transform

6. In the Transform panel type -45 in the Rotation field.



7. In the Transform panel type 7 in any of the fields between Width and Height keeping Constrain option 'ON'


8. Select frame 2 and choose Insert > Keyframe

9. Similarly, insert keyframes on frame 10 and 20

10. Select keyframe 10 and choose Window > Info

11. In the Info panel set the Registration point at center and in the Y location of the instance field type -45


12. Select any frame between frame 2 and 10, then choose Window > Properties

13. In the Properties panel set Tween = Motion and put Easing value as 100

14. Select any frame between frame 10 and 20

15. In the Properties panel set Tween = Motion and put Easing value as -75

16. Select box movie clip at frame 1

17. In the Properties panel change the Symbol Behavior to Graphic with 'Single Frame' as Options for graphics.

18. Select Box layer and choose Edit > Copy Frames

19. Insert a new layer above Box layer, select the newly added layer and choose Edit > Paste Frames

20. Rename the bottom Box layer as 'Box Shadow'

21. Hide the Box layer and select box graphic at frame 1 on Box Shadow layer

22. Choose Edit > Cut or press Delete button to delete the graphic at frame 1

23. Select box movie clip at frame 2 and in the Properties panel change the Tint of the object

24. Assign the same Tint to box movie clip at frame 10 and 20

25. Select box movie clip at frame 10 and choose Window > Transform

26. In the Transform panel type 4.5 in Width or Height field keeping Constrain option 'ON'

27. Choose Window > Info and in the Info panel set X position = 9 and Y position = -34

28. In the Properties panel reduce the Tint Amount upto 65%

29. Make the Box layer visible.

30. Insert a new layer above Box layer and name it as 'Actions'

31. Select frame 1 and choose Window > Actions

32. In the Actions panel type the following action

stop();

33. Select frame 20 and choose Insert > Keyframe

34. In the Actions panel type the following action

gotoAndStop(1);

35. Go back into Scene 1

36. Insert a new layer above Contact Us Button layer and name it as 'Jumping Box'

37. Choose Window > Library > box jump movie clip

38. Drag the movie clip on the stage and place it on Jumping Box layer

39. Choose Window > Info and in the Info panel set X position = -10 , Y position = 81

40. In the Properties panel type the Instance Name as 'box'


1. Choose Insert > New Symbol and create a Movie Clip and name it as 'Trigger'

2. Select frame 1 and choose Window > Actions

3. In the Actions panel type the following actions

initx=getProperty(_root.box,_x);
initxNew=_root.targetx-initx;
_root.box._x=initx+(initxNew/7.5);


// initx=getProperty(_root.box,_x);
This action stores the X position of the box jump movie clip into variable named as 'initx'

// initxNew=_root.targetx-initx;
This action determines the value generated by '_root.targetx-initx' and stores into variable named as 'initxNew'

// _root
.box._x=initx+(initxNew/7.5);
This action sets the
new X position of the box jump movie clip and generates ease out motion of the box jump.
(After completing all the steps, make increment or decrement in number 7.5 and notice the change in the box animation)



4. Select frame 2 and choose Insert > Keyframe

5. In the Actions panel type the following action

gotoAndPlay(1);


// gotoAndPlay(1);
This action will continuously keep on pushing actionscript to go and play the actions at frame 1

6. Go back into Scene 1

7. Insert a new layer above Jumping Box layer and name it as 'Trigger'


8. Choose Window > Library > trigger movie clip

9. Drag the movie clip on the stage and place it on Trigger layer. (Trigger movie clip looks like a dot on the stage as it does not contain any objects)






© Image Online  2001-2003