Adobe Animate

Here is the post about getting up to speed with Adobe Animate. Watch the essential training videos on or there are plenty of beginner videos on Youtube. To recap what I was talking about this morning… Animate used to be called Flash, in fact, it still saves the animations using the native file format of .fla and still does the .swf files to upload/use/embed in your websites.

Animate is a vector-based, frame-based animation/motion software. This is different than the raster-based, time-based software like Adobe AfterEffects. Animate produces nicely sized web-friendly motion graphics and animations as long as it isn’t loaded down with a lot of raster images/video. It is also capable of integrating sound (which I haven’t talked about yet).  You already have vector skills in creating objects/graphics from the assignments in Adobe Illustrator, so those skills are transferable to Animate.

So, your assignment after you get up to speed watching the training videos, learning how to make a key frames and how to tween, is to animate 30 seconds (using an audio clip – music or narration – this means you also need to watch some training video of how to integrate audio files into an animation) of motion using two contrasting words/concept… ie: Black/White, Up/Down, In/Out, Hot/Cold, etc… pick your poison. The key to this assignment is to be creative using fundamental features of the software. Animate will be capable of doing much more than you have the knowledge to do, but the trick for you is to do something very basic in a creative manner.

I’m thinking of a tentative deadline for your animation being completed by Friday, April 14th. I’ll check with you on Weds. to see if you have any questions. Get started.



Coding: Chapters 6,7 and 8

This coming week (3/27 to 3/31), work through Chapters 6 (adding links), 7 (adding images) and 8 (table markup). You can get the chapter demo files here. These chapters are pretty straight-forward and if the demos you are doing are getting boring, you can begin the project of converting your print design newsletter you just turned to me, into an online webpage/multiple -page website newsletter. These chapters should give you the fundamental skills to accomplish this conversion. I also recommend jumping over to Chapter 21 (Web Graphics Basics) and absorb the information in this chapter, since you will be converting your print design graphics you did for the print newsletter into web design graphic assets.

Be watching the training vidoes on, or YouTube for the fundamentals of Adobe Animate. Focus on key frames and tweening in addition to the standard things you can do like scale changes, shape changes, color changes, etc… I’ll be blogging an Animate assignment soon.

Have fun.

html coding

Hi guys, sorry I didn’t get this posted yesterday. This week… be reading and coding chapter 4 (Creating a simple page) and chapter 5 (Marking up text). Feel free to work ahead of my weekly chapter schedule if you have done and know this stuff already or if it is easy and making sense. Again, take notes on what you have read and use them as the means to apply the coding to a webpage. You will remember all this information if you write it down or key it in somewhere. Remember, use a simple text editor to do this, not an html editor yet. There are no shortcuts with a simple text editor and you will have to actually learn the html tags doing it this way.

I will be assigning some more in InDesign, Illustrator and Photoshop in the next couple of class periods.


Monday assignment

InDesign: set copy to the specs given on a single Letter-sized document. Bring file to class on Weds.

Illustrator: rebuild as a vector-graphic one of the three provided jpg graphics using shapes, fills and strokes. Match the raster jpg as closely as you can.

Photoshop: find a photograph to resize to 300 ppi and using a range of selection techniques, select portions of the image and alter the image in some manner.

Remember the consistent elements between the three applications. Select tool, Direct Select tool, Type tool, Primative shapes tool(s), Layers and the color picker tools.

We will look at this stuff on Weds.

Stuff to make your eyes glaze over.

Yes, I threw a lot of information at you today. But it isn’t that hard to remember. I’m going to do several/multiple posts to cover what I talked about.

Software: What we are starting with.

  • InDesign: Asset Management software – where the designs and assets from Photoshop and Illustrator are assembled. Essentially the digital drafting table where production art is assembled.
  • Photoshop: Image Editor – photography processing, illustration and graphics creation – Raster-based (Pixels).
  • Illustrator: Graphics Creation – logos, illustrations and graphics – Vector based (math-based).

Print-based information

Offset Lithography – big commercial printing companies. Big offset lithography presses can either print ink or not print ink. They do not print tonal ranges of the ink. 100% ink or 0% ink on paper. Two types of ink used in Offset Lithography – Process Inks = Cyan, Magenta, Yellow and Black (CMYK) and Spot Color Inks (Pantone Matching System – PMS) Spot color inks are physically mixed inks while Process (CMYK) inks are a visually mixed illusion of different colors and tonal ranges. Process inks are transparent and Spot color inks are typically opaque. Both process inks and spot color inks are subtractive color modes. Subtract from 100% to 0% of the four colors to get to white. To create the illusion of tonal range and full-color a mechanical conversion must take place in continuous-tone images (Photography and artwork). The images are converted into tiny little dots – a series of dots. These little dots are called Benday dots which allows for presses to reproduce images. When a black and white photograph is converted to a series of little dots it is called a Halftone. When a color image is converted and separated into four sets of colors (CMYK) of little dots they are called Separations. Still with me? I am trying to keep this a simple as possible. Don’t let eyes glaze. Pay attention here.

Web-based publishing  – Color modes used on the web are RGB (Red, Green Blue) and is an additive color process – Add from 0 to 255 (all three colors) to get to white.

…more to come. Stay tuned.