Post Authoring

I'm 100% with Flutterby's website! :D

The website was delivered through the use of an optical disc which is a Compact Disc. Only one CD was required since the size wasn't too big.

I've included a Readme.txt file to indicate the folders so that it's easier for Dr. Ken to go through.

That's all for this trimester!! :D

Hope this blog is useful for fellow classmates or for future students :D

TTFN!

Testing & Documentation

Testing

The testing process was done by the help of my classmates, Praveena & Syikin.

Pravena's part:

1) Test the GUI
2) Check whether the GUI's are standardized
3) Helped to improve the main page layout

Syikin's part:
1) Check the links
2) Try out the contest
3) Generated more ideas on navigations


Documentation

This blog is used to document all the processes such as the idea development process, the research, the reference and the Multimedia Process.

Hierarchical Flowchart

Flutterby's Flowchart

Click on image to enlarge

Flash Introduction

I've created a flash presentation for Flutterby's Introduction page. The file was created using Adobe Flash CS3 and exported as a SWF file. I also exported the file as an .avi movie file to view it using Windows Media Player. Here's the final video.

Adding interactivity through a Flash contest

To make the page more interactive, I created a flash contest where the customers have to drag their mouse over a masked image and guess the real image behind the mask.

Interactive Contest

This process requires some basic scripting which I learned recently from Multimedia Programming class.

ActionScript used

Adding background image to add variety

Having the same layout or GUI for all pages can be slightly boring. As a user myself, i want varities. To differentiate between the main page to other linked pages, I've created a background image. The background image will also help to avoid a linear look. By changing the GUI for some pages, users will feel less bored.

I personally like the stripy background image from Cupcake Fun.



Here are some try outs

A design that symbolizes Rythm (repitition) and Balance (Symmetrical)

This is a Contrast design.

I finally decided to go with a slightly softer design.

This design is a combination of Rythm and Unity. It's repititive, but it blends with the content.

Main page layout

I sketched the layout for my main page so that I can better understand what I wanna do and how I want it to look like. My main objective is to link all the pages smoothly and connect the page to each other. So I decided to make full use of the Main page (the index page) by adding brief information of each page. Confused?

Let's take a look at my sketches first before I explain further.

A Rough Sketch

Main Page Layout

As illustrated in the Main Page Layout above, all the content on the main page is a brief description of other pages. To read further, users will have to click 'more info' which will be linked to the right page. For instance, the caption 'New in Town' explains new updates briefly. By clicking 'More Info', the page will jump to 'What's New?' section.

Current progress : I'm 60% done with my website.

Attractions

E-Coupons
One of the ways to make users return to my page is through giving promotions regularly. The current promotion I created is E-Coupon. The coupon gives discounts to users in order to celebrate Flutterby's 3rd Anniversary. Users will have to print the E-coupon and present it during their visit to our store.


A few surveys have been done before I created the coupon. The best reference I got was from Thrifty.com



New Flavours
Another attraction would be new cupcake flavours. From time to time, Flutterby Cupcakes will add new cupcake flavours in order to increase customer's excitement.

Recipe Of The Month!
New recipies are also added to ensure customers return.

Events
The latest news and events are updated regularly. Current events are:

1. Chrismast Fiesta
2. IKEA's New Opening
3. Flutterby's Anniversary

Tips
Tips on baking and baking equipments are also provided to engage customers attention

That's all so far :D

Creating Named Anchor Point

Named Anchor is created to make the navigation easier for users when there's a loooooooong list of stuff. This is to help users jump to the desired section easily and quickly. Although my list isn't that long, It's a good way to experiment with Dreamweaver CS3's features.

Creating an anchor point:
1. At the top of the page, I listed down the titles of each section. Eg : Measurement, Conversion.
2. Then I created an anchor point at each heading section and named it accordingly. Eg: a1, a2.
3. Then I hyperlinked the titles at the top (Measurement/Conversion) to the anchored point (a1/a2)


Tadaaaaaa! Named Anchor is done! :D I also added a link that says 'Back to top' and linked it to the top of the page.

For more info, here's a tutorial from Youtube.

Named anchor can also be done to link to another document. Just link the file as usual, and add a # sign followed by the anchor name. Eg: filename.html#A1.

Templates and References

Templates
I hate templates. I edited the editable region on the main template and lost all the content on every other pages. So the conclusion is, never use template if you are a beginner in Dreamweaver! Loosing all the content was tough coz I had to re-create the content all over again. But it was a good learning process. After consulting Dr. Ken, I managed to find a better way to edit my website -> Use TABLES.

So I decided to use tables as a template. But before creating all other content, I had to make sure I am fully satisfied with the template in order to save time. So once I am certain of the template, I saved it in 6 different files (for 6 different pages).

The only problem is; If I decided to change anything, I'll have to change every single page. This is the troublesome part in creating a manual template. But then, it's better than loosing all your content ;)


Current Progress - Developing Content

So far, I have done 2 pages; Q&A and Quickies. I am still doing loads of research by referring to other websites such as CupcakeChic, YummyCupcakes & CupcakeFun. What I like about these websites (in terms of the layout and the content):

1. Cupcake Chic : Very simple and a straight forward design.
2. Yummy Cupcakes : Informative
3. Cupcake Fun : GREAT ideas, great design, loads of fun stuff.

I tried my best to combine all three designs and ideas into my website while creating the content. Here are some references / my source of information:

1. Recipes I refer to : Cupcake Fun
2. Baking tips : Nigella Lawson's.
3. Amazing Pictures : Happy Cakes Denver, Rachel, Minhnimie28.
4. Cupcakes names : Cupcake Lane Bakery

Those are all of my updated references for now :D

Starting The Index Page

I'm currently working on the index page. I've done the layout and put in the logo plus links to other pages. Here are some brief steps I took to build the index page:

Step 1
First is to re-create a logo that best suit the resolution for web. I tried cutting the images I did for the poster (last sem), but it looked horrible and very messy. Therefore, I decided to re-create Flutterby's header for the web, plus some buttons.

<-- Header

<-- Button 1

<-- Button 1 Rollover

Step 2
I like the 'table within a table' concept which Dr. Graphics illustrated in class. I find it easier to deal with tables rather than frames. As a start, I created a table according to what I need and added all the details needed.

Step 3
Then I saved it as Template (so that all my pages are the same). And I added an Editable region. After all is done, I saved it as index.html.

There you go. I still have loads to do, but that's my current progress =D

The Pre-Authoring And Authoring Process

Pre-Authoring Process

Alright, so it's time for me to start creating a website. But first, it's important to:

1) Gather all important information such as pictures & data from the internet.
2) Digg up all Photoshop, Illustrator & Flash files that I've done in the previous semester.
3) Research the internet further to find cool yet simple websites.


Managing The Media
And yes, Media Management is crucial, so I've arranged all the files that I have with me so far, into different folders. Will add up more files later on. Here's the overview of my folders:


The Authoring Process

Installing the Software (Tool)
As for the Software required, I decided to get the Adobe Design Premium CS3 CD from Syikin when the trimester begins. This CD contains all Adobe's latest software. Although this subject focuses more on Macromedia Dreamweaver and Flash, other softwares such as Photoshop CS3 and Illustrator CS3 is vital especially to edit the bitmap (pics of cupcakes) and vector (logos) files.


Creating A Site
For a kick start, I created a site and saved a test page. This site is named 'flutterbysite'. For those of you who are having a hard time starting, try creating a site. It should give U some moooooooooooood ;) [At least U'll feel like U've done something].


Importing Media Elements
After A site is created, I start Importing all the important stuff into the right categories.

Next? Time to have fun exploring the tools!

Since presentation is just around the corner, I'll have to speed up a lil bit! I'm waaaaayyyyy behind schedule :(

Will update soon. Till then, good luck all!

A Simple Proposal

Company Profile

Name: Flutterby Cupcakes

Product : Cupcakes

Description :

Flutterby Cupcakes provide Colourful Cupcakes of all sizes for all types of occasions such as Weddings, Birthdays, Engagements, Mother's Day, Baby Showers or even as a gift. These freshly baked cupcakes are suitable for all ages from kids, teenagers to adults. The best thing about Flutterby's Cupcakes is that it's made according to the clients desired theme such as Louis Voitton, Christmas, Rock, Kiddies, Easter, Valentines and many more.

Flutterby Cupcakes also provide Delivery services (in Klang Valley), Small greeting cards, and Flowers as a package to go along with the colourful Cupcakes.


Demographics or Target Audience

1) Malaysians

Cupcake Trends

According to Google Trends, Cupcakes trend have been increasing from year 2004 to year 2008. Google also ranked Malaysia as number 2 which might mean that Malaysians are fond of Cupcakes as compared to others. The trend of giving Cookies as a gift is widely seen in the United States (according to graph under cookies)

2) All ages

The graph above shows a man at the age of 68 was giving away Cupcakes as a gift on his birthday. This shows that Cupcakes are not only for the young generations but the elder ones as well.


References for content development

Referring to other sites made me better understand people's behaviours and needs. It help to broaden my ideas. I need to first understand how others view Cupcakes, their preferences and current news update in order to present the right information in my website.

Here are some interesting links about cupcakes:

Magnolia Cupcakes (The famous cupcake for the movie 'Sex and The City')

Why Cupcakes are HOT!

The Cupcake Class

Trendy Cupcakes


References for Website

1) Apple

I like the simplicity. This site was recommended by Dr. Ken and i fell in love with it the first time I looked at it. My favourite reference. But I need to put more colours on my page to fit my theme.

2) Cupcakes Take The Cake

It's not a website, it's a blog. But it's a good reference coz it's straight to the point and very simple. This blog is full of excitement!

3) Nike Woman

This page is really cool. I think the simple flash with the drop down menu looks attractive. The colours are bright and this page brings the readers to the right direction within a few clicks.

There are loads more references but I'm avoiding information overload. However, I will look at other websites from time to time to get more ideas on website layouts and content development.


The website

Theme : Light & Fun

Colour Blend : Brown & Pink & White

GUI :

Link Purpose

Home : To bring readers back to the initial page.

Products & Services :
To list out all the Services, Packages and Costs. Sub category -> Delivery, Flowers & Cards.

What's New? : Current promotions. Current events. Current News.

Contact Us : Email, Contact Number, Address.

Q & A : Customer inquiries

Quickies : Quick & Simple recipies. Baking Tips. Measurements (for baking).


That's all for now. Further addition (if any) will be added later on.

Wish me luck! =D

Part 2 of Flutterby Cupcakes

This second part is the continuation from previous project where I was assigned to create a poster and a short Video while exploring the tools in Adobe Photoshop CS2 & Adobe Premiere Pro. Only this time, the course focuses more on interactivity within a website (hence the name Interactive Multimedia). With the use of Macromedia Dreamweaver and Flash, I'm assigned to create a Website which consist of Text, Graphics as well as Animation (most important aspect).

I'll be using the same product & service which is 'Flutterby Cupcakes'. I chose the same product so that I can focus more on the software's tools & discover more things instead of wasting time to find a new product. This way, I can see the growth of my idea and skills through using more multimedia elements.

At the end of this trimester, I hope to have the experience of being a 'Webmaster' and learn to categorize content accordingly.

Cheers!

I showed my video to Dr. Ken and he said there are certain things i can improve:

1. The video towards the end with the jumping people, was a little too long (40 secs)
2. Need more Cupcakes images at the end of the video


Since I managed to complete my project slightly earlier, I had the advantage to edit it before the final submission. So here's my Video Finale:

Flutterby Cupcakes Finale

I think Dr. Ken has a point about the finishing of the video. After adding more cupcake images towards the end of the video, I think I'm satisfied with my work ;)

What Have I Learned? (Part II)

|Review of the Video|

1. T.I.M.E is precious
It took me almost a week to complete my video editing. I know I can go on and on since it's really fun, but Ms. May Chan (a lecturer from MMU) gave me a very good quotation when she talked about designing. She said 'The thing about designing is knowing when to stop"...

For me, that was the best thing to do. So I did my final editing and finally... I STOPPED! I know I'll never be satisfied with the outcome till the final day of the submission.

2. Recycle!
Most of the images used in the video was edited in Photoshop. I changed the brightness and the contrast to make the pictures look clearer and nicer. The first assignment has helped me a lot! Most of the pictures I edited in Photoshop for the Poster, was used again for the Video. Well, that was my approach to save loads of time ;)


|Problems|
There are some difficulties i faced while editing the video. And it took some time to actually find a way to solve it. In some cases, I cant solve it at all. Let's take a look at some of it in details :

1. The entire video file went offline

When the files are offline, the screen goes red. The first approach i took was to replace each clip one by one. It took a lot of time and by the time i managed to replaced all of it, It was time for me to leave for class. So I switched it on after I got back and guess what? It went offline again!!!

I had no other choice but to open a new Sequence and paste everything from the previous one. That sort of solved the Offline problem.


2. Program Shut-Down

There was something wrong with my video and I was unable to encode the file. Everytime i save it, the whole program shuts down. So again, I had to copy the whole finished video, opened it in a new project and export it as a movie.

Exporting it as a movie result to a larger file size. The file was 105,052 KB (too large for the web). But after exported, it's no longer a .propj (Adobe Premiere Pro). It's now an .avi file (I named it 'Sequence 01').

Then I opened a new project and dragged the 'Sequence 01' to the Timeline. Only then I was able to Encode it to a smaller .avi file. The size was almost similar, but the encoded file was only 4,158 KB. See the difference?

In my understanding, there might be something wrong with my software or one of my files was corrupted.

Flutterby's Video

Flutterby Cupcakes

Finallyyyyyyyyy, I'm done! Hoorayyyyyyy! The only thing I dislike is the black frame beside the image (gap). During the Encoding/Rendering process, I cropped the image to nicely fit the frame without having any gaps on top or on both sides of the video. However, after uploading the video, the gap appeared. If I have the time, I'll find a way to fix that.

This is so far my final outcome of the video. There might be changes though, since the presentation is next week. But hopefully, I can stick with this one ;)

Creating The Video

|Step 1|
The first step is to save the project. I saved my file as Cupcake Video.

|Step 2|
Next I started editing by opening all the images and the Sound files I need and dragged them to the Timeline.

|Step 3|
Then I created a text file by going to Title>New Title>Default Still. I chose default still because I didn't want the text to move.

|Step 4|
Since Flutterby represents Butterfly, I decided to put an animated butterfly to make the video more interesting. I animated the butterfly using Flash. The butterfly Image used is copied from flutterby's logo, then animated.

This is my first attempt to use Flash and the best and quickest way is definitely to Google for Flash Tutorial. I had no idea how to use Flash, so this time I had to follow the step by step tutorial (unlike the Adobe Tutorial where I only followed halfway and got the result I wanted before actually finishing the tutorial).

Animating the Butterfly using Flash

The Outcome

For the Flash Tutorial, click here

|Step 5|
I think my first try using Flash went allright, so I just proceeded to the next stage. I added the animated butterfly on the text and set it to Overlay (to make the text visible while the butterfly animates).

|Step6|
Next I added Video Transitions and changed the Speed/Duration for each Image and text.

Video Transitions

I also Increased the volume for the drumbeat to make certain part of the video more catchy.

Volume Adjustment

|Step7|
I played the video a couple of times to make sure that It's fine. Then I Exported the video. To do this, I go to File>Export>Adobe Media Encoder. I chose this option because I need to compress the video to a smaller size (to fit the web). And again, I managed to get an Adobe Video Tutorial from the internet, which thought me the trick to compress videos while maintaining the pixels. This guide is so simple to follow coz it's a video & audio tutorial.

For the guide, go to http://www.adobe.com/designcenter/premierepro/articles/prp2am_exportmovie/popup.html

Check out my final Video on my next post!

Captions for the Video

Before I begin editing the video, I need to create a storyline to make the video more interesting. This way, I'll know which picture to put. Here are the captions:

|First Phase|
It’s really not difficult to make people smile
Crack a joke
Bake some cookies
Or even by simply smiling at them

|Second Phase|
Want to know a better way?
Give them a cupcake!

|Third Phase|
Make your love ones HAPPY
Make your guests smile
Make your occasions worth remembering

|Fourth Phase|
Flutterby Cupcakes
The perfect gift for all occasion..

|Fifth Phase|
We can make your guests jump with joy!

|Sixth Phase|
Log on to www.flutterbycupcakes.blogspot.com
Or contact Ms. Kayla at 016-3020644

Now that the captions are done, I can start editing the video and suite the caption with the Audio.

Wish me Luck!

Materials for Video

Before creating the video, I need to gather materials to be inserted in the video. Since this project's requirements is to only use still images, I managed to get some interesting pictures that's related to the video.

Instead of putting only cupcake images, I decided to put Happy Faces to suite the happy theme. Here are some of the pictures:

Videos I Like

Check out these videos! I like the music. It blends with the video =) I hope I can make something like these 2 videos:

Cadbury Truck Commercial


Ferrero Rocher - Dazzle

I'm still looking around and trying to figure out my concept. In the mean time, I'll look for more commercials to get more ideas.

Enough with the Poster, Lets get on with the Video!

Previously, I planned to create a video based on classical English look (with English music). Then I thought, why not create something light and fun? So instead of using English music for the video, I plan to use the evergreen song by The Turtles, Happy Together. It's fun, creates a Happy mood and it's catchy too! If we create a happy feeling, of course people will remember it ;)

Here's a preview of the song:

I'm still at the first stage - gathering Information. I plan to start with my video somewhere around next week. I need to gather more info., familiarize with the software and try to learn flash (to animate some images). But flash isn't important for this project, so I don't wanna go into that too deeply. I'm focusing more on Adobe Premiere Pro.

What have i Learned?

|Review of the Poster|
While creating the poster, I started using more shortcuts than I ever did. Shortcuts helped to speed up my work and saved loads of my time!

I also learned to create the 'Soft Focus' or 'Glossy' effect. Although I didn't do the whole process, I was able to create my own glossy effect. And that was very satisfying ;)

I haven't done poster design for quite some time. Thought I wouldn't be that difficult since I used to play around with Adobe Photoshop. But I was clearly wrong. It took me some time to remember the shortcuts and tools. So next time if there's a project, I'll have to start doing wayyyyyyyyy earlier.

The most difficult part isn't doing the poster, but transferring my tacit knowledge. Being a KM student, I know I have to try my very best to share what I know. But it ain't that easy. We often plan on something and know why we do it (in our head), but to share with others why we do this and that, it's rather difficult. But I did my best to share what I know =)

I have to admit, if we didn't have to create a blog, I might not learn as much. Why? Coz I might just do things and don't even bother to share or to explain why I did that. At the end of the day, I might not remember what I did and might not be able to create the same effects (in Phtoshop) again. And I call myself a KM student? Haha. Well, I'm still learning ;) But knowledge sharing has always been my culture..

=D I'm happy coz one work is done!

Creating the poster

The first thing to do is to choose the right picture. I spend quite some time choosing the best picture (like choosing a model for a TV ad). There are loads of themes and colours. I decided to go with the red and white coz it's simple and nice. Not too colourful as well.

Unedited cupcake image

| Step 1 |
Before designing the poster, i set the image to:

1. CMYK colour (which is mainly for printing)
2. Resolution 300
3. Size: 29.7cm x 42cm (A3)

| Step 2 |

I opened the image in Photoshop CS2

| Step 3 |

Since I wanted my image to look glossy and dream-like, i searched for 'Photoshop Tutorial' for glossy effect and came across something called 'Surreal Soft Focus Effect'. I followed through some of the step by step process and got a satisfying outcome. The trick is the more you try, the better outcome you'll get. My outcome was different than the effect in the tutorial coz I played around with it a lil bit.

First I make a duplicate layer of the cupcake image (Hit Crtl+J) and change the name to 'Blur' . Then go to Filter - Blur - Gaussion Blur.

Gaussion Blur Effect

Then set the layer mode to Overlay. To get the desired Glossy effect, I duplicated the 'Blur' layer a few times to make it more 'dream-like'. There are a few more steps to complete the 'Surreal Soft Focus Effect', but I stop here coz this is exactly what I wanted.

Glossy Cupcake Image

Tadaaaaaaaaaa!!!!!

To view the Photoshop Tutorial, go to http://freephotoshopguides.com/. For the full 'Surreal Soft Focus Effect', click here.

| Step 4 |
It's now time to add some lighting. And as usual, I'll create a duplicated layer instead of using the original one (in case if I mess up).

Adjusting the lighting


The 'Soft Omni' light effect

Somehow I dont like the lighting effect. I need something light and tasty. Something that gives the dreamy-fantasy-cupcake-world look. So I'm gonna stick with just the Glossy effect.

| Step 5 |
I created another layer and make the Fill brown. This will be the background colour of my poster. Then I cropped the cupcake image and place it on the brown background.

Cropped Image on brown background

| Step 6 |

Next I added text. I chose pink text over brown background because pink is a light colour and it stands out on dark colours such as brown. In my opinion, pink and brown makes the poster look yummy! It suits the product.

According to my experience working in a web publishing department, there should not be more than 2 types of font in a design. So I decided to use just one font for the whole description. I chose 'Century Gothic' coz it's simple and it's easy to read.

Every text in the poster is double-layered (linked together) to make it sharper and stronger. With just one layer, the texts are dull.

Text added describing the product & service

| Step 7 |
If you notice, there's a few flower images that has a a watermark effect on the poster. For that, I pasted a vector image from Flutterby's business card (the raw material given by Kayla) and set the blending mode to 'screen' with 6% fill. I did that to make the poster looks filled but not too busy.

| Step 8 |
I added up Flutterby's cupcake logo and recreate the font similar to the original logo (the logo pasted will not have a sharp text). The font used for the logo is Bickham Script Pro (90pt) - double layered.

Logo without text

Logo with text

| Step 8 |

To make it more interesting, I re-create a vector graphic from Adobe Illustrator CS2. The reason for me to re-create (although I have all of Kayla's raw materials) is because Kayla did the whole design in Adobe Illustrator CS3 and created an outline (to print the image). I was unable to paste it in Adobe Photoshop due to 2 reasons :

1. The file was created in CS3 (It says that I will loose some data if open in CS2).
2. Outline was created.

So instead of installing Adobe Illustrator CS3, i decided to have a lil fun with Adobe Illustrator CS2. I used the pen tool to trace the image.

Tracing process using 'Pen' tool in Illustrator

Then I copied the image and paste it to Adobe Photoshop. The vector image was resized (using the transform tool) by going to Edit - Transform - Scale / Rotate. I hit Crtl+T for the shortcut. When I'm happy with it, I rename the layer as 'Curve'. I also added some small butterfly images (from Kayla's raw material) to make it more attractive.

Tracing outcome

| Step 9 |

For final touch, I changed the 'Blending Options' of the texts, adding a couple of effects such as 'Drop Shadow', 'Outer Glow' and 'Inner Glow'. This should give some weight to the texts making it more attractive.

'Blending Options' Effects

| Final Outcome |

There you Go!

Since I set the image to CMYK (mainly for printing), the colour isn't that accurate on the web. Anyway, I can say that I am 98% confident that there will be no changes for the poster. However, nothing is fixed untill the final submission.

Now I can move on with the video! =)