Lesson 11

Web hosting:

To make your Web site visible to the world, it has to be hosted on a Web server.

Using an Internet Service Provider

Renting a server from an Internet Service Provider (ISP) is a common option.

Most small companies store their web site on a server provided by an ISP.

 

Web Hosting Domain Names

A domain name is a unique name for your website.

Choosing a hosting solution should include domain name registration.

Your domain name should be easy to remember and easy to type.

 

What is a Domain Name?

A domain name is a unique name for a web site, like w3schools.com.

Domain names must be registered. When domain names are registered, they are added to large domain name register.

 

The best domains have the following characteristics:

Short - People don't like to type! A short domain name is easier to type, read, and remember.

Meaningful - A short domain is nothing without meaning, 34i4nh.com is not easy to enter or to remember. Select a domain that relates to your site in a way that people will understand.

Clear - Clarity is important when selecting a domain name. Avoid a name that is difficult to spell or pronounce.

Exposure - Names that are short and easy to remember are an asset. In addition to visitors, also consider search engines. Search engines index your site & rank it for relevance against terms people search for.

 

Web hosting website:

http://freehosting.com/freewebsite.html

http://smallbusiness.yahoo.com/webhosting

 

Free hosting & domain website:

http://www.000webhost.com/

 

Video demo: Free web hosting & how to upload your website  to the internet

http://www.youtube.com/watch?v=P5zUtmEIJ3w

 

File Transfer Protocol (FTP)

Once you have created a site on your hard drive (local site), you need to get it up on to the web. This is called "uploading" or FTP.

 

Download filezila application from this site:

https://filezilla-project.org/download.php

 

Use Dreamweaver to setup FTP

http://webdesign.about.com/od/dreamweaverhowtos/ig/Set-Up-FTP-in-Dreamweaver/

 

CSS revision:

http://www.youtube.com/watch?v=i6Vo-Kv-4n4

 

Lesson 10

SOUND

One of Flash's hidden strengths is that it can consistently and reliably play back sound across a wide variety computer plateforms and environments. Flash works with a variety of sound formats, including WAV, AIFF & MP3 files. MP3 is the best format because it produces smaller files while maintaining excellent sound quality.

Crontrolling sound with On/Off buttons using:-
- Behaviors
- Action Scripts

Control with OFF button using Behaviors:

• On the Timeline, insert new layer & name it buttons. Drag the buttons (must first convert to button symbol) to the stage.
• On the stage, click on the OFF button, go to Window > Behaviors > Sound (change to actions script 2.0) > Stop All Sounds > OK.
• Choose Control > Test Movie to test the sound OFF button.

Control ON button using Action Scripts:

• On the Timeline, add new layer & name it actions. Make sure action layer is above all the other layers.
• Click on Frame 2 of the actions layer, press F5 to add frame, repeat the same step for the rest of layers (for this technique to work, at least two frames on the Timeline).
• Select Frame 2 on actions layer, press F7 to add a blank keyframe.
• Press F9 to open Actions panel.
• Select Global Functions > Timeline Control > double-click the stop action to add it to the Script pane ((this action tells the playhead to stop action to stop when it gets to Frame 2).
• On the stage, click the ON button to select it. In Actions panel, select Global Functions > Movie Clip Control & double-click the on action to add it to the Script pane. Select Event: Release.
• Select Global Functions > Timeline Control & double-click the play action to add it to the script pane. (this action tells the playhead to move to the next frame, which is Frame 1, causing the sound to begin to play again.

VIDEO

Flash can import video in the most popular file formats including MOV, AVI, MPG/MPEG, WMV. If the file format not supported, use Adobe Media Encoder for conversion.

Import video with playback component

• Import video > On your computer > Load external video with playback component > File path Browse > (select the video file location)  Next > Skinning (can change the colour of controller & type of skin) > Next > Finish Video Import.
• Video that do not support flash were required to convert video file to FLV or F4V format. Click on Launch Adobe Media Encoder for conversion.
• Go back to Load external video with playback component to reselect the FLV/F4V video again.

Video Demo: http://www.youtube.com/watch?v=_6LfWz0QL1M&hl=en-GB&gl=SG

To create simple picture slider in Flash
Video demo:

http://www.youtube.com/watch?v=t7PgXL-Vc3I

Further reading:

http://www.flash-game-design.com/flash-tutorials/flash-gallery-tutorial.html

PUBLISHING & EXPORTING

You test movie in flash using Control > Test Movie to generate a SWF file.

Publishing offers many more options & greater control over the final output

Publish Preview Versus Test Movie

The Publish Preview command gives you the most accurate representation of how your movie will look on the web. The preview you see when use Control > Test Movie does not always appear exactly the same as the published movie appears on a Web server. For example, sound in your movie may vary slightly, and complex animations may animate slightly slower when using Test Movie command. To be safe, use the Publish Preview or Publish command to view the movie before you upload it to the Web.

 

File > Publish Settings > check Publish flash (swf) & check Other Formats HTML

Target > Flash Player 9 (Dreamweaver CS6 doesn't support anything higher than player 9)

 

File > Publish Preview > Default HTML

 

Integrating with Dreamweaver:

 

Create SWF files using Flash and then use Dreamweaver to integrate the SWF file with the required HTML documents.

Open DW doc.

Insert > Media > SWF > select swf file.

Lesson 9

Animation Basics

- Understanding Keyframes & Frames

Keyframes & Frames

Video demo on understanding keyframes & frames

http://www.youtube.com/watch?v=0n4x-SJKai0

- Frame rate
What is Frame Rate?

Frame rate determines the number of frames your movie plays per second. This rate corresponds directly to the length of time your animation takes to play.

 

Frame rate.

 

Further reading on Frame Rate:
http://www.adobe.com/devnet/flash/learning_guide/animation/part02.html

Symbols & Instances

• Flash symbol as a master object or stamp.
• Use it multiple times throughout your movie.
• Reuse a symbol, it is called an instance.
• Key to reducing the file size & download weight of Flash documents.
• Three type of symbols in Flash:
• Graphic symbols (http://www.youtube.com/watch?v=Myu66Y42Xz0)
• Button symbols (http://www.youtube.com/watch?v=tZDvHpZD3mA)
• Movie clip symbols (http://www.dummies.com/how-to/content/how-to-create-and-place-movie-clips-in-adobe-flash.html)

Further reading on the 3 type of symbols:
http://www.flashpotential.com/2011/11/part-3-3-types-of-symbols-introduction.html
http://help.adobe.com/en_US/flash/cs/using/WSd60f23110762d6b883b18f10cb1fe1af6-7deea.html

Motion Tweening

A motion tween animates symbols moving in space; when you create a motion tween, then you can click on any frame in the tween, move the symbol on that frame, and watch Flash automatically build a motion path animating the frames between that frame and the next keyframe. Any frame where you've manually moved the tweened symbol becomes a keyframe.

 

Video: http://blog.infiniteskills.com/2012/08/adobe-flash-cs6-tutorial-motion-tweened-animation/

 

Shape Tweening

In shape tweening, you draw a vector shape at one specific frame in the Timeline, and change that shape or draw another shape at another specific frame. Flash Professional then interpolates the intermediate shapes for the frames in between, creating the animation of one shape morphing into another.

Video: http://www.youtube.com/watch?v=fGZ-XtQk5Q4

Lesson 8

HTML is ideal for creating static websites where text and images are placed at fixed positions.

But it doesn't really support dynamic sites, where text, images, and animations are moving around on the screen.

 

Introduce Flash

Flash is the industry standard tool for creating rich media content. Flash project can include:-

- Interactive website

- Animation

- Advertisements

- Audio & Video streaming

- Company presentation

- 2D or 3D games

Flash sites vs non-flash sites

Flash portfolio website 
http://allexarts.ry/en/index.html
http://www.resn.co.nz/#/home
http://myfavouritething.net/

Non Flash portfolio website
http://www.rosecox.net/
http://www.tremirie.com/

Appropriate use of animation:
DO use animation to
- Explain abstract concepts
- Create subtle special effects or transitions
- Add creativity/playfulness to a site
- Draw attention

DON'T
- Use animation just for the sake of doing it
- Force a user sit through a set sequence (always provide exit option)

Flash files:
Authoring File
- Fla file is flash working file (.fla)

Published File
- SWF is an output file, you see in web (.swf)
- Can't be edited
- Can play on most operating systems
- Fairly small files

Flash interface

Flash interface.

The Stage is like the canvas that defines the visible area during playback; you arrange graphics, videos, buttons, and other elements on the Stage while authoring projects.

The Timelines controls the timing that specifies when elements in the movie appear on the Stage. The playhead begins at Frame 1 and moves from left to right as the movie proceeds through the frames. Drag the layers in the Timeline to arrange the layering order of graphics on the Stage. Graphics in the higher layers appear to be placed on top of the graphics in the lower layers.

The Tools panel contains the tools used to select objects on the Stage, create text elements, and draw vector graphics.

The Property panel displays contextual information about the attributes of any selected object; you can edit these option to adjust an object's settings.

The Library panel contains media elements and symbols that are stored for a project. Use this panel to manage & organise the project's elements. When you publish a SWF file, only the Library items you actually use are included in the published file; you don't have to 'clearn out' unused elements that weren't used because they won't increase the published SWF file's size.

Drawing Tool

Select the Oval tool from the Tools panel

Select a color of your choice from the Fill color picker, located directly below the Stroke color picker.

Whenever you draw a vector shape, you have the option of selecting two drawing modes: Merge drawing mode and Object drawing mode. For the purposes of this tutorial, click the drawing mode button to select the Object drawing mode at the very bottom of the Tools panel. When the Object drawing mode is selected, the button will apprear darker and selected.

Show the different between with Object drawing on & without Object drawing.

http://www.youtube.com/watch?v=EPCo21TE9qk

Timeline /Frame

- Black dot on the frame is called keyframe.

- Red marker also known as the playhead

- Hollow circle is blank keyfram.

- Diamond-shaped dot known as a property keyframe

 

Create simple flash animation

After drawing some artwork, you can turn it into a reusable asset by converting it to a symbol.

A symbol is a media asset that can be reused anywhere in your document without the need to re-create it. Symbols can contain bitmap and vector images and animations, along with other types of content.
 

Symbol is store in Library.
 

When you drag a copy of the symbol from the Library panel to the Stage, the copy on the Stage is called an instance of the symbol. A symbol can be reuse, resize.

 

 

Classic Tween animation

So what is a tween? Tween is the shortened term for “in-between”. It refers to the consecutive frames between two keyframes. When you apply tweening to an object, you are changing the objects position, appearance, or both over a period of time.
 

Classic tweens are an older way of creating animation in Flash Professional. These tweens are similar to the newer motion tweens, but are somewhat more complicated to create and less flexible. However, classic tweens do provide some types of control over animation that motion tweens do not. Most users will choose to work with the newer motion tweens, but some will still want to use classic tweens.

Video Demo:
Classic tween
http://www.youtube.com/watch?v=95uPiDFTjjI

Classic tween motion guide
http://www.youtube.com/watch?v=SOsNv2WLtMs

Tween with Ease
http://www.webdesign.org/flash-swish/flash-tutorials/tweening-with-ease-using-easing-controls.7537.html#ixzz2fCSeQuv6

Lesson 7

Web imaging

Comparing Raster & Vector image

Image Optimization
File size vs image quality

Save image resolution to 72pixels/inch

After editing, save image for webs & devices

Web image file format

To insert image as a background

Modify > page properties > Appearance (CSS) or Appearance (HTML)

Audio

4 common formats of sound file

• Aif (Audio interchange file format or AIFF)
• Wav (Waveform extension)
• Mp3 (Motion picture experts group audio, or MPEG-audio layer-3)
• Midi (Musical instrument Digital Interface)

Link to an audio file:

• Select the text or image you want to use as the link to the audio file.
• In the Property inspector, click the folder icon next to the Link text box to browse for the audio file, or type the file’s path and name in the Link text box.

Embed a sound file:

• In Design view, place the insertion point where you want to embed the file and do one of the following:
• In the Common category of the Insert panel, click the Media button and select the Plugin icon  from the pop-up menu
• Select Insert > Media > Plugin
• Browse for the audio file and click OK.
• Enter the width and height by entering the values in the appropriate text boxes in the Property inspector or by resizing the plug‑in placeholder in the Document window. These values determine the size at which the audio controls are displayed in the browser.

Video

Video Format:

• AVI (.avi)
• Windows media (.wmv)
• MPEG (.mpg or .mpeg)
• Quicktime (.mov)
• RealVideo (.rm or .ram)
• Shockwave flash (.swf)
• Flash video (.flv)

Embed a video file http://www.youtube.com/watch?v=8DUOHtO_CXk

http://help.adobe.com/en_US/dreamweaver/cs/using/WS753df6af718a350a-709dc768133b3b53744-7ffe.html

Insert media: plug-in

• RealPlayer
• QuickTime

• In the Design view of the Document window, place the insertion point where you want to insert the content, then do one of the following:
• In the Common category of the Insert panel, click the Media button and select the Plugin icon  from the menu.
• Select Insert > Media > Plugin.
• In the dialog box that appears, select a content file for a plug‑in and click OK.
• Set the plug‑in options in the Property inspector.

Insert Media Plugin

Lesson 6

Type of web forms

Common types of web form:

• Contact Form
• Survey Form
• Enquiry/Feedback Form
• Registration Form
• Order Form

Contact Form

Survey Form 

Enquiry/Feedback Form

Order Form









Registration Form

For further reading:

http://www.smashingapps.com/2012/06/26/5-most-important-web-forms-and-how-to-build-them-with-a-single-app.html#ixzz2dDlBMCAP

Creative Web Forms

How to build web form in Adobe Dreamweaver

Check out this website http://support.website-creator.org/forms.html
Videos site http://www.youtube.com/watch?v=iD067xH1D_I
http://dreamweaver.wonderhowto.com/how-to/build-web-form-dreamweaver-143038/

Using Table to contain Web Form

Tables are useful if you want to show relationships between different types of data. They allow you to group related data in rows and link them to other data in different columns. While they are often not needed on many sites, there are certain situations where you may want to present your data in tabular form.

Video demo http://www.youtube.com/watch?v=5jLkkkIadrY

Lesson 5

This blogsite is specially prepared for students of NAFA taking module FS3004 E-commerce for Fashion Business.

1. Website layout:

Refer to Understanding the Z-layout in Web design &

(http://webdesign.tutsplus.com/articles/design-theory/understanding-the-z-layout-in-web-design/)

Good page layout design elements
(http://www.cs.umd.edu/~mount/Indep/CHassan/element.htm)

Examples of poor design web:
http://vacaway.com/products_display/
http://www.fabricland.co.uk/
http://art.yale.edu/

Examples of good layout design web:

http://www.psb-academy.edu.sg/academic-programme/detail/22/531/Bachelor-of-Engineering-in-Electrical-Engineering/?gclid=CKSSyY-IjbkCFQkF4godGiQANA#code=UONEEFTSEM

http://www.omniyo.co/

http://www.tecksoonsg.com/

http://caitlinwicker.com/ 

 

Adobe Kuler is an internet application from Adobe Systems that lets individuals try out, create and save various colour schemes, each of which consists of a set of five colours.
http://www.adobe.com/products/kuler.html
http://www.adobe.com/products/creativecloud.edu.html

2. The beauty of Cascading Style Sheets (CSS):

This website exhibits the important of CSS. Content no change, while the visual design can be change frequently to keep visitor's revisit the site http://csszengarden.com/

 

 

3. The benefits of applying CSS in a website:

Cascading style sheets control the look and feel of a web page. The language and syntax is complex and powerful.

Benefits:

• Ease of maintaining large web sites
• Sophisticated layout & design features
• No plugins required
• Minimise download times



This is a CSS syntax.

CSS ID & Class
The id selector is used to specify a style for a single, unique element.
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

Refer to this site for hands-on practice. http://w3schools.com/css/css_id_class.asp

The way to insert CSS:-
Internal stylesheet
<head>
< style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
< /style>
< /head>

External stylesheet
<head>
< link rel="stylesheet" type="text/css" href="mystyle.css">
< /head>

How to create a external stylesheet?

Videos:

http://blog.infiniteskills.com/2012/09/adobe-dreamweaver-cs6-tutorial-converting-css/

http://www.youtube.com/watch?v=5Q58B6f6ahU

 

 

4. CSS styling:

Video http://www.youtube.com/watch?v=X08ffrrtpM4