The document summarizes the process of creating a website in Adobe Flash. It describes steps such as choosing background colors, creating navigation buttons, linking buttons to pages, importing images, adding scrolling text, creating forms, and testing functionality. The website contains pages for a homepage, gallery, information about Australia, accommodation options, and contact forms. Throughout development, the designer refined the layout, added animations, and tested navigation between pages.
Políticas de Participação no Design de InteraçãoUTFPR
Atendendo a demandas de mercado, pesquisadores e praticantes em Design de Interação estão
experimentando novas formas de promover a participação de usuários no projeto de sistemas de
informação. Porém, a própria conceitualização do participante como usuário já reduz suas possibilidades
de participação. O usuário não é capaz de projetar, por isso, justifica-se a necessidade de especialistas
que traduzam seus anseios em definições de projetos. Por mais que se promovam exercícios de design
participativo envolvendo usuários, o objetivo não é autonomizar os participantes ao desenvolvimento de
novas tecnologias e sim gerar representações dos usuários para melhor direcionar novos produtos. Trata-
se de uma inclusão abstrata e exclusão concreta, que legitima a dependência tecnológica de um
determinado grupo social. O Design Participativo na vertente escandinava propõe que esta lógica
perversa seja questionada no próprio processo de design, com o objetivo de gerar alternativas que de fato
promovam o desenvolvimento social dos participantes. Esta abordagem participativa pode ser um
caminho para o Design de Interação superar o foco nas microestruturas da interação: interfaces, técnicas,
tarefas e outros detalhes intrínsecos que não dão conta sozinhos da densidade cultural do processo.
Políticas de Participação no Design de InteraçãoUTFPR
Atendendo a demandas de mercado, pesquisadores e praticantes em Design de Interação estão
experimentando novas formas de promover a participação de usuários no projeto de sistemas de
informação. Porém, a própria conceitualização do participante como usuário já reduz suas possibilidades
de participação. O usuário não é capaz de projetar, por isso, justifica-se a necessidade de especialistas
que traduzam seus anseios em definições de projetos. Por mais que se promovam exercícios de design
participativo envolvendo usuários, o objetivo não é autonomizar os participantes ao desenvolvimento de
novas tecnologias e sim gerar representações dos usuários para melhor direcionar novos produtos. Trata-
se de uma inclusão abstrata e exclusão concreta, que legitima a dependência tecnológica de um
determinado grupo social. O Design Participativo na vertente escandinava propõe que esta lógica
perversa seja questionada no próprio processo de design, com o objetivo de gerar alternativas que de fato
promovam o desenvolvimento social dos participantes. Esta abordagem participativa pode ser um
caminho para o Design de Interação superar o foco nas microestruturas da interação: interfaces, técnicas,
tarefas e outros detalhes intrínsecos que não dão conta sozinhos da densidade cultural do processo.
Lesson 4 Adding Navigator and PagesAdding Links Transcript- .docxSHIVA101531
Lesson 4: Adding Navigator and Pages
Adding Links: Transcript
- What really make the World Wide Web powerful is that it's all linked together, right? It's a network of computers basically. And how do we connect things? Well it's typically, at it's very basic level, done through links. So that's what I want to do now. In fact, right down here, starting with something simple, right down here you an see my name, Paul Trani, and I want to link my name to my website. So notice as I highlight it, and keep in mind you might have to click twice in Live View until you see this orange border around it and that will give you these Formatting options and the last one here is Hyperlink.
So just select that and type in the URL you want this particular text to go to. In this case it's going to www.paultrani.com, T-R-A-N-I.com. Hit enter, just like that. And what's going on if I go into Split View, you can see it right here. It's added this So that's all I need to do. In fact I can go ahead and Save All my pages and I can preview it a couple ways. Let's go back to Live View. Literally preview it right in here, in Dreamweaver, just by holding down the command key I can click on that link and here you have my webpage right here, paultrani.com.
Alright so that's how we can easily set up links. We'll get in to customizing in a little bit. But the short of it is I wanna do that for these items. I wanna do it for, say, the About page. I need that to go to the About page. It's the same process: Hyperlink, and then typing in the page. In this case, where is that page? Well it's not created yet because notice how in here, in the files, the About page is not there. But the short of it is, I would jump in and just start typing in about.html because I'm gonna create that later.
So I'll do that for all of these: portfolio.html, contact, just like that, and then lastly we have the home. In fact I don't want to call it home. I don't want it to go to this page because this index.html page is my homepage so notice how I can browse to that file since I already have it created, selecting it, but it's just as easy to type it in right there. OK. So that's what I've done. Here are my different links.
I can also build in links here if I wanted to. Say for instance if I wanted this Building brands to also go to the Portfolio page, I can jump in and type that in portfolio.html, just like that. Alright. But blue really doesn't go with my design, at least not this color blue and in fact I wanna sample maybe a red or orange in there. So how do we change the colors of these items? Well, we can go into the CSS Designer panel and really with this just selected, say this Building brands for instance, I can come over here and I can add a Selector.
Now if at any time you don't get the Select CSS source to add a Selector, just select the Style CSS because it doesn't know where to put that Selector until you have that selected and now, if I add a Selector, you can see it adds it. And it's alw ...
1. Heather Lomas
Website Diary
23/10/2012
To begin with I had to choose the background colour. As you can see as the same as my storyboards
I have stuck with the theme of the light blue colour.
As you can see I have created another layer to the timeline. This layer will be where I begin to create
the navigation such as the buttons etc.
Above I have created all my buttons. I used Buxton Sketch as the
font in size 22.
2. Heather Lomas
I had to convert my buttons to
symbols because originally they
would have saved as movie files.
As you can see here I have
converted my button to a button
instead of a movie clip and I have
added a keyboard shortcut ‘btn_’ so
I know this when I see it in my
library.
Here is my library page. As you can
see all my buttons in this page.
4. Heather Lomas
In the screen shots above I made a page for every button I have. As you can see I have 7 pages
overall which is a reasonable amount for the site.
26/10/2012
I have taken a shot of the timeline so far. I have created 4 different layers, Labels, Navigation,
Content, and Background. The background layer continues throughout the site and keeps going till
the end of the site. The navigation also continues throughout. I have added labels which are the
pages and as you can see I’ve created the content the same and they both stop on the same frames.
These will be my pages.
I began to work with my homepage by putting all the information onto it.
5. Heather Lomas
As I wanted to change my writing to a graphic I had to convert it to a symbol. I selected this from the
menu tab when I right clicked over the graphic. As you can see the last thing I converted was my
buttons so the type selected is a button. I had to change this to graphic and re name the graphic.
On the timeline I created a new layer in order to link my buttons to the correct pages. As you can see
I made the layer and called it Actions.
6. Heather Lomas
As you can see I had to insert a keyframe before every label starts so in this case I had to stop my
actions on frame 19 so that the next frame could then start the next page.
I selected the ‘Home’ button and then went into the option window and selected Actions. Once
selected this was the screen that appeared. I put in timeline controls to stop so that whenever a
page was selected it would not continue onto the next page.
In the screen shot to the left you can
see that it has shown a small ‘a’
above the key frame. This shows
that there are actions now assigned
to that key frame.
7. Heather Lomas
Here now I have locked all my layers
so I can only selected items on the
navigation layer. This means I could
then link my pages. I selected my
home button and went into the
actions panel once again.
Above I have shown that within the actions panel I have put in that on release the button selected
will take me to the homepage. I selected the type as frame label this is because all my buttons were
under a labels layer so I could easily select the right page from this. I repeated all this on every page
so now my website is fully linked together.
8. Heather Lomas
Now I could start putting all the
content into my website I chose to
import all my images that I have
collected into my library. As you can
see there is a long list of images and
buttons included in my site. There is
only one movie clip within this
website which is my background;
this is because the background
continues throughout the website.
9. Heather Lomas
I created the homepage and this is now the finished first page of my website.
06/11/12
10. Heather Lomas
I created the gallery page by adding in images to make the gallery complete. I added 6 images overall
and will possibly manipulate the image when I am further into my website.
13/11/12
As you can see here I went onto creating my page about Australia. Within this I have discussed some
main point about Australia but left it brief as I want the viewers to look further into the site to find
out more.
11. Heather Lomas
I went onto adding in a couple of pictures in order to finish off that page. By adding in a photo of the
view and also showing the sand and flip flops I think it gives a warm feel overall to the site.
12. Heather Lomas
Here I have begun my ‘Contact Us’ page. Within this page I will be looking into all the phone
numbers and emails that the customer may want to have to get in contact with the company.
13. Heather Lomas
20/11/12
I moved on to the accommodation page where I have placed photos of different Hostels that are
available for bookings.
14. Heather Lomas
I went onto changing the Contact Us page, by adding more information, such as Address’ etc. I also
added in an image for the user to view.
22/11/12
15. Heather Lomas
When it came to the Gallery page i didn’t like the layout i have made i decided that the image should
be viewed in a large space to see the full quality of each image and what they show. As you can see i
only have one page to do this so i had to think how i could move the images appropriately so that
the user can see all thumbnails and the larger images. From this i decided that i wanted the image to
enlarge when the user rolled over the thumbnail.
To begin with i made all the images into symbols. I made them into a button so i could add
animations later on in the process.
As you can see after creating the image into a symbol i double clicked to be taken to another scene.
From this i was allowed to insert a keyframe within the ‘Hit’ frame. Whilst in that hit frame i had to
draw a box over the image i was enlarging and copy it.
16. Heather Lomas
I then went into the ‘Over’ frame where i inserted a key frame and pasted the picture into the space
i left to enlarge and increased its size.
As you can see i have now got the enlarged image and the regular image that will be displayed on
the page.
18. Heather Lomas
As you can see it has worked so when i rollover the image it enlarges. I did this for all my images on
the Gallery page.
19. Heather Lomas
On the accomodation page i wanted to change all the information and images around that i had put
in. By putting the images on the right hand side i wanted the text to scroll, so i need to import a
scroll bar. To begin with i selected the text box i wanted. I needed to change the text to Dynamic text
instead of static. I also right clicked on the box to ensure it was ‘Scrollable’ and it was.
20. Heather Lomas
I went into the components panel
and went to find the scroll bar. Once
i had found it i dragged the scroll bar
into the text box.
I had to make sure that the behaviour of the text box was multi line so that it would scroll instead of
sitting still.
22. Heather Lomas
I went back to my title page as i wanted to change the motion presets so there were animations
added to all the titles. I decided for the first bit of writing i wanted to make it ‘bounce-smoosh’ onto
the canvas. To begin with i had to make the writing a movie clip so i could add in an animation. As i
have shown in the screen shot below i had to create a new layer in order to drag the animation onto
that timeline. I decided to make it go to frame 75 as that is a lengthy time for it to animate onto the
screen.
23. Heather Lomas
So that the animation doesn’t repeat i had to add in some action script to stop the timeline from
repeating so as you can see i put a stop action at the end of the timeline.
I moved the writing out of the way so that it would fall onto the canvas from above.
As you can see i change the timeline so it would be faster falling onto the canvas since it took too
long the first time.
25. Heather Lomas
In the three screen shots above i have shown that when the file is exported the ‘Welcome to
Australia’ sign falls into place.
I then chose to repeat the same process with the writing ‘Let the Fun Begin’ but this time i made it
fly in from the left hand side.
26. Heather Lomas
As you can see here this ‘Let the Fun Begin’ writing is flying in and below i have shown it once it has
completed its journey onto the canvas.
27. Heather Lomas
Once more i wanted the writing ‘Everything you need to know and more...’ to fly onto the screen but
this time from the bottom direction. In the screen shots below i have shown it flying in from below
and it once it has reached the canvas.
28. Heather Lomas
23/11/12
I needed to make a form within my request a brochure page so i began by putting in the text box
fields.
As you can see here i have made the page a movie clip so that the fields will work better.
29. Heather Lomas
In the components tab i have shown that i will be taking all the fields from this section to put it into
my form.
Here i have used a combo box which will give the user the options for their title. As you can see i
have put 6 different options into the form for the user to choose from.
30. Heather Lomas
As you can see here for me to change all the data within the combo box i had to change the data and
the labels for it to work.
31. Heather Lomas
Once i had completed the combo box i exported it to see how it would look and this shows it works.
32. Heather Lomas
I also inputted information into the above fields to see what it would look like as a user.
33. Heather Lomas
On my accommodation page i decided that when it came to the booking form i wouldn’t be able to
do it unless i put some proper information about hostels in. So i decided to put my paragraph of
information and the base of the page with a scroll bar leaving me more room to put in hostels.
As you can see i imported an image to the stage and then made it into button. I double clicked into a
separate scene where it allowed me to begin editing the image to how i choose. I made sure that
there were keyframes in both the ‘Hit’ state and the ‘Over’ state.
34. Heather Lomas
Within the ‘Over’ state i thought it would be a good idea that when the user hovers over the image
all the information will be displayed, so as you can see this is what i have done.
35. Heather Lomas
I exported the file once again to see if it would work when it is rolled over and that it does.
36. Heather Lomas
I repeated the process once again for another image and then another after that.As you can see
below i have exported the file to see if it would work, it does and i have shown this in the 3 screen
shots below.
37. Heather Lomas
I once again decided that i need to make my booking form so i created the form in a movie clip
sequince just like my request a brochure form.
38. Heather Lomas
Once made this is what my booking form looks like. There is not enough information there to make a
proper booking, it only secures a place in which i have stated in the scroll box in the top right corner.
I also thought the form looked quite bland so i added in a photo.
39. Heather Lomas
The photo just appearing didn’t particularly excite me so i chose to add an effect to it where it flies
on the screen. As you can see i have created the timeline and added in a stop action so it doesn’t
repeat.
40. Heather Lomas
27/11/2012
In this screen shot you can see that the image starts off the canvas and then follows the faint green
dots onto the canvas.
41. Heather Lomas
This is the image example, here i have shown its flying process onto the canvas. It starts in the top
left corner and continues down to where it lands on the right hand side.
42. Heather Lomas
I filled in the booking form to see what it would look like from a customers point of view.
I decided to change the request a
brochure button so that the text
turns black when the user rolls over
it.
I began another page so i can have a
blank page when the forms submit.
So to do this i had to create new a
new page by extending my
backgrounds and navigation on the
timeline.
43. Heather Lomas
I had to set up the navigation also on the submit button which was difficult and i did have to google
some of the code in order to get it right.
I exported the file once again to see if it would work and once i had pressed Submit it took me too
this blank page.
44. Heather Lomas
As you can see I went onto creating the page that comes up after the user submits a form. I have
written a message for the user and included a simple image as they won’t be on that page for long.
I added in a submit button also to my ‘Request a Brochure’ page.
45. Heather Lomas
I have also changed the text colour when I hover over it. When the cursor is over the text it changes
from black to yellow.
As I was looking through making the final checks I thought that the fields on my request a brochure
page needed to be wider as users names will vary in length.
46. Heather Lomas
30/11/2012
When it came to the evaluation the user that evaluated my site said I needed to change my text to
bold and in the screenshot above I have shown all the text in bold.