Flash For CITIES and TOWNS ( Assignment 3)

We decided to do a flash to introduce cities and towns available in PERAK

1)We created buttons using the PHOTOSHOP. The following is the example of the buttons.

2) Open a stage 800X 900 Pixels

3) Import all the images of the buttons in the library

4) Insert new symbol > movie clip > brief info of the city. Do the same for the rest 5 cities.

5) Insert new symbol > movie clip > complete info of the cities

6) Insert new symbol > buttons > up ( drag image from the library ) >create new layer > over (insert keyframe) > drag the movie clip of brief info to image. Do the same for the rest

7) At the stage, create a layer > drag the background image to the stage ( name the layer as background)

8) At the stage, create another layer > name it as title > type the title on it

9)At the stage, create a layer > name it as buttons > drag the buttons on the stage > arrange it nicely

10) Create a layer > name is as content> insert keyframe at 10, 20, 30,40, 50 > at 10, drag a complete info to the stage ( do the same for 20,30,40,50, with the different info)

11) Create a layer > name it as action > den insert blank key frame at 10,20,30,40,50 > at 1 frame, type stop( ); in the action script . > type the code for navigation in the frame 1 too.

REFERENCE 
Ebook  ADOBE FLASH CS5 classroom in a book. 

Youtube
http://www.youtube.com/watch?v=ReBRrcuZrUU&feature=related
http://www.youtube.com/watch?v=n0ikR6Z75PU

Official Banner !!!!!!!

We do think a banner is quite important for a website. We have discussed and referred to many kind of banner and we come out with one banner using flash. Our concept is a slide show of beautiful view about Perak.

First, we decide the size of our banner. We decided 750x300 pixels, it is because our header of the page will be around 800x 400 pixels. 5 of us search for photos, crop and retouch them, resize them to 750x300 pixels. Then we insert the name of the place on the pictures. Then, we combine it and made a flash.

Ipoh Railway Station

Pangkor Island

Sam Poh Tong

Taiping Lake Garden

Tambun Lost World

Then, we combined all the pictures in the flash.
1) Created a stage with a size of 800x 400 Pixels.

2) Imported the pictures in library.
3) Created a new layer of on the stage.
4) Insert a key frames into the new layers
5) Drag a pictures into the layer and convert into symbol.
6) Highlight the frames and created a motion tween.
7) At the 0, first key frame, we click the properties of the
    pictures > "Alpha" >17 %. This can made the pictures a blur    
    state.
8) At the 22, there is another key frame, the properties of the
    pictures > colour > Alpha > 100%. This can made the
    pictures like fading in.

9) Do the same for other pictures at different timelines, made the
     pictures like fade in n out one by one and continuously.

the first frame of the Final Flash

Assignment 3 - Cities and Town

Description on the individual ideation of the linkPerak is made up several towns and cities. Therefore, we have the idea presenting the cities and towns available in Perak. 
We are doing 5 of the main cities in Perak which are Ipoh, Tambun, Taiping, Kuala Kangsar and Lumut. Every cities and towns in Ipoh have their special building or tourism spot and also famous foods. 


Objective of this link
The objective is to let the viewer to more understand the cities and towns in Perak. A brief explanation of every cities and towns in Perak will be shown. Besides that, viewer can also noe the ways getting to the cities and towns. Lastly, they also have a clearer image what type of foods is famous and can have a try.


Target Audience
Our target audience is people that surfing the internet. Internet is a place that can gather informations and knowledges. Therefore this website, is for people that wanted to travel to Malaysia and wanted to have a brief idea on whats are special and unique places, culture, food, islands, activities in Malaysia. This website do promote Malaysia a heaven for relaxing and have place for a holiday. 


Design of GUI

The design GUI on above is how we present our part.

Based on the first image of the design GUI, we planned to put a flash in the content. The flash will have 5 buttons of the cities and towns. den once we click in will have pictures and info of our subtopic

The FLOW of our suptopic - CITIES AND TOWNS

In the home page, there is a thumbnail " cities and town" that link to our page. 

In the page there is a flash.
In the flash there is 

5 buttons --> IPOH , LUMUT, KUALA KANGSAR, TAIPING, and TAMBUN.
We decided to use flash and do some interactive in the flash because people nowadays prefer user friendly interface. We design that easy for our end user understand where to click. 

We provides buttons. Besides that we also have a "Main Menu" button. This buttons allow user to go back to the main page of the "Cities and Town"

Once click on one of the 5 buttons will have the info of the cities and food tat famous in the cities.

FLOW CHART

Use of tools

a) PHOTOSHOP

Photoshop is useful for us to have the images that we wish to have. We can design our own images or pictures that suit with our contents. We used Photoshop to made banners, buntings and also the 5 cities buttons. 

b) Flash 

In order to reduce the number of webpage created by Dreamweaver, we have an idea of putting all our content in a flash. This easy for us to standardize our designs. It also user friendly because we applied the button navigation and interactions in the flash. Our end users only need to click on the buttons they can easily get the information they need. 

c)Dreamweaver

Dreamweaver enable us to create a websites with several webpages. The final products of Dreamweaver is the final products that present for the end users. 

Therefore, by the combination of the softwares above, a professional websites can be produce. 

Lastly we import our flash in the Dreamweaver. 

References

Most of the photo that we taken is search and downloaded from Google. Below is the links that we used for reference:

1.http://www.about-malaysia.com/perak/cities-towns.htm#tambun

2.http://www.j2kfm.com/perak-food-hunt/

Yeat Nai Huey - I search info abt the 5 cities in Perak. I plan to do buttons in flash and once click in will be the info of the cities and also food. Therefore, i doing this flash together with jong bee. Below is one of the buttons of the cities.
The info for cities and towns will be how getting there and a brief on the history of the cities.

This is one of the cities button that I done by using the photoshop software.

Jong Bee - I am doing the part of introduce the famous food in each city of Perak. For my part, I was searching what are the top famous food and what are the food you must eat if you are visiting Perak. Then the info will be combining with Yeat Nai Huey's part. I do did some photoshop on those food of Perak. Below was one of the pictures i have did.=)

.

* DREAMWEAVER *

Before this i talk about photoshop, now a brand new program is thought, which is DREAMWEAVER. 

DREAMWEAVER is a program that used to create website. For beginner that do not know HTML code well, dreamweaver will have  design view for us to design.

First of all, we need to create a folder specially for Dreamweaver. 

Then site> new site > click the path of the folder that you have created.

HTML > choose layout > save as 

I choosen 2 column fixed, one header one footer as my layout. I plan to have a standard webpage design ~ therefore ~ i have the same background for the footer n also the header for the webpage.

i inserted the background on the header by 

click on the header box > properties ( right side) > add property > image 

then i insert text and change the colour

i also made my content background black and the page properties background white =) 

Lastly i do change the background of the footer.

in my website got 5 webpage which are HOME, HOBBY, BLOG, RESUME, CONTACT.

i link every page . 

The resume i do attach Microsoft documents. 

Although is not creative my design ~ but fro me is simple n sweet.

The following is my last view of my design ~

Do visit my webpage 

student.mmu.edu.my/~1091102628

THE process towards the FINAL e-wall paper.......

 * The lab 3 and 4 submittion e-wall paper is uncomplete. After i submitted that one i have do some changes in it. I explained in this blog entry.*

I consultant our digital media lecturer, Mdm Lydia regarding my previous work ( refer to my third blog post--- LAYERING). The comments i received is the building too messy ~courses need not be showed out ~ No effort is done to my text. 

Mdm Lydia also prefer creative image compare to FOM building. After 4 classes ~ i learned more abt Photoshop. 

Therefore, I change my previous design. At first i have no idea how to change my e-wall paper. I decided to google image : PHOTOSHOP OPEN DAYs. 

Then i found a image that able to generate alot of idea for my e wall paper. That image i found is only provided raw materials but not the steps on how to do it. I referred to the E-books and GOOGLE whatever i dun understand. 

Finally i found few tutorials that help me a lot towards this creation of e-wall paper. ( Reference is attached bottom of this post )

1) I throw away all the buildings and the paper that written course offered. ( just like below)

Deleted the building and
hide the date and time.

2) I found some new raw images. I selected it using selection tools. 

I need the floor texture.

The books

I need the grass of this picture.

I plan to have something like this.
 

3) At first, i select out the floor and also the book. Then, placed it on my e wall paper. Just like below.

Before

4) Then i used rectangular marquee to select a portion of the grass. I the layer above the book the turn the opacity to 50% so that it can see through the book. 

Then, i click on the book layer and used quick Selection tool to select the book den i click on the grass layer. I select inverted, and delete the grass surrounded the book. 

Change back the grass opacity to 100. Then i used, Polygon Lasso Tools to remove the side edges made is more like the pages of the book. 

I used Filter > Liquidfy > Forward wrap tools ( to made like got the feel of open book )

Finally i use the Burn tools to put some shadow on the middle line of the book. I also used the Dodge Tools to highlight few areas. ( Reference for this is attached below.)

Final Result

5) Right after steps 4, i added some images that have the 3D perspective view on the book. I found a girl jumping happily picture, a roadsign, a girl studying and a tree. I selected out using selection tools~ i use almost all the selection tools ~ i explore myself on the selection tools so difficult to explain here.

Girl Jumping

Road Sign

Girl reading

Tree

6) I rearrange those raw materials state at step 5, i do some retouching skills to enhance my e-wall paper. 

I used burn tools to made some shadows of those images. I also use the blending options to drop shadows of the images. The road sign i decided to put FOM, FOE, FCM on it. 

Therefore i used text tools to type out the text. I did some blending on those words made it more 3D and more obvious.

Then transform> scale / skew / rotate ... the words made it like written on the road sign. 

At first i wanted to use the filter > vanish point, then select the text then delete it ( so that my vanish point page only show the ewall paper without text.) Right after i set the vanish point ( and there is a blue square) I pasted the words in it. Unfortunately, everytime i did that the photoshop programme will auto shut down.

I think is my computer cant support it. So, i used a more easy method (transform ) as i mention before. This is my result

7) I unhide all the layers. It like the images below ~ Mdm Chin said that course are not important and also the wording not special. So i did something towards the wordings.

8) I deleted the courses text layer. I use the paper, scale it to the size or the word " FOM OPEN DAY" then i create clipping mask. The " FOM Open day" texture is the paper. I drop shadow on it made it more 3D style. 

The wording at the bottom, i also create a clipping masks of flowers. Then i drop yellow shadow outside and inside. Then put some inner glow.

FINAL RESULT

REFERENCES:

http://photoshoptutorials.ws/photoshop-tutorials/photo-manipulation/make-a-story-book-come-to-life-in-photoshop/Page-1.html

http://www.pxleyes.com/photoshop-picture/4c215a3ec3e8a/The-Magic-of-Literature.html

http://www.adobe.com/support/photoshop/gettingstarted/

E-book uploaded at MMLS.

etc.

LAYERING ~~

Layering. The second lesson of adobe photoshop. 

From the previous class, 

i have select the raw material for the MMU e-wallpaper. 

Now, I need to combine layers of raw material together.

I have add some new raw materials to enhance my e-wall paper. 

First : FILM 

Second: MMU LOGO

Third: PAPER

Fourth: SKY

First, i made my white background gradient with blue colour. 

Then, I put the Film,e-bee, and the BACKGROUND on the blue background.

I transform some of my raw material and put on the film.( I play along the scale, rotate, skew, distort and others just to fit the raw materials into the black frame of the film) .

The result just as below:

Then I add the a Sky layer.

 After that, I added the FOM building and also the triangle building of MMU.
I used layer mask, dodge tools ( highlight, shadow, midtones), eraser ( background) to made the two building seems overlapping naturally.

I also add the text FOM open days. 

I used the "create wraped text" to made the words arc nicely. 

I also adjusted the blending option ( get from the layer properties), made the words with shadow.

    Next, I added the Multimedia University wordings on the left bottom.

I also added the date and time of the FOM open day.

Lastly i added the paper and wrote the course offered on the paper.

This is my final result:

Woots, finally done. Practicing Made Perfect.
I do explore the edit, filter, image,

 to made my e-wall paper perfect. 

I knew the more the time i spend, 

the more i will know about PHOTOSHOP!

GAMBATEH ! 

Thx for reading my BLOG! 

GOOD LUCK !

SELECTION~~~

Adobe Photoshop???? 

hmmmm~ some kind of software that use for editing photo?? 

I not familiar with it!!!!!!!!!!! 

Not familiar with the tools... I can say that i NOT FAMILIAR with EVERYTHING of this software.

Very headache and frustrated when i unsuccessfully do stg tat i wanted to do. 

" PRACTICE MADE PERFECT "  *be patient Nai Huey ! I believe u can made it !*

FIRST LESSON ~ SELECTION

The first assignment of Digital Media is a e-wallpaper abt open day.

Firstly, i need to find the raw material for my e-wall paper which is pictures for the e-wall paper. 

For example ,

FOM BUILDING 

E-BEE

MMU main gate

Admin Building

And many mores....... Then how can i omit the scenery around the buildings? 

This is where the selection comes in...

There are few selection tools. The tools i used the most for selection are as below

Rectangular marquee tools, quick selection tools, magic wand tool and polygonal lasso tool.

The first photo ( FOM building) 

1. I use the rectangular marquee tools to select the picture of the FOM building from the print screen.

2. Then i inverted the selection because i dun want the excess parts of the print screen.

The result after second step 

3. Use quick selection tools to select the sky part. I also minimize the diameter of the brush so that i can select the smaller part of the sky. 

4. At last successfully, select the whole building out.

There are a lot of raw material i have select out ~ cant show here one by one. The e- bee is a bit tough to select. At first, i use magic wand. But no matter how i select the e- bee will still not be perfectly selected. At, last, i used the quick selection tool also, select the area surrounded and invert it. if wan smaller part just use a smaller brush to click on it.

The main gate of MMU, i use polygonal lasso tools to draw a polygon, select and delete the area i do not need it.

The final work is uploaded in the MMLS. actually i have no idea how my e-wall paper look like. Therefore i only choose pictures that i think is related with my assignment. After learning more abt Photoshop, i believe i will have more idea on designing my e-wallpaper.