Snapchat Remix

Snapchat er en meget populær app. Nu har du muligheden for at lave din egen version, hvor det vil være muligt at tage billeder som du kan tegne på.

 

Vi starter med at lavet et nyt projekt som kaldes “SnapMix”. Hvis du ikke synes der skal stå “screen1” kan du ændre det til at hedde “Snapchat Remix”. Se evt. TegneApp guiden for hjælp.

Opgave

  • Opret projekt “SnapMix”
  • Omdøb titelnavn fra “screen1” til “Snapchat Remix” (teksten i den lille grå stribe på Screen1 i Viewer)

 

Det vigtigste i app’en er at tage billeder, derfor skal vi nu lave det sådan at man kan tage et billede med mobilen/tabletten og sætte dette som baggrund. Til dette skal du bruge 1 knap, et kamera og et canvas. Knappen bruges til at aktivere kameraet, som vil skifte til mobilens/tablettens kamera, og canvas bruges til at få et billede som baggrund. Når der tilføjes et canvas til Viewer, er det bare en lille kasse. For at få canvas til at være på hele skærmen, skal du ændre på bredden og højden til at fylde hele skærmen = fill parent. Dette gøres under Properties når du har valgt “Canvas1” under Components. For at du kan tage et billede, skal du bestemme hvad der skal ske når du trykker på knappen, derfor skal du gå ind i Blocks. Vælg BilledeKnap i venstre side under blocks og find kode-blokken “when BilledeKnap.Click” og træk denne ud i viewer. Vælg dit kamera (Camera1) i venstre side og kode-blokken “call Camera1.TakePicture”. Blokken trækkes ind i knappens kode-blok, som du lige har fundet.

Opgave

I Designer

  • Tilføj en knap (button) – og ændre navnet fra “button1” til “BilledeKnap”.
  • Ændre teksten på knappen til “Tag billede” eller sæt et billede af et kamera på knappen i stedet for tekst.
  • Tilføj et kamera (Camera) – I venstre side i Palette vælger du Media, her ligger kameraet.
  • Tilføj et Canvas – til at kunne vise billederne på.
  • Ændre width og height for canvas til “fill parent” i Properties.

I Blocks

  • Tilføj kode-blokken “when BilledeKnap.Click” for BilledeKnap.
  • Indsæt kode-blokken “call Camera1.TakePicture” for Camera1 i den første kode-blok.

TEST: Hent app’en ned på tabletten. Du kan nu tage et billede, men bemærk at det ikke bliver sat på baggrunden.

 

Når der er blevet taget et billede med mobilens/tablettens kamera, vil vi gerne have at dette skal sættes på canvas i app’en. Fordi der skal ske noget, skal du gå ind i Blocks. Her skal du finde dit Camera1 i venstre side, og kode-blokken “when Camera1.AfterPicture” og trækker det ind i viewer. Nu skal vi fortælle kameraet hvad der skal ske, når man har taget et billede. Her skal billedet sættes som baggrund for canvas. Du skal derfor vælge Canvas1 i venstre side og finde kode-blokken “set Canvas1.BackgroundImage to” og trække den ind i den kode-blok du valgte for kameraet. Til sidst mangler du bare at sige det er billede som kameraet har taget, som baggrunden skal sættes til. I kode-blokken “when Camera1.AfterPicture” er der en orange klods som hedder “image”, tryk på denne og tag kode-blokken som hedder “get image”. Denne blok sætter du ud for “set Canvas1.BackgroundImage to”.

 

Opgave

Blocks

  • Vælg Camera1 og find kode-blokken “when Camera1.AfterPicture”.
  • Tilføj kode-blok “set Canvas1.BackgroundImage to” for dit Canvas1 til “when Camera1.AfterPicture”.
  • Tryk på “image” for “when camera1.AfterPicture” og vælg “get image” – sæt denne ud fra “to”.

TEST: Du kan nu tage et billede og det kommer på som baggrund.

 

 

Nu skal det være muligt at kunne tegne i app’en. Tilføj mulighed for at tegne streger og evt. en slet knap. Hvis du har brug for hjælp til dette, så kig i vejledningen for Tegne App.

 

 

Ryd skærmen ved at ryste enheden

I stedet for at bruge en knap som i Tegne App, kan man bruge et accelerometer, så når man ryster mobilen/tabletten, fjerner man billedet i app’en. Et accelerometer er en sensor som sidder i mobilen/tabletten, som – lidt som navnet siger – kan måle accelerationen for mobilen/tabletten. Man kan blandt andet bruge et accelerometer til at bestemme at app’en skal gøre noget når man ryster mobilen/tabletten. I denne app vil vi gerne have at billedet og det man har tegnet bliver fjernet, når man ryster mobilen/tabletten.

Designer under Palette kan du finde et accelerometer, hvis du vælger fanen Sensor. Træk et accelerometer over på app’en, og bemærk at den ligger under skærmen i Viewer.

Blocks skal vi tilføje kode så det der er blevet tegnet og billedet bliver fjernet når man ryster mobilen/tabletten. Vælg AccelerometerSensor1 i venstre side og find kode-blokken “when AccelerometerSensor1.Shaking”, træk den ind i viewer. Nu skal du fortælle at hvad der skal ske når man ryster mobilen/tabletten, derfor skal du vælge Canvas1 i venstre side og finde blokken “call Canvas1.Clear”. Træk blokken ind i den for accelerometeret. Denne kode-blok fjerne dog kun det man selv tegner på canvas og det kan ikke fjerne billeder. Derfor skal vi ændre baggrundsbilledet til enten et nyt billede eller en hvid farve (eller den farve som er baggrund for selve app’en). Derfor skal der under “call Canvas1.Clear” tilføjes en kode-blok mere. Vælg Canvas1 i venstre side og tilføj blokken som hedder “set Canvas1.BackgoundImage to”. Hvis vi vil sætte den til samme baggrund som app’en har skal du vælge Screen1 i venstre side og kode-blokken “Screen1.BackgroundImage”, og sæt den ud for “set Canvas1.BackgroundImage to”.

Opgave

Designer

  • Træk et AccelerometerSensor ind på app’en – du finder det under Palette og Sensors.

Blocks

  • Vælg AccelerometerSensor1 i venstre side og tilføj kode-blokken “when AccelerometerSensor1.Shaking”.
  • Tilføj kode-blokken “call Canvas.Clear” for Canvas1 i blokken “when AccelerometerSensor1.Shaking”.
  • Tilføj kode-blokken “set Canvas1.BackgroundImage to” for Canvas1 under den forrige blok.
  • Vælg Screen1 i venstre side og tilføj kode-blokken “Screen1.BackgroundImage” og tilføj den til “set Canvas1.BackgroundImage to”
    • Det er også muligt at vælge den hvide farve under Built-in og Colors i venstre side.

 

TEST: Du kan tage et billede og det bliver fjernet når du ryster mobilen/tabletten.

 

Vælg billede fra enheden

Hvis du hellere vil vælge et billede du har taget tidligere, kan det gøres med en ImagePicker. I Designer under Palette og Media finder du en ImagePicker. Træk en ImagePicker ud på skærmen, denne bliver vist som en knap. Omdøb ImagePicker til GalleriKnap og ændre teksten på knappen til “Galleri” i stedet for “Text for ImagePicker1”. Nu skal der tilføjes kode for GalleriKnap, så vi kan tage billeder fra galleriet på mobilen/tabletten og sætte det som baggrund. Gå ind i Blocks og i venstre side vælger du GalleriKnap og finder kode-blokken “when GalleriKnap.AfterPicking” og trækker den ind i viewer. Nu skal du fortælle at billedet du har valgt fra galleriet skal sættes som baggrunden. Derfor skal du finde kode-blokken “set Canvas1.BackgroundImage to” og sætter den ind i blokken for GalleriKnap. Nu mangler du kun at fortælle at det er billede fra galleriet. Find kode-blokken “GalleriKnap.Selection” for GalleriKnap og sæt den ud for “to”.

Opgave

I Designer

  • Tilføj en ImagePicker. Du finder den under Palette og Media

Blocks

  • Tilføj kode-blokken “when GalleriKnap.AfterPicking” for GalleriKnap.
  • For Canvas1, vælg kode-blokken “set Canvas1.BackgroundImage to” og sæt den under den forrige.
  • Tilføj kode-blokken “GalleriKnap.Selection” for GalleriKnap ud to “set Canvas1.BackgroundImage to”.

 

TEST: Du kan nu vælge et billede fra tablettens galleri og sætte det som baggrund.