Flash Buttons

creating a menu and then a website in flash is fun, although a hair confusing... here is a link to a tutorial of what we will be doing in class:

buttons:
http://schoolofflash.com/blog/2008/05/flash-cs3-tutorial-movie-clip-buttons/start with buttons (they are animated! fun!) then we can add them to a website, which is fairly simple...




Taylor (TA) is a Flash guru and is ready to answer questiona




Flash is an animation program that can prove useful for the web, most notably for it entertainment properties. It works with a timeline, layers and scenes to create basic animations...

Action scripting: the code used to make your button work!
YOUR INSTANCE BUTTON NAME.buttonMode = true;


YOUR INSTANCE BUTTON NAME.addEventListener(MouseEvent.ROLL_OVER,animIn);
YOUR INSTANCE BUTTON NAME.addEventListener(MouseEvent.ROLL_OUT,animOut);


function animIn(event:MouseEvent):void {
event.target.gotoAndPlay("over");
}
function animOut(event:MouseEvent):void{
event.target.gotoAndPlay("out");
}

• make a new layer for buttons
• draw an object/shape
• select that shape 
• convert it to a button (modify > convert to symbol > button
• Change the instance name of your button (in the properties window) to something you can remember
• Create an actions layer
• on frame 1 of the actions layer paste in the code below (you will need to open the actions window to do so, window>actions)
• change the code to have your instance name and a unique function name (same in both parts of the code)

done!

yourButtonsInstanceName.addEventListener(MouseEvent.CLICK, functionname);

function functionname(event:MouseEvent):void
{
stop();
}

GRADES

Your quarter grades are coming out very soon.  The gradebook will be finalized on Wednesday 4/18/2011.  Anything turned in after that will not be represented in your Q3 grade report.  Please check and make sure you have no missing work.

Shape tweens in Flash CS5

Flash for Friday

A movie that tells a story!

• 500 frames
• 5 layers
• 15 shape tweens
• tell a story, beginning, middle, conclusion
• fun!

Flash CS5 (shape tween)

Adobe Flash Creative Suite 5 can open up new worlds for creating quick, sleek animation without much effort. You should take advantage of shape tweens if your goal is to modify the shape of an object from start to finish, such as morphing a star into a circle.
For the most part, shape tweens are created in quite a similar manner to motion tweens. However, unlike motion tweens, shape tweens must use raw shapes instead of symbols.
In addition to morphing between distinctively different shapes, shape tweens can morph color. As with motion tweens, you can tween only one shape at a time on a single layer. If you want to create multiple shape tweens simultaneously, isolate each one on its own layer.
Follow these steps to create a shape tween:

1. Create a new Flash document. At the bottom of the workspace, click the Timeline panel’s tab to bring it forward.
2. On an empty layer, draw a shape (for example, a star or polygon with the Polystar tool) on Frame 1.
   You can include a stroke and a fill, because the shape tween can handle both.
3. Click on Frame 25 and choose Insert→Timeline→Blank Keyframe.
   Rather than choose the motion tween, we choose a blank keyframe because we don’t want a copy of the shape drawn on Frame 1 to be carried over to the new keyframe.
4. Draw a distinctively different shape on the new, blank keyframe on Frame 25.
5. Select Frame 1 and choose Insert→Shape Tween.
   You see an arrow and a green shaded area appear between the starting and ending keyframes, indicating that you’ve successfully created a shape tween.
6. Turn on the Onion Skin Outlines option below the Timeline to see the frames that Flash has created for you.
7. If necessary, use the sliders that appear on the timeline ruler to show Onion Skin Outlines across the entire range of frames from beginning to end.
8. Press Enter or Return to play back your animation.
   The original shape transforms into the final shape.
   
   
   

Web Design 2

Web Design 2 time to start in javascript and JQuery!  The results will be much like those from flash, but without the need for Flash Player!

Please choose a menu to build from the link below:

http://sixrevisions.com/javascript/20-excellent-javascript-navigation-techniques-and-examples/

wix tips

Web Design 2 Redirect

To create a simple HTML page that will send users/viewers to your home page inside a sub folder do the following:

• create an HTML page
• in the HEAD add the following code, but link to your own page - http://scia.shorelineschools.org/username/foldername/pagename.html
• name the page index.html
• place it alone in your root folder on the scia server

< meta HTTP-EQUIV="REFRESH" content="0; url=http://www.yourdomain.com/index.html" >

Site requirements

• 4+ pages 
• intereactive
• use of transitions
• effective use of template
• content
• fun!

WIX!!!

Today we will begin making a new site, in prep for an interactive site you will create on your own, using an interactive web template site.   www.wix.com

examples:


http://www.wix.com/brandondmills/my-portfolio#!

http://www.wix.com/g3neric_d3rek/flowsnowboards

http://www.wix.com/ameetclicks/treats

http://www.wix.com/rachelelizabethalexa/oncue-website

Want your site on the web?

Log onto the SCIA server (similar to staff) and drop your site in the "Web_Design_1" folder. 

Be sure your site root folder is only named YOUR LAST NAME and that you have one page named home.html or index.html

your site address would then be something like:


http://scia.shorelineschools.org/Web_Design_1/Story/Home.html

Site Critique

• Is the PhotoShop Layout professional? 

• What could be done to improve this layout?

• Navigation – is it consistent?  Functional?  Borders set to “0” so there are no gaps in slices/layout? Any way to improve upon current navigation?

• Gallery/Info – does it fit with the layout?  Interesting?  Areas to improve?

• Overall – what do you like best and least about this site?