Suppa Duppa Interactive Buttons

8 posts Page 1 of 1
Contributors
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am

Hi All
Here is another Tutorial on Creating Suppa Duppa Buttons cooll;

Computer Packages used for this tutorial > Photoshop 7 > Image Ready > Flash 8 Pro

For this Tutorial I have used PHOTOSHOP 7 ( and if you have used Photoshop 7 you will know that within Photoshop 7 there is a FANTASTIC Program called 'Image Ready' Which makes creating Gif Animations a Breeze wahooo; )

So We are going to Create a GIF animation of a Button with Photoshop 7 and Image Ready and then Import it into Flash and add Actions to it to make it an Interactive Button cooll;

Right lets get Cracking :D

1. Open Photoshop and create a Empty Page with a Transparent background any size ( as you will SHRINK/CROP the page down when we have done our Button)

2. Create your Button in Photoshop

Image

As you can see from the Pic above i have created a Button using 2 Layers, But you can use 1 layer or follow as i have done.

3. When you have finished creating your Button Design, Click next to the Layer Window on all Layers ( on the LINK ICON ) Then go to LAYER at the Menu on the Top as in the Pic below to Merge all Layers, But keep the Background of the Photoshop Document Transparent.

Image

4. Now we have our Button Merged with a Transparent Background

5. Duplicate the Button By Clicking on the LAYER in the 'Layers Window' and Holding your mouse button down and drag the LAYER to the Duplicate LAYER ICON at the Bottom of the LAYER Window, and release your mouse button and your Layer will appear DUPLICATED in the Layers Pallette.

Image

As you can see by the Pic above i have DUPLICATED my Button 4 times

6. In the Pictures below you will see that i have TURNED MY 3 BOTTOM LAYERS ( Below the First ) OFF, You do this by clicking the ICON THAT LOOKS LIKE AN "EYE" To the LEFT of the Layers Pallette.

7. Then click on the TOP Layer ( the one thats visible ) and if you Press CTRL+T your Button will be selected with the TRANSFORM HANDLES Visible.

8. Rotate the Button by Clicking and Dragging the HANDLES ( You should get the Rotate Arrows as your Mouse pointer goes over the Selected Button, Rotate the Button slightly in any direction like my pics below.

9. when you have done the FIRST Button Layer (Press Enter to Confirm your changes ) then Do exactly the same on all the other Layers, Like i have done Below.

Image

Image

Image

Image

10. When you have done all the Changes to the Layers, Then if you are USING PHOTOSHOP 7, Click the IMAGE READY ICON at the Bottom of the Tools Pallette to Open Image Ready.

* If you have not Got PHOTOSHOP 7 and are using a version of Photoshop without Image Ready then Just save each Layer in Photoshop as a Seperate .png File. ( And Miss out this PART BELOW as it uses IMAGE READY )

**And pick IT up again AT SECTION 15 BELOW

11. The Images below are our PHOTOSHOP Layers Open in Image Ready, You will see the Layers Window and the ANIMATION WINDOW.

12. If your Layers are all Visible in the Layers Pallete ( with the "EYE ICON" VISIBLE ) Then turn of the layers by clicking the "EYE ICON" like we did in PHOTOSHOP, And leave the TOP Layer Visible.

13. If you look at the ANIMATION WINDOW, You will see the "DUPLICATE ICON" Next to the TRASH CAN ICON, Click the Duplicate Icon to DUPLICATE the Layer Visible in the Animation window ( which is your Top Layer thats VISIBLE in your Layers Pallette.

14. You will see that you now have 2 IDENTICAL PICTURES in the ANIMATION WINDOW, Now if you TURN OFF YOUR TOP LAYER in the LAYERS PALLETTE (Click the "EYE ICON" ) and then Click the "EYE ICON" In the Second Layer to TURN the SECOND Layer ON, You will see that you NOW HAVE 2 DIFFERENT PICTURES IN THE ANIMATION WINDOW ( Your First Layer Picture and your Second Layer Picture wahooo; Click the DUPLICATE ICON again on the ANIMATION wINDOW and then TURN OFF YOUR SECOND LAYER in the Layers Pallete and then TURN ON YOUR THIRD LAYER IN THE Layers Pallette You will again have 3 DIFFERENT PICTURES IN THE ANIMATION WINDOW, ( This is the Beauty of Image Ready, By turning on and off the Layers and DUPLICATING the Picture in the ANIMATION WINDOW, It creates an ANIMATION of whatever you have in the Layers Pallette.

Like the Pictures Below.

Image

Image

Image

Image

You can see in the ANIMATION WINDOW your Pictures that will be the SEPERATE FRAMES of your Animation, If you Click the PLAY ICON on the Animation Pallette it will play your Animation, If you have made a MISTAKE You will see it as you RUN your ANIMATION, You can then CLICK AND DRAG the Pictures About in the ANIMATION WINDOW TO CORRECT ANY MISTAKES.

When you have Finished setting up your ANIMATION and it is working fine then GOTO FILE >SAVE OPTIMISED AS from the Menu at the TOP of the Screen and save as a Animated GIF.

Here is my Button as an animated GIF
Image

15. We are now going to Open FLASH and IMPORT our Gif Image ( or If you have saved your Images as SEPERATE FILES, If you dont have IMAGE READY, IMPORT them into Flash )

16. Open Flash and Import your Gif or Images into the Library

* (Convert Your Images to Buttons ) Drag each image SEPERATELY ONTO THE STAGE and CLICK IT and press F8, and in the DIALOG THAT APPEARS CHOOSE > BUTTON and give it a name and CLICK OK......YOU CAN DELETE EACH ONE ONSTAGE AFTER YOU HAVE CREATED THEM AS BUTTONS, As they are now in the LIBRARY as Buttons and DELETING the ones on STAGE WONT EFFECT THE ONES IN THE LIBRARY..

17. In the Pic below you will see that i have got 3 LAYERS, The top LAYER is the CODE Layer, The Second Layer is the TEXT LAYER and the Third layer ( the Bottom Layer ) is our Button Images.

As i have only used 3 Images from my Animation You will see that Flash has only 3 FRAMES in each Layer

18. Drag your First BUTTON Image from the FLASH LIBRARY onto the Blank Stage and Center it Horizontally and Vertically by using the ALIGN Pallete. This BUTTON Image is now in Frame 1 of your Layer 1.

19. Click on the SECOND FRAME in LAYER 1 AND RIGHT CLICK and choose >INSERT BLANK KEYFRAME from the Menu, ( THE BUTTON you have just loaded will have DISSAPEARED as now you should be in the SECOND FRAME which is a BLANK KEYFRAME )Then drag your SECOND BUTTON IMAGE ONTO THE STAGE and Center it like you did previously with the First BUTTON Image.

20. Repeat the STEP ABOVE for all your BUTTON Images PUTTING THEM IN SEPERATE FRAMES

* If you DRAG the RED SCRUBBER (Above Layer 1 ) Backwards and Forwards you will see your BUTTON Images Change as they will in the Animation.

When you have added all your BUTTON Images into SEPERATE FRAMES, Create a New LAYER ABOVE LAYER 1and DOUBLE CLICK ON THE LAYER 2 NAME and RENAME IT "CODE"

Then Add another Layer Below the CODE LAYER and RENAME it too "TEXT"

21. CLICK on the First FRAME on the CODE LAYER and PRESS F9 to open the ACTIONSCRIPT WINDOW for the First Frame of the CODE Layer.

AND Type or Paste this Code in
Code: Select all
stop(){
22.RIGHT CLICK ON the Second FRAME OF THE CODE LAYER and choose >INSERT BLANK KEYFRAME, Then CLICK ON THE SECOND FRAME and again PRESS F9 to open the ACTIONSCRIPT WINDOW for FRAME 2 of the CODE LAYER.

And Type or Paste this Code in
Code: Select all
stop(){
*As i have only 3 BUTTON Images in my Animation I have only Created 3 STOP ACTIONS in 3 FRAMES, So depending on how many BUTTON images are in your ANIMATION Depends on HOW MANY STOP ACTIONS YOU CREATE. ( So if you have created say 5 FRAMES in Layer 1, Each with a BUTTON Image in, Then you would need to Create 5 STOP ACTIONS in the ACTIONS LAYER. )


Image

23. On the TEXT LAYER, CLICK on the First FRAME, Then using the TEXT TOOL in the TOOLS Pallette, Click and drag out on stage to TYPE some Text like my image below ( And position it like i have)

Image

24. RIGHT CLICK on the Second Frame OF YOUR TEXT LAYER and choose >INSERT BLANK KEYFRAME and Use the TEXT TOOL to TYPE some TEXT like my Image below ( And position it like i have)

Image

25. Right Click on the THIRD FRAME of YOUR TEXT LAYER and choose >INSERT BLANK KEYFRAME and use THE TEXT TOOL again to TYPE some TEXT like my image below ( And position it like i have)

Image

26.Now once you have FINISHED ADDING your STOP ACTIONS to the ACTION LAYERS FRAMES, Goto the Button Layer and CLICK ON THE FIRST FRAME, Then CLICK ON YOUR BUTTON ON THE STAGE and then PRESS F9 to OPEN THE BUTTON ACTIONSCRIPT WINDOW.

And Copy or Paste this code in
Code: Select all
on (press) {
	gotoAndstop(2);

}
*This code above tells Flash that if the Button is Pressed then GOTO and Stop at Frame (2)

27.CLICK ON THE SECOND FRAME, Then CLICK ON YOUR BUTTON ON THE STAGE and then PRESS F9 to OPEN THE BUTTON ACTIONSCRIPT WINDOW.

And Copy or Paste this code in
Code: Select all
on (press) {
	gotoAndStop(3);

}
*This code above tells Flash that if the Button is Pressed then GOTO and Stop at Frame (3)

Repeat the STEP ABOVE for all your BUTTON IMAGE ACTIONS each linking to the NEXT FRAME WHEN THE BUTTON IS PRESSED.

*Once you have finished all your Button actions PRESS CTL+ENTER to Preview your Movie

JOB DONE :D wahooo;

save your Flash Document to a Folder then PRESS CTRL+ENTER to PUBLISH THE .SWF FILE.

This Concludes this Tutorial on Creating SUPPA DUPPA INTERACTIVE BUTTONS

*Download the Attachment below to see how mine works or the FLASH 8 Project File

Chris cooll;
You do not have the required permissions to view the files attached to this post.
Image
Lewis
Coding God
Coding God
Posts: 1564
Joined: Sun Dec 20, 2009 2:12 pm

Re: Suppa Duppa Interactive Buttons
Lewis
This looks good,
Nice one HH
Image
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am

Thank You :) Please make use of these tutorials :)
Chris
Image
User avatar
rocky4126
VIP - Donator
VIP - Donator
Posts: 258
Joined: Mon Nov 16, 2009 7:39 pm

hiya chris nice tut found a good site to get a load more: flashvault.net also look at my new tutorial: get.it in my creations - tutorials!
Image
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am

Hi
Thanks Rocky4126
I visited the site, yeah there are some interesting stuff there :)

Cheers

Chris
Image
User avatar
rocky4126
VIP - Donator
VIP - Donator
Posts: 258
Joined: Mon Nov 16, 2009 7:39 pm

np i can get alot, used to go DJin turned into CAD (Computer aided design) and flash designing

used: 3DS Max 9
Fireworks CS3
Flash CS3
Photoshop CS3

EDIT: the stop code can just be:
Code: Select all
stop()
no need for {

{ = start of condition e.g.
Code: Select all
on release {
   gotoAndPlay (2)
}
Thanks for tutorial, John
Image
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am

Hi Rocky
I dont know how the { appeared in the stop action :)
as i never usually add it, must just be an oversight..

Thanks for pointing that out tho

Cheers

Chris
Image
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am

Rocky
I would love to see some of your 3D Max 9 stuff :)

chris
Image
8 posts Page 1 of 1
Return to “Tutorials”