THA GOAL: TO TRANSLATE WACK ASS OUT OF DATE FLASH ANIMATIONS TO HTML SO THAT THEY
CAN PLAY ON MODERN DEVICES AND NOT BE DESTROYED FOREVER
THA TOOL: ADOBE ANIMATE (bullshucks i know V_V)
THA SUBJECT: MEET THE GODHEAD
SO THAT WAS A SWF. SAY GOODBYE TO THOSE.
CONVERSION
of your flash Adobe Animate file.
whether you animated your shit in an older version of flash or
you animated your shit in the newest version of flash, you're going to have
to transfer your timeline from a REGULAR OLD FLASH FILE to a new state of the
art HTML5 CANVAS FLASH FILE.
note: i wish that you could animate directly onto a flash file configured for html5,
but you cant, because, html5 flash files do not allow stream audio.
stream audio in flash allows you to scrub through audio on your timeline
and animate to it accurately. html5 flash files only allow event audio,
audio triggered by some event (in this case, javascript).
!!!!!!!!!!!!!!!!!!!!!!UPDATE!!!!!!!!!!!!!!!!!!!!!!
as of whenever the flip adobe animate now allows STREAM AUDIO on HTML5 PROJECTS. Meaning: it is possible to automatically sync your audio with your html5 animation, as well as animate along to a track. Meaning: this tutorial is now worthless and dumb. BUT i still recommend you read the following pages in this series, because we're going to cover more than just audio sync.
/!!!!!!!!!!!!!!!!!!!!!!UPDATE!!!!!!!!!!!!!!!!!!!!!!
the easiest way to convert your animation to html5 is the pictured above. another way is to copy your entire timeline (minus the music layer) to a new flash file instantiated from the html5 template. its a pretty painstaking way to do it but i just figured out if your animation is stored in a folder (as mine is here) you can right click copy layer and paste the layer to your new timeline.
this is what my html5 file's timeline looks like. Take Note of the music
layer now being a guide layer (effectively making it nonexistent) and the added
script folder. this folders where i store my playback scripts (play and repeat buttons),
as well as today's relevant scripts: the one that plays the music
and the one that syncs the visuals to the music.
start the music script on the same frame that your song originally started (matching this
is the the only reason i have the original audio layer in this file). the music
script pretty much does the same exact thing an audio event does but
with some added shtuff we'll look at in a second. it's important to put the sync
script at least 1 frame after the music script. if both scripts run at once
sometimes the sync script is like .........wheres the music.
BTW if you dont know how to add 'actions' (code) to a frame or you aren't seeing
the Actions tab at all, open it up from Windows > Actions.
once you have access to that window, select your keyframe
and for now just write a comment
//like this. get your sync and music layers ready to rumba!!
the actions tab has this quite useful map of all the scripts in your
timeline. now that youve left some innocuous and NOT RUDE comments
on your sync and music layers they should appear up here.
MUSIC
heres the code that goes on your music layer
line 1: set SONG to the linkage label of your song.
"WTF IS A LINKAGE LABEL?!" asks nobody. A LINKAGE LABEL LINKS AN ITEM IN
YOUR LIBRARY TO ACTIONSCRIPT OR IN THIS CASE JAVASCRIPT(????????) HERE LET ME
SHOW YA HOWWWWWWWWWW
theres two versions of the song, did you Know? i knew which
one to link judging by the "use count", which counts how many times this
object has appeared on the timeline. double click the empty space under
Linkage and label your song whatever tf u want. preferably something
not 5+ words long. now return to line 1 and set yo shiat
SONG = "[YOURSONGHERE]"
lines 3-9: some notes i left for myself detailing (ok theres not really any DETAIL)
how i actually got the sound to play. i think it is worth
investigating this
createjs sound class to gain greater control over audio in your flash html5
projects.
lines 10-13: instantiating and playing the song
line 15: THISFRAME refers to the frame this script is on, which
in this case is 15 (as indicated like 1000 pixels above.)
lines 17-19: i store some information about the song in what are...kind of
global variables? this refers to... some kind
of master object that contains everything including the stage look the last
time i used actionscript was 2015 cut me some slack FDHSKGSHDAKGDSAH
this.property can be accessed anywhere in the scene, which will be
useful for allowing scripts on different layers to communicate. as long as youre
IN the scene, that is...im pretty sure that if you go inside of an object like
a movie clip or a graphic or something
that this now refers to 1_nut. for our purposes
we will only be applying scripts to Scene 1. well look
you dont have to worry about any of this today is what im saying HFDSKAJFHDSKJ
lines 21-22: HERES THE EVENT BINDING
THAT ADOBE SCREWED UP.
wats happening here is
we are creating an event, which is the running of the function
onSong(), and binding said event to the stage
to tell you the truth i dont even know what "binding" an event means so let me look that up
Event binding refers to telling the browser that a particular function should be called whenever some 'event' occurs. Events mostly relate to user input, such as clicks.
thank you Xion of sackoverflow. wait you know what i knew that fdsajkHFKJDSA THE THING I DONT KNOW IS WHY YOU NEED TO BOTH BIND THE EVENT AND ADD AN EVENT LISTENER. ok i asked cassie she says that
its because in JS, calling a method is different from calling a function, when you store a method in a variable, it forgets what it's bound to
[...]
so yeah,
this.onSong is a function that you can just pass, but unfortunately it's a function which has forgotten what the instance it's attached to is
thats right...what is a method without its instance but a wayward soul... this would also explain why the unbinding method adobe shows doesnt work WAIT THIS HAS BECOME SOME TANGENTIAL CODING LESSON GET OUT OF HERE WITH THIS
UH ANYWAYS...EVERY TIME THE STAGE
"TICKS" (CHANGES FRAMES), THE FUNCTION RUNS. GOODNESS WAS THT SO HARD.
lines 24-44: onSong(e)
stores the song position in the stage. it also
unbinds the event when the time is right.
lines 46-49: songPos(start, pos)
returns the current position of the song
lines 51-60: msToFrame(ms)
converts milliseconds to frames. we need this since AS variables like
this.currentFrame are measured in frames while the Song
class's's's's's timekeeping variables are measured in ms.
SO THAT WAS AN EXTRANEOUS AMOUNT OF TALKING. WHY DON'T WE TRY EXPORTING OUR FLASH
AND SEEING WHERE WE'RE AT? OPEN YOUR FLASH AND PRESS CTRL + ENTER!
oh.
what SHOULD happen is that your music PLAYS. if it appears in sync with your animation, dont worry.
it wont be for long. :)
also if you open the browser console right click > Inspect you should see the
songs position updating in REAL TIME!!!!!!!!!!!!!!!!!! *oingo boingo voice* we can watch flashes once again
if we try to believe
tip: if in flash you File > Publish and try to view your project from
the html file saved in your local filesystem it wont work because. i dont know.
it wont work because i dont know. no it probably needs a webserver to work FKSDADJKSA
...and THEN your computer should explode.
SYNC
behold, the code that goes on your sync layer.
lines 1-2: bind sync event to stage. "every time frame changes, run sync()"
lines 4-22: sync()
syncs visual to song.
lines 11-13: check, EVERY FRAME, that the stage's current frame (visual) matches
the song's current frame. if at any frame they do not match, force the stage's current frame
to match the song's.
line 16: when the song ends, stop syncing.
RESULT
TA-DA! IT'S THE SAME DAMN SHIT!
>>> example: homestuck's hit flash MAKE HER PAY >>>
.gif)
