Tip:
Highlight text to annotate it
X
THIS VIDEO IS GOING TO SERVE FOR TIMELINES,
FRAMES, AND THE F5 AND F6 AND F7 KEYS.
FIRST THING YOU NEED TO GET A FAMILIARITY WITH
IS HOW THE TIMELINE WORKS.
SO THIS RIGHT HERE, WHAT I'M ABOUT TO CLICK ON IS A FRAME.
AND THEN IF I CLICK HERE, THAT'S ANOTHER FRAME, ANOTHER FRAME.
AND RIGHT NOW WHAT I HAVE IS THIS POLYGON THAT EXISTS,
STARTS ON THE FIRST FRAME AND EXISTS FROM THE FIRST FRAME
ALL THE WAY THROUGH THE 17TH FRAME.
ON THE 18TH FRAME IT CHANGES TO THIS GREEN OVAL
AND THEN THAT EXISTS ALL THE WAY TO THE 35TH,
ON THE 36TH FRAME SHOWS UP AS A SQUARE
AND THEN THAT SQUARE EXISTS THROUGH THE END.
SO IT'S NOT SO MUCH OF AN ANIMATION
AS JUST A LITTLE MOVIE HERE
THAT THE THINGS CHANGE EVERY SECOND AND A HALF.
EVERY SECOND AND A HALF I KNOW THAT
BECAUSE I AM, WELL,
ACTUALLY NOT RIGHT NOW, IT WOULDN'T BE A SECOND--
ADD 12 FRAMES PER SECOND, IT WOULD BE
BECAUSE EACH 12 FRAMES IS A SECOND
AND THEN I HAVE ROUGHLY ANOTHER HALF SECOND
AND THEN THINGS CHANGE AND THEN AFTER ANOTHER HALF SECOND.
SO I CAN PREVIEW THIS RIGHT HERE INSIDE A FLASH
JUST BY GOING BACK TO THE FIRST FRAME BY CLICKING HERE,
CLICKING ON THE PLAY HEAD OR CLICKING ON THE PLAY BUTTON
AND THAT'S ALL THAT HAPPENS.
LET'S DO THAT ONE MORE TIME.
CLICK PLAY, SECOND AND A HALF LATER IT CHANGES TO THAT SHAPE,
SECOND AND A HALF LATER IT CHANGES TO THAT SHAPE.
SO THE FRAMES WHERE SOMETHING SIGNIFICANT HAPPENS
IS CALLED A KEY FRAME.
SO IN THIS KEY FRAME WE HAVE THE POLYGON,
ON THIS KEY FRAME WE HAVE THE OVAL,
ON THIS KEY FRAME WE HAVE THE RECTANGLE.
ALL OF THE FRAMES IN BETWEEN ARE WHAT AS KNOWN AS TWEEN FRAMES
AND THAT GOES BACK TO THE OLD DAYS OF ANIMATION
WHERE ONE PERSON WAS RESPONSIBLE FOR DRAWING THE MAIN FRAMES
AND THEN SOMEONE HAD TO COME IN, DUPLICATE THIS ON ANOTHER FRAME
AND ON ANOTHER FRAME AND ON ANOTHER FRAME
AND ON ANOTHER FRAME.
BUT THE COMPUTER DOES THAT FOR US
SO IT MAKES OUR LIFE A LOT EASIER.
A THING THAT CAN HELP YOU IN PLACING THE NEXT OBJECT
IN RELATIONSHIP TO THE LAST ONE IS WHAT YOU CALL ONION SKINNING
BECAUSE ONCE I'M HERE AT A NEW FRAME
I CAN'T SEE WHAT CAME BEFORE IT
BUT I CAN IF I TURN ON ONION SKINNING,
WHICH IS RIGHT DOWN HERE.
CLICK ON THAT AND THEN YOU GET THESE THINGS
THAT LOOK LIKE PARENTHESES.
AND IF I DRAG IT, IT SHOWS ME WHAT CAME BEFORE.
SO YOU CAN SEE RIGHT NOW I'M ON THIS FRAME.
LET ME SWITCH TO THE MIDDLE AND SO WHERE I'M CURRENTLY AT
SHOWS UP NICE AND BRIGHT, NORMAL OPACITY.
WHERE I CAME BEFORE,
IF I STRETCH THIS PARENTHESIS OUT FAR ENOUGH,
WILL SHOW UP WITH A VERY LOW OPACITY
AND I CAN ALSO GO INTO THE FUTURE WITH THIS
BY STRETCHING THAT ONE
AND THEN I CAN SEE WHAT'S COMING NEXT.
LET'S ACTUALLY DO BOTH HERE
SO WE CAN SEE THE PAST AND THE FUTURE AT THE SAME TIME.
SO THAT CAN BE VERY HANDY.
YOU CAN ALSO CHANGE THE MODE OF ONION SKINNING
TO THE NEXT ONE OVER TO THE RIGHT,
WHICH IS ONION SKINNING OUTLINE AND THAT DOES EXACTLY THAT,
JUST MAKES THE OTHER, YOU KNOW, THINGS THAT CAME BEFORE,
THINGS THAT ARE COMING AHEAD INTO AN OUTLINE
RATHER THAN A SOLID LOW OPACITY SHAPE.
SO LET'S CREATE OUR FIRST THING THAT RESEMBLES AN ANIMATION.
I'M GOING TO CLOSE THIS ONE DOWN
AND SO WE CAN START FROM A FRESH SLATE HERE.
SO ACTION SCRIPT 3.0 WE HAVE FRESH STAGE HERE
AND LET'S JUST TAKE CARE OF SOME INITIAL STUFF HERE.
I'M JUST GOING TO SELECT THE BLANK PART OF THE STAGE.
AND FOR NOW I'M JUST GOING TO KEEP
MY FRAMES PER SECOND AT 12,
KEEP WITH THE STANDARD SIZE STAGE SHAPE FOR NOW.
AND WE'RE GOING TO CREATE A REAL SIMPLE LITTLE VIDEO,
PROBABLY LIKE I HAD YOU DO THE FIRST DAY IN CLASS.
WE'RE JUST GOING TO TAKE THE PIN TOOL,
WHICH I FOUND OVER HERE
AND JUST SIMPLY CREATE SOMETHING HERE.
AND THEN, THIS IS ONE OF THE SHORTCUT KEYS
I WANT YOU TO LEARN, IS THE F7 KEY.
THE F7 KEY GIVES YOU A BLANK KEYFRAME.
SO IF I CLICK HERE IN FRAME NUMBER TWO,
WHICH HAS ABSOLUTELY NOTHING IN IT,
THE ONLY FRAME THAT EXISTS RIGHT NOW IS JUST FRAME ONE,
CLICK IN FRAME TWO, HIT THE F7 KEY.
IF THAT DIDN'T WORK,
YOU PROBABLY NEED TO HOLD DOWN THE FN KEY,
AS WELL AS THE F7 KEY.
THE FN KEY IS THE FUNCTION KEY
BUT YOU CAN CHANGE THAT
IN SYSTEM PREFERENCES ON YOUR COMPUTER.
AND, ACTUALLY, LET ME JUST SHOW YOU REAL QUICK.
YOU GO DOWN TO THE BOTTOM,
THE LITTLE THING THAT LOOKS LIKE A SET OF GEARS.
LET ME SEE IF I CAN MOVE YOUR VIEW DOWN THERE.
AND ONCE YOU CLICK ON THAT, IT OPENS UP THE SYSTEM PREFERENCES
AND YOU'RE JUST GOING TO GO INTO THE THING
THAT SAYS "KEYBOARD" ON IT.
YOU'RE GOING TO CLICK ON THAT
AND YOU ARE GOING TO CHECK THIS CHECKBOX RIGHT HERE
THAT SAYS "USE F1, F2."
IT SETS YOUR KEYS AS STANDARD FUNCTION KEYS.
AND NOW THOSE KEYS WILL WORK
WITHOUT HAVING TO HIT THE FN KEY.
OKAY, AND ANOTHER THING THAT YOU MIGHT BE INTERESTED IN HERE
IS GO TO "SHOW ALL" AND THAT IS THE MOUSE
AND IF YOU HAVE A MOUSE CONNECTED,
WHICH I DON'T BECAUSE I'M USING A LAPTOP,
THERE WILL BE AN OPTION HERE,
THERE WILL BE A LITTLE LINE THAT COMES OUT
AND IT'LL SAY, "PRIMARY,"
OR IT'LL SAY, LIKE, "LEFT BUTTON,"
AND THEN IT'LL SAY, "PRIMARY FUNCTION."
AND THEN THERE'LL BE A LITTLE ARROW
THAT COMES OUT OF THIS SIDE AND IT'LL SAY SOMETHING
TO THE EFFECT OF "RIGHT MOUSE" OR "RIGHT,"
AND THEN IT'LL SAY "PRIMARY" AS WELL.
THERE'LL BE A LITTLE DROPDOWN.
CLICK ON THE DROPDOWN AND SELECT "SECONDARY."
SO THAT MEANS IF YOU CLICK ON THE LEFT SIDE
IT'S JUST LIKE USING A PC, YOU GET A LEFT CLICK.
IF YOU CLICK DOWN ON THE RIGHT SIDE OF THE MOUSE
YOU GET THE RIGHT CLICK OPTIONS.
OKAY, SO WE'RE DONE IN THERE
AND SO WHAT WE'VE DONE SO FAR
IS IN THE FIRST FRAME WE JUST DREW A LITTLE SLASH MARK HERE
AND THEN IN THE NEXT FRAME
WE'RE GOING TO DRAW ONE REALLY CLOSE TO IT.
NOW, WHAT WE JUST LEARNED
SINCE WE CAN'T SEE WHAT'S GOING ON IN THE SECOND FRAME
COMPARED TO THE FIRST FRAME,
WE CAN TURN ON ONION SKINNING.
AND WITH ONION SKINNING ON NOW WE GET TO SEE IT,
A FAINT OUTLINE OF WHAT WENT ON IN THE FIRST FRAME.
SO I WANT MY ANIMATION
TO LOOK LIKE IT'S GOING VERY SLOW AT FIRST,
WHICH MEANS THAT I NEED
TO JUST SIMPLY DRAW THINGS VERY CLOSE TOGETHER
BECAUSE LITTLE DISTANCE FROM ONE FRAME TO ANOTHER
EQUATES TO SLOW MOTION.
SO ALL I'M DOING NOW IS HITTING THE F7 KEY.
SORRY ABOUT THAT, I KIND OF LOST THE SCREEN.
ALL I'M DOING IS HITTING THE F7 KEY
AND EVERY TIME I DO THAT
DRAWING A NEW LINE KIND OF SIMILAR TO THE ONE BEFORE IT.
SINCE I HAVE THE ONION SKINNING ON,
I GET TO SEE, IN THIS CASE, THE WAY IT'S SET UP
THE LAST TWO FRAMES BEFORE.
BUT IF I WANTED TO SEE MORE FRAMES
I CAN JUST DRAG THAT BACK AND CONTINUE TO HIT F7.
NOW, IF I WANT THIS TO LOOK
LIKE IT STARTS TO SPEED UP THE FURTHER THE VIDEO PLAYS,
THEN I CAN JUST START DRAWING
THESE A LITTLE BIT FURTHER AWAY FROM EACH OTHER EACH TIME.
SO WHAT IT'S GOING TO LOOK LIKE
IS THAT THIS OBJECT STARTS OUT VERY SLOW
AT THE LEFT SIDE OF THE SCREEN
AND AS IT STARTS TO MOVE TOWARDS THE RIGHT,
IT STARTS TO MOVE FASTER,
AND TO GO EVEN FASTER, WE GO GREATER DISTANCE APART.
AND IF I DRAW OVER HERE INTO THE GRAY IT DOESN'T SHOW.
SO THE VERY LAST FRAME YOU'RE JUST GOING TO SEE
A LITTLE PIECE OF IT AS IT DISAPPEARS OFF THE STAGE.
SO LET'S SEE WHAT THIS LOOKS LIKE.
I'M GOING TO NOW RATHER THAN PREVIEW IT INSIDE OF FLASH,
I'M GOING TO HIT "COMMAND RETURN"
AND WE'LL SEE IT INSIDE,
WHAT IT LOOKS LIKE IN FLASH PLAYER.
SO JUST KIND OF LIKE WHAT WE THOUGHT,
STARTS OUT SLOW AND THEN IT ACCELERATES
WHEN IT GETS OVER HERE AND GOES ALL THE WAY OFFSTAGE.
REMEMBER THAT LAST LITTLE FRAME, THE WAY THAT LOOKED.
OKAY, I CLOSED THAT,
I'M GOING TO TURN OFF THE ONION SKINNING FOR NOW,
NAME THIS LAYER RED LINE.
LET'S MAKE ANOTHER LAYER.
LET'S TRY SOMETHING OUT HERE, GREEN BOX.
NOW, THE WAY I'M ANIMATING THIS STUFF
IS NOT NECESSARILY HOW YOU'LL ANIMATE STUFF IN THE CLASS.
YOU'LL BE USING A LOT OF THE MORE PRECISE TOOLS
OR THE MORE AUTOMATED TOOLS IN HERE.
BUT LET'S JUST MAKE A GREEN BOX
LOOK LIKE IT'S MOVING ACROSS THE STAGE.
SO I'M GOING TO SELECT A RECTANGLE TOOL,
CHANGE THE COLOR TO GREEN.
I'M GOING TO MAKE A BOX OVER HERE.
I'M HOLDING DOWN THE SHIFT KEY SO THAT I GET A PERFECT BOX.
AND NOW, YOU SEE, BECAUSE I ALREADY HAD SOME THINGS HERE
THAT IT EXTENDED OUT THE BOX
SO THAT IT CONTINUES FROM ONE FRAME TO ANOTHER,
SO THAT IF WE PLAYED THIS MOVIE
THAT GREEN BOX JUST STAYS THERE THE WHOLE TIME.
NOT A WHOLE TIME,
IN OTHER WORDS, IT GAVE US TWEEN FRAMES.
BUT WHAT WE WANT TO DO
IS MAKE THIS BOX LOOK LIKE IT'S MOVING ACROSS THE STAGE.
SO WE COULD DO, BUT THIS WOULD BE A HORRIBLE WAY TO WORK,
IS JUST COME OVER HERE TO THE SECOND KEY FRAME,
DO AN F7 TO GIVE US A BLANK KEY FRAME,
MAYBE TURN ON THE ONION SKINNING
SO WE COULD SEE WHAT CAME BEFORE,
AND COPY, YOU KNOW, MAKE ANOTHER COPY OF THE BOX.
BUT WE WOULDN'T KNOW
IF WE MADE IT EXACTLY THE SAME SIZE AND SO ON AND SO ON.
SO A BETTER WAY TO DO THIS WOULD BE TO COPY THE BOX
AND PUT IT ONTO THE SECOND LAYER.
AND WE COULD EXIT, COPY AND PASTE,
BUT THERE'S EVEN A MORE FRIENDLY WAY INSIDE OF FLASH.
AND I'M GOING TO TURN OFF THE ONION SKINNING HERE
SINCE WE DON'T REALLY NEED IT.
AND I DID A COMMAND Z SO THAT I CAME BACK TO HERE.
BUT EVEN IF I DIDN'T I COULD STILL JUST CLICK THERE
AND DO AN F6.
SO NOW WATCH WHAT HAPPENS.
SO I HAVE SOMETHING ON THE FIRST FRAME,
I GO TO THE SECOND FRAME AND I DO F7.
OH, I'M SORRY, DIDN'T WANT TO DO F7, I WANT TO DO F6.
SO I NEED TO--ACTUALLY, LET ME JUST DO COMMAND Z
A COUPLE TIMES TILL I GET BACK.
OKAY.
F6 RIGHT THERE, SO NOW WHAT HAPPENS,
THE FIRST FRAME AND THE SECOND FRAME
NOW HAVE THE SAME EXACT THING ON IT.
SO I CAN GO TO THE SECOND FRAME AND I CAN SELECT THIS
AND THEN I CAN COPY IT.
THEN I CAN GO TO THE THIRD FRAME, DO AN F6,
IT'S COPIED AUTOMATICALLY, I CAN MOVE IT.
AND I THINK A MINUTE AGO I SAID COPY
WHEN I MEANT TO SAY MOVE IT.
BUT DO F6, MOVE IT A LITTLE BIT,
COME OVER HERE, DO F6 AGAIN, MOVE IT A LITTLE BIT,
F6, MOVE IT A LITTLE BIT, YOU GET THE IDEA.
ALL RIGHT, SO I JUST PAUSED THE MOVIE
AND FINISHED MOVING THAT A LITTLE BIT.
SO NOW WE HAVE,
IF I PREVIEW THIS ANIMATION, HERE'S WHAT WE HAVE.
THIS IS THE ONE I JUST MADE, THIS IS WHAT WE HAD BEFORE.
NOW, WHAT IF WE WANTED THIS BOX TO STAY FOR AWHILE
BEFORE THE ANIMATION FINISHED?
WHAT WE WOULD NEED TO DO IS EXTEND THIS LAST FRAME OUT
SO THAT, LET'S SAY WE WANT IT THERE FOR TWO FULL SECONDS,
SO RIGHT NOW IF I CLICK HERE AND GO DOWN TO HERE,
I CAN SEE I'M ON FRAME 18.
TWO SECONDS WOULD BE 12 PLUS 12, RIGHT?
'CAUSE WE'RE AT 12 FRAMES PER SECOND,
SO 24 MORE FRAMES ON TOP OF THAT WOULD TAKE US TO, WHAT, 42?
SO I'LL GO OVER TO 42.
NOW HERE'S THE NEXT SHORTCUT I WANT YOU TO LEARN,
AND THAT IS F5.
SO WHAT F5 DOES IS EXTENDS. SO, WATCH RIGHT NOW.
I CLICK HERE, HIT F5, IT EXTENDS
AND YOU CAN ALSO THINK OF THAT IS IT MAKES TWEEN FRAMES.
EXACT SAME CONTENT THAT WAS HERE
IS HERE, HERE AND HERE.
THE DIFFERENCE BETWEEN A F5 AND AN F6
IS AN F6 ACTUALLY MAKES AN EDITABLE COPY
OF WHAT CAME BEFORE.
F5 JUST SIMPLY EXTENDS IT OUT.
SO NOW WHEN WE WATCH THAT MOVIE
WE'RE GOING TO SEE THIS STAYS HERE FOR TWO SECONDS
BEFORE THE MOVIE STARTS.
THIS WENT OFF-SCREEN, SO WE DON'T GET TO SEE IT,
BUT WE COULD IF WE WANTED TO SEE THIS MORE, RIGHT?
JUST GO TO THAT LAST FRAME, SELECT IT,
MOVE IT BACK A LITTLE BIT.
I'M JUST USING THE LEFT ARROW KEY.
AND THEN YOU KNOW WHY THAT DIDN'T WORK?
BECAUSE THIS LAST FRAME DISAPPEARS.
WATCH, IF I SCRUB THE PLAY HEAD IN HERE,
YOU GET THERE BUT THEN WE GO TO NOTHINGNESS IN HERE
SO I ACTUALLY NEED TO EXTEND THIS OUT AS WELL.
SO I AM GOING TO DO AN F5 HERE AS WELL.
NOW WE'RE GOING TO PLAY THE MOVIE
AND WE'LL SEE BOTH OF THEM BEFORE THE MOVIE--
WE'LL SEE BOTH OF THEM FROZEN FOR TWO SECONDS
BEFORE THE MOVIE STARTS.
ALL RIGHT, WE ARE, SO TO SPEAK, STUCK AT 12 FRAMES PER SECOND.
SO, WHAT IF I WANT THIS BOX TO MOVE SLOWER?
WELL, HERE'S ANOTHER THING THAT IS USEFUL WITH THE F5 KEY.
AND WHAT YOU DO IS YOU JUST GO TO THIS FRAME, HIT F5.
I'LL DO IT, LET'S SAY, FOUR TIMES
AND SO NOW WHAT'S GOING TO HAPPEN
IS IT'S REALLY GOING TO SLOW DOWN.
AT THE BEGINNING IT'S GOING TO KIND OF STAY THERE FOR AWHILE
AND THEN START TO MOVE.
SO LET'S EVEN EXAGGERATE THAT EVEN MORE.
I'M GOING TO JUST GO BACK, CLICK ANYWHERE IN HERE,
HIT F5 A FEW MORE TIMES THEN I'M GOING TO--FRAME,
I'M GOING TO HIT F5 JUST A COUPLE TIMES,
F5 JUST A COUPLE THERE, JUST A COUPLE THERE.
AND SO NOW IT'S GOING TO LOOK LIKE IT'S GOING REALLY SLOW,
MAYBE SO SLOW THAT IT WON'T EVEN LOOK LIKE AN ANIMATION.
AND THEN WHAT ELSE YOU SHOULD NOTICE
IS THAT THOSE F5'S EXTENDED EVERYTHING INCLUDING THE END.
SO WHAT'S GOING TO HAPPEN IS THIS IS GOING TO DISAPPEAR
WHEN WE PLAY THE MOVIE WHEN IT GETS TO HERE, RIGHT?
BECAUSE WE'RE GOING TO SEE IT, WE'RE GOING TO SEE IT,
AND THEN ALL OF A SUDDEN WHEN IT GETS THERE
THERE'S NOTHING TO SEE.
SO LET'S SEE IF I'M RIGHT ON THAT.
YEP.
AND NOTICE THAT THAT BOX LOOKS LIKE IT STARTS OUT REALLY SLOW
AND THEN STARTS TO MOVE.
ALL RIGHT, THE ONLY OTHER SHORTCUT KEY
THAT YOU NEED TO KNOW HERE IS SHIFT F5.
AND WHAT SHIFT F5 DOES IS GETS RID OF WHATEVER IS SELECTED.
SO IF I CLICK HERE, DO A SHIFT F5. �