Tip:
Highlight text to annotate it
X
WE'LL NOW TALK ABOUT SYMBOLS AND THEIR INSTANCES.
FIRST THING, THE SIGNIFICANCE OF A SYMBOL
IS THAT THEY SAVE MEMORY
AND THEY CAN SAVE A LOT OF YOUR PRODUCTION TIME.
YOU USE A SYMBOL ANY TIME YOU HAVE SOMETHING THAT REPEATS.
SO EVEN IF IT'S A BACKGROUND ELEMENT
THAT DOESN'T EVEN ANIMATE,
BUT YOU NEED A BUNCH OF TREES
AND THEY CAN ALL LOOK THE SAME, THEN JUST MAKE ONE,
MAKE IT-- TURN IT INTO A SYMBOL
AND THEN DRAG OUT FROM YOUR LIBRARY
INSTANCES OF THE SYMBOL.
AND IF YOU HAVE AN ANIMATION THAT OCCURS MULTIPLE TIMES,
TURN THAT INTO A SYMBOL.
IF YOU HAVE AN ITEM THAT YOU'RE GONNA ANIMATE,
AND IT JUST MOVES FROM ONE SIDE OF THE STAGE TO THE OTHER
AND DOES NOT MORPH AS IN A CIRCLE CHANGING TO A SQUARE,
THAT WOULD BE A MORPH,
THAT MEANS YOU'D NEED A SHAPE TWEEN.
BUT IF IT DOES NOT PHYSICALLY CHANGE SHAPE AS IN A MORPH,
THEN YOU CAN AND YOU SHOULD USE SYMBOLS
TO DO THAT ANIMATION.
IT COULD CHANGE SCALE.
IT COULD ACTUALLY CHANGE VERTICAL, HORIZONTAL SCALE,
WHICH WOULD MEAN IT WOULD LOOK SQUISHED.
IT CAN CHANGE COLOR,
IT CAN CHANGE ALPHA, ALL THOSE TYPE OF THINGS.
SO VERY POWERFUL FEATURE IN FLASH, SYMBOLS.
SO LET'S TALK ABOUT HOW TO MAKE SYMBOLS
AND HOW YOU USE THEM.
SO I'M JUST GOING TO CREATE SOME TYPE OF OBJECT OVER HERE.
HAVE A SQUARE BOX.
THAT CAN BECOME A SYMBOL.
SO IF THIS SQUARE BOX IS GONNA FLY AROUND MY STAGE
THROUGHOUT A SERIES OF ANIMATIONS,
FIRST THING I WOULD WANT TO DO
IS CONVERT THIS OVER TO A SYMBOL.
TO CONVERT SOMETHING TO A SYMBOL, VERY EASY.
JUST SELECT IT.
AND THIS IS THE LONG WAY: MODIFY, CONVERT TO SYMBOL.
I ALMOST ALWAYS JUST USE F8.
SO I'M GONNA PRESS THE F8 KEY.
I GET THIS LITTLE DIALOG BOX THAT COMES UP HERE.
I'M GONNA NAME THE SYMBOL.
AND THERE ARE SOME BETTER CONVENTIONS
OR BEST PRACTICE CONVENTIONS
THAT YOU SHOULD USE WHEN NAMING A SYMBOL.
ONE OF THEM IS NO SPACES,
WHICH IRONICALLY THEY ACTUALLY PUT A SPACE IN HERE.
IT USUALLY DOESN'T CAUSE A PROBLEM
UNLESS YOU GO TO MORE ADVANCED CODING AND THEN--
AND ONLY THEN WITH CERTAIN OLDER MACHINES.
BUT IT'S STILL A GOOD PRACTICE
FOR THERE NOT TO BE ANY SPACES.
YOU SHOULD NOT START OUT WITH A CAPITAL LETTER OR NUMBER,
BUT AFTER THAT, YOU CAN USE CAPITALS
AND YOU CAN USE NUMBERS.
AND THE WAY MOST WEB DESIGNERS USE THE SPACE
IS THEY USE THE UNDERSCORE, WHICH IS ACHIEVED
BY HOLDING DOWN THE SHIFT KEY AND THE HYPHEN KEY.
SO WE'LL JUST CALL THIS RED SQUARE 01.
RIGHT NOW, ALL OF THE GRAPHICS THAT WE CREATE OR--
I'M SORRY-- ALL THE SYMBOLS THAT WE CREATE
ARE GONNA BE KNOWN AS GRAPHIC SYMBOLS.
AND THE REGISTRATION,
THIS JUST IS WHEN YOU'RE USING THINGS LIKE INFORMATION.
IT MEASURES EVERYTHING FROM THE TOP RIGHT--
IN THIS CASE, LEFT-HAND CORNER OF THE SYMBOL.
THIS IS FINE TO USE ALMOST ALL THE TIME.
SO I'M JUST GONNA CLICK OKAY.
AND NOW, WHAT HAPPENS
IS YOU CAN SEE THE APPEARANCE OF THIS HAS CHANGED.
AND DON'T CONFUSE THIS WITH OBJECT DRAWING MODE
WHERE YOU GET THIS LITTLE BLUE OUTLINE AROUND IT.
AND THE WAY, AS ALWAYS, YOU CAN TELL WHAT YOU HAVE HERE
IS TO GO TO PROPERTIES, CLICK ON THE THING
AND THEN PROPERTIES WILL TELL YOU.
AND RIGHT NOW, IT'S SAYING
THAT I HAVE AN INSTANCE OF RED SQUARE 01.
SO THIS IS AN INTERESTING POINT.
THIS IS NOT THE SYMBOL.
I CAN MAKE COPIES OF THIS.
HOLD DOWN THE ALT KEY, DRAG IT.
THESE ARE ALL JUST INSTANCES OF THE SYMBOL.
AND THAT IS WHY THEY SAVE MEMORY
BECAUSE THEY ARE JUST A REFLECTION
OF THE SYMBOL ITSELF.
I COULD DELETE ALL OF THESE RIGHT NOW.
THE SYMBOL IS STILL LIVING, STILL THERE.
THE SYMBOL ALWAYS EXISTS INSIDE OF YOUR LIBRARY.
SO THERE IT IS.
IF I WANT MORE INSTANCES OF THAT SYMBOL,
I CAN JUST DRAG THEM OUT.
I'M JUST CLICKING AND DRAGGING ONE AFTER ANOTHER
OUT OF THAT LIBRARY.
SO THIS IS THE SYMBOL.
THIS IS AN INSTANCE OF THE SYMBOL.
JUST ABOUT ANYTHING THAT YOU DRAW OR BRING INTO FLASH
CAN BE CONVERTED TO A SYMBOL.
AND IT CAN ACTUALLY BE MORE THAN ONE THING.
SO I'M GONNA USE THE DRAWING TOOLS,
AND I'M GONNA CREATE THREE SHAPES OVER HERE,
AND I'LL CONVERT THOSE TO A SYMBOL, OKAY?
SO I JUST HAVE A CIRCLE, SQUARE, POLYGON.
I'M GONNA SELECT ALL OF THEM, HIT THE F8 KEY OR MODIFY,
CONVERT TO SYMBOL.
AGAIN, MAKE SURE THAT IT'S A GRAPHIC,
AND THEN GIVE IT A NAME.
SO I'LL CALL THIS SET OF THREE.
THAT'S ANOTHER WAY TO NAME THINGS IN COMPUTER WORK
IS TO USE CAMEL CASING.
AND THAT'S FINE IN HERE.
IN CERTAIN INSTANCES, THAT'S NOT OKAY,
BUT IN FLASH, IT'S OKAY.
NOW I HAVE AN INSTANCE OF THIS SYMBOL,
AND THIS SYMBOL JUST HAPPENS TO BE MADE UP
OF MULTIPLE PIECES.
AND ONCE AGAIN, I CAN DRAG THE WHOLE BUNCH OUT.
NOW YOU SEE WE HAVE TWO DIFFERENT THINGS
IN OUR LIBRARY.
WE HAVE THE RED SQUARE SYMBOL,
AND WE HAVE THE SYMBOL THAT'S CALLED SET OF THREE.
AND I HAVE INSTANCES OF BOTH OF THOSE SYMBOLS
OUT ON MY STAGE.
NOW, A SYMBOL ACTUALLY GETS EVEN BETTER THAN
WHAT I'VE EXPLAINED.
YOU'RE NOT STUCK WITH EXACTLY THE WAY THAT IT LOOKS.
SO YOU CAN ACTUALLY MAKE CHANGES TO THE INSTANCES
OF THE SYMBOLS
AND NOT HAVE IT AFFECT THE ORIGINAL
THAT LIVES INSIDE THE LIBRARY.
SO LET'S LOOK AT SOME EXAMPLES OF THINGS THAT YOU CAN DO.
ONE OF THEM IS A SCALE CHANGE.
SO I CAN COME OVER HERE, GRAB THIS FREE TRANSFORM TOOL.
AND IF I CLICK ON THE CORNER--
HOLDING DOWN THE SHIFT KEY, CLICKING ON THE CORNER,
I'VE JUST MADE A NICE SCALE CHANGE THERE.
AS OPPOSED TO NOT HOLDING DOWN THE SHIFT KEY,
I CAN ACTUALLY SCALE JUST THE HORIZONTAL.
AND I CAN MAKE A COPY FROM HERE AS WELL,
JUST CLICK AND DRAG LIKE THAT RATHER THAN GO TO THE LIBRARY.
I CAN SCALE JUST VERTICALLY.
I CAN ALSO CLICK--AGAIN, THE SAME TOOL IS SELECTED.
GO TO THE CORNER.
ROTATE IT.
SIMILARLY--AND I'LL DO TWO THINGS ON THIS.
I'LL SCALE IT DOWN A LITTLE BIT.
AND THEN I'LL GO TO ONE OF THESE CORNER EDGES HERE.
AND I AM GOING TO--
MAYBE I SHOULDN'T HAVE MADE IT SMALLER.
WHAT I'M TRYING TO DO IS JUST GRAB THAT CORNER PIECE.
IT'S HARD 'CAUSE IT'S EITHER--
GIVES ME--THERE WE GO, RIGHT THERE,
WHERE IT BECOMES THE OVER/UNDER ARROW,
AND DRAGGING THAT IS LIKE A SKEWER KIND OF--
YEAH, I GUESS SKEWER IS THE BEST NAME FOR THAT.
SO THERE'S 1, 2, 3, 4, 5 DIFFERENT THINGS
THAT WE CAN DO,
AND THERE ARE SOME INTERESTING THINGS
WE CAN DO TO THE COLOR OF THIS.
BUT MAKE SURE YOU UNDERSTAND THIS,
YOU CANNOT GRAB A SYMBOL AND GO OVER HERE TO THE COLORS
AND MAKE A CHANGE.
THAT JUST DOES NOT WORK.
BUT WHAT YOU CAN DO IS GO INTO THE PROPERTIES PANEL,
GO TO COLOR EFFECT,
HIT THIS LITTLE THING TO MAKE IT DROP DOWN.
AND THEN HERE,
SELECT ONE OF THESE OPTIONS
SO I CAN CHANGE THE BRIGHTNESS OF IT.
SO I'M TURNING THE BRIGHTNESS WAY DOWN,
ON THIS ONE, WE WILL TAKE THE BRIGHTNESS
AND TURN IT WAY UP.
WE COULD GO ALL THE WAY TO WHITE IF WE WANTED
AND COULD'VE WENT ALL THE WAY TO BLACK IN THAT CASE.
OTHER THINGS THAT WE CAN DO OVER HERE
WITH THE COLOR IS TINT.
WE CAN APPLY A TINT OVER THE TOP OF THIS.
AND WE CAN ACTUALLY-- BY CLICKING HERE,
WE CAN BRING UP ANY COLOR HERE,
OR WE CAN EVEN USE THE EYEDROPPER TOOL.
SO WE CAN SELECT FROM--WITH THE EYEDROPPER INSIDE OF THIS.
OR WE CAN ACTUALLY GO OUT HERE,
AND I COULD SELECT THIS RED COLOR,
WHICH I COULD ALSO GET FROM OVER HERE.
BUT ANYWAY, I HAVE THE RED NOW,
AND THEN I HAVE 50% TINT APPLIED TO THAT.
SO IT'S LIKE STICKING A RED FILM OVER THE TOP OF IT.
SO YOU CAN SEE IT HAD A BIG EFFECT ON THE GREEN
AND A LITTLE BIT OF AN EFFECT ON THE BLUE,
NOT SO MUCH ON THE RED
'CAUSE RED OVER RED IS NOT A BIG DEAL.
BUT I CAN CRANK THE TINT UP ALL THE WAY,
AND THE WHOLE ENTIRE THING BECOMES PURE RED.
SO THE TINT IS PRETTY POWERFUL.
AND YOU CAN ALSO SAY,
"WHAT WOULD IT LOOK LIKE
IF I STARTED PULLING THE RED OUT OF THIS?"
OR--AND WE CAN BRING THE TINT BACK AS WELL
AND DO SIMILAR THINGS.
SO PUMP UP THE RED,
PUMP UP THE GREEN INSIDE OF THERE
AND--ACTUALLY, MOST OF THE THINGS HAVE MORE EFFECT
WHEN YOU HAVE A TINT OVER THEM.
SO THOSE AREN'T VERY INTUITIVE AS TO WHAT GOES ON THERE.
THE FIRST ONE WAS JUST PUTTING THE TINT
OVER THE TOP OF IT IS.
AND THEN YOU HAVE ADVANCED OPTIONS NOW.
WELL, HERE, YOU CAN GET IN,
AND YOU CAN REALLY JUST SELECT THE RED CHANNEL
AND CRANK IT UP OR DOWN AND SO ON,
AND IT'LL HAVE DIFFERENT EFFECTS.
AGAIN, IT'S NOT OVERLY INTUITIVE
AS TO WHAT'S HAPPENING IN THERE.
BUT IT DOES GIVE YOU SOME CONTROL
OVER THAT SYMBOL'S COLORS
IF THERE ARE MULTIPLE COLORS IN THERE.
IF THERE'S JUST A SINGLE COLOR IN THERE
AND YOU WANT TO CHANGE IT,
AS YOU CAN SEE, THAT'S SUPER EASY
JUST BY PUTTING 100% UNDER THE TINT OPTION.
AND THEN THE OTHER OPTION
THAT YOU HAVE THAT IS QUITE USEFUL IS ALPHA.
AND ALPHA IS ESSENTIALLY TRANSPARENCY OR OPACITY.
IF WE CRANK THIS ALL THE WAY DOWN,
IT BECOMES INVISIBLE, ALL THE WAY UP,
IT'S FULLY OPAQUE.
SO IF I GO SOMEWHERE IN THE MIDDLE,
NOW WE HAVE THIS OBJECT HERE.
AND DEPENDING ON WHICH ONE IS ON TOP,
WE CAN-- YEAH, THIS ONE IS ON TOP--
WE CAN SEE THROUGH IT TO THE ONE THAT'S BELOW IT.
ALL RIGHT, THAT'S--
WE DON'T HAVE ANY UNADULTERED ONES HERE,
SO LET ME JUST GRAB ONE THAT'S UNADULTERED.
NOW, A KEY CONCEPT TO KEEP IN MIND
IS THAT WE WILL LATER LEARN
HOW TO ANIMATE FROM ONE INSTANCE
OF A SYMBOL TO ANOTHER,
WHICH COULD JUST SIMPLY MEAN
THAT THIS THING MOVES FROM HERE OVER TO HERE,
BUT WE COULD ALSO GO FROM THIS TO THIS,
WHICH WOULD MEAN THAT IT WOULD MOVE AND IT WOULD GROW.
OR IT COULD SQUISH AS IT MOVES,
OR IT COULD CHANGE COLOR,
OR IT COULD CHANGE ALPHA,
WHICH IS--THAT'S HOW YOU GET YOUR FADE-INS AND FADE-OUTS.
SO YOU'VE SEEN A BUNCH OF DIFFERENT WAYS
THAT YOU CAN CHANGE THE INSTANCE OF THE SYMBOL.
AGAIN, KEEP IN MIND,
CHANGING THE INSTANCE OF THE SYMBOL
HAS NOTHING TO DO WITH THE SYMBOL ITSELF.
THAT SYMBOL ITSELF STILL EXISTS THE WAY WE DREW IT.
BUT WHAT IF, ALL OF A SUDDEN NOW,
WE SAID, "OOP, WE DO NEED TO MAKE A CHANGE TO THIS SYMBOL"?
WE WANT TO MOVE THIS BLUE THING DOWN
A LITTLE BIT OR WHATEVER.
WELL, THAT'S THE NEXT TOPIC
IS HOW TO CHANGE THE SYMBOL ITSELF.
THERE'S TWO WAYS TO ACTUALLY GO INTO SYMBOL EDIT MODE.
THE FIRST IS THROUGH THE LIBRARY,
THE SECOND IS THROUGH THE STAGE.
WE'LL TALK ABOUT THE LIBRARY METHOD FIRST.
EASIEST WAY IS JUST TO SELECT THAT SYMBOL RIGHT HERE
AND THEN JUST DOUBLE-CLICK ON ITS IMAGE HERE,
AND WE ARE NOW IN THIS ISOLATION MODE.
AND KEY THING NOW THAT YOU'RE LEARNING MORE ABOUT FLASH
IS TO START PAYING ATTENTION TO WHAT'S GOING ON UP HERE.
SO NORMALLY, WE'RE JUST IN SCENE ONE,
BUT WHEN WE CLICK ON THIS SYMBOL IN THE LIBRARY,
WE GO INTO THE EDIT MODE FOR THE SYMBOL.
SO IT'S SCENE ONE AND THEN ONE MORE THING.
IT MEANS WE'RE LIKE ONE LAYER DEEPER INTO SCENE ONE
AND WE'RE INSIDE OF THE SYMBOL CALLED SET THREE OF THREE.
SO IF I JUST SELECT THIS, MOVE IT DOWN A LITTLE BIT,
AND THEN I GO BACK TO THE MAIN TIMELINE,
SO CLICK ON SCENE ONE.
IT TAKES US BACK OUT TO THE MAIN MOVIE.
YOU CAN SEE THAT THAT PIECE HAS MOVED DOWN
ON EVERY SINGLE ONE OF THESE.
WE COULD DO SOMETHING MORE SIGNIFICANT.
LET'S DO IT TO THE RED SQUARE.
WE'LL CLICK INSIDE OF HERE.
WE'LL GRAB THE ERASER TOOL,
AND WE'LL ERASE A CHUNK OUT OF THAT.
GO BACK TO THE MAIN TIMELINE BY CLICKING ON SCENE ONE HERE,
AND YOU CAN SEE THAT'S TAKEN CHANGE
ON EVERY ONE OF THOSE INSTANCES.
AND IF WE GO BACK AND WE MAKE A CHANGE
TO THIS INSTANCE OF THE SYMBOL,
NO MATTER WHAT IT IS--COLOR,
THING--IT STILL IS GOING TO HAVE THAT CHANGE
THAT WE MADE APPLIED TO IT.
AND THE OTHER WAY TO EDIT THE SYMBOL
IS RIGHT FROM THE STAGE ITSELF,
AND WHICH METHOD YOU USE DEPENDS ON WHAT YOU'RE DOING.
IF IT'S PRETTY PRECISE WORK,
AND IT DOESN'T REALLY MATTER WHAT'S GOING ON INSIDE OF IT,
THEN I WOULD JUST RECOMMEND YOU USE THE METHOD
WHERE YOU GO IN THE LIBRARY, DOUBLE-CLICK ON IT.
BUT LET'S SAY I WANTED TO MAKE THIS A LITTLE BIT BIGGER,
AND I WAS CONCERNED AT HOW BIG IT WOULD GET IN RELATIONSHIP
TO THE ITEMS AROUND IT.
THEN INSTEAD OF GOING TO THE LIBRARY AND DOUBLE-CLICKING,
I JUST GO TO THE STAGE AND DOUBLE-CLICK.
NOW, WATCH THE DIFFERENCE BETWEEN THIS
AFTER I DOUBLE-CLICK.
STILL IN THAT SYMBOL EDIT MODE.
IN OTHER WORDS, SCENE ONE,
ONE DEPTH DEEPER INTO THIS SET OF THREE,
WHICH IS THIS SYMBOL RIGHT HERE.
THE ONLY DIFFERENCE IS NOW I SEE THE THINGS
THAT ARE AROUND IT.
SO IF I MAKE A CHANGE TO THE SYMBOL THIS WAY
AND--OR, AGAIN, NOT JUST CHANGING AN INSTANCE,
THIS TIME CHANGING THAT WHOLE ENTIRE SYMBOL.
SO I'M GONNA DRAG THIS WHOLE THING,
TAKE THIS TOOL RIGHT HERE,
THE FREE TRANSFORM TOOL, HOLDING DOWN THE SHIFT KEY,
GOING TO MAKE THAT A LITTLE BIT BIGGER
SO I CAN SEE HOW IT AFFECTS THE THINGS AROUND IT.
SO THAT'S PROBABLY A LITTLE BIT TOO BIG
FOR WHAT I WANTED TO DO. OKAY.
AND THAT'S ALL THERE IS TO IT.
WHEN YOU'RE DONE MAKING YOUR CHANGE HERE,
YOU JUST GO BACK TO SCENE ONE.
AND NOW, BECAUSE WE MADE A CHANGE TO THE SYMBOL,
IT AFFECTS EVERY SINGLE THING AROUND IT.
NOW, ONE MORE THING, JUST FOOD FOR FUTURE THOUGHT,
IF YOU WILL,
NOTICE WHEN I GO INTO THE EDIT MODE,
EITHER WAY THERE IS A DIFFERENT TIMELINE HERE.
IT'S NOT THE SAME TIMELINE AS WHEN WE GO BACK HERE.
SO IF I WOULD'VE NAMED THIS A DIFFERENT NAME HERE,
YOU WOULD NOT SEE THE SAME THING INSIDE OF THERE. �