red shoes

flash actionscript 3.0 - random images

2009-06-02T22:14:00.011+08:00

wee mei this is for you. if your class anyone of them dont have the script can ask them to copy from here too :)

1. create one movie clip for eg: music_chord_mc.
2. double click on the mc. inside create a few object, one in each frame. i used 3 frames.
3. put it on the stage
4. name those instance. i will name it 'music_chord_mc' and 'music_chord_mc1'. it can be different names too

you can remove all // (instructions) if you think it is too messy on your script.
----

//begin here: as on main stage, i put two items here for you.
stop();

//this part is to make the object appear random first before appearing. if not all your same duplicate mc will come out same object the first time.
//ok this figure u must get it right. if total frame in the mc is 3 then you get this *2+1, if you have 5 frames then you put *4+1. this and the bottom do not need to be the same mc. but mine is the same mc, different instance. so i just change the instance name only.
//add more lines here if you have more objects
music_chord_mc.gotoAndStop(Math.round(Math.random() * 2+1));
music_chord_mc1.gotoAndStop(Math.round(Math.random() * 2+1));

//these few var are for all the random images.
var top_Y:Number=-30;
//meaning i want object to appear -30 above the screen. it depends how tall your images is

var btm_Y:Number=900;
//make this figure slightly more than your document size height, so that the whole image will disappear before it appears again

var speed:int=5;
//the speed set

function moveChords(e:Event) {
// moveChords can name any name, just make sure you put the same name at the end

//your first random object. name it here according to how you name the instance. everything after if it when preparing for the random before coming into the screen
if (music_chord_mc.y>=btm_Y) {
music_chord_mc.y=top_Y;
music_chord_mc.scaleX=Math.random() *1+0.5; //0.5~1.5 .all the first number like 1, 360 is the original size. if you want to change, you change the second number after the + or -
music_chord_mc.scaleY=music_chord_mc.scaleX; //following the scale of X
music_chord_mc.rotation=Math.random()*360-180; // -180~180, so that it doesnt turn more than 1 round, this rotation is for when it appears. this does not make the image rotate on stage. it just appears rotated but stay the same thruout
music_chord_mc.alpha=Math.random()*1+0.2; //0.2~1 // is for transparency, if you do not want your image transparent, remove this
music_chord_mc.gotoAndStop(Math.round(Math.random() * 2+1)); // this is to make the next image appear randomly
} else {
music_chord_mc.y+=speed; //everything after 'else' is what you want to see happen on stage. like below rotation on stage
music_chord_mc.rotation-=1;
}

//your second random object, add more if you need.
if (music_chord_mc1.y>=btm_Y) {
music_chord_mc1.y=top_Y;
music_chord_mc1.scaleX=Math.random()*1+0.7; //0.7~1.7 different from top
music_chord_mc1.scaleY=music_chord_mc1.scaleX;
music_chord_mc1.rotation=Math.random()*360-180;
music_chord_mc1.alpha=Math.random()*1+0.2;
music_chord_mc1.gotoAndStop(Math.round(Math.random() * 2+1));
} else {
music_chord_mc1.y+=speed;
}

this is the same thing... but i dont want the object to rotate on stage so i remove that here. i make changes to some of the random so that it doesnt all appear the same.

//this is the closing of it. any mc or instance you add, just add in the middle before this line.
}
this.addEventListener(Event.ENTER_FRAME, moveChords);

art direction and text organization

2009-05-25T22:25:00.007+08:00

moodboard

site map

* are most probably pages i will be working on

flowchart

more research

2009-05-25T22:11:00.005+08:00

project definition
This project is to redesign the website of:

www.spsetia.com.my/setia_alam/index.htm

The purpose of this redesigning is to improve the aesthetic and functionality of this website. Research will be based on study of the target audience and their behaviour towards using this site. This ought to increase the percentage of user, and by providing what they need should increase the percentage of sales as well.

---
client's analysis
COMPANY BACKGROUND
S P Setia Berhad is recognised as Malaysia’s leading listed real estate player with a proven track record of innovation-driven and standard-setting developments spanning the full spectrum of the property market from master-planned townships to thriving commercial hubs. S P Setia has also won international acclaim as attested by its three year-ranking as Malaysia’s No.1 developer in The Edge Malaysia Top Property Developers Award and Euromoney Real Estate Awards in 2005, 2006 and 2007. The Group’s core business activity of property development is supported by its construction and infrastructure and wood-based manufacturing divisions to deliver product and service quality of the highest standards to its customers.

VISION
To be in the BEST in all we do

MISSION
We aim to provide superior customer service and satisfy customer needs through a culture of excellence to enhance shareholders’ value. At the same time, to be a caring and responsible employer mindful of our social responsibility.

MOTTO: Q-SERI
Q: quality
S: speed
E: efficiency
R: reliability
I: integrity

GUIDING VALUES: Values That Guide Our Work
• We uphold quality as our first priority
• We are customer-focused
• We are effective and efficient at our tasks
• We practise continuous improvement
• We provide reliable and timely service
• We embrace Information and Communication Technology (ICT)
• We are also profit-orientated

---
project analysis
TAGLINE
Setia Alam... In Touch with Nature

- live . learn . work . play
Setia Alam is one of the many projects of SP Ssetia Berhad. Setia Alam is an integrated development spanning over 2,500 acres of freehold land slated to become one of the biggest and best-planned townships in the Klang Valley. Consisting of residential, commercial and institutional parcels, this township is well supported by functional features and facilities that combine an eco-sensitive lifestyle living truly “In Touch with Nature”.
Located in Shah Alam, one of the most modern cities in the country, Setia Alam is destined to become a vibrant community where man and Nature co-exist in serenity and splendid harmony. The township will be your sanctuary where you will be able to enjoy the simpler pleasures of life - your family, your neighbours and Nature in all its glory.
Setia Alam is centrally located with easy accessibility whichever way you are traveling from. It is well served by an extensive network of highways, making traveling to Kuala Lumpur, Subang, Shah Alam and Klang just a breeze.
The newly opened NKVE-Setia Alam Link connecting Setia Alam to km3.3 of the North Klang Valley Expressway (NKVE) affords effortless access to the thriving township. It now takes only 10 minutes to reach Damansara, 20 minutes to Kuala Lumpur and 45 minutes to the Kuala Lumpur International Airport (KLIA).
Other upcoming highways in the vicinity include the West Coast Expressway, the Shah Alam-Batu Arang Highway and the New North Klang Valley Expressway (NNKVE) which will significantly improve future accessibility.

---
target audience
Extended decision making is the response to a high level of purchase involvement. An extensive of internal and external information search is followed by a complex evaluation of multiple alternatives. Factor influencing the purchase includes convenience – location and facilities, space, price, aesthetic, reliability of the developer, peers opinions

WHO?
1. Older married couples with dependant children
- reason of puchasing: looking for a bigger place for the family, wants a more comfortable to spend the next season of his life.
- process of decision making will probably be to fulfill the needs of the family. Even though the whole family play a role in this decision making. Ultimately the parents will probably be the final decision maker who most of the time is looking for something more conventional and stable, as they tend to see more in long term satisfaction. Most of the time purchaser is ready to increase the budget if necessary since he intends to stay there till he retires.

2. Young married couples
- reason of puchasing: a new home to start a family.
- process of decision making will normally have to work around a budget since weddings and everything else happened at the same time. Most of the time couples plan to stay in this house for the next 5-10 years or up to two kids before they move to a bigger home.

3. Young capable singles
- reason of puchasing: a young bachelor/bachelotte who is in their 26-30s, who has enough savings and would like to start investing in property.
- process of decision making might be about status/image and profit. Peers opinions and media play an equally important role because user is still new in this.

WHAT ACTIVITY ARE THEY DOING ON THIS SITE:
- shopping for houses
- comparing prices, pros and cons with other options from this website itself
- comparing prices, pros and cons with other options from competitor website
- checking progress of their property

---
current site's analysis
missing:
- "print this page function"
- "sent this page function"
- interesting images and interior of the houses, to help stir up excitement in buyer to visualise their dream home
- "search from the right home", to help locate options base on needs and eliminate those those options that doesn’t fit

webpage revamp

2009-05-18T13:43:00.020+08:00

client:sp setia

competitors
1. sime darby

2. pj development

3. campion real estate

4. wall estates

nice websites
1. discover trails edge

+ point: it feels very at home. nice images attracting the eyes.
- point: flash might waste a lot of time of the user since their main purpose is to search for data.

2. bda global

+ point: very organize, simple but it looks very dynamic at the same time.
- point: similarly flash might not be necessarily for target audience.

3. wedding website

4. 13 creative.com

+ point: the loading time for this page is fast. the javascript loading of images make it looks dynamic.

javascript and tutorials
1. w3 avenue
study more and more css.
2. dezwozhere.com
css, accessibility and stadards.
3. web developer handbook
a library of all kind of questions and creative links.
4. A list apart
all css site seems to link a lot to their entry. so i guess if i want to conquer css.
5. 40 oustandings css techniques
this is a quick read for all i need to know.

design and tutorials
1. css remix
- all the nice css website as reference. love this.
2. well designed css sites
- this is good, going through nice websites and realised that i cannot do it in css and javascript is a waste of my time.
3. best web gallery
- more, more, more gallery.
4. colour lovers
- all about colour pallete.
5. design shack gallery
- another library of more nice sites.

user testing

2009-04-10T02:39:00.003+08:00

please be very kind to visit my latest work here and let me know what you think about it. fill up the poll on the side and feel free to comment. i only have half a day left only, so would appreciate if you will company me through these last hours hahaha...

DIY website layout

2009-02-19T13:26:00.006+08:00

main page

step by step

final product1

final product2

final product3

moodboard

2009-01-23T10:08:00.002+08:00

web design brainstorming

2009-01-18T22:26:00.010+08:00

how-to-do ideas
1. scrapbooking - example of photo pages, different materials, use-what-you-have like buttons and tickets and magazines, different formats and bindings
- art direction proposal: vintage look. fabric and paper tear off effects, with laces.
- reference: top 50 scrap booking blogs, diy, asia biggest community
2. valentine's day ideas - message in the bottle, heart shape jar, love notes. 100 additional valentine's ideas.
- art direction proposal: pink, brown, white illustration
- reference: valentine's day project

tutorial on how-to-do website
1. how-to-build-websites
2. funky flash websites
3. web design by a blogger
3. about.com forum

nice website designs
1. design sponge

2. miki amano the illustrationist

3. cupcakes

4. gara di nervi

no.5 going up transition

2008-10-22T02:59:00.007+08:00

if someone clicks the heart (new life) on the top right. they will go to this happy ending transition. the frame will go back to the first page in the Garden of Eden. everything can repeat itself again.

no.4 the games

2008-10-21T23:40:00.020+08:00

it will automatically load to this page with instructions

cursor can only go from left to right.

once shoot, that animal will be with a blood patch.

replace by any random animal. meanwhile the rest of the animal will continue to come forward. and when it touches the front, the life line will reduce. adam and eve heads will make some movements as a sign of injury.

if user does not click on new life before the life line finishes. this page will appear. until user uses the heart.

no.3 transition page

2008-10-21T22:59:00.007+08:00

after the user partake the forbidden fruit, they will immediately enter into this screen. nothing can be clicked in this transition page.

no.2 main page

2008-10-21T21:57:00.014+08:00

the arrow will move, to indicate user to move to the right of the page.

as they walk close to any tree trunk, the patch on the face of eve will turn the pattern on the fruit, and the face of adam will turn the pattern of a leave. follow by them jumping with excitement.

they will jump alternately to show signs of movement.

when click on the title bar or roll over the title bar, the synopsis of the story will come out. roll over is allowed because in this game the chance are very minimal for a mouse to touch the sky unless a user is exploring.

page 2 of the synopsis.

eventually user will finish exploring the whole garden and do exactly what adam and eve did, eat from from the forbidden tree.

no.1 loading page

2008-10-21T19:32:00.011+08:00

loading page progress based on the story of creation in the book of genesis.

day1 (10%-30%): God created light out of darkness.

day2 (40%): God separated the water out of the sky.

day3(50-60%): God gathered the water into one place and land appear. The earth green up with seed bearing plants.

day4 (70%): God made sun to govern the day and stars to govern the night.

day5 (80-90%): God made fishes, birds and wild animals (the serpent also one of my main character).

day6 (100%): God created man.

*it is small and only occupy the center of the page so that it will not take too long to load.

colour template

2008-09-22T02:18:00.005+08:00

1 warm

2 cool

3 autumn

4 spring

5 summer

6 winter

7 pastel

8 vibrant

9 calm

10 stormy

11. desaturated

12 saturated

13 fantasy

14 metal

15 tint

16 moody

17 nature

18 haunted

19 sexy

20 modern

myth, folklore and legend

2008-09-14T23:09:00.004+08:00

getting the definition correct first from here.

1. The Garden of Eden
In the Genesis stories about the Garden of Eden, Adam and Eve were given eternal life. When the serpent deceived them to eat from the 'tree of knowledge' that God warned them not to do so; they brought sin and disease into the world with their disobedient. God disqualified them from eternal life so that sin will not live forever.

2. Issun-bōshi (the one-inch boy)
The One-Inch Boy (一寸法師 Issun-bōshi; sometimes translated into English as "Little One Inch") is the subject of a fairy tale from Japan. This story can be found in old Japanese illustrated book, Otogizōshi, and has been various forms around the world and is similar to the tradition of Tom Thumb in English folklore.

The story is about an old, childless couple who live alone. The old woman wishes for a child, make a hopeful prayer despite her old age, "even if he is only one inch tall." Soon after, the old woman's wish is granted. They name the miniature child Issun-bōshi ("One-Inch Boy"). The child, despite being incredibly small, is treated well by his parents. One day, the boy realizes he will never grow taller than one inch, so he goes on a trip to seek his place in the world. Fancying himself a miniature samurai, Issun-bōshi is given a sewing needle for a sword, a rice bowl for a boat, and chopsticks for oars.

He sails down river to the city, to look for a job. he ended up at the home of a wealthy daimyo (lord), whose daughter is an attractive princess. He is scorned for his height, but nevertheless given the job of accompanying the princess as her playmate. Once traveling together, they were suddenly attacked by an Oni (or an ogre in some translations), who deals with the pesky boy by swallowing him. The boy defeats the Oni by pricking him from within with his needle/sword. The Oni spits out Issun-boshi and drops a magical Uchide's Mallet as he runs away. As a reward for his bravery, the princess uses the power of the mallet to grow him to full size. Issun-bōshi and the princess remain close companions and eventually get married.

isometric pixel art

2008-09-14T22:00:00.024+08:00

pixel art = using pixel to form image/graphic/pattern

1. pixel art probably has its beginning from:
MOSAIC ART >> 4th century BC. using small pieces of coloured glass, stone or material to create a pattern or picture

CROSS-STITCH >> using an x-shaped stitches to form a picture. one of the oldest cross-stitch artwork is dated around 850 after CB. it is about 10th and 13th centuries that it started to spread. made famous during the renaissance period. more.

VIDEO ARCADE/COMPUTER GAMES

2. other interesting expression of pixel art

rubik cube formation

human formation

---
isometric = is a method of making a 2d object appears 3d by tilting it 30 degrees. the measurement is normally equal length. NOT an artwork of one perspective point.

comparison: using lesser pixel (left), more pixel (right)

the first four figures are isometric pixel art of the 5th pixel art

reference:
idn famous, eBoy
a town, pixel freak
a whole city, gooncity
smashing magazine
info
typeface