Today I figured out how to use iWiSoft product to convert a .swf file to an .flv file so that I can edit video in Flash CS4 and then upload final version to YouTube.
Latest Entries »
Assignment: Create a simple animation using 3 or more layers and a stage with dimensions 600Wx100H. Draw and transform one (or more) shapes on each layer. Use Create Motion Tween and Keyframes to move the shapes around the stage. Adjust keyframe and/or use Easing to change the speed of the shapes. Your movie should be at least 5 seconds long (60 frames at 12 fps). Write 250-300 words about your creative process using Motion Tweening and/or layers.
I approached this exercise by striving to create a simple vocabulary of four shapes. My premise was that if I liked the vocabulary, whatever it wound up saying would probably be ok. So I did not want to worry about coming up with a story or a plot, I just wanted to put interesting visual characters onto the stage and then follow them around for 60 frames.
So I selected a line, a circle, a rectangle and a group of squiggly lines as my initial concepts. Then I spent a bit of time thinking about their respective personalities which manifested themselves primarily as different kinds of treatments to their strokes. I didn’t want to just use solid line strokes. So for I rendered the circle with a dotted line and this was immediately gratifying, but required a bit of experimentation to find the right sizing for the dots.
For the rectangle I found that the broken line stroke provided a kind of irregular, hand-drawn feel that provided a counter-balance to the mechanical regularity of the circle. And for the squiggly lines I literally wanted them to be hand drawn so I used the paint brush and a pressure sensitive Wacom stylus to draw them. Finally, I wanted to do something for my bright orange line that was waiting patiently on its layer for my attentions. So I decided to give it a bit of scroll work by attaching a small little circular primitive at the top right and lower left. This gave it sort of an ornate feel that again provided an interesting counter-point to both the hand drawn elements and the circle.
Now that I was happy with my characters, let’s see what they do:
The circle wanted to roll (go figure) so I began there. I remember that years ago kids would actually go outside and play (!) and one of the things they would do was to run along pushing a loop with a stick. My orange staff seemed perfect for the task, so I spent some time playing with the “Ease” feature to create the effect of my ornate orange staff sort of herding my wheel from left to right across the stage.
My squiggly lines were reminiscent of motion lines, or clouds of dust, or maybe even exhaust. Next thing I know they are trailing out behind my teal colored rectangle that has just taken off from right to left across the stage. By adding just a hint of overlap with the staff and wheel as they are exiting these elements in motion combine to give the effect of a sort of crazed suburban street scene.
I am pleased with the playfulness of this little study.
(447 words)n
Assignment: Write 250-300 words introducing yourself and why you are interested in motion graphics design.
My interest in motion graphics is as a natural visual extension of my experience of sound.
I really enjoyed Andrea Massalski’s Intro to Flash CS3 course last quarter and wanted to maintain the momentum by taking this course. My interest in Flash, like others here, goes back a bit but has not gained traction until recently. I bought the Macromedia Studio MX 2004 several years ago to use at work, but was spending more time time managing than developing so I did not learn much about Flash development at the time. Since then I have completed the GIS Analyst program at Foothill College and will be using Flash as a tool for online map delivery. There is a lot of activity in this area so I feel like I am “on track”. Last quarter I upgraded to CS3 which is a pleasure to use. Should I upgrade to CS4?
This quarter I am also taking Mr. Berry’s CIS19A C# programming course.
I have a varied background including a stint in radio when I did a lot of audio production and learned about liners and interstitals and the media business so this class sort of feels like coming home. I have also enjoyed making music all my life and I keep a midi keyboard on my desk right over my computer keyboard so I look forward to adding music and sound to the exercises in this course whenever possible. Audacity is a great product and I am glad to see it being included as a recommended tool for a college course. If you have Garageband ’08 (or newer) it is also really fun to use. I see Sony is now offering a library of loops produced by leading musicians. I can hardly wait to check out the Mick Fleetwood percussion loops.
I have a website at AMERICAN-FM.org you are welcome to explore if you enjoy podcasts and independent, progressive media. I use a variety of software to pull it all together, but the source podcasts are all available via a Flash player widget I hope to customize this year.
Site: http://www.beyondmg.com
Download time: < 5 secs
Connection type: home network wireless network, Airport Express 300KB/sec DSL
Browser: Firefox 3 on OS X Tiger 10.4.11
Flash vs. HTML option? none
Current Flash detection? no
BeyondMG.com is a site I discovered via ShaneMielke.com. The pre-loader is a custom status bar. I really like the aquatic-themed splash animation; beautiful and evocative setup for the logo-based navigation. The splash sequence is nicely enhanced by a series of short gurgled, ethereal sonic effects. This seems to be a Flash-based site, with all elements controlled using Flash actions that either call or are connected to Javascript. The primary feature is a series of blue-gradient nodes that are imbued with rollover effects that combine to make the feature “ripple” when the visitor interacts with them. A simple gray-scaled space defined by a 2/3 horizon line provides the context for the primary feature. I like the logo cast on the floor of the space. While elegant and effective, I do find the multi-nodal logo element to be too prominent. I prefer to be greeted by some text and photos as well as graphics and chrome. The fonts are all well-sized and easy to read. The main site features a simple midi purr on each rollover. Navigation is redundant with text based rollovers down the left side of the page that trigger corresponding nodes in the primary feature, and vice versa. The content of BeyondMG.com is mainly text presented either in a semi-opaque content layer “window” or in PDF links. I was disappointed to find BeyondMG.com is basically a postcard site for a group of well-connected corporate ad guys with little to invite me to participate in their site or to which I would want to return. So it fails the delicious test (meaning that I did not add it to my del.icio.us account). I don’t hold this against the designer who has created something lovely for something quite prosaic. As with all sites, I would welcome the presence of location/geospatial information as well.
Site: http://10socks.com
Download time: < 2 secs
Connection type: home network wireless network, Airport Express 300KB/sec DSL
Flash vs. HTML option? none
Flash detection? no
The splash sequence for 10socks.com is so rapid that no pre-load seems necessary. I thought this was a very novel and fun little e-commerce site with a certain European sensibility. In particular, I like that everything is presented in a 405×405 pixel box. Product appropriate content sizing? The short splash sequence, content container and all interactions appear to be Flash. The color palette is a two-color red and white logo, white page background, simple black border on the content box with photos and text overlays. All photos on 10socks.com are of feet. Navigation icons are a grid of nine 18×18 pixel images in upper right corner, a little small but usable. Photos and content area are approximately 405×280 pixels. The site scales nicely, including text, but photos (as expected) begin to pixelate after a few text size increases. Fonts are sans-serif and easy to read. A jazzy soundtrack that seems appropriate — but not distracting — accompanies your visit. 10Socks.com has nine content features accessed by clicking on the nav grid in the upper right hand corner. Icons have basic rollover effect, turning gray on mouseOver and red when onClick. I didn’t recognize the panning series of squares at center bottom as indicating a music on/off controller. This is perhaps a cultural difference, but a more universal volume/mute widget would be nice. The available sock colors: gray, blue, black, is a bit underwhelming. (I was also disappointed that you can’t have roman numeral numbered socks which would be even more fun. Perhaps hexadecimal color coding as well?) But I digress. As with all sites, I would welcome the presence of location/geospatial information as well. 10socks.com passes the del.icio.us test, tagged with: socks, gifts, novelty.
Site: http://www.ego7.com/
Download time: < 5 secs
Connection type: home network wireless network, Airport Express 300KB/sec DSL
Flash vs. HTML option? none
Flash detection? Yes, via Javascript.
After a zippy pre-loader performs and browser check and font load, EGO7.com pushes a lot of information at you right up front and uses animation to introduce a modern, modular design. There is a small problem with the footer display that you might notice, but it corrects itself once the site is loaded. I like the layout, but was disappointed the link to the LIS content does not seem to yield anything. EGO7.com suffers from an overload of unnecessary acronyms and a writing style that does more to obscure than display their web development services. (The writing does unfortunately display an inability to correctly form the possessive.) EGO7.com is a Flash site that includes animated top, side and bottom loading of content modules; flash animated sliding Q/A “featurette” and menu-based navigation. Once loaded, additional animations are plentiful, zippy and generally serve as a mechanism for content exchange. This gets a bit tiresome. The color palette is orange, gray and white with orange-tinted clip art that could stand some freshening. Sizing and placement of graphics are fine, but the imagery is not a strong point. The JiffyLube inspired font is distracting. An audio icon is in the nav bar, top left, but I heard no sound to control. EGO7.com navigation is problematic. The menus have many levels, with only the last level being active. Rollover colors are too subtle. Arrows placed above text content seem only to reload the current content rather than taking you to more or different content. This combines with the navigation issues to frustrate the visitor in short order. I was surprised at how dated the “rich internet” language seems. Expected but not present: video. Del.icio.us test: failed.
I love playing with words and stumbled across “ideaspeak” while developing a stamp icon for an iPod video sample I was putting together a few years ago. Three words in one: idea speak, ideas peak and idea-speak. It captures the role of technology for most of us, e.g. helping our ideas to peak and speak rather than being an end in itself.
