Summary of lectures
Things learned: (March11, Tuesday)
prototype (class) -- has properties (variables, nouns) and methods (functions, verbs)
--> object (or instance) (derived from class (or symbols -- symbols have properties, not functions), inherited the class's properties and methods
variables have their data types, such as Number, String, etc.
Value --> specific value assigned to variable.
How to create an instance from a symbol
How to create an instance from a class. (using a constructor function)
Properties (Noun) and dot syntax
Functions (Verb) -- two kinds (moving objects and jumping around the timeline)
using existing functions: functionName( );
creating a new function: function functionName( ):void {
codes
}
Sometimes you need to provide info to the function. This will go inside the parentheses.
:void --> after executing the function, nothing will be returned to the program.
To use this function: functionName( );
actionScript, Section name using frame name.
Things learned: (March 6, Thusday)
How many symbols do you need? Imagine the final product. Think about all elements in the product. What kind of commonalities can you see among elements. The commonalities should be factored when you determine the number of symbols to create for your project.
We needed for different size of boxes with two different colors. All they can be merged into a symbol with one box and one color. This symbol creates instances, which can be changed in size and color.
Can we derive a circle instance from a rectangle symbol? No. The shape of the two is different.
Again, you can change the color and size of instances, not their shape.
How to relate the two bars into one category? You may connect them in perception by adding a base line extending the two bars or adding a background that will embrace the two.
Things learned: (March 4)
What is the relationship between the symbol and instance. -- prototype, blueprint, original design vs. copied element
How to create a symbol -- go to the symbol area ( kitchen area) -- insert/New Symbol
How to create an instance -- drag an icon from the library to the stage (order a packaged item from the menu).
How to edit a symbol -- go to the symbol area by clicking the Edit Symbols button.
How to edit an instance -- change the size (after selecting it with the Selection or Free Transfom tool and change the size in the Properties panel) or
change the color (after selecting it and change its color in the Properties panel)
There are four different types of color change: brightness, tint, alpha and advanced (change tint and alpha using exact numbers).
Alpha level --> 100% -- Opaque, 0%--> total transparency
Advantage of using symbols and instances in comparison with drawings --
smaller file size, easy to create once a symbol is made, easy to modify multiple instances.
Advantage of using movie clip symbols and button symbols over drawings and graphic symbols:
Add interactivity to only movie clip symbols and button symbols, not graphic symbols after their names were created and actions were attached to the names.
Symbol and Instances:
Once you change the symbol, all instances which were derived from this symbol will be influenced.
When you change an instance, its symbol would not be changed.
There are three types of symbols: Movie Clips Symbol (not move symbol), button symbol and graphic symbol.
Symbols have to have their names. Among three instances, only Movie Clip instances and button instances can have their own names.
On the other hand, graphic instances cannot have names.
Why do you need names for instances? Without names, you cannot assign actions. You have to assign actions to an instance by referring to the name of the instance.
The timeline of a movie clip instance is independent of the main timeline. Even when the main timeline is stopped, the movie clip instance timeline can rotate.
How can you stop this? You need to stop the movie clip instance timeline.
Convention in naming symbols and instances: lowercase for the first character, don't use the special character, which you can find from the top row of your keyboard, such as "~", "!", "#", "$", "%", "^", "&", "*", "(", ")" and etc.
When you use multiple words for a name,
1)
capitalize the first letter of each word except the first word, such as myBestFriend, etc.
or 2) use unerscore, such as my_best_friend
But don't use space such as "my best friend". The reason is an empty space will be translated into "%20".
When you derive an instance from a symbol, what do you do? Drag an icon of a symbol from the library to the stage.
Things learned: (Feb. 26)
Audacity --audio recording and editing program -- free download
sync -- start or stream, repeat -- 0.
Dimension -- 1000 x 600 after considering Browser Chrome (1024 x 768 cannot used fully).
Web project sequence
1) Media preparation -- graphics (resize, compression) audio (record and export as mp3)
2) Open up fla and save in a separate folder
3) Import external media into library
4) Organize elements over different layers
5) Organize elements horizontally -- four different frame cells along with unborn cells
6) Test -- Control/Play or control/Test Movie (more realistic)
7) Publish
8) Upload using cyberduck -- upload three things along with fla (this is for backup purpose).
Things learned: (Feb. 21)
How to import pictures:
1) photoshop -- shrink the file size of a picture by compression and/or resizing physical size of pictures using Photoshop.
2) first create a fla file and save it in a new folder.
3) file/import to library
4) select a cell to the picture on
5) drag the picture icon from the library to the stage
How to create animation using a picture
1) Put a picture on one cell
2) Create a keyframe on a cell on the same layer. (You need to have two keyframes, one for beginning frame and another for ending frame for animation)
3) Move pictures around and/or shrink or expand them on two cells.
4) Apply animation in between the beginning and ending frames.
How to prolong an image -- add simple frames, as many as you need.
How to start another section -- add a new blank keyframe.
How to add background. Put a background image on the stage and drag the background layer to the bottom of the layers.
How to add text -- add another layer and add text.
WSJ Feb. 21, 2008, B1
"The ThinkPad has another advantage: Even though its screen is the same size as the Apple'ss, it is higher resolution, so more material can be seen without scrolling. Some people find that higher-resolution screens make text too small to read easily, but I didn't experience any such problem on the X300."
============
Things learned: (Feb. 19)
Feb. 28. Test (how to save, publish and upload)
Go over how to save in a separate folder, produce, publish and upload (only three kinds, fla is optional)
File structure -- the same structure for the web and for your local storage area.
(Flash drive storage) No name (you may use your name) -->jcm364 --> assignment, group, individual, spanish (number)
Under assignment -->
exe3 --> paint.html, paint.swf, AC_RunActiveContent.js, paint.fla (not needed for your viewer, but for you as a backup)
exe8 --> color.html, color.swf, AC_RunActiveContent.js, color.fla (not needed for your viewer, but for you as a backup)
(Internet) public_html --> jcm364 --> assignment, group, individual, spanish(number)
Under assignment -->
exe3 --> paint.html, paint.swf, AC_RunActiveContent.js, paint.fla (not needed for your viewer, but for you as a backup)
exe8 --> color.html, color.swf, AC_RunActiveContent.js, color.fla (not needed for your viewer, but for you as a backup)
File name or folder name -- name them consistently.
Don't use an empty space, which will be converted into "%20".
Don't use any special characters, which you can see on the top row of the keyboard.
Recommendation: Use the lower case, use a singular word. When you need to combine two or more words, use this style:
myClass, myClassAssignment
When you create a file, separate it from other files by putting it under a separate folder. -- the reason: when you mix two files together, the AC_RunActiveContent.js file of the second file will replace the AC_RunActiveContent.js file of the first file when they are published. The .js file takes the same name regardless of the original fla file.
When you publish an fla file, it will create three additional files, with the file extension of .swf, .html andAC_RunActiveContent.js.
When you want to move a file to a different place, you can either of the two:
1) close an opened file and move it to a new folder
2) save a file under a new folder and delete the original folder.
Don't move a file to a new folder or change the name of the folder while a file is open. It will confuse the computer.
http address of the file on the Internet: start with http://, followed by the account name and folders containing the html file.
But you should omit "public_html" because it is assumed.
The html file is an empty place holder to keep content (swf file). The js file is used to embed the coontent onto the html. More detailed information about the js file can be found at http://blog.deconcept.com/swfobject/
=========
Things learned: (Feb. 14)
How to create a timeline with multiple frames.
* frame vs. cell -- interchangeabley used
* four different kinds of frame cells
live frames:
a) keyframe -- a frame with a real object. This frame is created when you have something to salvage from the previous keyframe.
b) blank keyframe -- an empty frame, which keeps a place to hold a real object
c) simple frame -- a frame that cannot hold its own image. It can only reflect images in the previous keyframe.
d) in-between frame -- this is a frame that is automatically created by a computer between the beginning and ending frames for computer generated animation.
unborn frame -- frame that can be converted into live frame by producers. It is dimmed.
You need to create a keyframe or blank keyframe to enter any object in the frame cell.
Don't forget to select a frame cell to put any object there.
Frame rate: How many frames will be displayed per second. Modify/Document --> frame rate 12/fps (default)
How to publish --> how to upload --> how to report
* resolution
acquisition vs. display
acquisition: the higher resolution camera can capture a picture that can be displayed in more detail.
display
================================
Things learned: (Feb. 12)
Three different defintion of resolution:
1) pixel density -- how many pixels per inch (Pixels per inch)
This will decide how smooth the shape will be
2) screen resolution -- the number of pixels in width and number of pixels in height -- This will decide how much of pixels can be accommmodated across and top to down. A monitor with a higher resolution will have a wider scope of an image.
camera resolution -- the number of pixels in a captured image.
the number of pixels in width times the number of pixels in height.
3) color resolution -- how many different colors can be displayed on a pixel.
Pixel stands for picture element.
Nowadays the monitor use a 32-bit system.
The first 8 bits for Red, the second 8 bits for Green, the third 8 bits for Blue, and the last 8 bits for transparancy.
One bit can be used for two colors: 0 and 1.
Two bits can be used for four colors: 00, 01, 10, and 11.
Three bits can be used for 8 (2*2*2): 000, 001, 010, 011, 100, 101, 110, 111
8 bits can be used for 256 colors. 2*2*2*2*2*2*2*2 (2 to the power of 8 = 256)
24 bits can be used for 16.7 million colors (256*256*256)
When you look at the color expressed in numbers in Photoshop or flash, it is composed of a 6-digit number, such as #23ff45.
The first two digit represent the amount of Redness, the next two Green, and the last Blue.
Different tools used to create elements or text in different shape, color and size.
Shape can be either stroke or line (outline, outside part) or fill (inside part).
Shape can be decided by how you drag a tool.
Which shape, line or fill, will be decided by which tool you used.
Brush -- fill
Pencil -- line
Oval or Rectangle shape -- both (unless you choose the slash for color of either fill or stroke).
Size -- from the property panel for pencil or oval and rectangle, or from the tool box for brush.
Color -- from the tool box or property panel.
Text -- uses fill color.
Shape -- different font face from the property panel
Size -- different pixel from the property panel
Color -- choose different color from the property panel
Add line using Ink Bottle, add shape using Paint Bucket,
Delete using Eraser
Layering using different sheets on the same layer (click the Object Model button before using Brush or Choose Oval Primitive or Rectangle Primitive
Using multiple layers (how to add layers using Insert Layer button and delete layers -- using Trash Can)
How to switch layers -- by dragging.
Locking and eye icons.
How to grab everything on only one layer without touching anything on different layers
How to look everything on only one layer without being obstructed by other layers.
How to hide one layer while looking at the other layers.
============================
Feb. 7, 2008;
Smaller size of pictures:
Resizing -- a smaller physical size
Compression of pictures
How to: File/Save for Web & Devices
The top part for compresson -- downsizing; the bottom part for reduce the size (don't forget to click Apply before saving). Reduction can be done using percentage or physical width or height of the picture.
Upload to the Internet,
Where on the Internet, my account -- three important things
To access your dorm room: dorm name, room number and key
To access your account: the name of the computer your service provider is using; your account number and password
How to organize your room: using folders --
yourName
jcm364
raw or projectName
home, section1, section2, section3, section4, section5
put ready-to-use material here
The same structure will be made on your flash drive or external drive
yourName
jcm364
raw or projectName
home, section1, section2, section3, section4, section5
put ready-to-use material here
You need to keep the same structure for your Internet site and flash drive.
How to upload: using one of FTP (file transfer program)
Mac: Cyberduck, Fetch, Transmit
Handout on (How to use Cyberduck) or http://www.freesmug.org/tutorial/cyberduck
Different privileges assgined to each material:
Uploaded material vs. downloaded material
[read (4), write (1), execute(2) for owner, group or others, 7, 4, 4 for files, 7, 5, 5 for folders]
You can set this at preference or whenever you upload files.
=====================
Feb. 5, Tuesday:
difference between Flash and other programs
Flash: organizing elements in the program differently from other programs.
Elements will be organized into different parts of Flash vertically and horizontally.
Elements: text, graphics, animation, audio and video
Vertical arrangement:
Where in the program: on one or multiple sheets.
Each layer can have one or multiple sheets.
Each stack can have one or multiple layers.
One flash program can have multiple stacks.
Horizontal arrangement:
The placeholder that contains and displays the above at one time is called a frame. Elements only in a placeholder are shown to people at a time. When elements are displayed one placeholder after another, it is called animation.
Horizontal arrangement -- linear vs non-linear
video -- linear
flash -- non-linear, users can access frames in non-linear format. This non-linearity is possible due to actionScript, a script language for Flash.
File size reduction -- why important?-- elements can be transferred from far-away places.
1) Compression make the element lighter.
2) Physical size smaller -- smaller pictures or video, shorter audio