Below are the examples for the exercises we were doing in week 4.
The name of the ftp client I showed you at the end was “FileZilla”
and it is available for free from:
~
http://filezilla-project.org/download.php?type=client
~
Download week 4 examples Source Files
Number of Downloads: 39
Download Size: 32.5 kB Download Updated: March 30, 2009
This is an update to the example we did in class about adding MovieClips from the library and removing them from the stage. After the class I realized there was an easier way to write this that acutally used less AS3. The AS3 used for this example is below it along with the source files for download.
//makesure you have a MovieClip in the Library exported for ActionScript with the class: Star //create a new variable and datatype it as a Star (the MovieClip you have in the library) var newStar:Star; //add a mouseDown listener to the stage that will call the function addRemoveStar stage.addEventListener(MouseEvent.MOUSE_DOWN, addRemoveStar); //BestPractice (no stage / weak reference): this.addEventListener(MouseEvent.MOUSE_DOWN, addRemoveStar, false, 0, true); //write the function addRemoveStar function addRemoveStar(e:MouseEvent) //BestPractice(return void): function addRemoveStar(e:MouseEvent):void { //create a variable named objectClicked and store the target of the MouseDown Event //(it will either be the stage or something that has been added to the stage like a newStar) var objectClicked = e.target; //create an if statement to find out if the target of the mouseDown event was the stage or a newStar if(objectClicked == stage) { //when the target of the mouseDown event is the stage, create a new instance of the Star called newStar newStar= new Star; //position the newStar at the x and y coordinates of the mouse newStar.x = mouseX; newStar.y = mouseY; //add the newStar to the stage stage.addChild(newStar); } //when the target of the mouseDown event is not the stage it means it is a newStar else { //remove the newStar that was clicked (the target of the mouseDown event) stage.removeChild(objectClicked); } }
Download starClick Source Files
Number of Downloads: 34
Download Size: 6.3 kB
Download Updated: March 21, 2009
~
http://www.sonacom.fr/sonacom.html
http://www.pearljamtengame.com/
~
~
~
If your like I was when I started learning AS3 with no prior programming experience then the previous paragraph and a lot of the information out there about AS3 probably means absolutely nothing to you. Don’t worry this 1st semester course is going to be about making AS3 as easy as possible for you to learn and give you the foundations from which you will be able to make all sorts of things in flash.
~
Rather than confuse you with a whole bunch more introductory technical talk (that didn’t start to really make sense to me until after about a year of using AS3), we’re going to jump straight in and start making things move and interact.
~
We’re going to use the smallest amount of code possible while keeping it basic which means that not everything we learn at first is going to be considered “Best Practice”. As we get more used to using AS3 I’ll introduce the extra things you should do when writing your AS3. Keep in mind that for most people using AS3 (definitely including me) no matter how long they’ve been programming there is probably a better or more efficient way of writing the code but as long as the finished product does what you want it to then the code is correct… (Author of Essential ActionScript 3 Colin Moock said something along those lines when I saw him present in Sydney last year)
~
~
The obvious place to start is using AS3 to control the playback of the Stage and MovieClips.
~
The blue bits are the parts you keep and the green parts need to be changed.
~
stop()
Stops the playhead in the movie clip or main timeline at the Keyframe (F6) the AS3 is written on.
~
Starts playing the SWF file at the specified frame.
~
gotoAndStop(frame number or name)
Brings the playhead to the specified frame of the movie clip and stops it there.
~
~
One of the most important things about learning to program AS3 is learning to use the Help Docs. This can be hard at first because they can seem very hard to understand but it’s worth getting into the habit of using the help docs all the time.
~
To find out the rest of the “methods” (ways in which we can control timelines like: “stop()“) for MovieClips:
1. Type MovieClip into the actions panel. (it should be blue)
2. With the cursor somewhere in side the word hit F1 on the keyboard.
3.This will launch the help docs at the page with all the information about MovieClips.
4.To see other Methods that can be used with MovieClips go down to the “Public Methods” section.
5. The ones listed are Methods specific to MovieClips but there are a whole lot of extra ones that can be used with MovieClips because MovieClips are based on other Objects that have Methods of there own. Don’t worry if that didn’t make sense, just click 
Show Inherited Public Methods to see the rest of the things you can get MovieClips to do with AS3.
~
HTML stands for HyperText Mark-up Language. Strictly speaking HTML is not a programming language but rather a system of tags that allow you to create web pages. HTML is the most basic component of web page design, a good understanding of how it works is essential for successful web based work. Because HTML is a system of text based tags you can create HTML pages with just a text editor. However, most people find the text based approach somewhat limiting and as such there is a whole range of visual page layout HTML programmes such as Dreamweaver available. While Dreamweaver allows you to create HTML based web pages with little or no knowledge of the code beneath a basic knowledge of html will always be useful in in solving problems that invariably arise.
~
~
HTML is composed of tags that are used to delimit a particular area or property of a document. Tags typically appear as pairs such as:
<body>……….</body>
in this case the first tag <body> marks the start of the body section and the second tag </body> marks the end of the body section.
Almost all web pages will follow this very basic structure:
”
<html>
<head>
<title>put a title here</title>
</head>
<body>
within this section will lie the content of the web page
</body>
</html>
”
To display the above html code as a web page do the following:
1 copy the text into a text editing program
2 save as a plain text document with an extension of html. Eg test.html
3 open the document in a browser (file>open)
As you can see the page we have created is very plain in terms of both colour and layout. There are many tags that allow us to change the colour of the document itself and control the way text displays. HTML also allows images and other media (flash, video, sound etc) to be embedded.
~
OR IN DREAMWEAVER
~
(Ctrl+N) / > File > New
->Bland Page > HTML > Create
~
This will create a blank XHTML page with all the necessary tags to get going.
HTML TAGS
For a comprehensive list of HTML tags including browser compatibility see:
http://www.w3schools.com/html/html_reference.asp
http://www.webmonkey.com/reference/HTML_Cheatsheet
http://www.psacake.com/web/dy.asp
First we’ll go through these articles step by step
http://dev.opera.com/articles/view/27-css-basics/
We’re going to create another theme for this site using CSS.
http://www.justdreamweaver.com/blog/2008/05/customizing-wordpress-themes-with-dreamweaver/
~
Install FireBug
https://addons.mozilla.org/en-US/firefox/addon/1843
~
Make sure your CSS and HTML / XHTML are valid:
~
Extra CSS tips
http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
~
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
~
Download HTML CSS Example Source Files
Number of Downloads: 42
Download Size: 22.1 kB
Download Updated: March 19, 2009
Start out by creating a simple mask in Flash:
~
~
1. Import an image to the first layer
~
2.Create a second layer above the one with the image on it.
~
3. Draw anything you want on the layer above the image.
(any filled shape, including groups, text, and symbols can be used as a mask)
~
4 Right-click(Windows) orControl-click (Macintosh) the mask layer’s name in the Timeline, and selectMask.Amask
layer icon indicates the mask layer. The layer immediately below it is linked to the mask layer, and its contents show
through the filled area on the mask. The masked layer name is indented, and its icon changes to a masked layer icon.
~
5 .Make sure the mask and the layer being masked is locked to see it’s effect (or publish the swf (Ctrl + Enter).
~
6. To mask more than one layer:
-either drag existing layers under the mask
-or create a new layer below the mask
~
7. To unmask a layer:
-drag the layer to be un masked above the mask
-sometimes you don’t want that layer above the mask and dragging it back under the mask without re-masking it won’t seem to work. In this case make sure the layer to be unmasked is below all the masked layers and:
> Modify > Timeline > Layer Properties, and select Normal.
~
-You can animate the mask itself or the layers under the mask using Motion or Shape Tweens which we did last week.
-You can also use actionscript to add interactivity to masks such as allowing the user to drag the mask around or move the contents behind the mask
~
~
I found the demo below at :
http://clockmaker.jp/blog-en/2008/11/rgb-image-separater-with-papervision3d/
(I hope the person who made it doesn’t mind me using it here)
~
~
~
Usually when working with masks, we are working on the “Alpha” Channel.
-The Alpha channel is a black and white channel that determines the transparency of an image.
-In Photoshop if the alpha channel is white the image has no transparency
-If the Alpha channel is Black the image is completely transparent
-If the alpha channel contains a shade of grey between Black and White that part of the image will be semi transparent depending on how dark or light the gray is.
~
-There are several different methods for creating masks as well as different types of masks in PhotoShop
-For now I’ll show you the most basic method without going into using the selection tools.
~
1.- Open an image in Photoshop
2.- At the bottom of the “Layers” panel (F7) click the 3rd icon across from the left.
————or >Layer >Layer Mask > Reveal All / Hide All
3.-In the layers panel next to the thumbnail of the images is an empty thumbnail (either black or white depending on if you did Hide All or Reveal All)
4. This box representes the Alpha Channel, to work on the Alpha Channel click the thumbnail then using Black, White or a shade of grey in Between, paint on the image. You should see some transparency changes in the image.
5. To view the Alpha Channel individually (or one of the other Channels) click the “Channels” tab next to the “Layers” tab (or >Window > Channels if the Channels Tab is not there)
6. You can now use the “eye” toggle to turn individual layers on or off. Select the Channel to work on it.
7.Try different Shadses of Grey in the Alpha Channel and try different brush sizes with different amounts of “Hardness” to see the “Feathered” transparency effects you can create.
~
-It is a good idea to have a strong grasp of making selections and masking in photoshop because it is a necessary skill for most aspects of digital and print media, and selections can be used to create masks.
Here is a good tutorial under “Photoshop” :
Making and Refining Selections: http://www.adobe.com/designcenter/video_workshop/
~
-(without Action Script):
Do Tutorial: http://www.communitymx.com/content/article.cfm?page=1&cid=FAC69
~
-(with one line of Action Script 3):
1. Import an image or draw something on the stage that you want to mask.
2.Turn what you want to mask into a Movie Clip (F8)
3. With the Movie Clip selected, go to the Properties Inspector (Ctrl + F3 / >Window > Properties > Properties) and enter an <Instance Name> of “background_mc” in the .
4. With the Movie Clip still selected, in the Properties Inspector check “Use runtime bitmap caching“.
5. Create a new layer above the previous one named “mask”
6. In the mask layer draw the shape that you want to use as a mask.
7. Convert to a movie Clip (F8)
8.With the Movie Clip selected, go to the Properties Inspector (Ctrl + F3 / >Window > Properties > Properties) and enter an <Instance Name> of “mask_mc” in the .
9. With the Movie Clip still selected, in the Properties Inspector check “Use runtime bitmap caching“.
10. With the Movie Clip still selected, go the the “Filters” tab (>Window > Properties > Filters), and add a “Blur” filter. Adjust the settings to get the feathered (soft) edge that you want.
11. Add a new layer on top of the other layers and name it “Actions”
12. Open the action script editor (F9 / >Window > Actions)
13. Enter this line of code: background_mc.mask = mask_mc;
14. Publish Preview (CTRL + Enter) to see the result.
(If this doesn’t seem to work, check the spelling of your instance names, make sure your flash movie is using Actions Script 3.0, and ensure “Use runtime bitmap caching” is selected for both movie clips.)
Download Feathered Masks in Flash Source Files
Number of Downloads: 46
Download Size: 185.2 kB
Download Updated: March 16, 2009
Learning the Keyboard Shortcuts will save you time !!!
creating a new flash document
(Ctrl + N) / >File > New > Flash File (ActionScript 3.0) >OK
`
setting documents properties
(Ctrl + J) / >Modify > Document -Enter the width and height you want your file to start (even if you want it to be liquid or fullscreen)
-Choose Background Color
- set Frame Rate to at least 24 (flash frame rates are not exact and will vary depend on what your are asking the flash player to render and how well the users CPU performs, the number you set is the maximum Frames Per Second flash will render. The human eye can’t see more than 24 FPS so usually you won’t need to go above 24FPS for flash on the internet. If you do keep in mind that Internet Explorer caps Frame Rates at 60FPS because that is the refresh rate of monitors)
-If you like these settings >Make Default
`
save document
(Ctrl + S) / >File > Save
`
or to save an existing file in a new location
(Ctrl + Shift + S) / >File > Save As
`
`
Do tutorial: -”Understanding the timeline, keyframes, and frame rate”
CS3 Users
`
Do tutorial: -”Using the Drawing Tools”
-Flash Drawing tools create Vector Graphics (graphics that rescale without any loss of quality).
-Flash has 2 Drawing Models:
1.Merge Drawing Model (default): Shapes merge when overlapped and alter each other.
2. Object Drawing Model: Shapes remain individual even when overlapped (similar to being on separate layers)
-to enable Object Drawing Model: -select a drawing tool - then select 
(j toggles object model on and off)
-See http://livedocs.adobe.com/flash/9.0/UsingFlash/ > Drawing > Drawing Basics 
for info about: selecting objects, combining objects, and specifying drawing preferences.
`
Do tutorial: -“Drawing With The Pen Tool”
-Pen tool is most precise and adjustable drawing tool
-Use the line and fill color secectors to choose colours / gradients.
-To create more specific colors or gradients: (Shift + F9) / >Window >Color then use options. Note that you can use the Alpha level to reduce the opacity of a solid color or a color in a gradient.
-To change the fill or line color of a shape already on the stage select it first then follow previous step.
-Have a play with the Brush and Pencil tools and try all their different options.
-See http://livedocs.adobe.com/flash/9.0/UsingFlash/ for more info on any particular tool or option.
`
`
Most of the time you will want to create your graphic elements outside of Flash in Illustrator, Photoshop, Fireworks and a whole host of other specialist programs because they are a lot better graphics programs than flash. As a Flash Designer you should have a good grasp on one or all of these programs as well. Do the introductory video tutorials for each of these programs on http://www.adobe.com/designcenter/video_workshop/ (even if you already know how to use these programs there’s probably short cuts you don’t know about that will save you a lot of time and frustration). There are special methods for importing files from each of these programs into flash which maintain a lot of the files structure (this has been improved further in CS4).
`
Illustrator
Do tutorial: -“Import Illustrator Files into Flash”
Try to do all the video tutorials here about working with Illustrator and Flash.
`
Fireworks (for those who don’t use it fireworks has really cool gradient presets and tool for creating web 2.0 graphic elements amongst a whole bunch of other features. Fireworks CS4 will can be used to slice up a PSD and save it as a html page with valid, cross browser compatable CSS. Untill now this was one of the most mind numbing parts of my day)
Do tutorial: -“Understanding the Fireworks and Flash Workflow”
`
Photoshop
Do tutorial: -“Designing websites with Photoshop and Flash”
`
InDesign CS4 now exports files for Flash CS4 and can even export SWFs
See tutorial videos on http://tv.adobe.com/
`
`
Importing Bitmaps
I usually import flattened Bitmaps rather than files with many layers from other programs as it reduces the amount of clutter in my flash file and helps keep the file size down. I prefer to render higher quality Bitmap graphics or videos outside of flash and then use flash to add User Interactivity to these elements or to create completely Interactive visual elements. I also prefer the compression options under “Save for Web and Devices” in Photoshop and Illustrator to the ones available in flash.
If you haven’t used “Save for Web and Devices” see: Preparingfilesfortheweb
`
> File > Import > Import to Stage (as long as your on the key frame and layer you want the item imported to)
This will also add the item to the library. You can delete it from the stage and it will remain in the library.
`
Anti-Aliasing (smoothing) of a bitmap is often needed if you want to rotate or scale a bitmap image in an animation, without distorting it. (Flash applies a tiny bit of blur to prevent the distortion which is a bit more CPU intensive for the viewer but won’t become a problem unless you have heaps of Bitmaps being animated at once)
(Ctrl + L) / >Window > Library
-double click on the bitmap (or select it and click the “i” down the bottom)
-check Allow Smoothing
`
Compression
There are compression options in flash available but there not as good as “Save for Web and Devices” in photoshop or Illustrator so I don’t recommend using them.
`
-See http://livedocs.adobe.com/flash/9.0/UsingFlash/ > Using imported artwork for more detailed info on each aspect. Other areas covered in the docs include: Aplly a bitmap as a fill, Break apart a bitmap and Convert Bitmaps to vector graphics.
Do tutorial: -“Creating and using Symbols and Instances”
~
“A symbol is a graphic, button, or movie clip that you create once in the Flash authoring environment or by using the SimpleButton (AS 3.0), and MovieClip classes.
~
An instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be different
from its symbol in color, size, and function. Editing the symbol updates all of its instances, but applying effects to an
instance of a symbol updates only that instance.
~
Using symbols in your documents dramatically reduces file size; saving several instances of a symbol requires less
storage space than saving multiple copies of the contents of the symbol. For example, you can reduce the file size of
your documents by converting static graphics, such as background images, into symbols and then reusing them.Using
symbols can also speed SWF file playback, because a symbol needs to be downloaded to Flash Player only once.”
~
Symbol Types
-Graphics (smallest file size but can’t be interactive or controlled by AS3 so only for animations)
-Buttons (interactive and able to be targeted by AS3, with a default set up for defining Mouse Up, Mouse Over, Mouse Down, Hit)
-Movie Clips (interactive and able to be targeted by AS3. Reusable pieces of animation. Movie clips have their own multiframe Timeline that is independent from the main Timeline.)
`
Creating Symbols
-select the item on the stage you want to turn into a symbol
-(F8) / >Modify > Convert To Symbol
-give the Symbol a recognizable name
-Choose if you want it to be: Movie Clip, Button or Graphic
-Choose the Registration Point
>(ENTER) /> OK
`
Breaking Symbols Apart
(Ctrl + B) / >Modify > Break Apart
~
~
~
This is one of the main areas where flash CS4 is a major improvement over flash CS3. The animating “engine” in flash CS4 has been completely re-written and is now much more advanced and easier to use (similar to After Effects animation features). Personally I thinj until CS4 flash has been a fairly terrible animation program but it still does the job for simple animations like banners and a lot of web things that are more about the interactivity than the quality of the animation.
~
For those of you already using CS4 if you haven’t done them yet do all or some of these tutorials about animating:
-all the getting started vids about animating here http://tv.adobe.com/#pg+1590
-Flash Downunder - Motion Tweening
-Flash Downunder - Bone Tool and Deco Tool
-Advanced Motion Editor and Presets
~
For now we’re still using CS3 but all the same principles still apply so knowing how to animate in CS3 will make it even easier when you move to CS4. Also alot of the principles used in timeline animation are used when we get into moving things around by AS3 which is way ahead of what can be done in CS4.
~
CS3 users Do Tutorials:
-creating animations using motion tweens
-creating animations using shape tweens
-copying and pasting actionscript from an animation
~
steps for creating motion tweens
-create a symbol out of the object you want to animate (movie clip has most options)
(F8)
-create a second keframe further down the timeline on the layer of your symbol
(F6) > Insert > Time Line > Key Frame
- while the play head is on the second key frame move the position or change another visual aspect of your symbol (e.g. alpha)
-right click on the timeline between the two keyframes and select Create Motion Tween
~
steps for creating shape tweens
-create a vector shape on the stage (do not convert it to a symbol)
-create a second keframe further down the timeline on the layer of your shape
(F6) > Insert > Time Line > Key Frame
- while the play head is on the second key frame change the shape / colour or delete that shape and create a new one
-right click on the timeline between the two keyframes and select Create Shape Tween
~
Create a motion path for a tweened animation
1 Create a motion-tweened animation sequence. If you select Orient To Path, the baseline of the tweened element
orients to themotion path. If you select Snap, the registration point of the tweened element snaps to themotion path.
2 Do one of the following:
• Select the layer containing the animation, and select Insert > Timeline > Motion Guide.
• Right-click (Windows) or Control-click (Macintosh) the layer containing the animation and select Add Motion
Guide.
Flash creates a new layer above the selected layer with a motion guide icon to the left of the layer name.
Motion guide layer above selected layer
3 Use the Pen, Pencil, Line, Circle, Rectangle, or Brush tool to draw the desired path.
4 Snap the center to the beginning of the line in the first frame, and to the end of the line in the last frame.
Note: For best snapping results, drag the symbol by its registration point.
5 To hide the motion guide layer and the line so that only the object’smovement is visible while you work, click in
the Eye column on the motion guide layer.
~
Use the Custom Ease In/Ease Out dialog box
1 Select a layer in the Timeline that has a motion tween applied to it.
2 Click the Edit button next to the Ease slider in the frame Property inspector.
3 (Optional) To display the curve for a property, deselect Use One Setting For All Properties, and select a property
in the menu.
4 To add a control point, Control-click (Windows) or Command-click (Macintosh) the diagonal line.
5 To increase the speed of the object, drag the control point up; to slow down the speed of the object, drag it
downwards.
6 To further adjust the ease curve, and fine tune the ease value of the tween, drag the vertex handles.
7 To view the animation on the Stage, click the play button in the lower-left corner.
8 Adjust the controls until you achieve the desired effect.
~
Move an entire animation
~
Move the graphics in all frames and layers at once to avoid realigning everything.
1 Unlock all layers. To move everything on one ormore layers but nothing on other layers, lock or hide all the layers
you don’t want to move.
2 Click the Edit Multiple Frames button .
3 Drag the onion skin markers so that they enclose all the frames to select, or clickModifyOnionMarkers and select
Onion All.
4 (Ctrl + A)Select Edit > Select All.
5 Drag the entire animation to the new location on the Stage.
~
About filters and Flash Player performance
The type, number, and quality of filters you apply to objects can affect the performance of SWF files as you play them.
Themore filters you apply to an object, the greater the number of calculations Adobe® Flash® Playermust process to
correctly display the visual effects you’ve created. Adobe® recommends that you apply a limited number of filters to
a given object.
Each filter includes controls that let you adjust the strength and quality of the applied filter. Using lower settings
improves performance on slower computers. If you are creating content for playback on a wide range of computers,
or are unsure of the computing power available to your audience, set the quality level to Low to maximize playback
performance.
~
Apply or remove a filter
1 Select a text, button, or movie clip object to apply a filter to or remove a filter from.
2 Select Filters, and do one of the following:
• To add a filter, click the Add Filter (+) button, and select a filter. Experiment with the settings until you get the
desired look.
• To remove a filter, select the filter to remove in the list of applied filters, and click the Remove Filter (-) button.
You can delete or rename any presets.