Thursday, 20 December 2012

Design (Second Attempt)

Im going to Indonesia with my family next week for holiday so Im not gonna be free for my 2 weeks break. So I did some design to allow me to start of quick with my coding when Im back. These are my second attempt on my design. For me is better then the first one. Haha.

Logo Design




Interface Design



Button RollOver ( I love this so much )




I love the second attempt so much although this wasn't insert to my learning but it made me eager to learn how to make it so I really put a lot of effort on the design and I hope the coding goes smoothly. :D

Button Reference (RollOver Effect)



Theoleg.com (n.d.) TheOleg | Freelance designer. [online] Available at: http://theoleg.com [Accessed: 10 December 2012].






Wednesday, 19 December 2012

Moodboard

I wanted the website to look clean and minimalist design for my website so that I have more freedom on doing my learning on the coding and effects. So this is the mood and feel that I will do.


Black, simple and clean. :D

Theoleg.com (n.d.) TheOleg | Freelance designer. [online] Available at: http://theoleg.com [Accessed: 10 November 2012].

Jeremylevine.com (2007) Jeremy Levine Design. [online] Available at: http://www.jeremylevine.com [Accessed: 12 November 2012].

Thibaud.be (2005) Thibaud's Portfolio. [online] Available at: http://thibaud.be [Accessed: 12 November 2012].

Mis-architecture.co.uk (n.d.) PMA | mis-arch. [online] Available at: http://www.mis-architecture.co.uk/#/mis/projects/project/all_that_is_solid/andrea-11web.jpg/ [Accessed: 15 December 2012].

Squelchdesign.com (1998) Minimalism in Web Design. [online] Available at: http://squelchdesign.com/web_design_newbury/minimalism_in_web_design/ [Accessed: 15 December 2012].

Saturday, 15 December 2012

Transition Learning

Tutorial that I've downloaded online for me to learn

Yanez, C. (2009) Create an iPhone-like Flip Effect in Flash Using ActionScript 3.0 | Activetuts+. [online] Available at: http://active.tutsplus.com/tutorials/effects/iphone-page-transition-flash/ [Accessed: 26 November 2012].





Then I implement it to my concept by using simple shape.



I change it into whenever I click on the big circle it triggers the other 3 to flip together but it wouldn't work. I tried for several type before but it still couldn't flip as what I want it to so I have to think of another type of transition.

Monday, 10 December 2012

Design

Was testing some design on the look and feel but it looks weird. I tried using vector to design the logo and then the background. This is just some sketches to get some idea on my design. I gave some of my classmates to see and they said that the logo does not make sense and the color scheme looks weird so I think I need to further develop my UI design.

Logo Design (First Attempt) 


Mainpage design (First Attempt)



Button RollOver design (First attempt)


 Bee page design (First attempt)


Button Reference (RollOver Effect)


Theoleg.com (n.d.) TheOleg | Freelance designer. [online] Available at: http://theoleg.com [Accessed: 10 November 2012].


Theoleg.com (n.d.) TheOleg | Freelance designer. [online] Available at: http://theoleg.com [Accessed: 10 November 2012].

Image References


Iryna, M. (n.d.) Black bee silhouette isolated on white background. [image online] Available at: http://www.shutterstock.com/pic-108914837/stock-vector-black-bee-silhouette-isolated-on-white-background.html [Accessed: 9 December 2012].


Sweet Clip Art (2011) Simple Black Eye Logo Design. [image online] Available at: http://www.sweetclipart.com/simple-black-eye-logo-design-127 [Accessed: 9 December 2012].
Printer Killer (2011) Dog Head profile. [image online] Available at: http://openclipart.org/detail/166603 [Accessed: 9 December 2012].

All Free Download.com (n.d.) Ferraris Horse. [image online] Available at: http://all-free-download.com/free-vector/vector-logo/ferraris_horse_28985.html [Accessed: 9 December 2012].






Sunday, 9 December 2012

Refine Wireframe

I started off doing wireframe first so I have a based on doing my coding. After that, I can implement my simple design regarding to this wireframe too. 

Bee Wireframe
Transition Shape

POV page

I use the shape like beehive to make the page and also the eyes of a bee although it was not the exact type of a view from a bee but using a semiotic type of view to let the users know how and feel of a bee view.


Horse Wireframe
Transition Shape

POV page

Basically Im using the shape of rectangle to design the horse page because the view of an horse are block in front of their eyes by their nose.

Dog Wireframe
Transition Shape

POV shape

This shape was implemented by following the shape of a dog eyes which is really round.

My main concept of my design was to really implement all the shapes and transition relating to the view of an animal. Hope I did that:D


Saturday, 8 December 2012

Basic Actionscript - Refresh

I did some refresh on the action script of my pass assignments. This is to help me refresh my memory of flash so that I've could start fast.

This is the assignment which I did as internal action script.





Then this is the assignment which I did as external action script using tweenmax for the animation.




At the end, I choose to used and learn internal action script because I know that there are many animated effect which I can easily experiment more. Tweenmax is very hard to determine the exact place that I want it to stop or even move.

Thursday, 6 December 2012

Refine STI and Gantt Chart


STI Project redefinition


Name

Ashley Hang Pui Yee 09321863 BMM1005-1
 What is the self-directed, focussed learning about a technical or practical topic connected with digital media?

I want to learn flash on applying creative effects on the cursor and the transition from page to page.
-       Adobe Flash
(Actionscript, javascript)
-       Adobe Photoshop
What is the digital media artefact which will demonstrate the achievement of the learning targets? Spell out the project outcome(s)
A connected of artefacts:
A swf file which contain 3 different types of transition of animals and cursor effects which will be the eyes of the animal point of view. There are 3 animals that I will be focusing on which are bee, horse and dog. Each animal will have a story to allow the user to experience on with different point of view from the animal angle.


A group of artefacts:
1.

2.

3.

Provide a project description (Project aim, TA, content, delivery platform)
Aim: To allow user to understand about different type of animals have different type of views.

Content: A creative website which allows the user to understand different type of eye vision by using the cursor as the eye.

A page which combine all the page together.
A page which contain effects on dog’s eye on the cursor and the image is movable.
A page which contain effects on snake’s eye on the cursor and the image is movable.
A page which contain effects on bee’s eye on the cursor and the image is movable.


Target Audience: Teenagers and Young adults. (15 – 25)

Delivery Platform:  1 swf file combining with 3 pages.




A gantt chart of action plan(s) of the technical learning with dates and interim targets and artefact production plan



No.
Task
Week1
Week2
Week3
Week4
Week5
Week6
Week7
2 weeks holiday
Week8
Week9
Week10
Week11
Week12
Week13
Week14
1.
Brainstorming, researching, confirmation of ideas















2.
Blog entries















3.
Tutorial exploration ( Masking, basic actionscript, storyboard)















4.
Mock-Ups, Moodboards, wireframes, art direction















5.
Flow chart















6.
20% progress on flash ( design of website ) Actionscript – 15 hours















7.
Take Photography















8.
Edit Photos in Adobe Photoshop – 10 hours















9.
60% progress on
flash ( cursor effects and image )
Actionscript – 30 hours















10.
Learn masking on cursor in Adobe Flash – 5 hours















11.
Learn image movement in flash – 5 hours















12
90% progress on
flash ( transition of image )
Actionscript – 20 hours















13.
Learn how to make transition between image and story. –
5 hours















14.
100% progress on
flash (Sound effects ) –
5 hours















15.
Refine artwork















16.
Blog submission















17.
Artefact Deadline















18.
Drafting















19.
Refinement















20.
Reflective commentary

















Progress

Learning

Deadline