Here are the files we worked on in class: htmlAudio_inClass.zip
Today we will start with a bit more on Audacity and look at Exporting files.
Adding the LAME MP3 library. To export MP3 files you will ned to
- Download the .zip file with the library. Visit this page. Look for the download link in step 1 under the title Alternative zip download for Lame 3.98.2
- Right-Click and save to Documents. You can ignore the other steps on that page and follow these.
- Unzip the file
- When you export in Audacity just before the end it will ask you where libmp3lame.dylib is located. Point it to the file you unzipped in the previous steps.
Then we will move to adding an HTML5 Audio player to your page.
We will use these to demo adding audio to your page: htmlAudio.zip
Documentation on the audio and source elements, the two new ones we’ll need to play HTML5 Audio
Browser support for <audio> element
Article that covers why we’re in the state we are in with audio.
Main tutorial article
Links for Free IconsIcons
example of link requirement: http://medialoot.com/item/listicons-arrows-bullets-webfont/
Today we start on Digital Audio.
We will look at this presentation:
and then look at Audacity with this presentation:
You will need audio files that are located on Blackboard. Go there to download them in the Course Materials SEction
Files from Class. Here are the files we worked on in class: MMP100-10.31.13.zip
Today we will learn how to put a Flash movie into an HTML page.
You will need the following files today:
And we will follow this tutorial: http://profstein.clarify-it.com/d/pnwrw9
The tutorial uses something called swfobject that helps us embed Flash. You can find out more about it here: https://code.google.com/p/swfobject/
And view documentation here: https://code.google.com/p/swfobject/wiki/documentation
Today we are going to learn the basics of how to draw and create an animation using Flash.
Here are the topics we will cover:
- Introduction to Flash and the Flash Interface
- Creating Symbols
- Introduction to Animation
- Creating a Motion Tween in Flash
- First the Long Way, with explanations
- Then the shortcut, once you know what you’re doing
- Then Motion Presets, once you’ve got the basics down
To support what we are learning we will use the information and tutorials in these links:
Introduction to Flash
We will go over:
* The Flash Interface http://edutechwiki.unige.ch/en/Flash_CS4_desktop_tutorial
The above tutorials are for Flash CS4 but still applicable. We will not follow theme exactly.
Introduction to Animation
Here we will look at how animation works in general (and in movies and cartoons). Then we will move on to look at animation in Flash
Creating a Motion Tween in Flash
Prof Stein’s Tutorial (the long way)
After that we will see some shortcuts and other things you can do.
I changed the due date to Thursday, October 24.
You will turn it in by uploading it to the mmp.bmcc.cuny.edu server and putting the URL in the comments for the midterm assignment on Blackboard. (it will be live shortly).
REMEMBER THAT THE MIDTERM CANNOT BE TURNED IN MULTIPLE TIMES. It is not like assignments where you can resubmit again and again. If you do have a problem or make a mistake when turning it in, let me know and I can clear your submission and let you submit again.
Sometimes it can be tough to add in your background images. I make a short tutorial on how to do it. You can see it here: http://profstein.clarify-it.com/d/dzc3vf
Some quick pointers
The only trick to remember here is that in the url() you have to add the path from the CSS file to the image. To move up out of the css folder you use ../ Here is how the example below breaks down the url of ../images/dog-square.jpg
- ../ this says to move out of the css folder
- images/ this says to look in the images folder
- dog-square.jpg this says to use the dog-square.jpg file
If you use this folder structure then all of your background images will start with ../images/
Here is the final gallery folder after we created the big and small images and the html pages for the images: gallery.zip
Today we are going to look at ways to use Photoshop to process a batch of images at once. We will use that to make thumbnails and larger images out of a set of 5 images. Then we will modify the supplied html files to make a quick gallery.
In the zip file below are the original images and starter index.html file.
Creating an Action to Crop Images to a Specific Size
Open an Image
It is important that you do this BEFORE you start your Action. Otherwise it will be part of the Action.
It will look something like this
Optionally you can create a set
Give the Set a Name
This name is not great. It’s better to make sets based on the kind of actions you want to put in them. For what we’re doing you might name it Crop and Resize or somethign similar.
Click the Create New Action Icon
Set the Action Information
- Give the Action a Name. It should be descriptive. We’re going to make a 150×150 pixel square, hence the name
- Choose which set you want to store the action in
- Click the Record Button to start recording
- Optionally you can assign a keyboard shortcut to the action. Only use this if you know you will use it alot and be careful not to conflict with other shortcuts.
The Action should be recording
You will see a red dot. EVERYTHING you do from now until you click to stop the action will be recorded.
Choose the Automate > Fit Image
This makes sure our image fits within a given set of dimensions.
Choose Your Dimensions
We are going to choose something a bit larger than our target of 150×150 so that our result will be cropped slightly. That can help to make sure details in the image don’t get too small looking when we make the thumbnail.
Click OK when you’re done
Your image should be resized
Check the Action Recording is working
What you did should have been recorded in the action.
Select Image > Canvas Size
Set your Dimensions
In this case we are choosing 150×150
Adobe Photoshop will give you a warning that you are clipping (cropping) the image
You now have a square image
Choose Save As (not Save for Web)
Save As will make the process easier later
Save it as a JPEG file
You can choose other types if yo need but usually it will be a jpeg
For small images quality of 4-6 is usually ok, you can try different ones out.
This is important. Make sure you do it now.
Make sure you have a destination folder for your images.
Set the Batch Options
- Make sure to choose your set
- Choose your action
- Choose the folder where the originals are
- Choose the folder you want the new images to go
- Set the document name. More on that later
- Click OK
You can add differnt components to the name.
- What the filename will look like shows up here
- Make sure to choose extension from the dropdown as the last thing you choose
Today we are going to quickly talk about cameras and images and then jump into Photoshop and learn a bit more about how it works.
Before that though I want to point out that there is now page navigation at the top of the page which has info about classes, the midterm and resources (which will continue to grow).
Remember that the midterm is due soon. I’m changing the due date to Thursday
Cameras and Images
Other links from class
I’m going to show you how to use some of the basics in class. But there is always more. You could do a few courses on Photoshop and photo manipulation. To see video tutorials on how to do what we cover today and more you can visit this offical Adobe video tutorial page:
We will use these files:
These sites have some other tutorials. There are literally thousands more on the web. Want to do something? You can probably find a tutorial on it.
when you see two things with a slash A/B, A is the shortcut for Windows (WIN) and B is it for Mac OSX (MAC)
- Rulers and Guides
- Marquee Tool:
- Using Shift, Alt/Option, Ctrl/Cmd to change selection
- Selection > Grow
- Filling a selection Alt+Backspace (WIN) / Option+delete (MAC)
- Zooming (Scrubby Zoom)
- Create New
- Blend Modes
- Move Tool
- Moving items
- Selecting Layers
- Transform options
- Color Dropper
- Text tools
Using Guides, Selection and Fill to do Mockup of web site
We will look at how you can plan out your site using blocks with text inside of them.
Some people extend this and go so far as to mock-up the entire design in detail with full text, images and everything. This practice is becoming less common with Responsive Web Design because it is just too difficult to keep up.
Fun with Content Aware filling
If we have time.
Today we will look at the midterm requirements and then do some CSS Positioning.
There is a new Midterm Requirements page.
I created a CSS Floating page.
We will use these files to explore basic positioning: 10.3.13_example.zip
It is set up to do positioning, but we will have to add in the CSS to make it work.
Today we are going to finish up with the CSS we didn’t cover on Thursday of last week.
I’m going to recommend that instead of continuing to use my example files that you work with your assignment files today.
Last class we went through much of what you need to know to complete assignment 3 The one thing that we haven’t covered yet is how to style the navigation. We will cover that today and then give you some time to work on your projects
I’m creating a separate post on Navigation so you can come back to it easier in the future. All of the navs you do in this class, and on most web sites, will basically use this model.
Defining Sections of the page
Now you have almost everything you need to present a complete web page. All you really have left are the header and footer elements to learn. I’ve created a post on what the basic sections of the page are
Basic Page Sections
Reading and Videos
Watch the second CSS Video: http://www.youtube.com/watch?v=TCj9S-6Avs8
This one covers the basic styles for text elements on the page.
Read these Chapters to learn more about styling elements with CSS.
- 11: CSS color
- 12: CSS Text styling
- 13: CSS Box styling