Thursday, September 26, 2013

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


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.
 
 

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

Saturday, September 21, 2013

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.

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


Friday, September 6, 2013

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