Task 5

Diary06/11/12

In order to make a start on my website using Flash I needed to load the programme up. My first aim for this lesson was to get done as much as I can do so basically the home page layout and the linking with the buttons for each page of my website. I searched for Adobe Flash and then clicked on it. This screen opens and I selected created new Action Script 2.0

This screen pops up, everything I need to get started on my website using Flash. The first aim is for me to decorate my page to what I want my homepage to look like.

In order to upload my graphics onto the flash document I need to go on File, Import and then Import to stage. I did this for every graphic I wanted to upload onto Flash.

I first added numerous layers on flash so I could control my graphics on my flash website. The layers I made I named them Actions, labels, content, navigation, and background.

I then used the text tool to insert the text links for the navigation bar onto the banner evenly spreading them. I used the properties tab to change the colour, size and font of the links.

This is the outcome of all the stages I have done so far. I feel like it’s a good start for my website.

When I finished the text I needed to link them to different pages for the site. But first I needed to sort out each page on my timeline by adding key frames, actions and labels so I know the pages which are going on my website and where each graphic will be appeared on.

In order to insert a key frame I selected the exact place where I wanted to insert my key frame and then I right clicked in the area and options appear. I selected the option Insert key frame.

When clicked on that insert another key frame where you want the page to stop so I did 20 frames space per page and right clicked and selected the same way as I did the first time. When you have done that the result should look something like this.

I did these key frames for every page I plan to have on my website so 5 pages. I didn’t want each key frame to be mixed up so I put a label for each one. I did this by selecting the option properties and then in the text field where it says name under the heading label.

When I was creating links I needed to convert the text I was using for the link into a button. In order to do this I needed to select the text I wanted to be a link and then right click. A list of options came up and I selected the option convert to symbol.

This pop up appears when creating a button and I need to change the type to button and I need to name it something appropriately with the start saying “BTN_” so I know myself it is a button. I did this for every link on my website.

With buttons and in order for them to link which I need to input an action onto the button so when clicked it sends you to another page. In order to insert actions select the button you want to link and right click and choose the option actions.

This pop up appears and in order for my button to be clickable I need to choose the movie clip control action of “on”. This means when my mouse cursor is on the button and click onto it I has the action to send you somewhere when it’s been released. The other action that I need is the Timeline Control action of go to and play.

I clicked on the magic wand tool which is featured in the top right hand side of the actions pop up. This is so I can see exactly where my links will be going a lot easier.

When I clicked on the magic wand it has information I need to fill in for example I needed to select Go to and stop, make sure it’s on the current scene, change the type to frame label and on the frame select the page I want it to send to. Therefore that’s why I added labels earlier so I can make it easier for myself when it comes to links so I know for sure it’s going to the right place.

The options I need to select in order for my link to work would be going onto the tab on the left hand side saying movie clip control and select the action on so when hovered over the link it allows it to be clicked on and release the action. I then needed to

select my second action which was on the tab under timeline control which was called Go to And Play. I did this for every link I wanted to go to in the same format. The only thing I needed to change was the type of frame label because they are going to different pages.

The only link which was different on my website was my screen icons because I needed a link which would send me to another website whereas the other way I used for my links were just links to different pages on my website. Therefore in order to create my link I needed to still make sure I selected the magic wand tool and that I clicked on the option “on” which is under movie clip control. After that I needed to

find the tab heading which was called Browser/Network and select the option getURL. This the correct option as I need to type in the website address I want that certain screen icon to go to.

So where it said URL I typed in the full address of the website URL I want the screen icon to go to. Then I needed to change the window and select _blank which means when people click on the screen icon it will open up in a new window. That is how simple it is to create that kind of link. I used this for 4 of my screen icons which are features in the top right corner of every page of the website.

When creating my website one of the tools I most commonly use is the import tool. In order to create a website I need to include graphics so it has information, attractiveness and boldness as well as making it personal and exactly how l wanted it to look. In order to import a graphic I clicked on the tab File then Import and then selected the option import to stage but if I was importing a lot of images I would select import to library and go on the library page and click and drag to where I want it to be placed but mostly I would use import to stage.

This pop up appears will all my files and I select the one I wanted to upload to the stage straight away and when I have found the one I wanted to upload I clicked on the button open.

Once I select the graphics I wanted to upload all I’d simply use is the free transform button in order to change the size, rotation of the image I uploaded. This is done by right clicking on the image and choosing the option free transform and then using my mouse to click and drag to where exactly I wanted that graphic to be placed. This is the same method which I used for every image, banner, logo etc.

When it came to the background I didn’t do a special way for it to be big, I used the same method but created a new layer and called it background and dragged it so it’s the full length of my timeline so it would be featured on every page of my website. To add new layer button is featured in the bottom left hand side corner. I used the layers button for 5 different things; actions, labels, content navigation and background.

One thing that I needed to make sure of was that the layer which I named background is that it was at the very bottom of all the different layers. If the background layer was at the top that would mean the background image that I have on that layer is on top of everything so nothing else will be hidden. So I need to make sure the position of that layer is sent to the back!

When adding information on my website I needed to include text so therefore I used the text tool. The text tool is found on the right hand side of the page which has a screen icon display the character “T”. With this tool all you need to do is click anywhere on the page (better off clicking where you want to put the text box) and then drag the box so it’s a reasonable size. When clicking on the text tool it automatically changes the properties page related to the text tool. Therefore it gives you options on the colour change and the change of font and how it’s positioned etc. I made sure my text is aligned to the left and that the colour was in colour scheme to my website so a teal/blue colour and the size varies depending on how I want my text to be fitted but all the headings and links are the same size for every page so it keeps to my professional standard as well as the font always being Berlin Sans FB Demi for everything.

When editing my pictures to a type of style instead of using Photoshop I used the online editing software, Pic Monkey. The reason why I chose to use Pic Monkey when editing my images is because I wanted them to be in the style of a polaroid to jazz my website up and when trying to do it on Photoshop it was a lot more effort and time consuming when I knew there was an exact

website which does exactly what I want to do by only using a few clicks. So when the homepage appears like this I simply clicked on the button link which said Edit Photo.

A pop up appears displaying all of my files. I selected on the picture I wanted to edit and then clicked open.

When the picture is uploaded the page looks like this. The first step that I need to do is selecting the screen icon in the left hand side which is the 6th

down and when hovered over the screen icon it says frames.

When you click onto the frames screen icon a load of lists appear of different affects you can use on your picture. Seen a so I want my pictures to be in the style of a polaroid I selected on the frame which is called polaroid frame. Here there is 3 different types of polaroid frames I could use. I chose the third one because it had a lot more shadow and looked a lot realistic in my eyes.

I used the rotation and dragged it to the left so it was on 0 degrees so it was straight. Then I clicked on apply.

I clicked on the first screen icon to take me to the basic effects. I didn’t want any white to show, all I wanted was my picture so I could rotate it myself on Flash rather than rotating it here and then have a white background on the picture as it would show up on my website as my background isn’t white it’s a gradient background. So I used to crop tool which says no fixed proportions and then selected the bit I wanted to keep so the parts not highlights are the bits they are going to crop.

Once I had finished I clicked on Apply.

I was all completed with the polaroid effect for my image so I clicked on the link which was called Save. It sends you to a different page where the picture appears fully completed and an option to click save.

I clicked on the link “Save Photo” where my files appeared where I saved it in a sensible place.

I did this for every single image for my website. Once using the import to stage tool, I used the free transform tool to rotate them

different ways so it’ll look like a collage scrapbook which was the aim I wanted to achieve.

For my booking page on my website I created my own table for my website using the editing software Photoshop. It was a very basic thing to do as I literally made the new image to the size I want which was 600 x 400 and then used the colour black and then used the line tool which is found in the right hand side and made a table and then used the place tool under the tab file in order to insert 3 images of entrances if the hostels. All the rest of the information was typed out using the text tool on flash. I imported the image like every image I used on Flash.

For my website I used the free transform tool and awful lot. This is because when I was inserting images for most of the pages, especially the galleries page my design was the rotate the images in different rotations like the pictures were positioned in a scrapbook kind of way. When using the feature all I needed to do was to select the image that I wished to rotate and then right clicked and choose the option “Free Transform”. These actions allowed me to rotate it any direction with no hassle and resize the image so it was the right size.

Whilst creating my website I used ruler and guidelines. An example of when I’ve used them is when I’m trying to position text and graphics exactly in place so it’s neat. One thing that’s good with Flash is that I don’t need to select any options when I move images they simply pop up automatically telling you when it’s level as another item.

When I have been creating my website using Flash I did use the feature Undo. I used this feature when I selected and clicked on something I didn’t mean to click on which lead something to mess up or turn out how I didn’t picture it. An example of when I used the tool undo was when I have positioned all of the titles so they will be exactly the same position on every page of the website and I moved it by accident. Therefore I when to the tab heading “Edit” and then selected the option “Undo”.

Whilst I’ve been working on my website I used the tool feature “Copy” throughout my website. Copying is a tool used constantly without taking much thought. When I’ve been moving and positioning images to different pages I have used the tool by right clicking and selecting the option “Copy”. I did this for my logo graphic so it would appear on every page of my website.

I used the tool Paste whilst creating my website. An example of me using the feature paste is when I found key information on the website which I wish to include I copied the information and used the tool Paste.

I’ve used the tool delete when I messed up in my layers and I had one too many and that layer wasn’t needed so selected on the layer I wished to delete and then I right clicked. When I right clicked a list of options pop up and I select the option Delete Layer so it fully removes it from my website. I did this tool when anything wasn’t meant to be there.

When I have been creating my website I have used the tool grouping. I have grouped texts and graphics when

trying to keep the same neat position. The way you use the tool grouping is when you either click and drag over the whole images or use the shift key and click on the objects you want to group.

When creating my website I have used the tools such as the gradient tool and the paint bucket for my website. The gradient tool I have used in order for my website to look attractive. I have used it on such graphics such as the banner, the logo which all feature at the top at the video. I followed the colour scheme of blue fading into white.

I used the paint bucket tool for a series of things. An example when I used this image is in Photoshop when I wanted to fill a certain area all in one colour. I used this tool when it came to making my logo.

I have used the colour palette when making my website when picking a colour was an option. I had already decided that I wanted my colour scheme to be the colour blue but I didn’t know what exact shade I wanted to have of blue as there are millions. I wanted my blue a bit close to teal but still blue, I didn’t really want a royal blue. So the colour

palette is a great tool which allowed me to find the exact colour I wished for, for my website.

I have used typography in my website when I have wanted to feature text for my website. I have inserted text in order to share information to the visitors of my website. For example I wanted them to be informed on the title of my website and what the company is called. I want to give useful tips in where the best places to go and a good knowledge of each place too so there would learn something from it.

Whilst making my website I have used a variety of different file formats. The graphics I have used for my

website are all sorts of images so I have used the file formats for editing software so .EPS and .JPEG. When using Adobe Flash to actually make and manage my website I have used the file format .fla and then when fully completed I would need it in a shockwave file e.g. .swf and then I need to see how it would look on the web so I would need to save it as a .html document so I can see what it would look like when it got uploaded.

For my website I have used a scroll bar as for one of my pages had too much information on it and if I reduced the text even more it would have been so hard to read so I thought I’d add this tool so it’d be easier for visitors when trying to read the information. In order to know how to insert a scroll bar for my website was by clicking on the screen icon which features 3 cubes; 2 on the bottom and 1 on the top. I click on this screen icon and it opens up 3 folders. The one that I need in order to find the scroll bar is the user interface folder. If you drag the option onto the stage the scroll bar appears and that is how you insert a scroll bar onto my website!

Not only was the user interface folder used for my

scroll bar I used that folder for other things. For example when I made my form page I needed a submit button and a load of text fields. For the text fields the option I needed to select was the label button which has the screen icon A. In order to insert a submit button, I needed to use the Button option.