Click here for Animated html version. Created with Edge Animate.
Project 3.
Create a new animation that utilizes audio in your final output.
Specs:
Create a 15-30 second animation that includes an audio track.
Make sure your audio either loops or stops at the end of the audio track
Subject options:
- Intro page for a local band (800 x 400)
- animation for a side bar advertisement for a local restaurant or bar (240 x 400)
- intro page for a meet up/social network for mobile (310 x 352)
- intro page for a local dance studio (800 x 400)
- kinetic type project (550 x 400) (this may be challenging if not using CC14)
Must include:
- dynamic text
- must have minimum 1 shape that transforms
- easing
- click-able links with clear call to action
- transformations that are dynamic with the music track
- audio clip that is either royalty free or you have permission to use track
- both audio and animation plays for 15 - 30 seconds. Nor more or less.
Create a new animation that utilizes audio in your final output.
Specs:
Create a 15-30 second animation that includes an audio track.
Make sure your audio either loops or stops at the end of the audio track
Subject options:
- Intro page for a local band (800 x 400)
- animation for a side bar advertisement for a local restaurant or bar (240 x 400)
- intro page for a meet up/social network for mobile (310 x 352)
- intro page for a local dance studio (800 x 400)
- kinetic type project (550 x 400) (this may be challenging if not using CC14)
Must include:
- dynamic text
- must have minimum 1 shape that transforms
- easing
- click-able links with clear call to action
- transformations that are dynamic with the music track
- audio clip that is either royalty free or you have permission to use track
- both audio and animation plays for 15 - 30 seconds. Nor more or less.
Click here for Animated html version. Created with Edge Animate.
Creating an interactive banner with dynamic and interactive graphics. Review the campaigns and layouts you have done in the last several quarters. Choose on campaign that you think would
benefit with the inclusion in your portfolio with a dynamic web banner. size: Choose a size that best fits your campaign concept: Pop under (720x300), Half page (300x600), Wide skyscraper (160x600), Medium rectangle (300x250) or Vertical rectangle (240x400)
minimum 2 objects/images must move - minimum 2 text objects must move all in a dynamic fashion - consider more elements for better grade.
1 element must have a dynamic filter change (which may or may not be visible on all browsers)
Click here for animted HTML version. Created with Edge Animate.
Click here for animated HTML version. Created with Edge Animate.
Click Here for animated HTML version. Created with Edge Animate
Creating an interactive banner with dynamic and interactive graphics. Review the campaigns and layouts you have done in the last several quarters. Choose on campaign that you think would
benefit with the inclusion in your portfolio with a dynamic web banner. size: Choose a size that best fits your campaign concept: Pop under (720x300), Half page (300x600), Wide skyscraper (160x600), Medium rectangle (300x250) or Vertical rectangle (240x400)
minimum 2 objects/images must move - minimum 2 text objects must move all in a dynamic fashion - consider more elements for better grade.
1 element must have a dynamic filter change (which may or may not be visible on all browsers)
Click Here for animated HTML version. Created with Edge Animate.
Final Project.
Develop a full multipage parallaxing/lightbox project that highlights your work. (remember you need to set up the "composition" folders in your final output. Review the Lightbox walkthrough in the video demo section on the sidebar.
Required in your final project:
- main page may parallaxes the elements - this is OPTIONAL. Minimum 6-8 elements must transition.
- lightboxes that highlights minimum 4 of your previous animation projects
- lightboxes that highlights minimum 4 flat/print pieces (may do more!)
- lightboxes that highlights a video you may have on YouTube (optional)
- audio on the main page (how will the audio code effect the parallax scrolling code? Will it? (it shouldn't as the code put in the html page is not javascript and is not connected to the time line - but lets find out!)
- Minimum one new animation someplace on the page that has several shape/color/positioning, and more transitions that move "forward and back" with the parallaxing.
- Minimum 3 active links that go someplace - either external links of your work, a social networking page, blogs or other informational sites that may be relevant to your work.
- Design elements and text that describes, highlights, clarifies that this is a page about YOU and your WORK, ie. design whole page!
- With the Lightbox javascript function, and putting your whole project together, you'll need to connect all of your folders together and all of your published projects should be organized in one place on your flash drive to make this happen. Will discuss this in class.
Review what you have created so far. This will be a page specifically about you and your work. You may have to write some copy - you can as this right in Edge Animate as this is an html page!
Develop a full multipage parallaxing/lightbox project that highlights your work. (remember you need to set up the "composition" folders in your final output. Review the Lightbox walkthrough in the video demo section on the sidebar.
Required in your final project:
- main page may parallaxes the elements - this is OPTIONAL. Minimum 6-8 elements must transition.
- lightboxes that highlights minimum 4 of your previous animation projects
- lightboxes that highlights minimum 4 flat/print pieces (may do more!)
- lightboxes that highlights a video you may have on YouTube (optional)
- audio on the main page (how will the audio code effect the parallax scrolling code? Will it? (it shouldn't as the code put in the html page is not javascript and is not connected to the time line - but lets find out!)
- Minimum one new animation someplace on the page that has several shape/color/positioning, and more transitions that move "forward and back" with the parallaxing.
- Minimum 3 active links that go someplace - either external links of your work, a social networking page, blogs or other informational sites that may be relevant to your work.
- Design elements and text that describes, highlights, clarifies that this is a page about YOU and your WORK, ie. design whole page!
- With the Lightbox javascript function, and putting your whole project together, you'll need to connect all of your folders together and all of your published projects should be organized in one place on your flash drive to make this happen. Will discuss this in class.
Review what you have created so far. This will be a page specifically about you and your work. You may have to write some copy - you can as this right in Edge Animate as this is an html page!
Click HERE for Animated Parallax HTML version. Created with Edge Animate.
Parallax Scrolling made easy.
Pull together a few large and a few small random images. Start with a stage of 1280 x 3200px. Load images and graphics into library. It is recommended you turn your elements into symbols. Follow along demo.
Create a simple page animation using the dimensions: 1280px x 3200px (can go longer if you choose). Create a minimum 4 actions as the page scrolls up and down. Fill the entire compositions with background, photos, etc. (make sure your photos are not high resolutions. Choose two elements that either utilize symbols and playback like in the demo or the lighbox code feature. Your choice. (you may do both if you're feeling brave!) Manipulate the transitions, timing, positioning, etc to work with the scroll. If you need to make the stage dimensions longer, you may. This animation does not have to be involved, nor complicated - but it does have to move cleanly.
Pull together a few large and a few small random images. Start with a stage of 1280 x 3200px. Load images and graphics into library. It is recommended you turn your elements into symbols. Follow along demo.
Create a simple page animation using the dimensions: 1280px x 3200px (can go longer if you choose). Create a minimum 4 actions as the page scrolls up and down. Fill the entire compositions with background, photos, etc. (make sure your photos are not high resolutions. Choose two elements that either utilize symbols and playback like in the demo or the lighbox code feature. Your choice. (you may do both if you're feeling brave!) Manipulate the transitions, timing, positioning, etc to work with the scroll. If you need to make the stage dimensions longer, you may. This animation does not have to be involved, nor complicated - but it does have to move cleanly.
