03-16 Javascript - Khan Academy

I used the CHROME Extension "Chrome Capture" 

for the following ani-gif

The following is an HTML5 movie .webm was recorded using a Chrome Extension called Nimbus Screenshot and Screencast


Upload option 1

• upload as movie on blog

upload option 2

• The movie was saved to Dropbox. 
• TRY TO USE NO SPACES IN THE NAME.
• Right click and choose "copy Dropbox Link".

The code you need is below -  paste it into the HTML section:

<video controls="controls" height="480" src="http://dl.dropbox.com/s/ctxx971i6ig6pvl/tastyTomato.webm" width="640"></video>

note: use your own dropbox Link!

•  delete the 's' from https 
• www was changed to 'dl' 
• delete everything after 'webm'

....only works in chrome

 .

..

Here's the sequence

CONTENTS

About
Intro to programming
Drawing basics
Coloring

Variables

Animation basics

Interactive programs

Bonus: Resizing with variables

Text and strings

Functions

Logic and if Statements

Debugging programs

Looping

Writing clean code

Arrays

Objects

Object-Oriented Design

Becoming a better programmer

02 Waving Snowman - Javascript - Khan Academy

the #BCTECH Summit Youth Innovation Day

GRADE 10-11-12

Read the PDF

CONFERENCE OVERVIEW

Youth Innovation Day will inspire high school students, post-secondary students and recent graduates pursuing careers in technology. The event is fully integrated into the #BCTECH Summit on Wednesday, March 15th, 2017. Students attending will have an opportunity to attend youth-focused conference sessions, explore the Marketplace and Tech Showcase, listen to inspiring speakers’ share how technology is changing the world, and gather practical information from all the post-secondary institutions and companies that are hiring the next generation of talent.

If you are interested: - talk to me

• first come first served
• I have 10 slots - 5 are taken - 5 left
• I will email you the info and a release form

 note these:

1. during spring break

2. You need to find a ride there

3. Free attendance and free food

01 Simple Snowman - Javascript - Khan Academy

YOU WILL NEED HEADPHONES

Go to Khan Academy

sign up

chose computer programming

select: 

Intro to JS: Drawing & Animation

-whenever there is a challenge or project- 

-use the snipping tool-

if it's animated use Chrome Capture

Capture live action use Nimbus Screenshot and Screencast

- POST your results-

proceed to the next item down the list

1. make sure your BLOG URL is in the CODE section as a comment i.e. // acssinfotech1617s1.blogspot.ca - marks
2. after completing the challenge - add something EXTRA from what you learned - your marks come from these changes - double what you originally had to draw.
3. The projects can be a real showcase of skill - do your best.
4. EVERY line of code must have a comment to explain what the lone of code means - your marks come from these comments
5. If you copy my code - you must change it significantly - so much so that I do not recognise it- my own or others code!
6. take screen shot - capture animation- or make movie
7. save to your DROP BOX then UPLOAD TO YOUR BLOG - make it large enough to be readable

code in camelCase

RoboZZle

http://www.robozzle.com/

use IE as this is a Microsoft Product

(Silverlight is already installed on your machines)
(Choose continue to limited version)
To get to the tutorials choose the BETA version of Robozzle Javascript link

1. Choose Tutorial - do them
2. Choose Campaign


I need 4 difficulty level 2 (no blue in third box or >1)
I need 3 difficulty level 3 (no blue in fourth box or >2)
I need 2 difficulty level 4 (no blue in fifth box or >3)  do this one
I need 1 difficulty level 5 (may be impossible: >4)

Solve the puzzle - replay - take screen shot of your solution - add blog address - post

POST Title: - name of puzzle - level of puzzle -number completed

example

Title: stairs - level 2 - #1

I have hidden the solution with my blog address.
Going for an A! POST A PUZZLE.

Friday POST - February 17, 2017 - Pivot

It's all about PIVOT Animator

Tips and Tricks

Name three Keyboard shortcuts and explain what they do.

1. 
   
2. 
   
3. 
   

Solve these

I downloaded the following image: soccerball.jpg but I it will not load in as a sprite.
Why NOT?

I want the animation dimensions to be Width 900 Height 450 then loaded a background image: height 200 width 200.

This warning pops up:

What happens when I choose Yes?
What happens if I choose NO?

Post the image of your CHAIR from Pivot Soccer

Pivot Volleyball

CREATE
a
PIVOT animation

of

starring

Scott Sterling

Show your blog address on EVERY slide

Pivot Soccer

what to do:

• Run pivot and play with it if you have not used Pivot before.
• Learn to make small changes for quality animation
• Learn how to move many things at the same time.
• interesting keyboard shortcuts - use them
• note under EDIT OPTIONs you an adjust the screen size - make it fit your monitor.
• 1500 x 800
• note: load background - a large image that you animate on top of. DO NOT let it adjust the size of your screen.
• note: load sprite - a volleyball or a soccer ball are good examples. These are  movable objects and become part of your pivot animation. Pivot Animation does not use.jpg images only gif and png.
• note: load figure type or create figure type. More stick objects you can draw or use the built in ones.

YOUR GOAL:  SCOTT STERLING  Soccer shootout

frame 1-10 should be your blog address

• soccer ball sprite image ( download it - from google images)
• try to get a small transparent ball -PIVOT lets you resize even smaller as well.
• animate both teams - more points for more things moving AT THE SAME TIME
• if you are going for an A - do every scene - all parts must move all the time
• add the coach (Load Figure Type) and the stretcher at the end (sprite)

Once you are finished export a gif  - reduce size by 50% -to your Dropbox then post it on your blog Title: Pivot -soccer

Super Planet Crash

http://www.stefanom.org/spc/?view=

5 screenshots
- use the snippingtool -

place these into your Dropbox
NEW folder- SuperPlanetCrash

edit each to add your blog address

Screen shot at 100, 200, 300, 400 and the win: 500

MUST choose 5 different planets 
at the very beginning

- you only need 1 of the dwarfs-

Begin

My Solar System

http://www.stefanom.org/spc/?view=

Friday POST February 03, 2017 - BLOG

title: Friday POST February 03, 2017 - BLOG

What did you do this week?
.

1. Tell me what you did this week
2. What are the titles of the assignments you have posted? including today
• 
  
• 
  
• 
  
• 
  
• 
  

What did you learn?

Details - what very specific things did you learn? This is where you tell me HOW...

Use the SNIPPINGTOOL to capture parts of your screen to help with your description.
Remember to add your blog address to these images.

1. how to create a link on your blog, DESCRIBE HOW TO CREATE A LINK
2. blog post backgrounds - colour - multi colour- images - DESCRIBE HOW
3. how to search for - animated gif - transparent backgrounds - DESCRIBE HOW
4. ...what else have your learnt?

Ground Hog Day

Ground Hog Day

Answer the following questions:

1. What is ground hog day? - definition plus history with images

2. What is Punxsutawney Phil's prediction?

3. What is Wiarton Willie's prediction?

Then ...Draw this picture

..using this online tool

http://www.zefrank.com/scribbler/scribblertoo/ 

Lable it 'Ground Hog Day 2017' 

add your BLOG ADDRESS

the background image: 

<div style="background: url(&quot;http://www.featherfocus.com/images/air_bubbles_hg_wht.gif&quot;);">

</div>

What I want to learn in IT

TITLE: what I want to learn in IT

1. Tell me what you would like to learn in IT
2. add an image for each idea
3. add a link for each idea

background colour TEAL

Predicted Grade

TITLE: PREDICTED GRADE

find numbers to create a predicted percent grade and letter grade:
All "transparent" "animated" gifs
If you choose: A -  95%  then get an 5, a 9, a percent sign and the Letter
I used insert URL - under 'insert image' above

<div style="background: peru;">

</div>

-------------------------------------------------------------------------
Use the following CODE to fix the background issue behind the transparent images.

Go to:
Design - Layout - Template Designer - Advanced - (scroll down to) - Add CSS
then paste in the following:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img {

  padding: 0 !important;

  border: none !important;

  background: none !important;

  -moz-box-shadow: 0px 0px 0px transparent !important;

  -webkit-box-shadow: 0px 0px 0px transparent !important;

  box-shadow: 0px 0px 0px transparent !important;

}