10 Rotation movement

On the image layer, create a Keyframe at frame 60, then at frames 30, 35 and 45. On frame 30, make the image size 38px wide and height. At frame 35, make the image one pixel wide and high. Now select any frame between 1 and 30, and in the Properties panel select Motion Tween. Additionally, select Rotate CW and times equal to five in the Properties panel.

11 Finishing touches

Now select the frame between 30 and 35, and again select Motion Tween. Then repeat this for the frame between 45 and 60, and create a new layer called ‘code’. On the first Keyframe, open the Actions panel and add a stop();. Next up, create another Keyframe on frame 45 and add the code below. Save and repeat for the remaining items.
this.x=this.startX;
this.y=this.startY;

12 Shadow layer
Navigate back to the main stage and create a new layer called ‘shadow’. Draw a rectangle the same size as the images, which is 200 x 200px, and make the fill colour slightly darker than the background colour. Make it a Movie Clip called ‘shadow’. Select the Movie Clip and give it a Blur Filter setting of 15 on the Blur X and Blur Y option in the Property Inspector. Create three more and place them under the images

13 Nail in the wall
Create a new layer called ‘Nail’, then a new Movie Clip called ‘nail’. Open up the Movie Clip and draw as best you can a nail using the Paint Brush tool. Navigate back to the main timeline and place them on top of the shadows, rotating them slightly so they all look different.

14 Start the Cart
Create another new layer called ‘Cart’. Draw a big circle and turn it into a Movie Clip, then make the fill colour a radial fill, having the left colour as black and the right colour the same as your background image. Also, give this colour an alpha of 60 per cent. Navigate back to the main stage and give the Movie Clip a Blur of 22 on the X and Y in the Property Inspector. While there, call the instance ‘bin’, and save your work.

15 Imports
Create a new layer called ‘code’ and open the Actions panel (Ctrl+F9). Now you are going to add the code to make all of your hard design work pay off with some lovely interaction. First of all, add an import of the MouseEvent, which will capture your mouse press later, then create a new variable called ‘totalAmount’.
import flash.events.MouseEvent;
var totalAmout:int = 0

16 Product details
Next, you will need to add some properties to your image Movie Clips. For the first one, create a desc property and add the string of its name. Then add another property called ‘price’, which has a number value, then startX and startY, as well as number values.

Product 1
item1.desc = “Mild White Sharky”;
item1.price = 35;
item1.startX = 50;
item1.startY = 120;

17 More products
Repeat the last step for the remaining three images. You are doing this so you can assign data to the image Movie Clip and then reference it at a later date. We will need the properties you have created to place in the information text field you created earlier, as well as to calculate the current total price and last of all to put back in the right place after it has been placed in the cart.

Product 2
item2.desc = “Robot Rampage”;
item2.price = 37;
item2.startX = 300;
item2.startY = 120;
Product 3
item3.desc = “Tapeworm”;
item3.price = 40;
item3.startX = 50;
item3.startY = 350;
Product 4
item4.desc = “Teethdude”;
item4.price = 25;
item4.startX = 300;
item4.startY = 350;

18 Buttons
Now that your images have got some data assigned to them, what else does your image need to do? Well, your Movie Clip needs to act like a button so it can be clicked and then dragged. To do this, set the buttonMode of all the images to equal true.

item1.buttonMode = true;
item2.buttonMode = true;
item3.buttonMode = true;
item4.buttonMode = true;

Pages: 1 2 3 4