unit 65 dairy

22
Unit 65 dairy 04/10/2012 Today I am going to look at two different website which are to do with traveling so I can get some ideas form it and then use in my final project. By the end of the lesson I am hoping to of completed one research on a website or maybe two. I have managed to complete on website for today 9/10/2012 Today I am going to do a bit more work on looking at one or two more websites and then hopefully make a start on my proposal. 16/10/2012 Today I shall finish my proposal and then make a start on the storyboard outlining what the webpages will look like and what will be on the webpages such as images, videos, navigation bar, and button etc. 18/10/2012 Today I will star on my storyboards and finish to of them which will be the home page and the map page by the end of the lesson. 23/10/2012 Today I am going to make a start on creating my website, and hopefully by the end of the lesson have started the Home page. To create my website I first opened up flash and then click on action script 2.0 it opened up a stage that I will working on

Upload: mikey132

Post on 30-Apr-2015

286 views

Category:

Documents


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Unit 65 dairy

Unit 65 dairy

04/10/2012

Today I am going to look at two different website which are to do with traveling so I can get some ideas form it and then use in my final project. By the end of the lesson I am hoping to of completed one research on a website or maybe two. I have managed to complete on website for today

9/10/2012

Today I am going to do a bit more work on looking at one or two more websites and then hopefully make a start on my proposal.

16/10/2012

Today I shall finish my proposal and then make a start on the storyboard outlining what the webpages will look like and what will be on the webpages such as images, videos, navigation bar, and button etc.

18/10/2012

Today I will star on my storyboards and finish to of them which will be the home page and the map page by the end of the lesson.

23/10/2012

Today I am going to make a start on creating my website, and hopefully by the end of the lesson have started the Home page.

To create my website I first opened up flash and then click on action script 2.0 it opened up a stage that I will working on

Page 2: Unit 65 dairy

this is what has come up but it’s not right so what I am going to do is change the stage size so it will be suitable for computer use.

As you can see the stage size is 55 by 400 and the frames per seconds is 24 and want to change both of these so it fits what I need, I am going to change the frame rate to 12 and the stage size to 800 by 600, I then clicked on edit

It came up with

this box which will allow me to change the size and then frame rates.

By clicking here it will allow me to change the size of the stage from 55o to 800 and it will be the same for the other side but changing it from 400 to 600, and then by double clicking on the 24 number on the frame rate I can change it from 24 to 12

Page 3: Unit 65 dairy

Now it looks like this and when I press ok the stage size should change.

And this is what my stage looks like, because it was bigger I had to change the viewing size from 100% to fit window so I can see the whole thing when I am working on my website. Now that is all set up I now can start creating my first page which will be the Home page which is the main page. I am going to put in a navigation bar which is going to be at the top of the web page. The way that I am going to do this is by going into the shape tool and clicking on the rectangle

Which is this icon on the tools bar and then stretch it out going across the top of the page but I need top chose a colour for the navigation bar, the colour scheme of the website is kinder based of the flag of Australia, for the navigation bar it’s going to go from light blue to a dark blue, I first click on the colour and then clicked on the gradient

Page 4: Unit 65 dairy

this came up after I had clicked on the colour button, to create what I want to create I am going to change these two by clicking and then change the colour

The white box will change from white to light blue and then black box will change from black to dark blue to give the effect that is need for the navigation bar

Now it looks like this, now that is done I am now going to put in the rectangle

This is what it looks like now on the page, now that is done I am going to put in a background colour which will be light blue,

25/10/2012

Today I am going to put in the background and also put in the text button and if I can some of the images that are needed for this website.

Now that I had set up the page and put in the simple outline of the navigation bar in, I am now going to put in a background colour which will be a light blue colour Do this I will basically do the same as I did when as was doing the navigation bar. First I am going to click on the shape tool and then select the rectangle icon on the tools and then change the colour form the default to the colour I want.

Page 5: Unit 65 dairy

This is what it now looks like, because I want them to stay the same and not to be moved or change I am going to change them to a movie clip, which then it will stay this way and I can put them on to other pages of my web site. Frist I made sure that the layer was selected. So it will know what I want converting into a movie clip. And then I made sure that both shapes where selected

as well. And then I right clicked on the mouse

Then this menu came up and then I went down to the bottom where it say convert to symbol is which I want to do so it can be a movie clip.

Then this boxes came up, as you can see it’s already on the movie clip type but I and now I am going to change the name of the symbol form symbol 1 to background.

Now that I have done that I can now click on ok and then it will change it from what is to a movie clip and then it will save it in the library and then I will be able to have access to the background whenever I want and put it in without recreating the whole

thing.

Page 6: Unit 65 dairy

there is now a blue line going around both shapes this now means it a movie clip.

this is the background that I change into a movie clip now saved in the library where I can access it whenever I need to. Now that I have done this it’s time to put in some of the navigation text button onto the page, these will go on the navigation but to make it easier to edit I will need to create a new layer before I make a start on putting in the text buttons

this is the icon which is at the bottom of the page on Flash under the layers, this icon is to create a new layer which is what I am going to click on in order to create the new layer that I need for my text. So I clicked on it.

This is the new layer which I will rename to navigation buttons, by double clicking on the that layer. Now that is all set up it’s time to

put in the text which I want. On the tool panel which is on the right side of the software. I will select the text icon. Which is the T letter on the tool and now I am going to click on it. And it will then allow me to type in what I on the page.

Page 7: Unit 65 dairy

Once I had clicked on the Text, all this information then came up on the properties panel, now before I start typing away I am going to need to make some changes to it which will suite to what I need it to be for the website. Some I am going to change the font, size and then colour of the text.

I changed the text from Times New Roman to Verdana as this is the suitable font that I need for the website. Then I changed the size to 20 so the text can be seen on the website and then I change the colour to black so people will be able to read the text on the page. Now that I have done I can now type in the button that is need for the navigation bar. I am going to on the navigation bar and then just click down, this will just allow me to type in the text that I want.

Now this is what my navigation bar looks like, I made sure there was a nice space in between each button, now that I have that done, so I can make them interactive I am now going to change them into a button, this will then allow me to click them up to change and turn them into a roll over button. I am going to make sure that I am on the right layer which is the navigation buttons layer, as I

am going to click on the first one which is Home and then right click once I have selected it.

Now that I have right clicked on the Home text this menu came up and just as the same as the shapes when I was changing them into a movie clip I am going to click on convert to symbol. Just like last time the box which will allow me to change them will appear.

Now that this has popped up, I have notice it has movie clip in the type section, which I not want I want, so I am going to have to change it myself this time, I am going to click on the little arrow pointing down on the movie clip.

Page 8: Unit 65 dairy

Then this comes down giving different choices to have but as I am turning it into a button then I am going to select the button one. Then it will change it form the movie clip into a button.

After that I then changed the name form symbol 2 into home_btn and then I am going to click on ok.

as you can see form the blue line going around it, it has turned in to a button, now I am going to do the same for the other but changing the name from hom_btn into the name of what the button is.

Now they are all converted into button which will now allow me to make them into a roll over button and link them to the pages that they are needed to be link to. Now I am going to turn them into a roll over buttons. I am going to start with the first one which is Home, in order for me to make a start on turning it into a roll over I first must double click on the Home button

Which then it took me to this, which is a scene for the button, it will allow me to play around with the button, but as I am only changing it into a roll over then. I and going to go to the time line at the bottom which has also changed, it has up, over , down and hit for it to be a roll over then I will put a key frame into the over part.

I then right clicked on the over which brought this menu up, and then I am going to go on the key frame and then click on it, this will then add a key frame into the over section which will allow me to

Page 9: Unit 65 dairy

change the colour etc. on it. but after I had clicked on the key frame button. it has now added a key frame into the over section and now I am going to change the colour in the over section.

I changed the colour to a maroon colour as it like a dark red, which red is on the flag of the Australia. Now that I have done that I am going to need to get back to the main time line.

I will click on the Scene 1 as it will take me back to the main time line that I have been working on.

This is a preview you, this is the button as people would see it on the page and when

the hover the mouse over it then it will change. into this maroon colour so the know that they are about to click or they are hovering over it, now that I have done it for one of the buttons I am now going to do the same thing to the other button on the navigation bar.

Now all of the buttons are now roll over buttons. I have created the way I thought of them when I was creating the story boards.

6/11/2012

Today I going to add in the map image on the home page and placing it in the place that I want it to be from the storyboard and the proposal and then I am going to try and add in the video that I want in on this webpage and make it a liner video. And then if I have time I will then add in the text that I am going to want for the home page that I am creating.

To add in the image that I want I am going to have to import it into flash and the way that I am going to be doing that is first by clicking on the file button and then a drop down menu will appear and then I am going to go on the import which will then have another drop down menu on it.

Then once I am on the import side menu I am then going to click on import to library, this is because it will save the image that I want into the library and then I will be able to access the image when I need to just by going on to the library and then I will find it and be able to use it on another webpage if it’s need to be used on another page. But once I have got on the side menu I am now going to click on the import to library.

Page 10: Unit 65 dairy

Once I have clicked on the import to library then this box will appear which will allow me to find the folder or image that I want importing. It will be easy to find the image as I have put all the images in the folder are the images that I need, I am going to go into this folder and then once I have opened the folder I then can find that image click on the image and then click on open.

In the folder I found the image that I want, as you can see above this is the image that I need and then I am going to select that image and then click on open. Once I have clicked on open the box has disappeared and now that image should be saved into the library. To check this I am now going to go into the library.

I went into the library and then all of these came up in the library, but the one which I will need for this website is the top one, this is the map in which I am going to use on my home page and now that it’s in the library I can now just go into library whenever I want and then just click on that image and then drag it on to the stage and there I’ll be able to resize etc. on the stage.

Page 11: Unit 65 dairy

Before I drag the image on to the stage I am going to create a new layer. The same way as I did

before I am going to click on this icon and once that has been selected then a new layer will appear.

Now that I have a new layer I have called it Images as all my images on the page will go on that layer, I created this layer so it’s easier to create the webpage and move stuff without it messing up. Now I have created that layer I am going to make sure that it is selected so when I put the image on it will appear on that layer. I am going to drag it from the library and place it on to the stage.

As you can see that the image on the stage is too big for the stage, now I am going to have to resize the image so it’s fits in nicely on the page. To make it smaller I am going to click on the free transform tool which is found in the tool bar on the right side of the programme

once that I selected and can then re size this image.

the small black dots around the image will allow me to select one of them and then make it smaller or bigger if I needed it to be bigger. But I am going to go with making it small.

I am going to select one of the black dots on the corner and then press on the key board the Shift button as that will keep the perfect shape that is now and will allow me to make this same shape but smaller.

Page 12: Unit 65 dairy

this is now what it looks like one the webpage it the right size on the page and then I put it into its right place on the webpage, I like it where it is and the size at the moment but the thing which is troubling me is the white background, now I need to find a way to get rid of this later and after I have put the other stuff into the page. Now that the image is the right seize and in the right place I am now going to put in a video showing off Australia, they way that I am going to put the video on to the stage is by in some ways doing the same thing as I did with the image, I am going

to go into file and then go down to import and then it will come up with another drop down menu,

but instead of clicking on import to stage I am going to click on import video and then once I have clicked it and other box appeared .

this appeared now because I am going to put my video on straight from YouTube I am going to have to change it from there down to here as then it will allow me to put in the web address of the video in the box, I found the video that I am going to have on the website and now all I need to do is copy and paste in the URL into that box and press ok, once I pressed on ok then another box appeared.

Page 13: Unit 65 dairy

this is what came up next after I had clicked on ok, it allows me to choose different types of skins for the video and what the video can do but as it what I want like this then I am just going to click on next and go to the other box. Which just came up with the button finish which I then clicked on and then it uploaded the video to the stage and now I placed it in to the place where I want the video to be and then that’s all done

this is now what my webpage looks like, this is what I wanted, as you can see from the storyboard above, the webpage is coming together the way I wanted it to, now I need to add 4 more images at the bottom of the webpage and then add in the content which will be about the place and have some facts.

For next lesson I am going to test my website and make sure that the video is working and that the links on the navigation bar is working and to see what the image looks like on the website.

8/11/2012

Today I am going to make sure that my website is working and everything on it such as video, images, the navigation bar and the text buttons on the navigation bar is working as well, and then if I find anything wrong with the website then I will find a way to fix that problem.

Page 14: Unit 65 dairy

To check the website I clicked on the keyboard Ctrl and then enter and then it came up.

This is what it looks like once I have pressed; the rollover buttons work on the text buttons and also the background and the navigation bar both appear and also the map image has loaded up and is easy to look at. But the video has not appear but it shows that there is some when I go on flash, so I am going to need to find out what the problem is and sort the problem out so that the video will work on the website when people load it up.

As I tried to put in the URL into the edit box now I am going to try and find the video on line and then convert it into what I need it to be so it will work on the website

13/11/2012

Today I am going make create at least two more pages for my web site and fill one or half of them in, and then I am going to finish with the home page by putting the content on and the other images.

The first thing I am going to do is to create a new page, this page will be the map page, the way that my pages will be done will be done by scenes, so I am going to have to create a new scene, the way

how I am going to do this is by clicking on the insert which will allow me to add a new scene, once I clicked on insert it came down with a drop down menu, the drop down menu appeared and at the bottom of the drop down menu scene is there, I am going to click on this, and once I have it will automatically create the new scene that I need.

It came up with this, as you can see that this is a new scene as the home page scene is called Scene 1 and this is Scene 2, so now that is created I can now start working on this page,

Page 15: Unit 65 dairy

and to make this have the same background as the other page (as it’s the theme of the web site). I am going to into library.

As you can see in the library all the stuff that I have created and then sorted into the library is here. The first one which I will need is the one called background.

this appeared once I clicked on the background, and now all I have to do is drag this from the library and onto the stage.

Now this is what my new scene aka page now looks like, with the buttons which go on the navigation bar I will do the same just drag it from the library and onto the page and then place them where I need them to go. The image below is now what it now looks like, but when I was putting the text into.

Now that is done, for this page it needs an map which will go in the centre of this page the map will also be interactive so people can put the mouse hovering over part of the map and then it will highlight that part out and then if they chose to they will be able to click on it, I am going to import a image of a map into the library.

Page 16: Unit 65 dairy

Once it was import into the library I then dragged it from the library and into the stage and then I resize and placed it where I needed it to be now that is done I am now going to out over images on the map so when the mouse hovers over a part of the map then is will change colour only on that part. The way that I am going to do that is by going into library and find the parts of the map in which then will

be placed on top of the map,

Now that is done I am now going to create a new scene and then put in the navigation bar and the text buttons and the background as this will be a start of a new page, I am going to put them in the same way as I did the last page, once I have done that

This is what my page looks like now, now I am going to add three images going down the left hand side of the web site, first I am going to go in to import them in to the library and then once they are there I am going to drag them in from the library and on to the stage and the place them into their places.

here are the three new images that I have imported in to the library, all I need to do now is to drag them from the library and on to the stage

Page 17: Unit 65 dairy

Now my page looks like this now that is done I am now going to add in a box in which people can select different options to find the right hostels for them.

First I am going to need to create a new layer. and then new it search box

now that is in, I am now going to add a rectangle box on the right hand side of the page.

Now this is what page looks like, now what I am going to do is to in title and next to the titles I am going to add box where they can type in some information and some will have drop down choices.

First I am going to put in the text and then type in

each area of the table and then create a small box where the text is going to be and then I will just type in the word and I’ll do this a few times

until all headings are done on the website.

This is now what the search bar looks like so far, now that the text have been placed in and in the right places it’s now time to create the boxes in which people can type and also be able to select on a drop down menu.

I put in the components into their right place on the search box

I clicked on the icon and this drop down menu came and then I clicked on the components and then this menu came up I selected on the DateField, ComboBox and also Textinput and then I placed them all in the order that they needed to

go in

Page 18: Unit 65 dairy

Then it made my search box look like this