Saturday 8 May 2010

Part 2: Online Progress & how to make a button


Over the last week i've been playing around with the information i'd picked up from the lesson. We basically ran through the whole procedure of creating a simple flash website.
It was surprisingly quite simple and after such instruction the possibilities are endless. Once you have grasped the simple 'Go to' actionscript commands the rest is up to you. To design and play with as much as you want.

I am going to start off with 'How to make a button' and link it up to other frames for your own website.

Let us begin!

We can start off nice and quick! You know flash. Remember when you create the new document, make sure it is 'actionscript 2'. This is what i'll be using.

You've opened up, go to the tools and create a circle shape, or a square. Or even just squiggle a funny line with the brush tool! Anything can be a button (If you believe it to be!)

That is presuming you are using Adobe Flash Cs3. If not your tool bar may be somewhere else. I know CS4 went a bit crazy with it's layout. Maybe i'm just old fashioned.
Anyway!

So you've clicked on the image you've drawn? So all the little dots are appearing all over your circle? Next up right click the circle and select 'Convert to Symbol...'. This will be in the drop down menu.
Once you've done that this window will come up. You can name the button whatever you like. Select 'button'! How predictable.

Thats all 'OK' then.
So now your circle is officially a button. What next?

Well first off we're going to go back to the beginning and have a look at the flash timeline.

Imagine a website like you know one. A homepage, then a load of different selections for different pages. Galleries, showreel, contact information.

So imagining those seperate pages create 4 'keyframes' on your layer.
Image below to help. Right click timeline frames you like and then select 'Insert Keyframe.'


Then you name the layer by double clicking 'layer 1' on the left. I'd rename it 'Buttons' or 'Button'.

If you have ever used photoshop the rules of layers apply exactly the same. The below layers will be the behind ones (Backgrounds).
This is why i've created a layer below 'Buttons' called...


As you can see i've created keyframes on the bottom layer too. In the exact same places. This is so we can see that our buttons get us to our destinations.

When we click our buttons they will go to the individual frames. I've created these at frames 10, 20, 30 and 40.

Ok for the next step make sure you are back on frame 1.

So the flash does not play right through to the end without stopping when you create the SWF you will need to stop the frames.
As you can see from the image you want to click on the first frame and then find the 'actions panel'. This may already be up for you in properties, if not you'll be able to find it under 'window.'

Then you can select timeline control and double click 'stop'. The little 'a' will appear on the frame in the timeline. You can see this on the image below.


You then want to do this to every keyframe you created.

Now i've drawn/written 'Gallery' on frame ten bottom layer. (Below)



So our button is going to take us to the Gallery.

Now lets go back to the beginning!
Frame one.

Click on the button and go to it's actions.

This time instead of 'stop' you want to go to 'goto'. Double click this and you should have the on(release) code from the image above.

You can choose the frame by writing it into the code or clicking on the 'Script Assist' button which looks a bit like a magic wand and can be found on the right of the screen.

Now press ctrl enter straight away! TEST THAT MOVIE!

You should have the button on the first frame. Click on it! It should take you to the GALLERY page now.

Then you can create multiple buttons and design multiple pages and such. Make sure to play around with layers and seperate your content.




I'm going to be talking about how to add text and a scroll bar in on a different post. But before i do this i must mention what i have achieved myself.

As i already have a working website (That originally had no flash content, apart from my flash movies.) I did not want to create a whole flash site . It seemed quite unnecessary. But incorporating random parts of what i've learnt is proving a brilliant tool.

Here is what i've done.
Using the power of the internet i've got actionscript to make my 'flash buttons' link to other pages on my website.

(My new site Navi for the moment.)
In this image i've put the mouse over the 'Moving Image' button.

So these are new buttons.
The codes are similar but different. I searched for help online (Google) to find out what to do to create a button linking to a URL.

The information told me to put the actionscript in the keyframe and give the buttons individual instance names.

This was the result of actionscript

"button1.onRelease = function() { getURL("http://www.nathanviney.com/moving%20image.html"); }; button3.onRelease = function() { getURL("http://www.nathanviney.com/Webworks.html"); }; button2.onRelease = function() { getURL("http://www.nathanviney.com/Webworks.html"); }; button3.onRelease = function() { getURL("http://www.nathanviney.com/Contact.html"); };
"

Now if i want to update the buttons looks i can easily do so inside the button without starting the actionscript again. It is full proof! And you can do it too.
Research
http://www.ehow.com/how_4503049_button-url-actionscript-flash.html

*

Go to my website at
http://www.nathanviney.com

- Nathan Viney

No comments:

Post a Comment