<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Kinda</title>
    <description>The latest articles on DEV Community by Kinda (@supercatex).</description>
    <link>https://dev.to/supercatex</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F36763%2F5ea873b4-0589-4eb9-88ed-fb9eb3ce07cd.jpeg</url>
      <title>DEV Community: Kinda</title>
      <link>https://dev.to/supercatex</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/supercatex"/>
    <language>en</language>
    <item>
      <title>Learn how to write program easily! - Tutorial 1</title>
      <dc:creator>Kinda</dc:creator>
      <pubDate>Wed, 08 Nov 2017 18:09:46 +0000</pubDate>
      <link>https://dev.to/supercatex/learn-how-to-write-program-easily---tutorial-1-5kc</link>
      <guid>https://dev.to/supercatex/learn-how-to-write-program-easily---tutorial-1-5kc</guid>
      <description>&lt;h3&gt;
  
  
  Why ActionScript?
&lt;/h3&gt;

&lt;p&gt;This programming language is nice for beginner who want to learn the program logic fun. ActionScript is my first programming language and it is learn by myself. I think it is easy to handle the graphic and animation let's focus on the main program logic.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step one - Create a new MovieClip&lt;/strong&gt;&lt;br&gt;
MovieClip is an object. It should be a simple graphic or an animation. In this tutorial we will draw a circle on the MovieClip and use program to add the MovieClip on the screen. Let's do it!&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Press Ctrl-F8 to create a new MovieClip&lt;/li&gt;
&lt;li&gt;Fill the name: "mc_ball"&lt;/li&gt;
&lt;li&gt;Click "Advanced"&lt;/li&gt;
&lt;li&gt;Click "Export for ActionScript"&lt;/li&gt;
&lt;li&gt;Click "OK" button
&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F2e19nmf12d91npxoykhm.PNG" title="Create 
MovieClip" alt="1"&gt;
&lt;/li&gt;
&lt;li&gt;Draw a circle
&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fl2v8ccdb64eyublrvm5q.PNG" title="Draw a circle" alt="2"&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Step two - Put the MovieClip on the screen via programming&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Return to the main screen
&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fx5vu45wdl3zrzls1mnic.PNG" title="Return to the main screen" alt="3"&gt;
&lt;/li&gt;
&lt;li&gt;Select the first frame
&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Feqa12j2281iduucc3a7p.PNG" title="Select the first frame" alt="4"&gt;
&lt;/li&gt;
&lt;li&gt;Press F9 to open "Actions" window&lt;/li&gt;
&lt;li&gt;Coding
&lt;/li&gt;
&lt;/ol&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight actionscript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;ball&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;MovieClip&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;mc_ball&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;stage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;addChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;ball&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;strong&gt;Step three - Let's view the result&lt;/strong&gt;&lt;br&gt;
Press Ctrl-Enter&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F9tm2pl2hjroj5wnrlxqp.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F9tm2pl2hjroj5wnrlxqp.PNG" title="Result" alt="5"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Learn more about programming!
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight actionscript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;ball&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;MovieClip&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;mc_ball&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

&lt;span class="cm"&gt;/*
Do you remember "mc_ball"? This is the name of MovieClip which we created at the step one.

"Export for ActionScript" is very important. 
It cannot use this MovieClip in the programming if you skip this step.

The whole line means create a new MovieClip "mc_ball" and named it "ball" to use in the program.
*/&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight actionscript"&gt;&lt;code&gt;&lt;span class="nx"&gt;stage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;addChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;ball&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

&lt;span class="cm"&gt;/*
Put "ball" on the screen.

"stage" is a key word represent the root of the screen.
*/&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;strong&gt;Let the ball on the center of the screen.&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight actionscript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;ball&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;MovieClip&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;mc_ball&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;ball&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;stage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;stageWidth&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;ball&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;y&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;stage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;stageHeight&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;stage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;addChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;ball&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

&lt;span class="cm"&gt;/*
We can control the "ball" and set x-axis, y-axis to change it's position.

"stage.stageWidth" means screen width.
"stage.stageHeight" means screen height. 
*/&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F2xyndmiolmiw1nz9qq08.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F2xyndmiolmiw1nz9qq08.PNG" title="Result 2" alt="6"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Maths&lt;/strong&gt;&lt;br&gt;
Center x-axis is equal to half of width of stage.&lt;br&gt;
Center y-axis is equal to half of height of stage.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F1dwg36ozkthh9qyhdmdc.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F1dwg36ozkthh9qyhdmdc.PNG" title="Maths" alt="7"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thanks~&lt;/p&gt;

</description>
      <category>actionscript3</category>
      <category>animate</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
