Forum Moderators: open
I had created an animated .gif for my website...in the form of a sound wave, which scrolls across the page...representing an audio track playing back in a digital audio workstation (the graphic is an actual cropped audio track from a screen shot of a SONAR project.)
Trouble is...the number of frames required to make the scrolling seem smooth (& believe me...it's still a long way from smooth) creates a huge file size.
Check it out:
<SNIP>
So now...Everybody is telling me to do this with Flash.
So I got Flash.
Now I import my long & narrow sound wave graphic into Flash...& have no idea where to start. I took the animation lesson with the bouncing, compressed tire...but it's not really relevant to what I want to do; & I can't seem to find a direct method in the help files anywhere.
In Adobe ImageReady (where I created the animated .gif)...I positioned the graphic in the window all the way to the left end & created a frame...all the way to the right end & created a frame; & tweened between those two points.
How is this accomplished in Flash?
How can I select each end of a long graphic, as frames; & tween between those two points...so as to create a smooth scrolling effect? That's all I want to do.
Thanks very much,
mark4man
[edited by: BlobFisk at 9:46 am (utc) on June 17, 2005]
[edit reason] No URLs please! See TOS [webmasterworld.com] [/edit]
Now...how is it accomplished?
Thanks,
mark4man
1) create the graphic you wish to scroll place it at _x=0
2) duplicate it (more than once if need be) until it extends just over the width of the stage
3)select all, convert to graphic symbol
4)create a keyframe at a later point in the timeline*
5)select the instance in the last keyframe and align the first clip duplicated (no 2 if counting left to right)ie the instance will be at_x=-40 for example)
6)apply a motion tween
7)insert a keyframe just before the last one on the timeline
8)remove the last keyframe
9) simmer slowly for a few minutes then test..voila a continuous scrolling waveform.
*the higher number the second keyframe the slower the scroll, test till you get something you like.
Couldn't really follow your directions (I've just today gotten started in the program)...so I followed a tutorial (by some flash guru named Kirupa) for a simple continuous scrolling image.
I imported my graphic onto the stage; & inserted a keyframe on Frame 500 of the timeline. With the animation set to Frame 500, I selected my image, pressed SHIFT + Left arrow until the very right corner of the image matched the right side of the stage:
Then I highlighted all frames between 1 & 500...& while highlighted, I created a 'Motion Tween'.
I saved it as a .fla; & popped in the appropriate layer in Dreamweaver; & when previewing...my browser (IE) would never open. So, I took & chance & uploaded the page to my site; & when I log on...there is always one item remaining (to download); & sure enough...it's the flash movie.
I can't take it, man...I really can't.
I went from a scrolling javascript which wouldn't implement properly in IE...to an animated .gif that was way too huge & much too erratic...to this.
The only thing I can think of is...I have the trial version of Flash (for 30 days.) Would that be it?
I can't take it.
What should I do now? Is your method more concise? Should the file have been saved as an .swf?
I'm lost.
Thanks,
mark4man
BTW...sorry I got cross with you, man...I'm just really frustrated over this; & it should be simple, ya' know?
I think I have it.
Found out how to publish as an .swf; & that worked.
It took me awhile to get used to the dimensions of the stage vs. the dimensions of my graphic image, tho. My image was 1175 pixels wide X 58 pixels in height; & at first, I had to create the stage as 100 pixels in height (so as to see where my stage limitations were (side to side) when I scrolled the image all the way to the right for frame 500.) Then, once I had that...I reduced the height of the stage (which is ultimately the height of the finished file) to 58px (otherwise, I had too much file height for the allotted layer height on the page in Dreamweaver.)
After I got that down...the rest was a breeze.
Thanks very much for your help.
Check it out; & tell me what you think:
<SNIP>
No matter where I positioned the graphic on the stage, tho (I overhung just a tad on both the right & the left)...it's still not a seamless transition in the scrolling image. There's one little flicker at the waveform seam everytime it rolls around. I guess I'm stuck with that...which is OK.
Thanks again,
mark4man
[edited by: BlobFisk at 9:45 am (utc) on June 17, 2005]
[edit reason] No URLs please! See TOS [webmasterworld.com] [/edit]
take wafeform image which is seamless and not to wide (say 100 pixels or less) then duplicate it across the stage utill its just overhanging on the right. Probably that bit was not clear, glad you sorted it though and it looks fine.
